Transcript Add-On`s - Henry County Schools

More Basic HTML
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 which
affects its structure, layout as well as helps
with readability.
• A web browser is a 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, used to break
the line without putting a space between the
lines, acts like a Single Space.
• Paragraph: <p> </p> used 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 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 IDT 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 added though you just
saved.
• That’s because you must always Refresh
the Browser each and every time you
Save the Notepad.
• Click View Refresh
11
Let’s Practice
Refreshing
Click the Refresh
button or SELECT
View Refresh
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 subtitles 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 typed 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
code below inside the <hr>:
• width=50% size=10 align=“right”
Now Type: width=50% size=10 align=“right”
<font size=6 face=“Comic Sans MS”> on
either side of “This is my very first “WEB
PAGE”!!! </font>
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
• http://html-color-codes.com/
• http://www.colortools.net/color_chart_we
b-safe.html
Coloring the Background a solid color
<body bgcolor = “color’s name or
hexidecimal #>
Adding Color Continues
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 IDT 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
• Tell your teacher
when you have
completed the web
page
• Begin completing
the Tags worksheet
on my web page
from the 1st 2
PowerPoints. Save
as instructed.
Tags to Remember:
• <p>, <hr>, <br>,
<font>,
• <h1> - <h7>, <b>,
<i>
• <u>, <!--comment-->
Add-On’s
• color, size, width
• align, face, text,
bgcolor