Transcript IMD208 - Mohamad Rahimi Mohamad Rosman

Basic HTML Structure
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
topicTWO
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
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.DESIGN
• At the end of this chapter the students
should be able to:
IMD208 – Introduction to Web Content Management & Design
Learning Objectives:
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Introduction
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Introduction (cont.)
• 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
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
– WYSIWYG (What you see is what you get)
– plain HTML editors.
WEB.DESIGN
• Two types
IMD208 – Introduction to Web Content Management & Design
HTML Editor
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
• No graphical user
interface (GUI)
• Difficulty in
detecting syntax
error or flaw in the
coding
WEB.DESIGN
• Familiarize
with
the HTML tags.
• Customize
the
appearance
of
HTML tags and
element
IMD208 – Introduction to Web Content Management & Design
Features of Plain HTML Editor
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
HTML Editor (cont)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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-ndrop 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.
IMD208 – Introduction to Web Content Management & Design
HTML Editor (cont)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
HTML Editor (cont)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
HTML code hints
Syntax coloring
A “balance braces” feature
Line numbering
Features of a Good Editor
Software
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Line
numbering
• 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.
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
A
“balance
braces”
feature
• 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.
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Syntax
coloring
• 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.
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
HTML
code
hints
• 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.
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Markup Language
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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>.
IMD208 – Introduction to Web Content Management & Design
Markup Language (cont)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Editing HTML
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Editing HTML (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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>.
IMD208 – Introduction to Web Content Management & Design
HTML Tags
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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>.
IMD208 – Introduction to Web Content Management & Design
HTML Tags (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
<p> Welcome Students </p>
WEB.DESIGN
1. Write opening angle bracket
2. Write HTML tag and elements
3. Write closing angle bracket
IMD208 – Introduction to Web Content Management & Design
HowTo: Writing HTML Tags
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
attribute="value"
WEB.DESIGN
• Tags can have attributes. Attributes
provide additional information to an
HTML element
• Attributes
always
come
in
attribute/value pairs like this:
IMD208 – Introduction to Web Content Management & Design
Tags Attributes
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Tags Attributes (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
name='John "Joseph" Rambo'
WEB.DESIGN
• 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:
IMD208 – Introduction to Web Content Management & Design
Tags Attributes (cont.)
<font
color=
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
<p>Hello, my friends.</p>
My
name
is
color=“blue”>Johari</font>.
<b>I like </b> to swim.
Please <u>email</u> me.
Welcome
<font
size=”2”
“blue”>Rahimi</font>
WEB.DESIGN
Divide the following elements into start
tag, content, attributes, value and end
tags.
IMD208 – Introduction to Web Content Management & Design
QUICKExercise
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Basic HTML Syntax
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Basic HTML Syntax (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Basic HTML Syntax (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
File Names
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Use lowercase file names
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
My First HTML Page
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Step-by-Step
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
Mohamad Rahimi Mohamad
Rosman – 2007131907.
WEB.DESIGN
• 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:
IMD208 – Introduction to Web Content Management & Design
Instructions
• Start Notepad
(Start/ All
programs/
Accessories/
Notepad).
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Step 1:
• Type the
following
code into
NOTEPAD
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Step 2:
• Go to File,
select “Save
As”
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Step 3:
• Save the file
as test.html.
In “Save as
type”, select
“All Files”
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Step 4:
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Internet Browser
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Internet Explorer (MSIE)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Internet Explorer (MSIE)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• Mozilla Firefox is a free web browser and can be
downloaded from http://www.mozilla.com/enUS/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 antimalware protection, instant Web site ID,
automated updates and more.
IMD208 – Introduction to Web Content Management & Design
Mozilla Firefox
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Mozilla Firefox
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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)
IMD208 – Introduction to Web Content Management & Design
Organizing your files into folders
• 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.
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
– Based on pages
WEB.DESIGN
• There are two kinds of arrangement
that can use in organizing the files:
IMD208 – Introduction to Web Content Management & Design
Organizing your files into folders
Family
Gallery
Hobby
Friends
home
folder
personal
folder
family
folder
gallery
folder
hobby
folder
friends
folder
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
Personal
Information
WEB.DESIGN
Home
IMD208 – Introduction to Web Content Management & Design
My Personal Website
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Gallery
Friends
download folder
Family
Hobby
flash folder
script folder
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
My Personal
Website
Personal
Information
WEB.DESIGN
sound folder
IMD208 – Introduction to Web Content Management & Design
images folder
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
– 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.DESIGN
• Images:
IMD208 – Introduction to Web Content Management & Design
Folders Your Site Should Have:
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
– 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.DESIGN
• CGI-bin:
IMD208 – Introduction to Web Content Management & Design
Folders Your Site Should Have:
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
– 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.DESIGN
• Original artwork:
IMD208 – Introduction to Web Content Management & Design
Folders Your Site Should Have:
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Types of Web Page
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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).
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
• Particularly a web page can be
categories into two, which are static
and dynamic website.
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
http://www.kelantan.uitm.edu.my/IS110/webStudent/isd2ia/contents/home.html
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Types of Web Page (cont.)
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Learning HTML Tags
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Starting a New Paragraph
Text
<p>this is the first paragraph,
his is the first paragraph, it will
it will continue until the end
continue until the end tag
tag</p>
<p>or until another start
or until another start paragraph tag
paragraph tag
<p>is encountered.
is encountered.
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
<p> ... </p>
HTML
WEB.DESIGN
Syntax
IMD208 – Introduction to Web Content Management & Design
Starting a New Paragraph
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
•<p align=“justify”>
Selamat Datang </p>
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Naming Elements
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Naming Elements
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
<span id="me">This is me</span> and <span id="ME">This is me</a>
WEB.DESIGN
• 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:
IMD208 – Introduction to Web Content Management & Design
Naming Elements
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Breaking Up a Page into
Divisions
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
<div id="body_content">
<h1>Page heading</h1>
<p>Body content</p>
</div>
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Breaking Up a Page into
Divisions
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
<span STYLE="color: green; font-size: 10pt">Here's What You Get</span>
WEB.DESIGN
• 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
IMD208 – Introduction to Web Content Management & Design
Creating Inline Spans and Line
Break
<br>
HTML
Text
this text will have<br>a break in his text will have
the middle!
a break in the middle!
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
Syntax
WEB.DESIGN
•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.
IMD208 – Introduction to Web Content Management & Design
Line Break <br>
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Adding Comments
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
<!--This is a comment. Comments are not displayed in the browser-->
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Adding Comments
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Labeling Elements in a Web
Page
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
– Usability
– Accessibility
WEB.DESIGN
• However, there are other benefits to be
gained by explicitly linking the text to
the form control using the label:
IMD208 – Introduction to Web Content Management & Design
Labeling Elements in a Web
Page
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Usability
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
• 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.
IMD208 – Introduction to Web Content Management & Design
Accessibility
<input type="radio" name="opt1"
value="test" id="b"/>
<label for="b">Test</label>
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Labeling Elements in a Web
Page
WHAT
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
WEB.DESIGN
IMD208 – Introduction to Web Content Management & Design
Joomla!
• Present your findings in the following
classes. This assignment can be done in
a group of 4 students.
MOHAMAD RAHIMI MOHAMAD ROSMAN | http://rahimi.uitm.edu.my
– Features
– Advantages/Disadvantages
– Component/Plugin/Modules
– Installation
WEB.DESIGN
• Search for information regarding the
Joomla! CMS based on:
IMD208 – Introduction to Web Content Management & Design
HomeWork