WEB.DESIGN IMD208 – Introduction to Web Content Management & Design MOHAMAD RAHIMI MOHAMAD ROSMAN...

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: ) and a closing angle brackets (for example: ).

• 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 tag is similar to lowercase 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 , <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 and .

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; means the same 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

HowTo: Writing HTML Tags

1. Write opening angle bracket2. Write HTML tag and elements3. Write closing angle bracket

 Welcome Students 

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.

Hello, my friends.My name is Johari.I like to swim.Please email me.Welcome Rahimi

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


• 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


• 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


• 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


• 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


• 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


• 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


• 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


• 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


• 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


• 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


• 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


• 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 and should end with an end paragraph tag .

• 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

 ... this is the first paragraph,it will continue until the endtagor until another startparagraph tagis 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

• Selamat Datang 

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:This is me and 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> Body content</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

Here's What You Get

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 

Syntax HTML Text

 this text will have a break in the middle!

his text will havea break in the middle!

•The break tag is used to force the browser to start a new line.

•The break tag 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.



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


• 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


<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.

Date post:	25-Dec-2015
Category:	Documents
Upload:	valerie-york
View:	220 times
Download:	0 times

WEB.DESIGN IMD208 – Introduction to Web Content Management & Design MOHAMAD RAHIMI MOHAMAD ROSMAN...

Documents