web.design imd208 – introduction to web content management & design mohamad rahimi mohamad...
TRANSCRIPT
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y W
EB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y topicTWO
Basic HTML Structure
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Learning Objectives:
• At the end of this chapter the students should be able to:
Identify basic structure and usage of HTML markup including elements, attributes and values.Create, edit and save basic HTML files in Notepad.Properly organize HTML files into a folder.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Introduction
• Have you ever wonder what kind of software or language that is used to develop a web page?
• Designing a web page can be a lot of fun, but it can also be very challenging.
• Basically most of the static pages are develop using HTML markup language.
• HTML is an acronym of HyperText Markup Language.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Introduction (cont.)
• It is not a procedural programming language like C, Fortran, Cobol or Pascal.
• HTML consists of a series of a markup language.
• Markup language identifies elements of a page so that a browser can render that page on your computer screen.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
HTML Editor
• Two types– WYSIWYG (What you see is what you get)– plain HTML editors.
• Using a WYSIWYG editor you will work in a graphical user interface instead of working with plain HTML code.
• This is easiest for beginners, but it’s not recommended because you won’t be able to learn your HTML codes properly
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Features of Plain HTML Editor
• Familiarize with the HTML tags.
• Customize the appearance of HTML tags and element
• No graphical user interface (GUI)
• Difficulty in detecting syntax error or flaw in the coding
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
HTML Editor (cont)
• Nowadays most web developer prefer to used WYSIWYG HTML editor because it could help us from writing long codes and simplify the development of a web page.
• Front Page Express (comes with IE 4.0 and later) and Netscape Composer (comes with Netscape) are both decent free WYSIWYG editors, but if you want something more powerful, its recommend to used Macromedia Dreamweaver or Microsoft Frontpage 2000
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
HTML Editor (cont)
• In normal HTML editors, you work directly with HTML code, but there are a lot of features which save you time as compared to writing all of the code by hands.
• Web Page Maker is another example of good HTML editor software where you can design the total appearance of the web page by just drag-n-drop the html elements such as pictures, background music, shapes, menu and so on.
• With the software you don’t need to know any HTML tags because there is no place to put it.
• There is also pre-installed script that can be used by dragging and dropping it into the stage.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
HTML Editor (cont)
• Macromedia Dreamweaver meanwhile is the best software in developing both static and dynamic web page.
• There are many pre-installed script and instruction that can be used.
• It also supports variety of programming language such as Active Server Page (ASP) and PHP.
• Moreover there is independent software that creates a special plugin to be used with Dreamweaver such as Sothink DHTML Menu, Sothink TreeMenu and so on
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y Plain editor
WYSIWYG editor
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Features of a Good Editor Software
HTM
L co
de h
ints
Synt
ax c
olor
ing
A “b
alan
ce b
race
s” fe
atur
e
Line
num
berin
g
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
• Most good script editors allow you to toggle on and off the display of line numbers. Being able to find a specific line quickly makes troubleshooting a lot simpler.
Line numbering
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
• HTML uses angle brackets (< >) which must always be in matching pairs. It’s easy to forget to close a pair. All good script editors have a feature that finds the matching bracket.
A “balance braces” feature
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
• Some script editors highlight code in different colors. If your code is in an unexpected color, it’s a sure sign that you’ve made a typing mistake.
Syntax coloring
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
• This is mainly of interest to more advanced users, but some editors automatically display tooltips with reminders of how a particular piece of code works.
HTML code hints
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Markup Language
• Markup language is used to format text and information.
• Each tags or keywords contained in pairs of opening angle brackets (for example: <p>) and a closing angle brackets (for example: </p>).
• HTML tags are not case sensitive but it’s a good practice to keep all the letters in one case.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Markup Language (cont)
• Moreover, forgetting to close tags is a syntax error.
• For example, uppercase <B> tag is similar to lowercase <b> but most new browser support lowercase tags compared to uppercase character.
• Some elements called as void elements don't have an end tag. Example of the tags are <br>, <hr>, <img> and <input>.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Editing HTML
• HTML files or documents are written in source-code form using text editor.
• In order to edit the document, you can open the notepad from: Start/All Programs/ Accessories/ Notepad.
• Besides that, you can also open your html file and right click the mouse, then select view source
• Note that new browser only allowed you to view the code, not to edit it.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Editing HTML (cont.)• An HTML file is the output of the web page development
process. • You should name your files to describe their functionality
(e.g: contact.html). • Furthermore, you should use proper extension after your
file name (*.htm or *.html) and file name of your home page or starting page should be “index.html” or “index.htm”.
• It’s up to you to use either .htm or .html as your web page extension but it’s recommend that you used .html for consistency.
• Basically error is HTML not fatal compared to other programming language.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
HTML Tags
• HTML tags are used to mark-up HTML elements. HTML tags are surrounded by the two characters < and >.
• The surrounding characters are called angle brackets.
• HTML tags normally come in pairs like <b> and </b>.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
HTML Tags (cont.)
• The first tag in a pair is the opening tag; the second tag is the closing tag.
• The text between the start and end tags is the element content.
• HTML tags are not case sensitive; <b> means the same as <B>.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
HowTo: Writing HTML Tags
1. Write opening angle bracket2. Write HTML tag and elements3. Write closing angle bracket
<p> Welcome Students </p>
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Tags Attributes
• Tags can have attributes. Attributes provide additional information to an HTML element
• Attributes always come in attribute/value pairs like this:
attribute="value"
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Tags Attributes (cont.)
• Attributes are always specified in the start tag of an HTML element.
• Attributes and attribute values are also case-insensitive.
• However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Tags Attributes (cont.)
• Attribute values should always be enclosed in quotes (“ ”).
• Double style quotes are the most common, but single style quotes are also allowed.
• In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes.
• For example:name='John "Joseph" Rambo'
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
QUICKExerciseDivide the following elements into start tag, content, attributes, value and end tags.
<p>Hello, my friends.</p>My name is <font color=“blue”>Johari</font>.<b>I like </b> to swim.Please <u>email</u> me.Welcome <font size=”2” color= “blue”>Rahimi</font>
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Basic HTML Syntax
<html><head><title></title></head><body> </body></html>
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Basic HTML Syntax (cont.)
• An HTML document consists of head and body section.
• Head section contains information about the document.
• Information in header not generally rendered in display window.
• The TITLE element names your Web page, as shown in the example above.
• The title of the page is a static content, consist of a word only.
• No HTML tags can be used in the title section
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Basic HTML Syntax (cont.)
• The BODY section consists of the page content. • This includes text, images, links, forms, and
others HTML tags. • The body section also includes elements such as
backgrounds, link colors and font faces while P element forms a paragraph, blank line before and after.
• The <body> tag has two main attributes where you can specify backgrounds.
• The background can be either a color or an image
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
File Names
• Like any other text document, a Web page has a file name that identifies itself to you, your visitors, and to your visitors' Web browser.
• There are a few tips to keep in mind when assigning file names to your Web pages that will help you organize your files, make it easier for your visitors to find and access your pages, and ensure that their browsers view the pages correctly.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Use lowercase file names• Since the file name you choose for your Web page
determines what your visitors will have to type in order to get to your page, you can save your visitors from inadvertent typos (and headaches) by using only lowercase letters in your file names.
• It's also a big help when you go to create links between your pages yourself.
• If all your file names have only small letters, it's just one less thing you'll have to worry about.
• Remember to use all lowercase letters for your file names and to consistently add either the .htm or .html extension.
• Mixing upper- and lowercase letters makes it harder for your visitors to type the proper address and find your page
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y W
EB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y My First HTML PageStep-by-Step
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Instructions
• You are entitled to follow the following steps to create your first HTML page.
• Before proceeding with the steps, create a folder at desktop by using your name and UiTM id as the folder name.
• For example:
Mohamad Rahimi Mohamad Rosman – 2007131907.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Step 1:
• Start Notepad (Start/ All programs/ Accessories/ Notepad).
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Step 2:
• Type the following code into NOTEPAD
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Step 3:
• Go to File, select “Save As”
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Step 4:
• Save the file as test.html. In “Save as type”, select “All Files”
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Internet Browser
• A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web.
• It can be a web page, image, video, or other piece of content
• Internet Explorer (IE) and Mozilla are two common browsers used in surfing the Internet.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Internet Explorer (MSIE)
• Windows Internet Explorer is formerly known as Microsoft Internet Explorer and abbreviated to MSIE or, more commonly IE.
• IE is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems starting in 1995.
• The high usage rate of IE seems to be closely related to that of Microsoft Windows, as it is the default web browser that comes with Windows Operating System
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Internet Explorer (MSIE)
• After having fought and won the browser wars of the late 1990s, Internet Explorer gained almost total dominance of the browser market.
• IE is at a peak period of about 95 percent during 2002 and 2003.
• Currently IE market share has since declined at a slow but steady pace.
• This is caused mainly due to the rise of Mozilla Firefox, which latest statistics indicate is currently the most significant competition for Internet Explorer.
• Nevertheless, Internet Explorer remains the dominant web browser, with a global usage share of around 60 percent.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Mozilla Firefox
• Mozilla Firefox is a free web browser and can be downloaded from http://www.mozilla.com/en-US/firefox/ie.html.
• Firefox offer greater browsing speed, easy to use and customization.
• According to the Firefox website, four out of five Firefox users say they’d recommend it to a friend.
• Firefox includes the most advanced security features available, including anti-phishing and anti-malware protection, instant Web site ID, automated updates and more.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Mozilla Firefox
• Moreover, Firefox open-source security process means it have thousands of experts around the world checking the code for weak spots.
• Firefox also constantly monitoring threats to your online safety and regularly release new updates with the latest patches and protection.
• An independent study has verified that Firefox users are at risk for significantly less time during the year than Internet Explorer users
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Organizing your files into folders
• It is a good practice to keep all your files into one folder.
• Folder will enable you to organize and easily locates your files.
• To create folder open My Computer or Windows Explorer.
• From there click the location where you want to create your new folder (e.g: My documents, Desktop).
• Choose File/ New/ Folder. • Name your new folder with a simple name and all
lowercase (e.g: mywebsite)
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Organizing your files into folders
• There are two kinds of arrangement that can use in organizing the files:– Based on pages
• Each HTML pages will have one folder to store HTML elements.
– Based on category• All HTML pages will share a common folder,
such as images, sound, download, and so on.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
My Personal Website
Home
home folder
Personal Information
personal folder
Family
family folder
Gallery
gallery folder
Hobby
hobby folder
Friends
friends folder
Page based structure
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
My Personal Website
images folder
sound folder
download folder
flash folder
script folder
Personal Information
Family
Gallery
Hobby
Friends
Categories structure
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Folders Your Site Should Have:
• Images:– You don’t want a bunch of messy images
floating around in your root folder. – You should always have at least one folder
designated for images.– In larger sites there can be thousands of
images. – The pages may be worked on by a number
of different designers. – To make things easier, usually each page in
a larger site will have its own image folder.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Folders Your Site Should Have:
• CGI-bin:– If you are going to be using CGI’s on your
site, you must have a cgi-bin. – You should, of course, store all of your CGI
(Common Gateway Interface) programs here.
– It is important that you call the CGI-bin “cgi-bin,” as some servers run custom security programs that only allow users to access CGI’s in an appropriately labeled folder.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Folders Your Site Should Have:
• Original artwork:– You should always store your original
artwork on the server for future modifications and as a backup.
– Clients will expect you to hand over your original artwork.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page
• A webpage or web page is a document or source of information that is suitable for the World Wide Web (WWW) and can be accessed through a certain web browser and displayed as an output on a computer screen.
• This information is usually compiled in HTML or XHTML format, and may provide navigation to other webpage’s through hypertext links (hyperlink).
• Web Pages may be retrieved from a local computer (localhost) or directly from a remote web server.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• The web server may restrict access only to a private network, such as a intranet, or it may publish pages on the World Wide Web.
• Webpage’s are requested and served from web servers using Hypertext Transfer Protocol (HTTP).
• For a secure browsing, a webpage may be retrieved by using the HTTPS protocol, especially for the purpose of electronic commerce (e-commerce).
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• Particularly a web page can be categories into two, which are static and dynamic website.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• A dynamic web page is a hypertext document rendered and compiled ‘on the run’ to a World Wide Web user presenting content that has been customized or actualized for each individual viewing or rendition or that continually updates information as the page is displayed to the user.
• In dynamic websites environment page content and page layout are created separately.
• The content is retrieved from a database and is placed on a webpage only when needed or asked.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• Dynamic web site environment allows for quicker page loading and it allows just about anyone, with limited or no web design experience, to update their own website via an administrative tool.
• This set-up is ideal for those who wish to make frequent changes to their websites including text and image updates.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• The development of the Internet and web development technology has spearhead the development of Content Management Services (CMS) such as Mambo, Joomla!, phpNuke, Drupal, BlogSpot and so on.
• You don’t need HTML knowledge to develop a website by using the CMS software and most of it can be obtained without a cost or so called as open source software
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• With a Content Management System you are able to create content such as text, pictures, videos, animated flash, and PDF documents.
• This is done online with no programming knowledge needed. CMS can be learned quickly and is easy to use.
• You only need an Internet browser to update your site and it can be update from anywhere depending on your web server specification.
• CMS is fast and easy to change the design or the template of the site compared to static pages.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• A static web page meanwhile is a web page that always comprises the same information in response to all download requests from all users at any given time.
• It will display the same information for all users regardless the level of access, from all contexts where navigation is performed through static documents, usually in terms of .htm or .html extension
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• Static web page is quick and easy to put together, even by someone who doesn't have much experience.
• It’s ideal for demonstrating how a site will look and cache friendly.
• Static web page is difficult to maintain when a site gets large and difficult to keep consistent and up to date
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• You have to re-upload the content of static web page every time you make changes to the page contents and it’s a troublesome process because sometimes you might overwrite a newer content with an old one.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
http://www.kelantan.uitm.edu.my/IS110/webStudent/isd2ia/contents/home.html
Example of static web
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• Furthermore, static page offers little visitor personalization.
• In a dynamic site, pages are assembled upon request. Most server side languages such as PHP, JSP and ASP sites encourage dynamic content creation.
• Generating pages dynamically and ‘on the run’ allows for all sorts of clever applications, from e-commerce, random quote generators, community builder and so on.
• Examples of widely usage dynamic web pages are Friendster, Facebook, Yahoo, and MySpace.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Types of Web Page (cont.)
• In a static publishing system, HTML pages are pre-generated by the publishing software and stored as flat files on the web server, ready to be served.
• This approach is less flexible than dynamic generation in many ways and is often ignored as an option as a result, but in fact the vast majority of content sites consists of primarily static pages and could be powered by static content generation without any loss of functionality to the end user.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y W
EB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y Learning HTML Tags
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Starting a New Paragraph
• HTML provides only limited paragraph formatting commands.
• The most fundamental is the paragraph tag itself.
• Each paragraph should begin with a start paragraph tag <p> and should end with an end paragraph tag </p>.
• In reality, most people ignore the end paragraph tag
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Starting a New Paragraph
Syntax HTML Text
<p> ... </p> <p>this is the first paragraph,it will continue until the endtag</p><p>or until another startparagraph tag<p>is encountered.
his is the first paragraph, it will continue until the end tag or until another start paragraph tag is encountered.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
•<p align=“justify”> Selamat Datang </p>
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Naming Elements
• The id attribute provides a unique identifier for an element within the document.
• It may be used by an element to create a hyperlink to this particular element.
• This identifier may also be used in CSS code as a hook that can be used for styling purposes, or by JavaScript code (via the Document Object Model, or DOM) to make changes or add behavior to the element by referencing its unique id
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Naming Elements
• The id attribute cannot be applied to the following elements: base, head, html, Meta, script, style, and title.
• The most important aspect of the id attribute is that it must be absolutely unique.
• Unlike the class attribute, which may apply the same value to many elements in a page, an id that’s applied to an element must not match an id used anywhere else on the same page.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Naming Elements
• The id attribute value must begin with a letter in the roman alphabet (a–z or A–Z); this can be followed by any combination of letters (a–z or A–Z), digits (0–9), hyphens (-), underscores (_), colons (:), and periods (.).
• The id value is case sensitive, thus:<span id="me">This is me</span> and <span id="ME">This is me</a>
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Breaking Up a Page into Divisions
• The div tag can be used to break a page into divisions.
• The div is a generic block-level element. • It doesn’t convey any meaning about its
contents unlike a p element that signifies a paragraph or an h1 or h2 element that would indicate a level 1 or level 2 heading.
• The div element is currently the most common method for identifying the structural sections of a document and for laying out a web page using CSS.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
<div id="body_content"> <h1>Page heading</h1> <p>Body content</p></div>
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Breaking Up a Page into Divisions
• The div tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.
• One thing to keep in mind when using the div tag is that it breaks paragraphs.
• It acts as a paragraph end/beginning, and while you can have paragraphs within a div you can't have a div inside a paragraph.
• The primary attributes of the <div> tag are style, class and id
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Creating Inline Spans and Line Break
• The span tag has very similar properties to the div tag, in that it changes the style of the text it encloses.
• But without any style attributes, the span tag won't change the enclosed items at all.
• The primary difference between the span and div tags is that span doesn't do any formatting of its own
<span STYLE="color: green; font-size: 10pt">Here's What You Get</span>
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Line Break <br>
Syntax HTML Text
<br> this text will have<br>a break in the middle!
his text will havea break in the middle!
•The break tag <br> is used to force the browser to start a new line.
•The break tag <br> has been extended to allow image alignment to be terminated.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Adding Comments
• The comment tag is used to insert a comment in the source code.
• A comment will be ignored by the browser.
• You can use comments to explain your code, which can help you when you edit the source code at a later date.
• You can also store program-specific information inside comments.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Adding Comments
• In this case they will not be visible for the user, but they are still available to the program.
• A good practice is to comment the text inside scripts and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.
<!--This is a comment. Comments are not displayed in the browser-->
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Labeling Elements in a Web Page
• The label element is invisible to users unless it’s styled with CSS, or behavior is attached to it via JavaScript and the DOM.
• By default, applying a label to a form control’s descriptive text makes no difference to its visual appearance.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Labeling Elements in a Web Page
• However, there are other benefits to be gained by explicitly linking the text to the form control using the label:– Usability– Accessibility
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Usability
• It provides a usability improvement for mouse users.
• In the majority of current web browsers, the text that’s associated with a given form control (by being contained within the <label> and </label> tags) also becomes a clickable area.
• Thus, if the form control is something small, like a checkbox or radio button, you can massively increase the “hit area” for the mouse user by applying a label to it.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Accessibility
• By adding a label to all controls, you make the controls’ purpose clear to users of assistive technology.
• For example, visually impaired users reading the page through a screen reader.
• If the form controls aren’t linked to their associated text descriptions in this way, the assistive technology may need to hazard a guess as to which control goes with which description, depending on the layout of the web page and/or the source order of the markup to make its interpretation.
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
Labeling Elements in a Web Page
<input type="radio" name="opt1" value="test" id="b"/><label for="b">Test</label>
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y W
EB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
WHAT Joomla!is
WEB
.DES
IGN
IMD
20
8 –
Intr
oduct
ion t
o W
eb C
onte
nt
Managem
ent
& D
esi
gn
MO
HAM
AD R
AHIM
I MO
HAM
AD R
OSM
AN |
htt
p://
rahi
mi.u
itm.e
du.m
y
HomeWork
• Search for information regarding the Joomla! CMS based on:– Features– Advantages/Disadvantages– Component/Plugin/Modules– Installation
• Present your findings in the following classes. This assignment can be done in a group of 4 students.