Web Design - El Centro College
 
HTML More HTML JavaScript Design Dreamweaver Fireworks Flash Photoshop More Info Home
 

HTML Basics

Guidelines - Basic Codes - Basics in Action! - HTML Template - Links

Learning HTML is like learning a foreign language.

To start with, you learn enough to simply communicate. As you become more fluent, your web page will expand and become more intricate and interesting.

One of the best ways to learn HTML is to surf the Web. View the HTML behind the pages you like. Do this by selecting VIEW -- SOURCE.

Don't worry if you don't understand all the coding yet - it will make more sense as you continue learning HTML.

Guidelines

HTML instructs the browser how to display information. This is accomplished via tags.

Tags are utilized to specify:

  • structure (paragraphs, lists…)
  • style (bold, italic…)
  • programming (links to other pages, forms…)

A tag is a set of brackets containing a coded command: <p>

All HTML commands must be written inside brackets!

HTML tags generally come in pairs, with a beginning and an ending tag. The ending tag is preceded by a forward slash </>. These work like light switches: the first tag turns the action on and the second turns it off.

<i>these words will appear in italics</i>

HTML tags are not case sensitive but "good coding" means using lowercase letters.

If a browser does not know what to do with a tag, it will ignore it!

Return to the Top

Basic HTML Codes

HTML TAG <html>….. </html>

  • starts and ends every web page
  • tells the browser that a web page should be displayed

HEAD TAG <head>……</head>

  • tells the browser what should appear on the title bar (top blue "line" of the browser)

TITLE TAG <title>…….</title>

  • "sandwiched" inside the <head> tags.
  • appears in the title bar
  • indexed by the search engines, so it appears as the "title" of a webpage in search engine listings and in bookmark files
  • be descriptive! This may be your users first contact with your page.
  • don't be wordy! Keep the title to less than 60 characters, preferably less than 45
  • can not contain any formatting tags, images, or links to other pages
  • don't use colons or backslashes - these confuse the browser
  • each document must have one and ONLY one

Always end the <title> and <head> tags before moving into the <body> of your page!

BODY TAG <body>……</body>

  • What appears on the browser display of the web page is determined by what falls between the BODY tags
  • Attributes: marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" vspace="0" hspace="0"
  • Note: TOPMARGIN and LEFTMARGIN are recognized by Explorer MARGINHEIGHT and MARGINWIDTH are recognized by Netscape

These tags must appear on all web pages!

Return to the Top

Tags That Can Be Added Inside The <body>


COMMENTS TAG <!--your wording-->

  • your comments, similar to reminders your write yourself at home or work, are placed in-between the dashes
  • your comments do not display in the browser but are meant to assist you later in remembering why you may have added something or as reminders to you to update a section/add information at a later date
  • ex: <!--written for my web class project Fall 2001-->

PARAGRAPH TAG <p>…</p>

  • lets the browser know when to start a paragraph

LINE BREAK TAG <br>

  • stops the wording on a line without creating a new paragraph
  • this code is often used for "breaking" lines in poetry

HORIZONTAL RULE TAG <hr>

  • helps separate sections of the page
  • appears as a thin "shadow" line that runs horizontally across the browser window

HEADINGS <h2>…..</h2>

  • Headings organize the <body> of the webpage into sections, just as chapter headings help organize information in a book.
  • You are not limited to how much text you can type in a heading, but be concise!
  • Heading coding automatically causes the browser to create a line break and a double space after the end Heading code.
  • Headings come in "sizes"
  • Tags for <h1> headings do not specify that the heading translate to 24-point Times-Roman -- or any other font size you may have used in word processing!
  • The user can change the viewing font size in the browser so <h4> could appear as 24-point Arial to that user.

Return to the Top

Let's Try Some Coding!

Which coding example below is easier to read? As your coding becomes more complex, the more important readability and consistency will become.

=========================================

<HTML><head><Title>My First Web Page</TITLE></Head><bOdy><P>This is a very simple web page. Notice that the browser does not pay attention to spaces that we add unless you specify what type of spacing you want.</p> <p>Like when you use a paragraph tag or a <Br> line break tag.</P></Body></HTML>

==========================================

<html>

<head>
<title>My First Web Page</title>
</head>

<body>

<p>This is a very simple web page. Notice that the browser does not pay attention to spaces that we add unless you specify what type of spacing you want.</p>

<p>Like when you use a paragraph tag or a<br>
line break tag.</p>

</body>

</html>

========================================

Return to the Top