HTML PowerPoint and Practice 2016
Download
Report
Transcript HTML PowerPoint and Practice 2016
Let’s Try It!
Open Notepad
o Start > All Programs > Accessories >
Notepad
o Don’t get WordPad by mistake – won’t
work the same
Revised June 2008
Online PD Basic HTML
1
Typing in Notepad
Type the following tags in Notepad: (don’t forget the brackets!)
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
NOTE: “practice .htm”
</HEAD>
This is the number 1, not a small “L”
<BODY>
<BR>This is my very first web page.
<BR>My name is Debi Mason. (but put your name!)
</BODY>
</HTML>
1
Save this page as “practice” with the default extension ‘.txt’ and then
save a second time with the same title “practice1.html” BE SURE to
add the file extension ‘.html’ the second time or it won’t show as a
web page.
Now just minimize this file because you will use it again later.
Revised June 2008
Online PD Basic HTML
2
Viewing Your “practice1.html” Page
Once your practice file is saved, you can view it the web
browser you have open (should be Chrome).
In order to open your html file – click on the file with the
extension .html. This should automatically open the file in
our internet browser.
Your file should now show in your internet window. If it
does not, check your coding. This is called debugging!
Check it Out! If your page is not like that, view the codes
very carefully!
Revised June 2008
Online PD Basic HTML
3
“practice1.htm” File
If yours does not look like mine, correct your code as
necessary:
o
o
o
o
Open the file in Notepad again.
Make the corrections (called “debugging” code!)
File > Save
Look at the file in Internet Explorer again (if you did not
close out the file, you simply have to click on “Refresh” to
force the browser to re-read the file and show your
changes!)
o Keep working and debugging your code until it is correct.
Revised June 2008
Online PD Basic HTML
4
Formatting Text
Bold, Italics, and Underlining
practice2.htm
Under your line with your name, add:
o This is a practice sentence to make the text bold.
and make the word “bold” ,well…, bold.
<B>bold.</B>
o You may need to refer to the Sample Web Page to
see examples.
o Now do the same with This is a practice sentence
to make the text italics. and make “italics” in
italics. <I>italics.</I>
o Now type This a practice sentence to make the
text underlined. <U>underlined</U>
Revised June 2008
Online PD Basic HTML
6
practice2.html – slide 2
So, you have added four new lines of text.
Be sure to add the <BR> tag to the beginning
of each sentence – makes the line of text
“push” to the next line!
File > Save and look at your web page again!
Revised June 2008
Online PD Basic HTML
7
Multiple Tags
If you want to add multiple effects to a line of
text, you may do so, but adding the end tags
takes some thought!
Now type:
<BR><B><I><U> This is another practice
sentence! </U></I></B>
Save and Check it out!
Revised June 2008
Online PD Basic HTML
8
Adding Color Backgrounds
Now let’s discuss page backgrounds.
To add a color background to your page, you will
add a ”bgcolor” attribute to your BODY tag.
<BODY bgcolor=“yellow”> This will make your
page all yellow behind the other elements. Use a
color of your choice, but dark is usually not a good
idea.
If your text “disappears”, you probably made your
background and your text color the same!
Revised June 2008
Online PD Basic HTML
9
Background Color
Add the attribute bgcolor=“yellow” into
your body tag (insert the curser
between the “Y” and the bracket, make
a space, type in the attribute and value)
Save, Refresh, & View!!
Debug if necessary.
Revised August 2008
Online PD Basic HTML
10
Headings
<H1> is the largest text the viewer’s browser can display, while <H6> is the smallest.
Heading tags also add some “white” space (or empty space) above and below the text to
separate it for emphasis from the rest of the text.
Type the following information after your last sentence added:
<H1>This
<H2>This
<H3>This
<H4>This
<H5>This
<H6>This
is
is
is
is
is
is
the
the
the
the
the
the
H1
H2
H3
H4
H5
H6
tag
tag
tag
tag
tag
tag
in
in
in
in
in
in
use.</H1>
use.</H2>
use.</H3>
use.</H4>
use.</H5>
use.</H6>
Don’t add anything after the </BODY> or </HTML> tags – those
should always be the last tags on your page!
Revised June 2008
Online PD Basic HTML
11
Text Sizes
Now, we’ll add some text size tags. Add these sentences
below the Heading sentences.
<P><FONT size="6">This is font
<P><FONT size="5">This is font
<P><FONT size="4">This is font
<P><FONT size="3">This is font
most Web browsers.) </FONT>
<P><FONT size="2">This is font
<P><FONT size="1">This is font
size
size
size
size
6</FONT>
5</FONT>
4</FONT>
3 (This is the default font size of
size 2</FONT>
size 1</FONT>
The <P> tag double spaces!
Revised August 2008
Online PD Basic HTML
12
Attributes of a Tag
Some tags may include an attribute, or additional
information about the text within the tags
Attributes are included in the start tag, not the end,
or close, tag
For example,
o <BODY bgcolor= “yellow”>
o The tag is BODY while the attribute is
bgcolor=“…” Notice the attribute is inside the
brackets with the tag, and the value of the
attribute is enclosed in quotes.
Revised June 2008
Online PD Basic HTML
13
All Text Same Color
text=“blue” is an attribute of the BODY tag if you
want all text on the page to be the same color
(besides black, the default color.)
In the BODY tag, add the attribute text=“blue”, so
your tag should look like:
<BODY bgcolor=“yellow” text=“blue”>
o Your background color will still be yellow, but your text
will be blue.
Save and Check It Out!
Revised June 2008
Online PD Basic HTML
14
Spot Color
If you want to emphasize just part of your text by adding
color to specific words or sentences, add the <FONT> tag
with a color attribute:
o <FONT color=“green”>
o This one does have to close, so when you want green text to end,
just close the tag, not the attribute. </FONT>
For emphasis, just before your heading sentences, add the
FONT tag and change the text to green. BE SURE to turn
it off after the last heading sentence.
Then make the text size sentences orange. Be sure to turn
off!
Save and Check It Out!
Revised June 2008
Online PD Basic HTML
15
Text Alignment
The header tags can contain an attribute to
align the header text where you want it.
Let’s give our Web page a title and center
it.
Add a blank line under the <BODY> tag at
the top of the page, and type
o <H1 align=“center”>My First Web
Page</H1>
o Save and Check It Out!
Revised June 2008
Online PD Basic HTML
16
Centering Blocks of Text
You can also choose to center paragraphs or
blocks of text.
Simply add the tag <CENTER> where you want to
start centering everything on the page. Then add
the close tag </CENTER> where you want to stop
centering “stuff!”
Let’s center the heading sentences in our
practice page
Save and Check It Out!
Revised June 2008
Online PD Basic HTML
17
Adding Images to Web Pages
Saving An Image
Adding an image adds interest to a Web page. But,
your image files MUST be saved in the same
folder where your html document is saved.
Choose a meaningful name! NO SPACES in the
file name!
Go to Google Images and choose an appropriate
picture. It needs to be a JPG and the bigger the
better!
To save the picture: right-click, Save As, navigate to
your Documents and Save in your HTML folder (NO
SPACES!)
Revised June 2008
Online PD Basic HTML
19
Adding An Image Tag
Let’s add the image right up under our page title.
Make yourself an empty line or two after the </H1>
tag.
Add the tag <IMG src=“picture.jpg” > and add a
center tag before it and after it so the image is
centered. Be sure you copy your image name
EXACTLY as you saved it (instead of picture.jpg like I
used – use the quotes, though.) Also notice the
image tag does not need a close tag.
Save and Check It Out!
Revised June 2008
Online PD Basic HTML
20
Adding Hyperlinks to Web Pages
Adding A Hyperlink
Hyperlinks are what make the Internet the Internet!
A hyperlink is a tag used to put text on your
web page that links to other web pages.
We will use Google as an example.
Let’s add a tag before the heading sentences to
link to Google. Be sure to add some <BR> tags to
make yourself a few blank lines between text.
<BR><BR><A href=http://www.google.com> Click Here to Go To Google! </A>
The tag is <A>, the attribute is href, the text
in between the tags is the actual link that
shows on the web page for the user to click
on, and we only close the tag, which is </A>.
Save and Check It Out!
Revised June 2008
Online PD Basic HTML
22
Adding an Email Link
An email link is almost like the hyperlink, just
changes a little.
<BR><A href=“mailto:[email protected]”> Click
here to contact me! </A>
Now add an email link using your school email
address under the Google link. It may help to
add some spaces between lines to make your code
easier to read… add <BR> tags before the tag!
Save it and Check It out!
Revised June 2008
Online PD Basic HTML
23
Adding Lists to Web Pages
•Unordered Lists
•Ordered Lists
Revised July 2009
Basic HTML
24
Unordered Lists
Unordered lists are shown with a
“bullet.”
To begin the unordered list, use the tag
<UL>
Each item in the list must also have a
tag, <LI> and an end tag </LI> after it
End the list with the close tag </UL>
Revised July 2009
Basic HTML
25
Unordered List Example
Notepad
Internet Explorer
Revised July 2009
Basic HTML
26
Unordered List
Make an unordered list of YOUR
favorite fruits using the tags on the
previous slide.
Revised August 2008
Online PD Basic HTML
27
Ordered List
Ordered lists are shown with
numbering added
To begin the ordered list, use the tag
<OL>
Each item in the list must also have a
tag, <LI> and an end tag </LI> after it
End the list with the close tag </OL>
Revised July 2009
Basic HTML
28
Ordered List Sample
Notepad
WEB PAGE
Revised July 2009
Basic HTML
29
Ordered List
Make an ordered list of YOUR favorite
fruits using the tags on the previous
slide.
Revised June 2008
Online PD Basic HTML
30
Save is one last time and
CHECK IT OUT!
Revised August 2008
Online PD Basic HTML
31
Debra Mason
Information and Communication Technology II
Northwest Rankin Middle School
Flowood, MS 39232
[email protected]
Revised June 2008
Online PD Basic HTML
32