1 / 30

Building a Web Page

Building a Web Page. 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

istas
Download Presentation

Building a Web Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related