Building a Web Page

Building a Web Page

XHTML • HTML + XML • HTML – HyperText Markup Language • Defines how content should appear • Lack of defined structure • XML • Describes data

Create A New Folder • Right click on the desktop and select New / Folder • Name the folder playpen

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.

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

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.

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?

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

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

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

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

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)

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 •  • See online HTML documentation for more tags and good HTML document production information.

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

Lists And More in HTML Inline Image <img src="name.format" /> Comment

Cascading Style Sheets • <body style="line-height: 180%; max-width: 30em;"> • CSS defines formatting. • Line widths should be limited. Use css to do so. • Spacing between lines should be greater than 100%. Use CSS to specify line height also.

In Class Assignment • Download http://www.cs.unca.edu/~reiser/179-2006/vanilla.html • Save it as index.html • Modify it so that it includes a paragraph defining our class project 2. (Use your own words.) Add a hyperlink to the Health Adventure. • Add an unordered list that defines the members of your team. • Add a definition list. Have one term (Proposed Modifications) and itemize at least three of your teams' suggested improvements.

In Class Assignment • Email your web page to us and send a copy to yourself. • Our emails are • reiser@cs.unca.edu • bruce@cs.unca.edu

Building a Web Page