Download - 15.2 More Basic HTML
15.2 More Basic 15.2 More Basic HTMLHTML
15.2 More Basic 15.2 More Basic HTMLHTML
DeKalb County School SystemDeKalb County School System
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 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, 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.
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 {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 Now, it’s Time to Save & Learn to RefreshRefresh
Click FileClick FileSaveSave
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 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
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> Largest heading– <h2> </h2>– <h3> </h3> Average heading– <h4> </h4>– <h5> </h5>– <h6> </h6> Smallest heading
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 type text: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 BrowserSave the Notepad & Refresh the Browser
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>
Switch back to your Notepad. Switch back to your Notepad. Now, pick one of the <hr> to change Now, pick one of the <hr> to change
the width, size & alignment by adding the width, size & alignment by adding the below inside the <hr>:the below inside the <hr>:
• width=50% size=10 align=“right”
Now Type: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 BrowserSave the Notepad & Refresh the Browser
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• 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 ContinuesTo 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:Color Some Words, sentence or paragraph:<font color=“color’s name”> Words </font>
Don’t forget that you can Combine
<body bgcolor=“?” text=“?”>
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 Mrs. Smith’s Beginning Web Design class”
Save the Notepad & Refresh the BrowserSave the Notepad & Refresh the Browser
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