HTML - West Salem High School

Transcript HTML - West Salem High School

HTML
Hyper Text Markup Language
What Is “Hyper Text Markup Language”,
Or HTML?



HTML is the code behind every website you
see today.
It is standardized and regulated by the World
Wide Web Consortium, or W3C.
To start using HTML, you need only to open
up Notepad.
Your First HTML Template










Open up Notepad, and enter in the following text.
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Save as htmltemplate.htm
Making Paragraphs





Now, in between the <body> and </body> enter in
the following text.

I am so lucky to have such a wonderful teacher like
Mrs. Kilfoil. She is so nice and friendly and does
such a wonderful job. I am so glad that I took web
design from this most charming teacher.

The marks the beginning of the paragraph,
which causes an indent. The ends it.
Making Paragraphs Cont.


Now, on your own, use and to
create a paragraph using this text.
Now, if you believe everything that you’ve just
typed, are you in for big trouble. We know
that you were just trying to butter up the
teacher.
Line Breaks


Normally you will use the tag if you want
a return, or a blank line in between content,
But if you don’t want a blank line then use
 
Line Breaks Cont.









Now, enter in this text, and see how it looks.
I really love the Internet.
 
I can go where I want.
 
Except at school.
 
Those are the rules.
 
Aligning Text





By default, text is aligned to the left. So when
you start a new sentence, it will start at the
left side of the screen.
 This is the default


Remember to end your if you want the
next line to be different
Aligning Text Cont.




 I love the start of school every
semester. 
 NOT REALLY

 This has been an
interesting example. 
Comment




Sometimes it’s good to leave a comment in
your HTML, so people will know what you
were thinking, or who made it.
They can also be useful to you when you
need to remember/find something in your
page.
Comment tags should occur within the
<body> </body> tags

Bold and Italic text




 creates bold text
 closes bold text
 creates italic text
 closes italic text
Font Color






 changes font color
 returns font to default color
happy birthday
You’ll get
happy birthday
In Notepad, sometimes you can use words, such as
“Green” or “Blue”, but as with most things in
Notepad, it’s hit and miss. Play around, see what
ones you can get to work. If not, look up the color
codes online for help!
Font Color Cont.








Also, try to use what is know as web safe colors.

Billy


The Kid

These are two examples of colors you generally
won’t want to use. Especially red, never use red,
because the color blind cannot distinguish it from
other colors.
Font Size



 adjusts font size
 returns font to default size
Font sizes range from 1 to 7 or + or - based
upon the default size
Font Size Cont.




Ms Kilfoil is Great! Don’t
you AGREE.

Headers



<h1> Turns on the first header.
</h1> Will turn it off.
There are up to seven headers, <h2>, <h3>,
etc, with <h1> having the largest text, and
<h7> having the smallest. Generally you’ll
only use one or two.
Headers Cont.








<h1> West Salem High School </h1>
 
<h3>Titans </h3>
 
 
<h7>Salem, OR
</h7>
 
Background Color


<body bgcolor=?> sets the background color.
Specify the background color within the body
tag. <body bgcolor=yellow>
Only recognizes a limited number of colors so
use the color codes, such as #00ff00, which
is green.
Background Images





<body background=?> sets the background as an
image
So if you write
<body background=“kangaroo.jpg”>
There’s nothing to prevent this background image
from tiling in notepad so make sure your image is
large enough. You must have kangaroo.jpg in the
same folder as your html file, or it will not work.
You can also replace kangaroo.jpg with a link from
the web of an image.
Links






<a href=“?”> creates a link
</a> closes a link.
Know your URL and leave no spaces
between href=“url” example.
<a href=“http://www.yahoo.com”>
Welcome to yahoo
</a>
Links Cont.


The following code will make the text appear
“Welcome to Yahoo”, on your webpage.
When they click on “Welcome to Yahoo”, they
will be redirected to Yahoo!
You can also link to a website you created, so
long as it’s in the same folder. So if you
created a page called “Firstpage.html”, just
replace yahoo.com in the code with
“Firstpage.html”
Links Cont.




You can also link to a specific email address.
Using your previous knowledge of links, you
just add “mailto:” in front of what email you
are linking.
<a href=“mailto:[email protected].
or.us”>
Email Mrs. Kilfoil!</a>
Images


Before you can place an image you need to
know the name of the image and where it’s
stored.
The easiest place is to save the image in the
same folder as the web page you are
creating, which is simplest if you make a
folder for your webpage that you can put it,
and all the images you need in.
Images Cont.



<img src=”?”> places an image
So, if you downloaded an image of a daisy,
and it’s called “daisy”, you would enter in
<img src=“daisy.jpg”>
The “.jpg” indicates the file type, there are
many different types of image files, but .jpg is
the most common! Make sure you check the
file type before you enter in the code.
The World Wide Web Consortium


The World Wide Web Consortium, or W3C, is
the organization that standardizes HTML, and
makes sure we’re all using the same code.
It’s website is also a great place to learn, or
check for a piece of HTML you may need!
Visit http://www.w3.org/ if you ever need any
help!
Congratulations!


These are all the basic tags, or “code”, you
need to make your first HTML website in note
pad! Good luck, and refer to this slideshow if
you need to remember a specific tag!
If you want some extra tips, go to the
“Tutorials” page on the Web Design page,
and click on “Extra Tips.”

HTML - West Salem High School

Transcript HTML - West Salem High School

Directory