Post on 31-Mar-2015
transcript
Mission HTML
The Search for the Personal Web Page
Your Mission:
• To learn how to create a well-designed and effective personal web page.
What’s a Personal Web Page?
• A personal web page is a page that is located on the Internet and is usually about someone’s personal interests.
Want to see some examples?
Personal Web Pages
• After this lesson, visit our site to see some pages we created:-- PVMMSA Web Design
What do you need to create your personal web page?
• You will need:– A computer– Notepad (software program)– An Internet connection– Patience
Let’s Get Started…What is HTML?
Hyper Text Markup Language
-- or --
The language of the Internet
Just like other countries speak different languages, computers
have different languages.
Hola! Guten Tag!
Merhaba! Bonjour!
The basic language of the Internet is HTML.
What does HTML look like?
<html>
<head><title>Title goes here</title></head>
<body>Body goes here
HTML is cool! </body>
</html>
Notice that every TAG
comes in a pair!
TAGs in Pairs?????
With HTML, you tell the computer what to do.
You give the computer commands by typing in what you want the computer to do.
Those commands are called TAGs.
For example…When you type
<HTML>You are telling the computer to a web page.
By adding a slash to that command…
</HTML>You tell the computer to a web page.
start
stop
Type? TAGs?
• Yes! You’re going to use a program called Notepad. It’s on your computer under Programs Accessories.
• This is where you will type the TAGs and anything that you want to go on your webpage.
Before you get started…
Find the angle brackets (<) (>) on your keyboard.
Everyone point to the angle brackets
on your keyboard right now!
J K L ;
N M < > ?/
What else should you look for?Another key you will be typing a lot is
the slash (/).
J K L ;
N M < > ?/
Everyone point to the slash
on your keyboard right now!
What about the other TAGs?
<head><title>Title goes here</title></head>
<body>Body goes here
HTML is cool! </body>
Do these names of the TAGs
grouped together remind you of
something?
Do they remind you of a letter you might write someone?
<head><title>Title goes here</title></head>
<body>Body goes here
HTML is cool!
</body>
Heading
Title ( or subject)
Body
Now add the Opening and Closing…
<html>
<head><title>Title goes here</title></head>
<body>Body goes here
HTML is cool! </body>
</html>
and you have a basic web page!
Let’s try it!
• Open Notepad. (Remember: Start buttonProgramsAccessoriesNotepad.)
Type in this…
<html>
<head><title>My First Webpage!</title></head>
<body>HTML is cool!</body>
</html>
Now what?• Save your file:
– File menuSave As
Change the name of your file to “first name, last initial, webpage.html”
–For example: AliciaJwebpage.html
Notice that there are
NO SPACES in the name of the file!
Your page should look like this…When you open your page in Internet Explorer,
title
body
Want to see something cool?• Go back to your webpage that you just
opened in Internet Explorer.
• Click on the View menuSource.
Does that look familiar?
You can see the “source” of any page on the Internet.
This way, you can learn from other pages!
What else can you do?(In Notepad, type in the new gold items exactly
where they are shown.)<html>
<head><title>My First Webpage!</title></head>
<body>HTML is cool!<hr>Benito Middle Rules!</body>
</html>
Now what?
• Save your file:
–FileSave As
Change the name of your file to “first name, last initial, page.htm”
–Click YES when the message asks you if you want to replace it.
Your page should look like this…When you open your page in Internet Explorer,
<hr> = horizontal rule Benito Middle