Using Hyper Text Markup Language to develop a Web page.

Using Hyper Text Markup Languageto develop a Web page

Objectives

• Define vocabulary of HTML and use words to make tags.

• Define key HTML tags and implement them in source code.

• Create Web page using Notepad and view it in Browser.

Objectives

• Explore and Master Lewis and Clark’s journey by research, cooperative work, and writing.

Journal Entries (5)

• Geography• Climate• Science (animals, plants)• Co-explorers• Native Americans

Journal Pictures (2)

• Choose 2 areas from above.• Make 2 pictures for journal entries.


When scanning or saving an image, abide by the following protocols:• The image must be saved as a JPEG

format only.• All images must be saved with the

extension .jpg• Your first image should be called

yourname1.jpg. The second image yourname2.jpg.


• All measurement is pixels only.• If the image is horizontal (or landscape

format), it must be cropped to no more than 700 pixels wide.

• If the image is vertical (or portrait format), it must be cropped to no more than 350 pixels wide.


• The resolution is set to 72 DPI only• The color format is RGB or Grayscale

only

Sources (7)

• One source for each journal entry (5)• One source for each picture (2)• Sources cannot be duplicated.• Sources must be from academically

acceptable websites.

l

l

login

Vocabulary

• URL---Universal resource locater or address of a Web site.

This is th

e URL

Vocabulary

• HTML---Hyper Text Markup Language.

Vocabulary

• HTML---Hyper Text Markup Language.

Vocabulary

• Link---A clickable element that “links”

Vocabulary

• Link---A clickable element that “links” or connects a page to another page within the same Web site.

Vocabulary

• Link---A clickable element that “links”, or connects, a page to another page within the same Web site.

Vocabulary

• Hyperlink--Connects a page to Web.

Vocabulary

• Hyperlink--A clickable element that “links” or connects a page to another page on the World Wide Web.

Vocabulary

• Tag---Code that instructs the browser to do a task.

<html>For example, <html>

tells the browser that

this code is comprised

of hyper text markup

language.

• Class website has link to our pages

• Lower case for all coding.• Lower case for all file names.• OK to use/upper/lower case for content

• Make a new folder on your desktop• Name it using your first name and last

intitial only.

pauls, for example.

• Go to the following website:• http//:carversville.com/us1• Locate your class (a12, a34, a78)• Locate your directory.

• Click on your directory• Right click on the your page

• Open Notepad.• Paste the code from your webpage into

the Notepad file.• Save the Notepad file as index.html to

your directory.

• Save the image to the same directory of your .html file.

• Drag the image to a browser.

• Copy the entire URL

• Now, go back to your Notepad file.• Find the following code:

<img src=“images/yourname.jpg">• Paste the URL and replace

images/yourname.jpg.• Save, refresh browser.

• Now, go back to your Notepad file.• Find the following code:

<img src=“images/yourname.jpg">• Paste the URL and replace

images/yourname.jpg.• Save, refresh browser.

• <marquee scroll ="infinite" direction="left">

• </marquee>

Building Pages

• A simple program—Notepad—used to make Web pages

Building Pages

• Open Notepad.

Building Pages

• Open Notepad.• Type the following

HTML tag exactly as shown:

Building Pages

• Open Notepad.• Type the following

HTML tag exactly as shown:

<html>

Building Pages

• Type the following HTML tag exactly as shown:

<head>

Building Pages


<title>

Building Pages

• Type the following words (you may substitute your own words):

My First

Web Page

Building Pages


</title>

Building Pages


</title>

Notice the “front slash” /before the word title.

Building Pages


</title>The “front slash” / tellsthe browser to stop a

function. In this case the function is to put a title

in the very top of a browser page.

Building Pages


</head>

Building Pages

• Then:

press

enter

Building Pages


<body>

Building Pages


This tells the browser text is following: The text is Arial, the color is black

and the size is 3 on scale of 1-7.

<font face=“Arial” color=“black” size=“3”>

Building Pages

• Type the following words (you may substitute your own words):

This is my first Web

page. Welcome!

Building Pages


This tells the browser to stop looking for text.

</font>

Building Pages

• Type the following HTML tags exactly as shown:

This tells the browser to stop looking for any more tags.

</body>

</html>

press enter

Save Your Page

• Save your Web page like this:

In the “Save as type” box, choose All Files

firstname+last initial.html

(pauls.html)

View Your Page• Now, view your

page.• You can do this

two ways:

1. Drag the icon of your Web page to a browser window

2. Or go to a browser and choose File/Open and navigate to your file.

View Your Page• Now, view your

page.• You can do this

two ways:

1. Drag the icon of your Web page to a browser window

2. Or go to a browser and choose File/Open and navigate to your file.

Congratulations!

Using Hyper Text Markup Language to develop a Web page.

Documents

page open notepad

notepad file

html file

web site

web pages

following code

following html tag

source code