Basic HTML

Web pages are HTML documents. HTML stands for "HyperText Markup Language". It is a language used to "mark-up" documents for display by a
browser.

The code for a blank web page.

Files on the web are case sensitive. picture.jpg is not the same as picture.JPG

Don't use spaces for file name. Such as "my page.html" use "my-page.html"

Title & Head

Inside of the <head> </head> tag you can place other tags. <title> </title> is where you place the title of your web page.
Such as the title for this page is <title>Basic HTML</title>. For more web pages, this is the only tag you need to insert inside of the <head> </head>.

Background Color (bgcolor):

In the <BODY> tag you can set a color for the background of the page. It can be a color word, or color value. Values are harder, so for now use words. Valid colors are:

red, orange, yellow, green, blue, purple, black, white.

Such as:

For now don't use blue or purple, because those are usually the defaults for links. If you use black, text is not viewable. You can use a text="yellow" or other color to make your site easier to read if needed.

Why is it bgcolor and not background when setting a background color? Ask me in class or look on the web to find out.

Your web page goes inside of the <body> </body> tags.

Formatting of text

bold <b>bold</b>

italic <i>italic</i>

underline <u>underline</u>

Headings

Heading 1 <h1>Heading 1</h1>

You have have various size headings based on the number after the H. They range from 1 to 6. As you can see the heading goes smaller as the numer gets larger.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Links

Links to documents is what makes the world wide web a web. You are interconnecting various resources.
Links can be internal or external.

Interneral links - links to files within your own web site, such as a link to the syllabus of my site. Internal links only need to refer to a file from the current base address. So if I'm in http://www.sci.brooklyn.cuny.edu/~goetz/ and I want to see sheep.html, my link only has to say I want sheep.html.
External links - links outside of your site, such as a link to google.com. If you notice when you move the mouse over the link to google, it shows in the lower left part of the browser the link. External links must include HTTP:// or whatever type of connection it will be such as FTP:// is another popular type of link for downloading files. If someone from another place such as a search engine of sheep photos wants to tell people to visit my picture, they'd need to give the full address of http://www.sci.brooklyn.cuny.edu/~goetz/sheep.html
To make a link use email, the type of connection is mailto: Notice there is no // after the : as in HTTP://
Such as Mail me has the HTML code as <a href="mailto:goetz@sci.brooklyn.cuny.edu">Mail me</a>
Anchors are links within a page. Such as to go to the top of this page. I'll discuss this more a different class.

A link is in the form of <a href="some address">text for the link</a>

Such as:
<a href="http://google.com">Visit google and search the web</a>
Visit google and search the web

Images

scene
<img src="scene.jpg" width="300" height="225">

The src takes a similar value as the href of a link. If the file is local you can just give the file name. If the file is somewhere else on the web you need to use http:// in the address of the file. Only link directly to a file if the site gives you permission to do so. Such as some sites ask you to tell your visitors about the site and give you graphics which you can link directly to.

Line formatting

Paragraphs go inside of <P> </P>

Add linebreaks by doing <BR>
Such as this is a new line. Otherwise the browser would have wordwrapped the text.

Spaces

  is a way of inserting an extra space. For example if you look at the following 2 examples, you'll see where a space is inserted and where it is not. In your browser if you do, View, Source (Page Source), you'll see what I inserted to get the spaces. Normally you'll never need to do this, but Dreamweaver makes you insert a special character from a menu to force a space. Other editors will let you press the spacebar more than once.

Welcome to Multimedia
Welcome to Multimedia

Need to align text, such the CENTER, LEFT, or RIGHT tags. Anything insides these tags will be aligned accordingly. Such as to make things centered.

<CENTER>Welcome to my site</CENTER>

Don't forget to close your tags. What if you forget to do so?

Need more tags?

HTML Cheat Sheet