More Basic HTMLMore Basic HTMLMore Basic HTMLMore Basic HTML

More Basic HTML

• Add spacing (single & double space)

• Save • Refresh • Add horizontal rule• Add comments

• Add styles• Add headings• Add features• Add alignments• Add font• Add color

Today you will learn how to…

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”.

• 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 Continues

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 Let’s Practice Adding Various Adding Various

SpacingSpacing

If needed, open both the browser and If needed, open both the browser and notepad of My1stWebPage.html 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 Now, it’s Time to Save & Learn to RefreshRefresh

Click File Click File Save Save

How toHow to View View

ChangesChanges

Refreshing the Browser to See the Changes

11

• 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

Let’s Practice Let’s Practice RefreshingRefreshing

Click the Refresh button or SELECT View Refresh

Wow, look at your web page!

Adding Adding Some StyleSome Style & Heading & 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> Largest heading– <h2> </h2>– <h3> </h3> Average heading– <h4> </h4>– <h5> </h5>– <h6> </h6> Smallest heading

Let’s Practice Let’s Practice Adding Adding

Style & Heading Style & Heading TagsTags

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 Now, lets add some Style to the previously typed text: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 BrowserSave the Notepad & Refresh the Browser

Don’t forget to Refresh your Browser to see the new changes.

Tags & Tags & Tags Tags

FeaturesFeatures

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 RuleTo 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 Let’s Practice Changing Horizontal Changing Horizontal

Rule and FontRule and Font

Switch back to your Notepad. Switch back to your Notepad.

Now, pick one of the <hr> to change the Now, pick one of the <hr> to change the width, size & alignment by adding the width, size & alignment by adding the code below inside the <hr>:code below inside the <hr>:

• width=50% size=10 align=“right”

Now TypeNow 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 BrowserSave the Notepad & Refresh the Browser

Adding Adding ColorsColors

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 #CCFF00For example:

White or #FFFFFF Black or #000000Red or #FF0000 Green or #00FF00Blue or #0000FF Yellow or #FFFF00Gray or #808080 Purple or #800080Fuchsia or #FF00FF Lime or #00FF00

Adding Color

• Web safe colors are provided on Color Charts

• http://html-color-codes.com/

• http://www.colortools.net/color_chart_web-safe.html

Coloring the Background a solid color

<body bgcolor = “color’s name or hexidecimal #>

Adding Color ContinuesColoring the Horizontal Rule

<hr color=”colorname” or hexidecimal #>

Coloring All Words:

<body text=“color’s name” or hexidecimal#>

Color Some Words, sentence or paragraph: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 Let’s Practice Adding ColorsAdding Colors

Some Made up Colors might not work

Changing the Background ColorChanging 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: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:Change the Horizontal Rule:

• pick a <hr> to change the color by typing inside of it color=“blue”

Change the Font Color, Size & Face: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 BrowserSave 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

40

• Click the Close button on the browser title bar

• Click the Close button on the Notepad window title bar

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