using hyper text markup language to develop a web page
TRANSCRIPT
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.
Journal Pictures (2)
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.
Journal Pictures (2)
• 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.
Journal Pictures (2)
• 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
• Type the following HTML tag exactly as shown:
<title>
Building Pages
• Type the following words (you may substitute your own words):
My First
Web Page
Building Pages
• Type the following HTML tag exactly as shown:
</title>
Building Pages
• Type the following HTML tag exactly as shown:
</title>
Notice the “front slash” /before the word title.
Building Pages
• Type the following HTML tag exactly as shown:
</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
• Type the following HTML tag exactly as shown:
</head>
Building Pages
• Then:
press
enter
Building Pages
• Type the following HTML tag exactly as shown:
<body>
Building Pages
• Type the following HTML tag exactly as shown:
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
• Type the following HTML tag exactly as shown:
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!