Creating a Web Page

Transcript Creating a Web Page

Lesson 1:
Creating Your First Webpage
Intro to Web Design
Step One
 Open
Notepad
Click Start > Program > Accessories >
Notepad
All web pages need to be created using
Notepad
Key Code

<HTML>, </HTML> - Tells the web browser that everything following
this tag will be a web page.

<HEAD>, </HEAD> - A place in your web page in which to store
information that will NOT be displayed on your page (Author of the web
page, keywords, etc.).

<TITLE>, </TITLE> - Whatever is placed in between the <TITLE> and
</TITLE> tag will appear only in the blue bar at the top of your web
browser.

<BODY>, </BODY> - Lets the computer know that everything following
this tag will be displayed on the web page.
Here is how it looks...
Notice the
Format used
when typing in
the code…You
will want to use
this format for
each web page
This title will
show up in the
blue bar at the
top of the screen
This text will
show up on your
web page
Turning the file into a web page

In order for your Notepad file to become a web page,
you must save it with a “.HTML” extension on the
end. Otherwise it will only be a Notepad file!

Go to File/Save As, then give it name with the HTML
extension. For example:

“lab1.html”
Save this file into your Web Design Folder
Viewing your web page

You can view your page, by locating the file and
double clicking on it

Your file should look like this...

When you double click on the file, Internet
Explorer will automatically open your page and
let you look at it.
You can also start Explorer then click on File and
Open (CTRL + O)

Here is what your webpage looks
like in Internet Explorer.
Notice the Title
Notice the text
Creating a Line Break
 - This will move any text you
want to show up on your web page to
the very next line.
 You can use more than one line
break to create more spacing
 

Paragraph Breaks
 
 This will create a “double space”
around a paragraph.
 For example:

This is my web site.
It contains all information related to
me and the work that I do. Select any link you like and enjoy
what is inside. Have fun. This paragraph is enclosed by the
paragraph tags. It will separate this paragraph from any
other text on the page.
Horizontal Rules

<HR> - Creates a Horizontal line across
your web site.

Changing the thickness of the horizontal line,
add the SIZE attribute: <HR SIZE=10>

You can also change the width and color of
the line by adding the WIDTH and COLOR
attributes:
<HR SIZE=10 WIDTH=10 COLOR=RED>
Your Assignment

Create a web page using each “Tag” that you have learned
today:
–
–
–
–

<HTML>, </HTML>
<HEAD>, </HEAD>
<TITLE>, </TITLE>
<BODY>, </BODY>
Follow the format given on
slide number 3. Be sure to
use a different line when
writing the code.
In the body of the web page, write three paragraphs
Para 1. Introduce yourself
Para 2. What are your hobbies and interests?
Para 3. What are your academic and life goals?




Keep your paragraph between 5-7 sentences.
Separate each paragraph using the tag. Don’t forget to
close the tag - 
Insert a Horizontal line between each paragraph. (set the color,
size and width for each line)
Use line breaks where appropriate.
Save your first webpage as,
“introduction.html”

Creating a Web Page

Transcript Creating a Web Page

Directory