Transcript 15.2 PPT - Walton County School District

15.2 More Basic
HTML
DeKalb County School System
More Basic HTML
Today you will learn how to…
• Add spacing
(single & double
space)
• Save
• Refresh
• Add horizontal rule
• Add comments
•
•
•
•
•
•
Add styles
Add headings
Add features
Add alignments
Add font
Add color
Spacing
• Add white space to the Web Page affects its
structure, layout as well as helps with
readability.
• A web browser is free-form document
meaning that any spaces or blank lines
have no effect on the browser unless they
are “TAGGED”.
Spacing Continues
• On the Notepad, you can actually use
the spacebar, return & tab keys to type
the tags, text and the different sections.
• BUT the Browser & will IGNORE all
of this.
– everything will be as 1 long single
spaced line or paragraph.
Spacing Tags:
• Line Break: <br> Isn’t a set, use to break the
line without putting a space between the lines,
acts like a Single Space.
• Paragraph: <p> </p> use to add space
between paragraphs, acts like a Double
Space.
• Horizontal Rule: <hr> isn't a set, adds a
visible horizontal line, used to make sections.
• You can use as many of spacing tags as
needed.
Comment Tag
• When you want to add notes or
comments to a section or the entire web
page use this tag
<!--comment-->
• It doesn’t show up in the browser.
• Comments should be short.
• Can be used anywhere in the document.
Let’s Practice
Adding Various Spacing
If needed, open both the browser and
notepad of My1stWebPage.html
• After the 1st sentence This is my very first
“Web Page” type the following text from
this & the next slide with each statement on
a separate line and all before the </body>
closing tag:
<hr>I think Web Design is a great thing
to learn because…</hr>
<br>I've learned in Web Design that a br tag
lets you create a…<br> Line Break.
<p> My name is {insert your name} and I go
to {insert your name} High School. <br> I
am in the _?_ grade. <p> I am learning to
create web sites in {your teacher's name}
CMW class and so far I have just learned
the basic tags</p>
<!-- Author: your name -->
<!– Created: today’s date-->
<hr></hr>
Now, it’s Time to Save & Learn to
Refresh
Click FileSave
How to
View
Changes
Refreshing the Browser
to See the Changes
• Switch to your My1stWebPage browser
screen.
• You will notice none of the additional text
you typed was add though you just saved.
• That’s because you must always Refresh
the Browser each and every time you
Save the Notepad.
• Click the Refresh button
on the
Standard toolbar
11
Let’s Practice
Refreshing
Click the
Refresh button
Wow, look at
your web page!
Adding
Some Style
& Heading
Style Tags
• <b> </b> - bold text
• <u> </u> - underline text
• <i> </i> - italic text
Heading Tags
• Are used to separate text and introduce new
topics, titles or subtitle on web pages.
• They’re Bold & Double Spaced. So, no need
for <br></br>, <p> /p> or <b></b>.
• Come in different sizes
–
–
–
–
–
–
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Largest heading
Average heading
Smallest heading
Let’s Practice
Adding
Style & Heading Tags
Switch back to your Notepad and
after the last <hr> you typed, add
the following text:
<h1>Heading 1 - Biggest Size</h1>
<h2>Heading 2</h2>
<h3>Heading 3 – Average </h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6- Smallest Size</h6>
Now, lets add some Style to the
previously type text:
Put a <b></b> on either side of “great” in the
paragraph that starts “I think Web
Design…” but before the </hr>
Put an <i></i> on either side of your name in
the paragraph that starts “My name
is_______...” but before the </p>
Put a <u></u> on either side of the text
“Heading 4” but before the <h4>
Save the Notepad & Refresh the Browser
Don’t forget to
Refresh your
Browser to see
the new changes.
Tags & Tags
Features
Tags and Features (Add-Ons)
• Tags (singles or sets) will have
Attributes or Features.
• Let’s call the tag features “Add-On’s”.
• Add-On’s allow tags to have additional
features such as size, color, width,
etc…
• Add-On’s will always go after the
opening tag only and never in the
closing tag, if it’s a set.
Changing the Appearance
of the Horizontal Rule
To Change the
• Width or Length –
<hr width=number or %>
• Thickness or Height <hr size=number or %>
• Alignment –
<hr align=”right or center or left”>
• Combine the add-on when needed <hr align=”right” size=30 width=40%>
Font and its “Add-ons”
<font> </font>
Font size ranges from 1 - 7
1 is Tiny font
3 is normal - like Word size 12
7 is huge
• To change the Font Size
<font size=number> text here </font>
• Font Face – changes the appearance of
the font such as Arial or Comic Sans.
<font face =”Arial’’>text </font>
• You can combine all of the font tag’s
add-ons in one tag if they apply to the
same text:
<font size=3 face=”Comic Sans MS”>
ALIGNING TEXT
• To Align using the Paragraph Tag:
<p align=”right or center or left”> type here </p>
• To Align using the Heading Tag:
<h1 align=”right or center or left”> type here
</h1>
• Centers anything
<center> text </center>
Let’s Practice
Changing Horizontal Rule
and Font
Switch back to your Notepad.
Now, pick one of the <hr> to change
the width, size & alignment by adding
the below inside the <hr>:
• width=50% size=10 align=“right”
Now Type:
<font size=6 face=“Comic Sans MS”>
</font> on either side of “This is my
very first “WEB PAGE”!!!
Save the Notepad & Refresh the Browser
Adding Colors
What’s the Deal with Colors?
• Color can be added to every element on a web
page.
• Many tags will use the “color” add-on to change
the color.
• Can use the color’s name such as “blue” or the
Hexadecimal such as #CCFF00
For example:
White or #FFFFFF
Red or #FF0000
Blue or #0000FF
Gray or #808080
Fuchsia or #FF00FF
Black or #000000
Green or #00FF00
Yellow or #FFFF00
Purple or #800080
Lime or #00FF00
Adding Color
• Web safe colors are provided on Color Charts
• gotomy.com (click on the color chart, scroll
down to color name (this has the color
numbers also)
• iconbazaar.com (click on the Color Table, Click
Standard Netscape Named Colors)
Coloring the Background a solid color
<body bgcolor = “color’s name or hexidecimal #>
Adding Color Continues
To Coloring the Horizontal Rule
<hr color=”colorname” or hexidecimal #>
Coloring All Words:
<body text=“color’s name” or hexidecimal#>
Color Some Words, sentence or paragraph:
<font color=“color’s name”> Words </font>
Don’t forget that you can Combine
<body bgcolor=“?”
text=“?”>
Let’s Practice
Adding Colors
Some Made up Colors might not work
Changing the Background Color
• Inside the <body> tag type:
bgcolor=“gray”
• Now try changing the “gray” to #FFB573
• Now change it to whatever color you
want.
Changing the Body Color:
• Inside the <body> but before the bgcolor
add-on type: text=“white”
• Now change it to whatever color you
want.
Change the Horizontal Rule:
• pick a <hr> to change the color by
typing inside of it color=“blue”
Change the Font Color, Size & Face:
Add to the <font color=“purple”> </font>
on either side of “I am learning to create
web sites in Mrs. Smith’s Beginning
Web Design class”
Save the Notepad & Refresh the Browser
your colors might
be different
You Are Well On
Your Way to Being
an Excellent Web
Master!
Quitting Notepad and a
Browser
• Click the Close button on the browser title
bar
• Click the Close button on the Notepad
window title bar
40
Recap Activity
• Open Winter Break
web page to practice
demonstrating your
knowledge of all the
tags learned so far.
• Follow directions on
worksheet.
Tags to Remember:
• <p>, <hr>, <br>,
<font>,
• <h1> - <h7>, <b>,
<i>
• <u>, <!--comment-->
Add-On’s
• color, size, width
• align, face, text,
bgcolor