The document provides an overview of HTML (Hypertext Markup Language) elements and tags used to structure and format web pages. It discusses various HTML tags for headings, paragraphs, links, lists, images and tables. Key elements covered include <h1>-<h6> tags for headings, <p> for paragraphs, <a> for links, <ul> and <ol> for unordered and ordered lists, <img> for images, and <table> for tables. The document provides examples of using these tags to add different types of content and formatting to HTML pages.
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 ratings0% found this document useful (0 votes)
66 views89 pages
Web Design - Course by Wan
The document provides an overview of HTML (Hypertext Markup Language) elements and tags used to structure and format web pages. It discusses various HTML tags for headings, paragraphs, links, lists, images and tables. Key elements covered include <h1>-<h6> tags for headings, <p> for paragraphs, <a> for links, <ul> and <ol> for unordered and ordered lists, <img> for images, and <table> for tables. The document provides examples of using these tags to add different types of content and formatting to HTML pages.
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 89
Web Design
By Wan Nurhayati Binti Wan Ab. Rahman
Contents Overview of Web Hypertext Markup Language (HTML) Cascading Style Sheet (CSS) E-learning Web Application Overview of Web The web was invented in 1990 by Tim Berners- Lee.
The web is an application running on the Internet.
The web primarily uses the Hypertext Transfer Protocol (HTTP) as the communication protocol. Overview of Web Browsers: WorldWideWeb by Tim Berners-Lee Mosaic and Netscape Internet Explorer by Microsoft Mozilla Firefox by AOL Safari by Apple and Chrome Opera Overview of Web Visual Design Tools: Adobe Dreamweaver Microsoft Expression Web Legacy Programs
Code-based Tools: TextEdit and Notepad Dreamweaver and Expression Web Eclipse HomeSite Overview of Web Graphics Programs Adobe Photoshop Adobe Illustrator Adobe Fireworks Corel Draw Overview of Web Planning Your Site: Design Concept Design Wireframe Storyboard Pages
Understanding Your Audience: Market Studies Demographics Local Business with Global Customers Overview of Web Gather Your Materials Root Folder Images Multimedia Assets Source Document
Plan Your Navigation Structure Main Navigation Section Subnavigation Think Like Users Overview of Web Plan Your File Structure: Organizing Below the Root Naming Folders Images Directory Other Assets HTML HTML documents are made up of text surrounded by tags: <element + attribute>
Elements are the basic pieces that make up HTML.
Attributes provide the additional details on how that element should display.
Declare Your Document Type
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body>
</body> </html> Declare Your Document Type Add Headings
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1> </body> </html> Add Headings Add Headings h1 Add Headings h1 h6 Add Paragraphs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1> <p>Please look around the site.</p> <p>Feel free to contact me for more information.</p> </body> </html> Add Paragraphs Add Paragraphs Add Paragraphs Apply Logical Formatting
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1> <p><strong>Please</strong> look around the site.</p> <p>Feel free to <em>contact</em> me for more information.</p></body> </html> Bold Italicize Apply Logical Formatting Italicize Bold Link to Other Pages in Your Site
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1> <p><strong>Please</strong> look around the site.</p> <p>Feel free to <em>contact</em> me for more information.</p></body> <p><a href="secondpage.html">Second Page</a></p> </html> Link Link to Other Pages in Your Site Link Link to Pages on the Web
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1> <p><strong>Please</strong> look around the site.</p> <p>Feel free to <em>contact</em> me for more information.</p></body> <p><a href="secondpage.html">Second Page</a></p> <p><a href="http://www.google.com">Search Google</a></p> </html> Link Link to Pages on the Web Link Link within a Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1>
<p><strong>Please</strong> look around the site.</p> <p>Feel free to <em>contact</em> me for more information.</p></body> <p><a href="secondpage.html">Second Page</a></p> <p><a href="http://www.google.com">Search Google</a></p> <p><a href="#top">To top</a></p> </html> Link Link within a Page Link Link to an E-mail Address
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1>
<p><strong>Please</strong> look around the site.</p> <p>Feel free to <a href="mailto:wannur@fsktm.upm.edu.my"><em>contact me</em></a> for more information.</p> <p><a href="secondpage.html">Second Page</a></p> <p><a href="http://www.google.com">Search Google</a></p> <p><a href="#top">To top</a></p> </html> Link Link to an E-mail Address Link Link to Other Document Types
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1>
<p><strong>Please</strong> look around the site.</p> <p>Feel free to <a href="mailto:wannur@fsktm.upm.edu.my"><em>contact me</em></a> for more information.</p> <p>You can also know more about us by <a href="wan's photo.bmp">downloading my information.</a></p> <p><a href="secondpage.html">Second Page</a></p> <p><a href="http://www.google.com">Search Google</a></p> <p><a href="#top">To top</a></p> </html> Link Link to Other Document Types Link Show Tool Tips for Links
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <h1>Welcome to my page</h1>
<p><strong>Please</strong> look around the site.</p> <p>Feel free to <a href="mailto:wannur@fsktm.upm.edu.my"><em>contact me</em></a> for more information.</p> <p>You can also know more about us by <a href="wan's photo.bmp" title="Download a bmp file">downloading my information.</a></p> <p><a href="secondpage.html">Second Page</a></p> <p><a href="http://www.google.com">Search Google</a></p> <p><a href="#top">To top</a></p> </html> Link Show Tool Tips for Links Link Add an Image to Your Web Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <img src="Wan's photo.bmp"/> </body> </html> Add an Image Add an Image to Your Web Page Add an Image Use Images as Links
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <a href="Home.html"><img src="Wan's photo.bmp" alt="Wan"/></a> </body> </html> Use Images as Links Use Images as Links Use Images as Links Add an Unordered List
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <a href="Home.html"><img src="Wan's photo.bmp" alt="Wan"/></a> <p>Working experiences:</p> <ul type="disc"> <li>Tutor</li> <li>Lecturer</li> <li>Senior Lecturer</li> </ul> </body> </html> Add an Unordered List Add an Ordered List
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <a href="Home.html"><img src="Wan's photo.bmp" alt="Wan"/></a> <p>Core activities:</p> <ol> <li>Teaching</li> <li>Research and Publication</li> <li>Supervision</li> </ol> </body> </html> Add an Ordered List Add Unordered & Ordered List Add an Ordered List Add an Unordered List Add a Definition List A Definition list is one in which definition or description of the items are given.
A Definition list is defined by <dl> tag.
The items are encoded in <dt> (defintion term) tag and the description of the items are encoded in <dd> (definition data) tag.
Add a Definition List
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Web Design</title> </head>
<body> <a href="Home.html"><img src="Wan's photo.bmp" alt="Wan"/></a> <dl> <dt>Research</dt> <dd>Grant and Publication</dd> <dt>Supervision</dt> <dd>PhD and Master</dd> </dl> </body> </html> Add a Definition List Add a Definition List Add a Definition List Tables Tags <table> ... </table> - define table in HTML
<tr> ... </tr> - specifies a table row within a table
<th> ... </th> - defines a table header cell
<td> ... </td> - defines a table data cell Add Data Tables Tutorial to the basic HTML from www.3schools.com Table demonstration One row and One Column
</body> </html> Add Data Tables Tutorial to the basic HTML from www.3schools.com Tutorial to the basic HTML from www.3schools.com Two Row and Two Column
</body> </html> Add Data Tables Tutorial to the basic HTML from www.3schools.com Tutorial to the basic HTML from www.3schools.com Adding Forms to Your Site A form in HTML consists of a group of form controls wrapped in a <form> tag. The tag takes two common attributes: action and method. The value of action is a URL to a page that contains the code necessary to process the forms data. The method attribute accepts one of two values. Setting the values to get instructs the browser to send the forms data by appending it to the actions URL, whereas the value post has the browser send the data as part of the background information it normally sends to the server. Web Design by Huddleston Create a Form and Add a Text Field <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Adding Forms</title> </head>
<body> <h1>Contact Me</h1> <form action="processform.php" method="post"> First Name: <input type="text" name="firstname" /> </form> </body> </html> Add a Form Add a Text Field Create a Form and Add a Text Field Add a Text Field Add a Label and Check Boxes <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Adding Forms</title> </head>
<body> <h1>Contact Me</h1> <form action="processform.php" method="post"> <p>My query is in regard to: <br> <input type="checkbox" name="project" value="bachelorproject" id="bachelorproject" /> <label for="bachelorproject">Bachelor Project</label> <input type="checkbox" name="project" value="masterproject" id="masterproject" /> <label for="masterproject">Master Project</label> <input type="checkbox" name="project" value="phdproject" id="phdproject" /> <label for="phdproject">PhD Project</label> </p> </form> </body> </html> Add Check Boxes Add Labels Add a Label and Check Boxes Add Check Boxes and Labels Add Radio Buttons <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Adding Forms</title> </head>
<body> <h1>Contact Me</h1> <form action="processform.php" method="post"> <p>I am: <br> <input type="radio" name="status" value="current" id="current" /> <label for="current">Current Student</label> <input type="radio" name="status" value="future" id="future" /> <label for="future">Future Student</label> </p> </form> </body> </html> Add Radio Buttons Add Radio Buttons Add Radio Buttons Create a Drop-Down List <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Adding Forms</title> </head>
<body> <h1>Contact Me</h1> <form action="processform.php" method="post"> <p><label for="contact">Please contact me via:</label> <select name="contact" id="contact"> <option>Email</option> <option>Phone</option> <option>Mail</option> </select> </p> </body> </html> Create a Drop-Down List Create a Drop-Down List Create a Drop-Down List Insert a Text Area <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Adding Forms</title> </head>
<body> <h1>Contact Me</h1> <form action="processform.php" method="post"> <p><label for="comments">Additional comments:</label> <br> <textarea name="comments" id="comments" rows="5" cols="40"></textarea> </p> </body> </html> Insert a Text Area Insert a Text Area Insert a Text Area Add a Button to Your Form <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1"> <title>Adding Forms</title> </head>
<body> <h1>Contact Me</h1> <form action="processform.php" method="post"> <p> <input type="submit" value="Contact Me" /> </p> </body> </html> Insert a Button Add a Button to Your Form Insert a Button HTML Style Attribute The purpose of the style attribute is to provide a common way to style all HTML elements.
HTML Style Examples: style="background-color:yellow" style="font-size:10px" style="font-family:Times" style="text-align:center
HTML Style Attribute Tutorial to the basic HTML from www.3schools.com HTML Style Attribute <html>
<body style="background-color:PowderBlue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana;color:red">This text is in Verdana and red</p> <p style="font-family:times;color:green">This text is in Times and green</p> <p style="font-size:30px">This text is 30 pixels high</p> </body>
</html> This is the new style attributes. The obsolete old style was: <body bgcolor=PowderBlue> Tutorial to the basic HTML from www.3schools.com Tutorial to the basic HTML from www.3schools.com CSS CSS documents are plain text and can be written in any text editor.
CSS documents are made up of a series of rules.
Each rule includes a selector and a declaration. CSS Selectors define the parts of the HTML document to which the rules will apply.
CSS declarations are made up properties and values. Types of CSS Inline Styles Configured in the body of the Web page Use the style attribute of an XHTML tag Apply only to the specific element
Embedded Styles Configured in the header section of a Web page. Use the XHTML <style> element Apply to the entire Web page document
Types of CSS External Styles Configured in a separate text file with .css file extension The XHTML <link /> element in the header section of a Web page associates it with the .css file
Imported Styles Similar to External Styles Well concentrate on the other three types of styles
Common CSS Properties background-color color font-family font-size font-style font-weight line-height margin text-align text-decoration width
Using color on Web Page Computer monitors display color as intensities of red, green, and blue light - RGB color.
The values of red, green, and blue vary from 0 to 255.
Hexadecimal numbers (base 16) represent these color values. # is used to indicate a hexadecimal value Hex value pairs range from 00 to FF Three hex value pairs describe an RGB color
Using color on Web Page Color Chart http://webdevfoundations.net/color
How to choose a color scheme? Monochromatic http://meyerweb.com/eric/tools/color-blend
Choose from a photograph or other image http://www.colr.org
Begin with a favorite color
Use one of the sites below to choose other colors http://colorsontheweb.com/colorwizard.asp http://kuler.Adobe.com http://colorschemedesigner.com/
Accessibility & Color Not everyone are able to see or distinguish between colors
Information must be conveyed even if color cannot be viewed
According to Vischeck http://www.vischeck.com/vischeck 1 out of 20 people experience some type of color deficiency Color choice can be crucial Avoid using red, green, brown, gray, or purple next to each other White, black, and shades of blue and yellow are easier to differentiate.
Configuring Color with Inline CSS Example 1: configure red color text in an <h1> element <h1 style="color:#ff0000">Heading text is red</h1>
Example 2: configure red text and gray background in the heading Separate style rule declarations with ; <h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>
CSS Embedded Styles
<style type="text/css"> body { background-color: #E6E6FA; color: #191970; font-family: Arial, Verdana, sans- serif; } h1 { background-color: #191970; color: #E6E6FA; line-height: 200%; font-family: Georgia, "Times New Roman", serif; } h2 { background-color: #AEAED4; color: #191970; font-family: Georgia, "Times New Roman", serif; } p {font-size: .90em; } ul {font-weight: bold; } </style> CSS Selectors CSS style rules can be configured for:
HTML element selector
class selector
id selector
Using CSS with Class Selector Apply a CSS rule to a certain "class" of elements on a Web page
Does not associate the style to a particular XHTML element
Configure with .classname The sample creates a class called new with red italic text.
To use the class, code the following XHTML: <p class=new>This is text is red and in italics</p> <style type="text/css"> .new { color: #FF0000; font-style: italic; } </style> Using CSS with Id Selector Apply a CSS rule to ONE element on a Web page.
Configure with #idname
The sample creates an id called new with red, large, italic text.
To use the id, code the following XHTML: <p id=new>This is text is red, large, and in italics</p>
<style type="text/css"> #new { color: #FF0000; font-size:2em; font-style: italic; } </style> XHTML <div> element A block-level element purposely to configure a specially formatted division or area of a Web page. There is a line break before and after the division Can contain other block-level and inline elements
Useful to define an area that will contain other block-level tags (such as paragraphs or spans) within it.
XHTML <div> Element Example Configure a page footer area with embedded CSS: <style type="text/css"> .footer { font-size: small; text-align: center; } </style>
XHTML<span> element An inline-level element purposely to configure a specially formatted area displayed in-line with other elements, such as within a paragraph.
There is no line break before and after the span.
XHTML <span> Element Example Embedded CSS: <style type="text/css"> .companyname { font-weight: bold; font-family: Georgia, "Times New Roman", serif; font-size: 1.25em;} </style>
XHTML: <p>Your needs are important to us at <span class=companyname">Acme Web Design</span>. We will work with you to build your Web site.</p>
External Style Sheets CSS style rules are contained in a text file separate from the XHTML documents.
The External Style Sheet text file: extension ".css" contains only style rules does not contain any XHTML tags
External Style Sheets Multiple web pages can associate with the same external style sheet file.
body {background- color:#E6E6FA; color:#000000; font-family:Arial, sans- serif; font-size:90%; } h2 { color: #003366; } .nav { font-size: 16px; font-weight: bold; } index.htm clients.htm about.htm Etc site.css The <link /> Element A self-contained tag
Placed in the header section
Purpose: associates the external style sheet file with the web page.
Centering Page Content with CSS #container { margin-left: auto; margin-right: auto; width:80%; } E-learning Web Application Effective e-learning application features (www.cisin.com): Virtual classrooms Audio, video, chat via text Whiteboard and screen sharing Online forums Online quizzes Exam/test engine, self evaluation Tracing performance, report and statistics Student and instructor management Training and scheduling Course builder, content management Document management Multi-language UI
E-learning Web Application Some examples of e-learning applications: http://lms.upm.edu.my/i3learn/www/about.htm http://openlearn.open.ac.uk/ http://www.e-learningforkids.org/
