Download presentation
Presentation is loading. Please wait.
1
15.2 More Basic HTML & CSS
2
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
3
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”.
4
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.
5
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.
6
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.
7
Adding Various Spacing
Let’s Practice Adding Various Spacing
9
Create your first webpage
<HTML> <HEAD><TITLE>Mrs.Kelley’s First Webpage</TITLE> </HEAD> <BODY> This is my a demo webpage for Introduction to Digital Technology.. </BODY> </HTML>
10
If needed, open both the browser and notepad of first.html
After the 1st sentence This is my demo webpage 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… <br>I've learned in Web Design that a br tag lets you create a…<br> Line Break.
11
Now, it’s Time to Save & Learn to Refresh
<p> My name is {insert your name} and I go to {insert your name} 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> Now, it’s Time to Save & Learn to Refresh Click FileSave
12
How to View Changes
13
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 13 13
14
Let’s Practice Refreshing
15
Don’t forget to Refresh your Browser to see the new changes.
16
Adding Some Style & Heading
17
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>, <p> or bold text. Come in different sizes <h1> </h1> Largest heading <h2> </h2> <h3> </h3> Average heading <h4> </h4> <h5> </h5> <h6> </h6> Smallest heading
18
What is CSS? CSS stand for Cascading Style Sheet
HTML was not intended to format webpage information (bold, color, alignment) CSS defines HOW to display information( color,alignment)
19
Inline CSS <tag style=“property:value”>
Inline CSS defines CSS rules that are inside the individual HTML tags Format: <tag style=“property:value”>
20
CSS Style Tags To bold text (font-weight property):
<font style=“font-weight:bold”> To underline text (text-decoration property): <h1 style=“text-decoration:underline”> To italicize text (font-style property): <font style=“font-style:italic”>
21
Let’s Practice Adding Style & Heading Tags
22
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>
23
Save the Notepad & Refresh the Browser
Now, lets add some Style to the previously type text: Put a font css tag around the word “great” in the paragraph that starts “I think Web Design…” but before the </hr>, like this: <font style="font-weight:bold"> great</font> Put a font css tag on either side of your name in the paragraph that starts “My name is_______...” but before the </p>, like this: <font style="font-style:italic">your name</font> Save the Notepad & Refresh the Browser
24
Save the Notepad & Refresh the Browser
Now, lets add some additional Style to the previously type text: Put a css style tags on either side of the text “Heading 4” but before the <h4>, like this: <font style="text-decoration:underline">Heading 4</font> Save the Notepad & Refresh the Browser
25
Don’t forget to Refresh your Browser to see the new changes.
26
Tags & Tags Features
27
Tags and Features (Add-Ons)
Tags (singles or sets) can have CSS Properties or Features. Let’s call the tag features “CSS Add-On’s”. CSS Add-On’s allow tags to have additional features such as size, color, width, etc… CSS Add-On’s will always go after the opening tag only and never in the closing tag, if it’s a set.
28
Changing the Appearance of the Horizontal Rule
To Change the Length (width property)– <hr style=“width:number or %”> Thickness (height property) - <hr style=“height:number in pixels”> Alignment (align property)– <hr style=“align:right or center or left”> Combine the CSS properties when needed - <hr style=“width:200;height:10;text-align:right”>
29
Changing the Appearance of <body>, <p> or <h1>-<h6>
Font size ranges: x-small, small, medium, large x-large, xx-large small is little font medium is normal - like Word size 12 large is big To change the Font Size(font-size property) <body style=“font-size:small”>text here </font>
30
Font Family – changes the appearance of the font such as Arial or Comic Sans.
<body style=’’font-family:arial’’>text </body> You can combine all of the font tag’s CSS properties in one tag if they apply to the same text: <body style=“font-size:small;font-family:arial”> text </font>
31
ALIGNING TEXT To Align using the Paragraph Tag:
<p style=“align:right or center or left”> type here </p> To Align using the Heading Tag: <h1 style=“align:right or center or left”> type here </h1>
32
Changing Horizontal Rule and Font
Let’s Practice Changing Horizontal Rule and Font
33
style=“width:200;height:10; text-align:right”
Switch back to your Notepad. Now, pick one of the <hr> to change the width, height & alignment by adding the below inside the <hr>: style=“width:200;height:10; text-align:right” Now add the following to the body tag to change the font style and size of the font: style=“font-size:large;font-family:arial”> Save the Notepad & Refresh the Browser
35
Adding Colors
36
What’s the Deal with Colors?
Color can be added to every element on a web page. Many tags will use the “color” CSS 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 Black or #000000 Red or #FF Green or #00FF00 Blue or #0000FF Yellow or #FFFF00 Gray or # Purple or #800080 Fuchsia or #FF00FF Lime or #00FF00
37
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 style=“background-color :color’s name or hexidecimal #”>
38
Adding Color Continues
To Coloring the Horizontal Rule <hr style=“color:colorname or hexidecimal #”> Coloring All Words: <body style=“color:color’s name or hexidecimal#”> Color Some Words, sentence or paragraph: <font style=“color:color’s name”> Words </font> Don’t forget that you can Combine <body style=“background-color:? ; color=?”>
39
Some Made up Colors might not work
Let’s Practice Adding Colors Some Made up Colors might not work
40
Changing the Background Color
Inside the <body> tag type: style=“background-color:? 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 background-color add-on type color:white;
41
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 style=“color:color’s name”> </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
42
your colors might be different
43
You Are Well On Your Way to Being an Excellent Web Master!
44
Quitting Notepad and a Browser
Click the Close button on the browser title bar Click the Close button on the Notepad window title bar 44 44
45
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
Similar presentations
