Scribd
Upload
80 views

Creating A Web Page Lab Assignment: Get Verify

This document provides instructions for students to create a simple web page with basic HTML tags as a lab assignment. It guides them through setting up the file structure, inserting common tags like <html>, <head>, <title>, <body>, and lists, and formatting text. The assignment asks students to create their own web page with their favorite movies and foods using these tags and then have their instructor review the completed work.

Uploaded by

scribdpdfs
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
80 views

Creating A Web Page Lab Assignment: Get Verify

This document provides instructions for students to create a simple web page with basic HTML tags as a lab assignment. It guides them through setting up the file structure, inserting common tags like <html>, <head>, <title>, <body>, and lists, and formatting text. The assignment asks students to create their own web page with their favorite movies and foods using these tags and then have their instructor review the completed work.

Uploaded by

scribdpdfs
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Creating a web page Lab Assignment

Goal Create a simple web page Create the file: inclass.txt in your www directory. Do you remember how to get to your www directory? Do you remember how to verify that you are in the www directory? Do you remember how to create the file using xemacs? You must complete this exercise in class during todays lab session.

ADVICE!!!
Use a simple editor! notepad is a simple editor xemacs is a simple editor notepad++ is a simple editor Microsoft Word is NOT a simple editor

Hypertext Markup Language - html


<html>
In your file, enter these two lines. They are the beginning tag and matching end tag to start a web page. Web pages are create using tags. Most tags come in pairs.

</html>

A begin and a partner end tag. The begin and end tags are usually spelled the same, but the end tag also contains a slash.

Hypertext Markup Language - html


<html> <head> </head> <body> </body> </html>
A web page has a head and a body and note that both sections have beginning and end tags. Enter these tags into your inclass.txt file. Note that body comes after the head, and both are inside the html tags.

Hypertext Markup Language


<html> <head> </head> <body> These are my favorite movies. </body> </html>

Type some text inside the body.

Hypertext Markup Language <html> Create a title!


<head> <title> My Favorite Movies </title> </head> <body> This is a list of my favorite movies. </body> </html>

Titles are placed in the head

Hypertext Markup Language


Save your work View your web page at
http://userpages.umbc.edu/~yourid/inclass.txt

Throughout this exercise, save your work periodically View your changes by refreshing your web browser.

Hypertext Markup Language


<html> <head> <title> My Favorite Movies </title> </head> <body> This is a list of my favorite movies. <ul> </ul> </body> </html>

Create an unordered list

<html> <head> <title> My Favorite Movies </title> </head> <body> These are my favorite movies. <ul> <li>Whats Up Doc?</li> <li>Shrek</li> <li>The Fisher King</li> </ul> </body> </html>

Inside the list, create each list item.

<html> <head> <title> My Favorite Movies </title> </head> <body> These are my favorite movies. <ul> <li>Whats Up Doc?</li> <li>Shrek</li> <li>The Fisher King</li> </ul> </body> </html>

Create a list of five movies Save and view your work

Hypertext Markup Language MORE TAGS


<ol></ol> creates an ordered list <p></p> paragraph tags <h1></h1> header 1 <h2></h2> header 2 <h6></h6> header 6 <strong></strong> strong emphasis See: htmldog.com for more tags and advice on creating web pages.

<html> <head> <title> <h1> My Favorite Movies </h1> </title> </head> <body> These are my favorite movies. <ul> <li>Whats Up Doc?</li> <li>Shrek</li> <li>The Fisher King</li> </ul> </body> </html>

Enhance the title, by adding h1 header tags

<html> <head> <title> <h1> My Favorite Movies </h1> </title> </head> <body> <p>These are my favorite movies. <ul> <li>Whats Up Doc?</li> <li>Shrek</li> <li>The Fisher King</li> </ul> </p> </body> </html>

Group your work into a paragraph with the <p> tag

Hypertext Markup Language MORE TAGS


Though most tags come in pairs, some tags are single units. One such tag is the horizontal rule <hr> The horizontal rule draws a straight line

<body> <p>These are my favorite movies. <ul> <li>Whats Up Doc?</li> <li>Shrek</li> <li>The Fisher King</li> </ul> </p> <hr> </body> </html>

Add a horizontal rule Save and view your page

Create a list of your favorite foods


Create an ordered list using the <ol> tag. Note that each list item must also contain the <li> tag. Add this list after the horizontal rule.

<hr> <p> These are my favorite foods <ol> <li>Pizza</li> </ol> </p> </body> </html>

Create this entire paragraph, Which contains a list of your five most favorite foods.

<hr> <p> These are my <strong>favorite</strong> foods <ol> <li>Pizza</li> </ol> </p> </body> </html>

Enhance the word favorite by using the <strong> tag.

Final Step
Save your work View your web page Show your instructor your completed work You will receive your 25 points for homework 2, part 4, once your instructor has inspected your work

View Web Pages


Look at web pages Most web page browsers allow users to: view page source For example look at the source of the web page for the first homework: hw1 Look for these tags in the hw1 page: <html> <head> <body> Find an unordered list and a list item.

You might also like