Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

HTML stands for HyperText Markup Language

Part 2: Font Size, Breaks and Alignment

 

  1. From Part 1: The Basics -
    This is how your html should look so far.



    FONT SIZE
    We are going to learn font attributes The first attribute is size.
    Size can use the Heading tag <H1> or the Size Attribute tag, <font size="1">
    You do not need to memorize these sizes. Most web developers guess at sizes or use a size chart. You should have an idea of the sizes though.
     
  2. HEADING
    Headings are used to capture attention on pages. Headings goes from <h1> being the largest and <h6> being the smallest. Headings should be ordered from largest to smallest on the page. Enter the following onto your html page as you edit it in Notepad.

    When you save it on the notepad and refresh your internet explorer, the page should look like this:

    My

    very

    first

    html

    page



     

  3. FONT SIZE
    Size <font size="1"></font> goes from 1 being the smallest to 7 being the largest.
    We are going to try a couple of these in your text to see how they look.



    Enter this code and save to see how it looks.
    When you save it on the notepad and refresh your internet explorer,
    the page should look like this:
    My very first html page



  4. PREFORMATED
    While you can see the sizes changed, did you notice something peculiar?
    Even though we returned after the word html and before the word page,
    there is no line break there. This is because HTML does not recognize the carriage return.
    We can make it see the returns by using the <pre></pre> tags
    with <pre> the text is taken just as you type it.
    This can however become a hassle because you will not be able to change size, color or format the text in any other way between the <pre> tags.
    So usually other tags are used.
    Try the pretag as it is written below.



    Enter this code and save to see how it looks.
    When you save it on the notepad and refresh your internet explorer,
    the page should look like this:

    My
    very 
    first
    html
    page
    

     

  5. BREAKS
    To control line breaks we can use one of the following codes
    • <br> means break to the next line
    • <nobr> means no break, and will not let your text break(this causes the reader to scroll over)
    • <wbr> will put a break into a <nobr> area, so this text won't break EXCEPT for where you put this code to force the break
    • <br clear="all"> will cause a line break to the next full line.
    • <p></p> means break two lines for a new paragraph

    Assigning a break to the end of each line in the font size code will give us code that looks like this

    This code cause the different size text to show up in different lines like this

    My
    very
    first
    html
    page


     

  6. CENTER
    <center> </center>can be used to center objects and text on a line. Please the begine center tag <center> in front of the line of text, and the end center tag </center> at the end of the objects or text you want centered. If you place the center tag around the text in your HTML code you will see that the code looks like this:



    The result will look like this:
     
    My
    very
    first
    html
    page


  7. ALIGNMENT
    We can also align our text to left, center or middle using a simple attribute of the Heading <H1></H1> tag, the Paragraph<p></p> tag or the Division<div></div> Tag. To do this we use the following attributes within these tags.
    • align="center"
    • Align="left"
    • align="right"

    Because the alignment is an attribute of a tag, Aligns must go inside the main tag it is set to align. They can go into the following tags

    • <H1 align="center"> </h1> To center the heading
    • <p align="center"> </p> To have a double line break before centering
    • <div align="center"> </div> To center without having to double line break

    Using the code below, test out the paragraph align right <p align="right"> </p> for your text.



    It should appear like this:
     

    My
    very
    first
    html
    page


     

  8. BLOCKQUOTE
    <blockquote></blockquote>  can also be used to make the text indent after the first line.
    This is useful when creating outlines or quoting people.

     
  9. PUTTING IT ALL TOGETHER
    Let's put some of these into our text and add a little more content to our page Notice I changed the font sizes, and added breaks and centering.


    Save this as html and view (refresh) your page.

    Your page should look like this:
     

    My very first html page

    Welcome to my html page
    where I am showing my html skills

    I want to learn everything I can about html

    So I can make cool web pages



I know we have learned a lot of tags so far, and it is a lot to remember.
Keep in mind that you do not have to memorize it all. It is important to know what you CAN do with the tags! However, most web developers have to refer to an HTML chart for tags they don't use frequently, just as they have to refer to color charts.
As you use html, you will find that you memorize those tags that you use the most.

Now we have finished lesson 2 let's go on to lesson 3,
font attributes



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2021 All Rights Reserved
Privacy and Legal