using hyper text markup language to develop a web page
DESCRIPTION
Using Hyper Text Markup Language to 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. - PowerPoint PPT PresentationTRANSCRIPT
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 the 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 FirstWeb 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:
pressenter
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!