15 2 more basic html
Download
1 / 41

15.2 More Basic HTML - PowerPoint PPT Presentation


  • 93 Views
  • Uploaded on

15.2 More Basic HTML. MCSD. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments. Add styles Add headings Add features Add alignments Add font Add color. More Basic HTML. Today you will learn how to…. Spacing.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 15.2 More Basic HTML' - armando-lopez


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

More Basic HTML

Today you will learn how to…


Spacing
Spacing

  • Add white space to the Web Page affects its structure, layout as well as helps with readability.

  • A web browser is free-formdocument meaning that any spaces or blank lines have no effect on the browser unless they are “TAGGED”.


Spacing continues
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
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
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 My1stWebPage.html {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 Refresh

Click FileSave


How to view changes
How to My1stWebPage.html View Changes


Refreshing the browser to see the changes
Refreshing the Browser My1stWebPage.html 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


Let’s Practice Refreshing My1stWebPage.html


Click the Refresh button My1stWebPage.html


Wow, look at your web page! My1stWebPage.html


Adding some style heading
Adding My1stWebPage.html Some Style & Heading


Style tags
Style Tags My1stWebPage.html

  • <b> </b> - bold text

  • <u> </u> - underline text

  • <i> </i> - italic text


Heading tags
Heading Tags My1stWebPage.html

  • 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


Let’s Practice My1stWebPage.html

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: typed, add the following 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




Tags and features add ons
Tags and Features (Add-Ons) changes.

  • 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
Changing the Appearance of the Horizontal Rule changes.

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 and its “Add-ons” changes.

<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. – 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
ALIGNING TEXT changes.

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

Changing Horizontal Rule and Font


Switch back to your Notepad. changes.

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

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

    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 Browser


Adding colors

Adding Colors changes.


What s the deal with colors
What’s the Deal with Colors? changes.

  • 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 Black or #000000

    Red or #FF0000 Green or #00FF00

    Blue or #0000FF Yellow or #FFFF00

    Gray or #808080 Purple or #800080

    Fuchsia or #FF00FF Lime or #00FF00


Adding color
Adding Color changes.

  • 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 continues
Adding Color Continues changes.

To 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 changes.

Adding Colors

Some Made up Colors might not work


Changing the Background Color changes.

  • 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: changes.

  • 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 Mrs. Smith’s Beginning Web Design class”

  • Save the Notepad & Refresh the Browser




Quitting notepad and a browser
Quitting Notepad and a Browser changes.

40

Click the Close button on the browser title bar

Click the Close button on the Notepad window title bar


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

Recap Activity


ad