Building a Web Page

1. Building a Web Page

2. A Brief History • In 1989, Tim Berners-Lee invented the Web. • To enable particle physics from around the world to organize and share information. • Global hypertext links: HTTP which stands for HyperText Transfer Protocol • Based on SGML, Standard Generalized Mark-up Language • In May 1994, the first World Wide Web conference was held in Geneva

3. HTML Timeline • July 1994: specification for HTML 2 is released • Had most of the elements we know, but was missing some of the Netscape/Microsoft extensions, and did not support tables, or ALIGN attributes. • Late 1994: The World Wide Web Consortium forms • March 1995: HTML 3 is published as an Internet Draft • Never completed or implemented • January 1997: HTML 3.2 is released • Support for TABLES, image, heading and ALIGN attributes. It was missing some of the Netscape/Microsoft extensions, such as FRAMEs, EMBED and APPLET. • Spring 1998: HTML 4.0 is released • HTML 4.01 is the current official standard. It includes support for Cascading Style Sheets, extra TABLE, FORM, and JavaScript enhancements. • HTML 4.01 is the last version of HTML

4. HTML replaced by XHTML • XHTML is similar to HTML, but is designed to work with the new eXtensible Markup Language, or XML • XML will soon serve as the core language for designing new Web applications

5. XHTML vs. HTML • Differences: • All tag and attribute names must be in lowercase. • "Empty" tags must be written with an extra slash at the end. • You can never omit an end tag. • Attributes must always have a value. • Attributes values must always be quoted • But what does all that mean???

6. What is HTML • HTML, or HyperText Markup Language is designed to specify the logical organization of a document, and provide hypertext extensions. • It is not designed to be the language of a WYSIWYG word processor such as Word • HTML instructions divide the text of a document into blocks called elements. These can be divided into two broad categories • The BODY that defines how te document is to be displayed by the browser • The HEAD that defines information `about' the document

7. What is HTML • HTML instructions are called tags, and look like <element_name> -- that is, they are simply the element name surrounded by left and right angle brackets. • Most tags mark blocks of the document for particular purpose or formatting: • The <element_name> tag marks the beginning of a section. • The end of a section is marked by the ending tag </element_name> • Example: <h1> Heading type h1 </h1>

8. HTML Characteristics • Empty Elements • Some elements are empty -- that is, they do not affect a block of the document. These elements do not require an ending tag. An example is the <HR> element, which draws a horizontal line across the page. • Upper and Lower Case • Element names are case insensitive. Thus, the the horizontal rule element can be written as any of <hr>, <Hr> or <HR>. • Elements can have Attributes • <h1 align="left"> Heading type h1 </h1>

9. Let’s make a Document • Create A New Folder • Right click on the desktop and select New / Folder • Name the folder playpen

10. View file extensions • From the Start Menu, select Accessories / Windows Explorer • Display the desktop. • Select your newly created directory playpen. • From the menu bar, select Tools / Folder Options • Under the View Tab uncheck Hide Extensions for Known File Types. • Select the OK button.

11. Creating a Web Page • Open Notepad (From the Start Menu, select Accessories / Notepad.) • Type in the following: Your Name Here Robotics and the Internet CSCI 179.001

12. Saving a Web Page from Notepad • From the Menu Bar, select File / Save. • Verify you are in your new playpen folder or directory. • Set the following • File Name :index.html • Save as type :All Files • Encoding :ANSI • Press the SAVE button.

13. View Your Web Page In A Browser • Go back to Windows Explorer and make sure your file is named index.html, not index.txt. • Double click the file index.html and the default browser should open with your page displayed. • What do you see?

14. General format:HTML Page <html> <head> <title> My Page </title> </head> <body bgcolor=“#ffffff” text=“#000000” link=“#8866ff” alink=“#ff0000” vlink=“#ff00ff”> </body> </html>

15. Some Sample HTML Tags Page title <title> </title> First level header <h1> </h1> Paragraph <p> </p> Emphasis <em> </em>

16. Logical Styles Bold <strong> </strong> Code <code> </code> Keyboard <kbd> </kbd>

17. Even More Sample HTML Tags Variable <var> </var> Citation <cite> </cite> Sample Output <samp> </samp>

18. Creating a Web Page • In Notepad, add appropriate HTML tags to index.html • Use the body tag to specify the colors you selected earlier. • <BODY link=“0x0000bb" alink=“0x0000ff" vlink=“0x6600ee“ text=“0x000000”> • Save the file. • Open a browser such as Netscape or IE and look at your new webpage (index.html)

19. Lists in HTML Ordered List <ol> <li> </li> </ol> Definition List <dl> <dt> </dt> <dd> </dd> </dl> • And even more... • Unordered List • <ul> • <li> • </dl> • Hypertext anchor • <a href="doc.html"> </a> • Inline Image • <img src="name.format"> • Comment • <!-- text --> • See online HTML documentation for more tags and good HTML document production information.

20. Lists And More in HTML Unordered List <ul> <li> </li> </ul> Hypertext anchor <a href="doc.html"> </a>

21. Lists And More in HTML Inline Image <img src="name.format"> Comment <!-- text -->

22. A Simple TABLE Example

23. Tables in HTML • <table> ... </table> • defines a table in HTML. • If the BORDER attribute is present, your browser displays the table with a border. • <table width="550" border="0“> • <caption> ... </caption> • defines the caption for the title of the table. • The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table. • NOTE: Any kind of markup tag can be used in the caption.

24. Tables in HTML • <TR> ... </TR> • Specifies a table row within a table. • You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). • <TH> ... </TH> • Defines a table header cell. • By default the text in this cell is bold and centered. • Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents.

25. Tables in HTML • <TD> ... </TD> • Defines a table data cell. • By default the text in this cell is aligned left and centered vertically. • Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents.

26. Tables Attributes in HTML • Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>. • Attribute Description • ALIGN (LEFT, CENTER, RIGHT) • Horizontal alignment of a cell. • VALIGN (TOP, MIDDLE, BOTTOM) • Vertical alignment of a cell.

27. Tables Attributes in HTML • Attribute Description • COLSPAN=n • The number (n) of columns a cell spans. • ROWSPAN=n • The number (n) of rows a cell spans. • NOWRAP • Turn off word wrapping within a cell.

28. COLSPAN and ROWSPAN

29. In Class Assignment • Modify your index.html file so that it includes an ordered list of your three favorite foods. • Add a definition list. Have at least two terms (Summer Reality and Dream Summer ) and for each term define your next summer plans. • Add a hyperlink to your favorite sports team or musical group. • Add a table to ensure that your text never is longer than 500 pixels.

30. In Class Assignment • Email your web page to me and send a copy to yourself. • bruce@cs.unca.edu