1 / 18

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

Angelica
Télécharger la présentation

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. XHTML • HTML + XML • HTML – HyperText Markup Language • Defines how content should appear • Lack of defined structure • XML • Describes data

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related