HTML Assoc. Prof. Rozinah Jamaludin 28 January 2010

HTML HyperText Markup Language The language used to create documents on the World Wide Web. The coding language used to create Hypertext documents for use on the World Wide Web. HTML files are meant to be viewed using a World Wide Web Client Program, such as Internet explorer and Netscape. Hypertext is text in a Web page that contains links to other pages.

What’s in an address? Each Web page has an address, called a URL (Uniform Resource Locator) Directories can be nested, just like your Windows or Macintosh computer. protocolserverDirectory (folder) domain Document (filename)

Creating HTML An HTML file must have an.htm or.html file extension Text Editor: NotePad, SimpleText WYSIWYG HTML Editors:  Macromedia Dreamweaver  Adobe GoLive  Netobjects Fusion  Netscape Composer  MS Word  MS FrontPage

HTML Structure Copyright 2005 Christopher Brewer. All rights reserved. my website

Section: tag The tag is used to embed scripts such as Javascript or PHP into an HTML document.

Section: tags Example: Hello World That’s a wrap Creates a new row

Section: tags Table Data “cells” ( ) can contain tables (tables within tables): Contact: First Name Last Name

Section: tags Forms are the primary method for gathering data from site visitors. Create a form block with

Section: tags Hidden fields contain data that isn’t shown to user: Text fields are single-line entry fields: Text areas can contain multiple lines of text: This is a multi-line text area

Section: tags Create a checkbox: Radio button sometimes called birdseye: Radio buttons can be grouped, allowing only one to be selected in the group:

Section: tags Pull down menu: Male Female Other Submit button:

Head Tag  The head tag contains general information, also called meta-information, about a document.  The head tag needs to be closed before using the BODY tag  According to the HTML standard, only a few tags are legal inside the head section. These are:,,,, and.

 Defines information about the document  Defines the document title  Defines a base URL for all the links on a page  Defines a resource reference  Defines meta information

tag The body element defines the documents' body. It contains all the contents of the document (like text, images, colors, graphics, etc.). tag is a paired tag.

tag Attributes  bgcolor  background  aLink  vLink  link  leftmargin  rightmargin  topmargin  title  class  text  style

Heading Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Other text formatting tags Bold Text Italic Text line break (single tag) horizontal rule (single tage)

Paragraph tag The tag defines a paragraph. Attributevalues alignleft right center justify

HTML document structure You can type in real text HERE to appear on the

Example My First Page You can type in real text HERE to appear on the page.

HTML Syntax: Block Items Comments: contains information for the browser contains information to display. End tags with or with start tag: My Awesome Site My Photograph Tack in the Box Twice!

Example: Insert image My Awesome Site My Photograph Tack in the Box Twice!

Example: Create Table Coding Contest Winner Loser Hosam Ahmed

Tables Cell A Cell B Cell C Cell D Cell A Cell B Cell C Cell D

Links Your harddrive.

Tables Border: value in pixels; specifies border width Cellpadding: value in pixels or percentage (%); specifies space between cell walls and content of cell Cellspacing: value of pixels or percentage (%); specifies space between cells

Thanks