HTML

2

Agenda

• Discussion of Lab1• HTML Origins• HTML Standards• HTML Syntax

– Basics– Tables

2

Lab 1

• Did you use <h1> … <h6> for styling or semantic structure?

• Were the <p> and <h..> tags enough to arrive at an adequate rendering of the syllabus?

• Issues:– Editor– Formatting the schedule

3

The Birth of HTML• Created by Tim Berners-Lee at CERN• Open standard developed under supervision of the World

Wide Web Consortium (www.w3.org)– Works to ensure the full potential of the Web for shared,

integrated functionality is realized

• In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents.

• In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.[2]

• Berners-Lee specified HTML and wrote the browser and server software in the last part of 1990

• The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991

Origins and Evolution of HTML (1)

- HTML was defined with SGML - prototype written by Tim Berners-Lee in 1992 - Original intent of HTML: General layout of documents that could be displayed by a wide variety of computers

- Recent versions: - HTML 4.0 – 1997 - Introduced many new features and deprecated many older features - HTML 4.01 - 1999 - A cleanup of 4.0

- XHTML 1.0 - 2000 - Just 4.01 defined using XML, instead of SGML - XHTML 1.1 – 2001 - Modularized 1.0, and drops frames

- HTML5 May 2012, the specification is in Working Draft state at the W3C

Origins and Evolution of HTML (2)

• XHTML 1.0 is "a reformulation of the three HTML 4 document types as applications of XML 1.0”.

• The World Wide Web Consortium (W3C) continues to maintain the HTML 4.01 Recommendation, and the specifications for HTML5 and XHTML5 are being actively developed.

• The current XHTML 1.0 Recommendation document, as published and revised in August 2002, the W3C commented that,

– "The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility.”

Origins and Evolution of HTML (2)

• 2004: the Web Hypertext Application Technology Working Group (WHATWG) formed, independently of the W3C, to work on advancing ordinary HTML not based on XHTML

– Most major browser vendors were unwilling to implement the features in new W3C XHTML 2.0 drafts, and felt that they didn't serve the needs of modern web development.

• The WHATWG eventually began working on a standard that supported both XML and non-XML serializations, HTML 5, in parallel to W3C standards such as XHTML 2.

• In 2007, the W3C's HTML working group voted to officially recognize HTML 5 and work on it as the next-generated HTML standard.

• In 2009, the W3C allowed the XHTML 2 Working Group's charter to expire, acknowledging that HTML 5 would be the sole next-generation HTML standard, including both XML and non-XML serializations.

Current Status of HTML5– The WHATWG made a Last Call for its HTML5 specification in

October 2009

– Then, in December 2009, WHATWG switched to an unversioned development model for the HTML specification, effectively abandoning its HTML5 project, but kept the name "HTML5"

– In January 2011, the WHATWG renamed its "HTML5" living standard to "HTML". The W3C nevertheless continues its project to release HTML5

– As of May 2012, the specification is in Working Draft state at the W3C.

– In July 2012, WHATWG and W3C have decided on a degree of separation.

• W3C will continue the HTML5 specification work, focusing on a single definitive standard, which is considered as a "snapshot" by WHATWG

• The WHATWG organization will continue its work with HTML5 as a "Living Standard".

– The concept of a living standard is that it is never complete and is always being updated and improved

Syntactic Differences between HTML & XHTML

- Case sensitivity

- Closing tags

- Quoted attribute values

- Explicit attribute values

- id and name attributes

- Element nesting

How does the browser fetch pages?

• A browser fetches a Web page from a server by first requesting an IP address from a DNS server based on the URL

• The browser then establishes a TCP connection to that IP address usually on port 80

• An HTTP request is then sent to the server for the desired resource (e.g. html file)

• A page address looks like this: http://www.someone.com/page.html

• A page address is a kind of URL (Uniform Resource Locator)

How does the browser display pages?

• All Web pages are ordinary text files• All Web pages contain display instructions• The browser displays the page by reading

these instructions.• The most common display instructions

are called HTML tags• HTML tags look like this:

<p>This is a Paragraph</p>

HTML Tags• HTML tags are used to mark up HTML elements

• HTML tags are surrounded by angle brackets, < and >• Most HTML tags come in pairs, like <b> and </b>• The tags in a pair are the start tag and the end tag

• The text between the start and end tags is the element content

• The tags act as containers (they contain the element content), and should be properly nested

• HTML tags are not case sensitive; <b> means the same as <B>

• XHTML tags are case sensitive and must be lower case– To ease the conversion from HTML to XHTML, it is better to use

lowercase tags

Structure of an HTML document

• An HTML document is contained within <html> tags– It consists of a <head>

and a <body>, in that order

– The <head> typically contains a <title>, which is used as the title of the browser window

– Almost all other content goes in the <body>

• Hence, a fairly minimal HTML document looks like this:

<html> <head> <title>My Title</title> </head> <body> Hello, World! </body></html>

HTML documents are trees

html

head body

title

My Web Page

This will be the world’s bestweb page, so please checkback soon!(Under construction)

Basic Syntax (1)

- Elements are defined by tags (markers)

- Tag format: - Opening tag: <name> - Closing tag: </name>

- The opening tag and its closing tag together specify a container for the content they enclose - Not all tags have content - If a tag has no content, its form is <name />

- The container and its content together are called an element

- If a tag has attributes, they appear between its name and the right bracket of the opening tag

HTML Tags

• HTML tags are used to mark-up HTML elements • HTML tags are surrounded by the two characters < and > • HTML tags normally come in pairs like <b> and </b>

– The first tag in a pair is the start tag, the second tag is the end tag. These pair of tags called containers.

– Containers have to be balance-paired, nested each other, and can not overlapped

• Example:

• Not all tags have content– If a tag has no content, its form is <name />

Basic Syntax (2)- Comment form: <!-- … -->

- Browsers ignore comments, unrecognizable tags, line breaks, multiple spaces, and tabs

- Tags are suggestions to the browser, even if they are recognized by the browser

Text in HTML

• Anything in the body of an HTML document, unless marked otherwise, is text

• You can make text italic by surrounding it with <i> and </i> tags

• You can make text boldface by surrounding it with <b> and </b> tags

• You can put headers in your document with <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> tags (and the corresponding end tag, </h1> through </h6>)– <h1> is quite large; <h6> is very small– Each header goes on a line by itself

Whitespace• Whitespace is any non-printing characters (space, tab,

newline, and a few others)

• HTML treats all whitespace as word separators, and automatically flows text from one line to the next, depending on the width of the page

• To group text into paragraphs, with a blank line between paragraphs, enclose each paragraph in <p> and </p> tags

• To force HTML to use whitespace exactly as you wrote it, enclose your text in <pre> and </pre> tags (“pre” stands for “preformatted”)– <pre> also uses a monospace font

– <pre> is handy for displaying programs

Lists• Two of the kinds of lists in

HTML are ordered, <ol> to </ol>, and unordered, <ul> to </ul>

• Ordered lists typically use numbers: 1, 2, 3, ...

• Unordered lists typically use bullets (•)

• The elements of a list (either kind) are surrounded by <li> and </li>

• Example: The four main food

groups are:<ul> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li></ul>

Attributes• Some markup tags may contain attributes

of the form name="value" to provide additional information

• Example: To have an ordered list with letters A, B, C, ... instead of numbers, use <ol type="A"> to </ol>– For lowercase letters, use type="a"– For Roman numerals, use type="I"– For lowercase Roman numerals, use

type="i"– In this example, type is an attribute

Links

• To link to another page, enclose the link text in <a href="URL"> to </a>– Example: I'm taking a course at <a href =

"http://www.gwu.edu</a> this semester.

– Link text will automatically be underlined and blue (or purple if recently visited)

• To link to another part of the same page,– Insert a named anchor: <a name="refs">References</a>– And link to it with: <a href="#refs">My references</a>

• To link to a named anchor from a different page, use <a href="PageURL#refs">My references</a>

Images• Images (pictures) are not part of an HTML page; the

HTML just tells where to find the image

• To add an image to a page, use:<img src="URL" alt="text description" width="150" height="100">– The src attribute is required; the others are optional

– Attributes may be in any order

– The URL may refer to any .gif, .jpg, or .png file

– Other graphic formats are not recognized

– The alt attribute provides a text representation of the image if the actual image is not downloaded

– The height and width attributes, if included, will improve the display as the page is being downloaded

• If height or width is incorrect, the image will be distorted

– There is no </img> end tag, because <img> is not a container

Tables• Tables are used to organize information in two

dimensions (rows and columns)• A <table> contains one or more table rows, <tr>• Each table row contains one or more table data cells,

<td>, or table header cells, <th>– The difference between <td> and <th> cells is just

formatting--text in <th> cells is boldface and centered

• Each table row should contain the same number of table cells

• To put borders around every cell, add the attribute border="1" to the <table> start tag

Example table

<table border="1"> <tr> <th>Name</th> <th>Phone</th> </tr> <tr> <td>Dick</td> <td>555-1234</td> </tr> <tr> <td>Jane</td> <td>555-2345</td> </tr> <tr> <td>Sally</td> <td>555-3456</td> </tr></table>

More about tables• Tables, with or without borders, are excellent for

arranging things in rows and columns– Wider borders can be set with border="n"– Text in cells is less crowded if you add the attribute

cellpadding="n" to the <table> start tag• Tables can be nested within tables, to any (reasonable)

depth– This is very convenient but gets confusing

• Tables, rows, or individual cells may be set to any background color (with bgcolor="color")– Columns have to be colored one cell at a time– You can also add bgcolor="color" to the <body>

start tag

<div> tags

• A <div> tag is a generic wrapper or container for other tags

• Useful for structuring, positioning and styling content contained within the <div>

• A <div> has no intrinsic meaning or styling• Used in conjunction with CSS

27

<div> Attributes

• We will see with CSS that the class and id attributes are important for adding some semantic meaning to the <div>

28

38

Entities

• Certain characters, such as <, have special meaning in HTML

• To put these characters into HTML without any special meaning, we have to use entities

• Here are some of the most common entities:– &lt; represents <– &gt; represents >– &amp; represents &– &apos; represents '– &quot; represents "– &nbsp; represents a “nonbreaking space”--one that

HTML does not treat as whitespace

54

The rest of HTML

• HTML is a large markup language, with a lot of options– None of it is really complicated

– I’ve covered only enough to get you started

– You should study the tutorials at http://www.w3schools.com

– Your browser’s View -> Source command is a great way to see how things are done in HTML

– HTML sometimes has other things mixed in

Questions????