Hi! I've created this web page as a resource for anybody that would like to know the fine art of HTML. Don't be scared by the terminology, HTML (Hyper Text Markup Language) is actually very easy to learn and with this basic knowledge, just about anybody is able to create a webpage.

HTML is basically a series of tags and text (which are not case sensitive.) Together, they create "source code." You can view the source code to any webpage by right-clicking on the page and selecting "view source code." The source code is written and edited using Notepad or Wordpad. I encourage all of you to view the source code on some of your favorite pages to try and figure out how the creator of that page wrote it (even mine!). Be aware, however, that often the "cool" effects that you see on those pages are the result of other languages and programs, such as Javascript and Flash (which are then inserted in the HTML code).

Check out this site for even more HTML help! Annabella's HTML Help

Links to my student's sites.

The HTML Skeleton

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

EVERY webpage has this basis. From here on out though, it's all about being original and creative with the different tags! One of the easiest ways to make your page look flashy is to assign different properties to the body tag.
Here are (just) some of your options:

Spacing and Alignment

  1. <br> acts like the return key in your word processor
  2. <p> acts like the double spacing feature in your word processor
  3. <div> acts a lot like a <br>
  4. <hr> draws a cool horizontal line across your page!
  5. <pre> and </pre> allow you to type the desired spacing in notepad or wordpad
asdjfalsdfjkasldkfj
This is a break.

This is a paragraph.

This is a division. (doesn't it look like a break?)

Divisions

You can center or align text using the division tag!
<div align = "value"> </div>
The values are: left(default), right, center, and justified

You can also easily center text by surrounding the desired text with the <center> and </center> tags

Content Tags

  1. <b> bold </b>
  2. <i> itallic </i>
  3. <u> underlined </u>
  4. <tt> teletyped </tt>
This text is bold.
This text is italic.
This text is underlined.
This Text is teletyped.

Headings are another way of making your content organized and unique!

You make them by surrounding the desired text with <h1> </h1> tags (ranging from 1-6)
Also, note that there is a natural paragraph spacing after each closing heading tag.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text wrapping and Text breaking

Text naturally wraps around and starts over on the left margin according to your browser but if you don't want it to appear that way, you can apply the <nobr> </nobr> tag

this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text this is a whole bunch of text

this is a whole bunch of text that is not broken this is a whole bunch of text that is not broken this is a whole bunch of text that is not broken this is a whole bunch of text that is not broken this is a whole bunch of text that is not broken this is a whole bunch of text that is not broken this is a whole bunch of text that is not broken this is a whole bunch of text that is not broken

Fonts

Unlike font color and background color, you use the <font> and </font> tags to designate font and font size. Remember though, fonts will not appear on other people's computers if they do not have that specific font installed on their computer (usually it appears as the default Times New Roman instead)
  1. <font face = nameofafont>
  2. <font color = yourchoice>
  3. <font size = +/- 1-7>
This text is 20 point in arial font.
This text is 25 point in geneva font.
This text is 30 point in comic sans ms font.

Images

to insert an image: <img src="picture.gif/jpg">

You can also stretch images by assigning the height and width properties to the img src: <img src="picture.gif/jpg" height = # width = #>

Marquee

  1. <marquee behavior = alternate> text </marquee>
    text that scrolls (and goes back and forth)... how cool!

  2. <marquee> text </marquee>
    text that scrolls from the right side... how cool!

  3. <marquee direction = right> text </marquee>
text that scrolls from the left side... how cool!

Links

The tag should look something like this <a href = "http://www.google.com"> Google </a>

The link will look like this: Google

You can also link to any file that you have uploaded onto the server: <a href = "filename.suffix"> Linked Text </a>

Helpful Links
AVC : Ace Virtual Camp --- DLL file to run your VB6 programs
Flaming Text - free clipart, fonts, and active text
Cool Text - active text
The Javascript Source - Free Javascript with easy to follow instructions on how to insert the effects (games, rollovers, message boxes, and more!)
Animfactory - Free Animated GIFs
Photos 2 Go - Free Photos
MidiFarm - free midis of your favorite songs
mididb.com - more free midis for your background music!

Back to main.


emshin@ucla.edu
made by: emily shin
© July 2001