Chapter 2 HTML (Hypertext Markup Language) Part I
Topics Introduction Editing HTML First HTML Example Headers Linking Images Unordered Lists Nested and Ordered Lists Tables References
Introduction The World-Wide Web used three new technologies: –HTML (HyperText Markup Language) used to write Web pages. –HTTP (HyperText Transfer Protocol) to transmit those pages. –A Web browser client program to receive the data, interpret it, and display the results. HyperText Markup Language –HTML is not a “Programming Language” –A markup language –Separation of the presentation of a document from the structure of the document’s information –Based on Technology of the World Wide Web Consortium (W3C)
Introduction HTML documents can contain: -flashy elements: graphics, animations, video clips, audio sounds, and even interactive games HTML isn't just for Web pages anymore -create corporate intranets -flashy -news postings -user interfaces for applications: web forms
Editing XHTML HTML documents Source-code form Text editor (e.g. Notepad, Wordpad).html or.htm file-name extension Web server –Apache, Internet Information Services (IIS) –Stores HTML documents Web browser –Requests HTML documents
Differences between HTML and XHTML XHTML Elements Must Be Properly Nested Improperly nested: This text is bold and italic Properly nested: This text is bold and italic XHTML Elements Must Always Be Closed This is wrong: This is a paragraph This is another paragraph This is correct: This is a paragraph This is another paragraph
Differences between HTML and XHTML Empty Elements Must Also Be Closed This is wrong: A break: A horizontal rule: An image: This is correct: A break: A horizontal rule: An image:
Differences between HTML and XHTML XHTML Elements Must Be In Lower Case This is wrong: This is a paragraph This is correct: This is a paragraph
First HTML Example HTML Structure –Comments – element element –Head section »Title of the document ( tag) »Style sheets ( tag) and scripts ( tag), … element –Body section »Page’s content the browser displays –Start tag attributes (provide additional information about an element) –name and value (separated by an equal sign) –End tag
First HTML Example <!-- An example to illustrate document form --> Our first document Greetings from your Webmaster!
BODY Element Tags and Attributes Attributes provide additional information about HTML elements. There are many attributes that you can explore later by yourselves. Now, let us explore some of the attributes that relate to <BODY element.
BODY Element Tags and Attributes –BGCOLOR="white" - Designates the page background color. –TEXT="black" - Designates the color of the page's text. –LINK="blue" - Designates the color of links that have not been visited. –ALINK="red" - Designates the color of the link currently being visited. –VLINK="green" - Designates the color of visited links.
Color Color can be specify in 3 ways: –Standard colors (blue, red, black, white) –Hexadecimal (#FFFFFF, #99FF66) –Decimal (255,255,255 or 0,0,0) Example of web color chart:
Headers Six headers ( header elements) –h1 through h6 Headers Level 1 Header Level 2 Header Level 3 Header Level 4 Header Level 5 Header Level 6 Header
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
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
Basic Text Formatting Blockquotes –Content of –To set a block of text off from the normal flow and appearance of text –Or, using a simple word, indents the text as though it were a quote.
Basic Text Formatting Quoted from The Star, July 2009: Water as a resource has been one of the main drivers behind the rapid industry development and good standard of living. In a rapidly changing world, there are now challenges of conserving what we have and overcoming the problems of water too contaminated to consume OUTPUT Quoted from The Star, July 2009: Water as a resource has been one of the main drivers behind the rapid industry development and good standard of living. In a rapidly changing world, there are now challenges of conserving what we have and overcoming the problems of water too contaminated to consume.
Basic Text Formatting Font Styles and Sizes (can be nested) –.. - Sets bold text. –.. - Sets larger than normal text. –.. - Sets text in italics and denotes emphasis. –.. - Sets text in italics. –.. - Makes text smaller than normal. –.. - Draws a line through the text as a "strikeout". –.. - Same as bold but denotes strong emphasis. –.. -Superscript –.. -Subscript –.. - Monospaced typewriter font. –.. - Underlined text. –.. - Mark a variable.
Basic Text Formatting This is an example of the <b> tag. This is an example of the <big> tag. This is an example of the <em> tag This is an example of the <i> tag. This is an example of the <small> tag. This is an example of the <strike> tag. This is an example of the <strong> tag. This is an example of the <sup> tag. This is an example of the <sub> tag. This is an example of the <tt> tag. This is an example of the <u> tag This is an example of the <var> tag
Basic Text Formatting Note: –< – to display < –> – to display >
Basic Text Formatting Subscripts with Superscripts with Examples: x 2 3 Displays x 2 3 Horizontal rules draws a line across the display, after a line break.
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
Nested and Ordered Lists Represent hierarchical relationships Ordered lists ( ol ) –Creates a list in which each item begins with a number
Table A table is a matrix of rows and columns, each possibly having content Each position in a table is called a cell Some cells have labels, but most have data A table is specified as the content of a tag A border attribute in the tag specifies a border between the cells
Table If border is set to "border", the browser’s default width border is used The border attribute can be set to a number, which will be the border width Without the border attribute, the table will have no lines! Tables are given titles with the tag, which can immediately follow
Table Each row of a table is specified as the content of a tag The row headings are specified as the content of a tag The contents of a data cell is specified as the content of a tag
Table Fruit Juice Drinks Apple Orange Screwdriver Breakfast Lunch 1 0 Dinner 0 1
Table A table can have two levels of column labels If so, the colspan attribute must be set in the tag to specify that the label must span some number of columns
Table Fruit Juice Drinks Orange Apple Screwdriver
Table If the rows have labels and there is a spanning column label, the upper left corner must be made larger, using rowspan
Table Fruit Juice Drinks Fruit Juice Drinks Apple Orange Screwdriver …
References Programming The WWW Third Edition Robert W. Sebesta Pearson Prentice Hall ISBN x.htmlhttp:// x.html