Overview HTML? Editing HTML HTML Examples Headers Linking Images Special characters and more line breaks Unordered list Nested and ordered list References

Introduction The WWW uses 3 technologies –HTML (to write web pages) –HTTP (to transmit those pages) –A web browser A program used to receive the data, interpret it and display the result.

HTML? Hyper Text Markup Language Not a programming language –A markup language –Separation of the presentation of the document from the structure of the documents information –Based on the technology of the World Wide Web Consortium.

HTML? (cont.) A HTML document can contain: –Flashy elements Graphics Animation Video clips Audio sounds Interactive games

HTML? (cont.) HTML isnt just for web pages anymore –Create corporate internets –Flashy s –News postings –User interface for applications (web forms)

Editing HTML HTML documents –Source-code form –Text editor (e.g. Notepad, Wordpad, emacs, etc.) –.html or.htm file-name extension –Web server Apache, Internet Information Services (I I S) Stores HTML documents –Web browser Requests HTML documents

HTML Examples HTML Structure –Comments – element element –Head section »Title of the document ( tag) »Style sheets ( tag) and scripts ( tag), … element –Body section »Pages content the browser displays –Start tag attributes (provide additional information about an element) –name and value (separated by an equal sign) –End tag

HTML Examples (cont.) My First Home Page Dr. Djamels HTML Page Hi World, welcome to my HTML page! Enjoy!

HTML Examples (cont.)

HTML Examples (enhancement) My First Home Page Dr. Djamels HTML Page Hi World, welcome to my HTML page! Enjoy! Hobbies

HTML Examples (enhancement) (cont.)

Headers 6 headers (Header elements) –H1 through H6

Headers (cont.) Headers Level 1 Header Level 2 Header Level 3 Header Level 4 Header Level 5 Header Level 6 Header

Headers (cont.)

Linking Hyperlink –References other sources such as HTML documents and images –Both text and images can act as hyperlinks –Created using the (anchor) element Attribute href –Specifies the location of a linked resource Link to addresses using mailto: URL tag –Bold

links.html (1 of 2)

contact.html (1 of 1)

Images Three most popular formats –Graphics Interchange Format (GIF) –Joint Photographic Experts Group (JPEG) –Portable Network Graphics (PNG) –img element src attribute –Specifies the location of the image file width and height br element –Line break

picture.html (1 of 1)

nav.html (1 of 2)

nav.html (2 of 2)

Special Characters & More Line Breaks Character entity references (in the form &code; ) Numeric character references (e.g. & ) del –Strike-out text sup –Superscript text sub –Subscript text –Horizontal rule (horizontal line)

contact2.html (1 of 2)

contact2.html (2 of 2)

Unordered lists Unordered list element ul –Creates a list in which each item begins with a bullet symbol (called a disc) –li (list item) Entry in an unordered list

links2.html (1 of 2)

links2.html (2 of 2)

Nested and Ordered Lists Represent hierarchical relationships Ordered lists ( ol ) –Creates a list in which each item begins with a number

list.html (1 of 3)

list.html (2 of 3)

list.html (3 of 3)

Special characters Character entities have two functions: escaping special characters displaying other characters not available in the plain ASCII character set. Example &lt; the escape sequence for < &gt; the escape sequence for > &amp; the escape sequence for &

Special Characters (cont.) My First Home Page Dr Djamels HTML Page Hi World, welcome to my HTML page! Enjoy! Here is the Ampersand: &amp;, greater: &gt;, and lesser: &lt;.