1. HTML

2. 2 Agenda Discussion of Lab1 HTML Origins HTML Standards HTML Syntax –Basics –Tables 2

3. Lab 1 Did you use … for styling or semantic structure? Were the and tags enough to arrive at an adequate rendering of the syllabus? Issues: –Editor –Formatting the schedule 3

4. 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)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.Tim Berners-LeeCERNENQUIRECERN In 1989, Berners-Lee wrote a memo proposing an Internet- based hypertext system.[2]Internethypertext 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

5. 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 W3CWorking Draft

6. 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.”

7. 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.

8. 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.Working Draft –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

9. Syntactic Differences between HTML & XHTML - Case sensitivity - Closing tags - Quoted attribute values - Explicit attribute values - id and name attributes - Element nesting

10. 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)

11. 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: This is a Paragraph

12. HTML Tags HTML tags are used to mark up HTML elements HTML tags are surrounded by angle brackets, Most HTML tags come in pairs, like and 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; means the same as 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

13. Structure of an HTML document An HTML document is contained within tags –It consists of a and a, in that order –The typically contains a, which is used as the title of the browser window –Almost all other content goes in the Hence, a fairly minimal HTML document looks like this: My Title Hello, World!

14. HTML documents are trees html headbody title My Web Page This will be the world’s best web page, so please check back soon! (Under construction)

15. Basic Syntax (1) - Elements are defined by tags (markers) - Tag format: - Opening tag: - Closing tag: - 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 - 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

16. HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters HTML tags normally come in pairs like and –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

17. 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

18. 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 and tags You can make text boldface by surrounding it with and tags You can put headers in your document with,,,,, or tags (and the corresponding end tag, through ) – is quite large; is very small –Each header goes on a line by itself

19. 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 and tags To force HTML to use whitespace exactly as you wrote it, enclose your text in and tags (“pre” stands for “preformatted”) – also uses a monospace font – is handy for displaying programs

20. Lists Two of the kinds of lists in HTML are ordered, to, and unordered, to Ordered lists typically use numbers: 1, 2, 3,... Unordered lists typically use bullets ( ) The elements of a list (either kind) are surrounded by and Example: The four main food groups are: Sugar Chips Caffeine Chocolate

21. 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 to –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

22. Links To link to another page, enclose the link text in to –Example: I'm taking a course at 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: References –And link to it with: My references To link to a named anchor from a different page, use My references

23. 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: –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 end tag, because is not a container

24. Tables Tables are used to organize information in two dimensions (rows and columns) A contains one or more table rows, Each table row contains one or more table data cells,, or table header cells, –The difference between and cells is just formatting--text in 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 start tag

25. Example table Name Phone Dick 555-1234 Jane 555-2345 Sally 555-3456

26. 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 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 start tag

27. tags A tag is a generic wrapper or container for other tags Useful for structuring, positioning and styling content contained within the A has no intrinsic meaning or styling Used in conjunction with CSS 27

28. Attributes We will see with CSS that the class and id attributes are important for adding some semantic meaning to the 28

29. 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: –< represents < –> represents > –& represents & –&apos; represents ' –" represents " – represents a “nonbreaking space”--one that HTML does not treat as whitespace

30. 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

31. Questions????