Hypertext Markup Language Helper

 

 

Every time I needed to re-learn html, I searched the whole web for places to look up the various tags. Dreamweaver does not do all for me. A calculator is only as good as the person who uses it. Sometimes I waste more time clicking on where I need to go in Dreamweaver than to just type in the tags myself. So, this page is created to list some of the common tags, for whoever wants to read it.

This page doesn't have much. There are tons of html resources out there, so I have no interest in adding another fully developed one. This is for me, in case I leave this website for a few years, and come back to relearn HTML.

Basic Structure of a Page

  • A page starts off with <html> and ends with </html> tags.
  • After <html> comes the header, which is tagged <head> and </head>.
  • After header is the body, <body> and </body>.

Head

  • Inside the head, there are meta tags, made by using <meta name="a" content="b">, where a is any of the following and b is what the following is as it pertains to the current page. Meta tags help search engines.
    1. a = keywords about the page
    2. a = description of the page
    3. a = the author of the page
  • The title of the page is also in the header, given by <title>whatever the title is</title>.

Body

  • Inside the body is all the information one normally sees on the webpage.
  • The colors of the page are defined here, normally along with the <body> tag. <bgcolor="color"> defines the background color. One can also replace the word "bgcolor" with "text", "link", "vlink", and "alink" to define their colors. The background may also be the link to an image, instead of a uniform color background.

About all that is needed in the header has been described above, and what follows pertain only to the body unless otherwise stated.

 

Paragraphs

This makes a new paragraph<p>here. (Although a paragraph may be ended with </p>, it is not required, and I never bother to do that when writing in Notepad.)

This makes a new paragraph

here.

This makes a<br>new line, without skipping a line in between.

This makes a
new line, without skipping a line in between.

This makes a<hr>horizontal rule. Note that you can adjust its width and its alignment by adding in extra width and align tags inside the <>.

This makes a

horizontal rule.

 

Text

Heading

There are 6 sizes for headings, 1 being the largest and 6 being the smallest.

<h1>This is a heading of size 1.</h1>

This is a heading of size 1.

This is a heading of size 2

This is a heading of size 3.

This is a heading of size 4.

This is a heading of size 5.
This is a heading of size 6.
Personally I don't really understand why would anyone want a heading 6, but it's there.

Fonts

<b>This is bold.</b>

This is bold.

<i>This is italicized.</i>

This is italicized.

<s>This is strikethrough.</s>

This is strikethrough.

<u>This is underline.</u>

This is underline.

<font name="a">Changes font to the font called a.</font>

<font size="5">Font is size 5.</font> (There are 7 sizes, with 7 being large and 1 being small.)

Font is size 1.

Font is size 2.

Font is size 3.

Font is size 4.

Font is size 5.

Font is size 6.

Font is size 7.

<font color="a">Changes font to the color a.</font> Variable a can be color name or #RRGGBB.

<blockquote>Makes blockquote, indents a paragraph.</blockquote>

<tt>Makes teletype.</tt>

Makes <sup>superscript.</sup>

Makes superscript.

Makes <sub>subscript.</sub>

Makes subscript.

Scrolling Marquee

<marquee behavior=type direction=value loop=value scrollamount=value scrolldelay=value>The text to scroll</marquee>

  • Use IE. Parameters left out will be automatically filled in with default values.
  • Behavior can be either "scroll", "slide", or "alternate".
  • Direction can be "left" or "right".
  • Loop value can be the number of times to loop or "infinite".
  • Scrollamount is how many pixels the text jumps.
  • Scrolldelay is how slow the text moves.

Comments

<!-- Comment here -->

Comments are for your own reference. Visitors won't see them unless they look at source.

 

Links

<a href="url">Description of link</a>

<a href="https://hushuobadao.tripod.com/index.html">Home</a>
Home

Anchors:

<a name="anchor-name">Anchor place</a>

Call url#anchor-name to take visitor to that page and to that anchor. My lyrics page has many examples of anchors.

 

Images

<img src="url of graphic" alt="description of image">

  • alt tags lets people know what the image is about if they cannot see it.
  • you can also add in height and width tags to specify the size of graphic on the webpage.

 

Lists

<ul>This makes an unordered list. Each item begins with <li>, and the list ends with </ul>.

  • List item 1
  • List item 2
  • List item 3

<ol>This makes an ordered list. Each item begins with <li>, and the list ends with </ol>.

    1. List item 1
    2. List item 2
    3. List item 3

<dl>This is a definition list.</dl> Use <dt> for definition-list term, and use <dd> for definition-list definition.

Term 1
Definition 1
Term 2
Definition 2
Term 3
Definition 3


Tables

A table begins with the <table> tag. Here is a table with 3 rows and 2 columns.

(1,1) (1,2)
(2,1) (2,2)
(3,1) (3,2)

There are 4 main attributes inside the table tag, all of which are self-explanatory.

  • width
  • border
  • cellspacing
  • cellpadding

The width can also be set for individual cells. Different backgrounds can be set for the cells inside the table. Adding colspan or rowspan attributes also lets a cell span multiple columns or rows.

Also note that you can ajust the alignment of the table, the cells in the table, the background color/image of the cells, and the color of the table border. Also note that you can nest tables.

 

JavaScript

Alerts

They have no human-centered design, but here they are:

In IE:

<script>alert ('Content in alert.')</script>

In Netscape:

<script language="JavaScript">
(window.alert("Content in alert."))
</script>

You can also add in an alert onClick within a link. Just put it inside the <a>.

 

Forms

I wouldn't do this by hand, so use Dreamweaver... or Frontpage I guess. However know that if your action is to make the visitor send an email, then few people would want to spend that time.

 

Multimedia

Music

<embed src="location of music" width="300" height="50" control="smallconsole" autostart="true" loop="true" autoreplay="true" type=audio/x-pn-realaudio-plugin exts=ra, ram init fn=load-types mime-types=mime.types>

Parameters left out will be automatically filled in with default values.

A simpler one is <bgsound src="songlocation.mp3" Loop="infinite" AUTOSTART="true">.

 

Other resources

Web design

Art

Java

Fonts

Guestbooks

Forms

Counter

URL forwarding

Music

Useful tools