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 1: The Basics

by Porshiana

It is the most important language to learn, because it is the basis on which most other
web design languages are built. This tutorial will take you through step by step.

  1. TOOLS
    My first suggestion is to open your notepad
    • Go to start-programs-accessories-notepad
    • Open your notepad
    • We will use this to create and view our webpage
  2. BRACKETS
    HTML codes are always enclosed in <brackets>
    Anything not in the brackets will come up as text on your page.
     
  3. HTML
    The very first code on your page is always <HTML>
    This code makes the browser recognize it as an HTML page.
    We also need to let the browser know when we are ending the HTML document
    To end most codes in HTML we simply need to put a backslash before the same code
    as follows </HTML>
    Everything else in your HTML page goes between these brackets.


     

  4. HEAD
     Two things you want to put immediately into your code are the head and title
    While these are not important right now for anyone to view your page
    They will become important later on, when you want to advertise your page
    or add java script, and other coding you will become familiar with.
    It is always a good idea to get into good habits from the beginning.




  5. BODY
    The main part of your page goes into the <body> area.
    The body area goes after the heading is ended.
    Here is how your coding should now look




    Remember this simple code
    It is the basis upon which all HTML pages are made

     
  6. COLOR
    The body tag can have attributes to it.
    The first attribute we are going to learn is how to add color
    change the <body> tag to
    <body bgcolor="blue">
    Here is your current code



    Put this code into your notepad
    Choose File- Save as
    type the name as test.html

     
  7. SAVING
    Save as type should be "All Files (*.*)
    I suggest putting this file right on your desktop
    Leave notepad open
    And click on the test.html file now on your desktop
    Your will see the results of your HTML document
    This should be a blue page with black text.

     
  8. HEX Code
    Colors are important when creating web pages.
    Since it would be very difficult to remember all the colors
    and names or codes for them
    Most web designers use a color chart
    Go to one of the following pages to view color charts
    1. Porshiana.com
    2. hexgen
    3. hexgen2

    Here you will see examples of many colors
    Notice these colors are in Hex code
    Hex color codes are preferred in html pages
    To use a Hex color code, do just as above, except put the Hex code instead of the color. all Hex codes should have the # written in front of it when in HTML.
     

  9. BACK GROUND COLOR
    The bgcolor stands for Back Ground Color
    Notice anything put after the = sign goes into quotations
    this is important, or else the code will not work
    Change the Body Tag to the following <body bgcolor="#0000ff"> This would also give you the blue color, since it indicates Blue from the HEX code.



     
  10. FONT
     Color can also be given to your font. To adjust the text, use the <font> tag
    To make the font white we will use the following tag. It goes in the Body of the HTML document preceding the text it is used for and is followed by a closing tag on the other side of the text it is meant to effect.
          <font color="#ffffff"> .....</font> 

    Try this out in your code




    Play around with the colors and get the colors you want. Once you are done, you are ready to go on to lesson two, text alignment.


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