building a web page l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Building a Web Page PowerPoint Presentation
Download Presentation
Building a Web Page

Loading in 2 Seconds...

play fullscreen
1 / 18

Building a Web Page - PowerPoint PPT Presentation


  • 225 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Building a Web Page' - Angelica


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
xhtml
XHTML
  • HTML + XML
  • HTML – HyperText Markup Language
    • Defines how content should appear
    • Lack of defined structure
  • XML
    • Describes data
create a new folder
Create A New Folder
  • Right click on the desktop and select New / Folder
  • Name the folder playpen
view file extensions
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
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
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
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
General format:HTML Page

<html>

<head>

</head>

<body bgcolor=“#ffffff” text=“#000000” link=“#8866ff” alink=“#ff0000” vlink=“#ff00ff”>

</body>

</html>

some sample html tags
Some Sample HTML Tags

Page title

<title> </title>

First level header

<h1> </h1>

Paragraph

<p> </p>

Emphasis

<em> </em>

logical styles
Logical Styles

Bold

<strong> </strong>

Code

<code> </code>

Keyboard

<kbd> </kbd>

even more sample html tags
Even More Sample HTML Tags

Variable

<var> </var>

Citation

<cite> </cite>

Sample Output

<samp> </samp>

creating a web page12
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
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.
lists and more in html
Lists And More in HTML

Unordered List

<ul>

<li> </li>

</ul>

Hypertext anchor

<a href="doc.html"> </a>

lists and more in html15
Lists And More in HTML

Inline Image

<img src="name.format" />

Comment

<!-- text -->

cascading style sheets
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
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 assignment18
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