15.2 More Basic HTML & CSS - Polk County School District HTML.pdf• Tags (singles or sets) can have...

15.2 More Basic HTML & CSS

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



• 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

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>

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.

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



<!– Created: today’s date-->

<hr>

Now, it’s Time to Save & Learn to Refresh

Click FileSave

How toView

Changes

Refreshing the Browser to See the Changes

13

• 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

Let’s Practice Refreshing

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

Adding Some Style& Heading

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

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)

Inline CSSInline CSS defines CSS rules that are inside the individual

HTML tags

Format:

<tag style=“property:value”>

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

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

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>


Tags & Tags Features

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.

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

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>

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

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>

Let’s Practice Changing Horizontal Rule

and Font

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


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



• 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

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>

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

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



<!– Created: today’s date-->

<hr>

Now, it’s Time to Save & Learn to Refresh

Click FileSave

How toView Changes

Refreshing the Browser to See the Changes

46

• 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

Let’s Practice Refreshing

Adding Some Style& Heading

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

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)

Inline CSS

Inline CSS defines CSS rules that are inside the individual HTML tags

Format:

<tag style=“property:value”>

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

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


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>


Tags & Tags Features

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.

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

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>

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

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>

Let’s Practice Changing Horizontal Rule and

Font

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


15.2 More Basic HTML & CSS - Polk County School District HTML.pdf• Tags (singles or sets) can have...

Documents

Transcript of 15.2 More Basic HTML & CSS - Polk County School District HTML.pdf• Tags (singles or sets) can have...