DNS Technology Consultants, Inc.
 
 
 

Basic HTML Tutorial

DNSTC - Basic HTML Tutorial

Overview

HTML is the coding language used on the Internet for web browsers to display information in a format that is understandable by the computer browser, yet multi-media enriched for the end user. Proposed in 1989 by Sir Timothy John “Tim” Berners-Lee, the hypertext format of HTML has been a catalyst on the Internet from over 20 years. More on Berners-Lee.

The following is a very basic tutorial on how HTML works, and some basic HTML coding.

Here are some basic rules:

1. HTML is based on tags.
2. Within a tag you have attributes for that tag.
3. All opened tags should be properly closed.
4. Tags should be opened and closed within the same order, this is called nesting tags.
5. Using URLS and files on a Linux based system, you should never use spaces and pay attentention to capitalization.

How it works:

To create HTML, you basically write your information like you would normally type into a word processor, but for the information to be displayed correctly (or the way you want it to be displayed) within the browser, you will need to add HTML tags to your text.

For example, if you would just type in text with no tags, you will not see any line breaks or new paragraphs begin. It would be one big block of text.

So to start a new paragraph, you need to use the <p> tag in front of the paragraph, and at the end of the paragraph put a </p>.

Example:

Without Tags:

This is a new paragraph. This drops down a new line. This starts a new paragraph.

With Tags:

<p>This is a new paragraph.</p> <br />This drops down a new line.</p>This starts a new paragraph.</p>

Would results in:

This is a new paragraph.
This drops down a new line.

This starts a new paragraph.

So you can see by adding the HTML tags to your text, you are actually creating the HyperText format that the browser will interpret and display the information the way you want it displayed.

Coding Disected

The following code will display an image that can be clicked on to go to another page:

<a href="http://www.dnstc.com/index.php"><img src="images/logo.gif" width="200" height="100" alt="DNS Technology Consultants, Inc."></a>

Here is what is going on here... first, this is nested HTML... which if you are not familiar to HTML, it looks very confusing. After this explanation, you will understand what is going on here.

You always need to look at it from the inside out... so the first section (on the inside):

<img src="images/logo.gif" width="200" height="100" alt="DNS Technology Consultants, Inc.">

<a href="URL">...</a>

This is the code to create a link. The URL specifies where the user will be taken on the Internet when they click on the link. This can be another website on the Internet or to a page within your current website.

Basic HTML Code

Formating a text

New Paragraph <p>

New Line <br />

<b>Bold</b>
Bold

<i>Italic</i>
Italic

<font color="#FF0000">Coloring Text</font> - Click here for more color codes
Coloring Text


Headings

<h1>This is a header 1 tag</h1>

This is a header 1 tag

<h2>This is a header 2 tag</h2>

This is a header 2 tag

<h3>This is a header 3 tag</h3>

This is a header 3 tag

<h4>This is a header 4 tag</h4>

This is a header 4 tag

<h5>This is a header 5 tag</h5>

This is a header 5 tag

<h6>This is a header 6 tag</h6>

This is a header 6 tag

Preformatted text

The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font.

<pre>
This
is preformated text

shown
here
</pre>

This
                      is     preformated text
					  
					  shown 
					          here

Lists

There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists.

When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different.

Unnumbered lists

Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>.

For example, here is an unnumbered list with three items:

<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>

Here is how tha tlist would display:

Numbered lists

Here is the same list using a numbered list format:

<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>

Here is how that list would display:

  1. list item 1
  2. list item 2
  3. list item 3

Definition lists

Definition lists allow you to indent without necessarily having to use bullets.

<dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>

And here is how this would be displayed

This is a term
This is a definition
And yet another definition
Another term
Another definition

Nested lists

Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list).

<ul>
<li> list item 1
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 2
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 3
<ul>
<li> nested item 1
<li> nested item 2
</ul>
</ul>

Here is how that list would display:

Nested lists Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list).

Block Quotes

The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this:

<blockquote>...</blockquote>

and displays like this:

Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.


Center

You can center text, images, and headings with the center tag:

<center>This is a centered sentence</center>

This is a centered sentence.

The center tag automatically inserts a line break after the closing center tag.


Horizontal Rule

To separate sections in a document, you can insert a horizontal rule tag <hr>. A horizontal rule is displayed as follows:


Creating Links

The real power of HTML is its ability to link to other documents and pieces of text, images, video or audio. Links are usually highlighted or underlined in a document so that you know of their existance. Clicking on the link opens up the document for viewing.

Linking to other documents
To link to a file on a Web server, your HTML tag would look like:

<a href="http://www.dnstc.com/">Connect to DNSTC</a>

The text that appears between the beginning and ending tags ("Connect to DNSTC" in the above example) is the text that is the link the reader clicks on to go to that URL.
When you make a link, imagine you're creating two anchor points: one exists in your document (the text to click on), while the other is the document to which you're linking. You basically create a thread between two points.

Here are what the parts mean:


<a -- starts the anchor
href -- stands for "hypertext reference"
http://www.dnstc.com/ -- the URL of the other document
Connect to DNSTC -- the text that will appear and be clickable
/a> -- ends the anchor

As long as you know the URL for a file, you can create a link to it.


Putting an image in your document

Images that appear on a Web page are called in-line images. When you have the image ready to be placed in your document, you must provide the path/location or complete URL of the image. The HTML tag is as follows

<img src="path or URL of image file">

For example, <img src="http://www.dnstc.com/images/logo.gif">

Where "img src" stands for image source followed in quotes by the URL of the image. In this particular example, it is an image called "logo.gif" that is located on the Web server "www.dnstc.com" in the directory "images".

If the image happened to be in the same directory as the document you are working on, you would simply reference the name of the file without needing the complete URL.

For example, if you have a gif called "mypicture.gif" in the same directory as the file, your reference would be

<img src="mypicture.gif">


Text and Image Alignment

Attributes of the image tag

Text can be "floated" to the right or left of an image. The align=left attribute will float text down and to the left of the image; align=right will float text down and to the right of the image.
The tagging looks like this:

<img src="http://www.dnstc.com/images/32x32/bshelf_clear.gif" align=right>This
is an image of a bookshelf. With this new align=right tag, the text can
be beside it instead of below it. It looks nice this way.<br clear=right>

<img src="http://www.dnstc.com/images/32x32/bshelf_clear.gif" align=left>This
is an image of a bookshelf. With this new align=left tag, the text can be
beside it instead of below it. It looks nice this way.<br clear=left>


Alternative text

Just in case a gif can't be displayed for some reason (network troubles or a user is viewing your document with Lynx, a line-mode WWW browser), it's a good idea to use the alt modifier to specify what should be printed if your graphic can't be displayed.

<img align=middle alt="Spiffy pic" src="http://www.dnstc.com/images/testgif.gif">


Making an image into a link

Anything can be a link--text or images. To make an image into a link you simply put the image tag inside the tag for a link. For instance, we could make the belltower image into a link to the NC State homepage so that when the user clicked on the belltower the NC State homepage would appear. The tag would look like this

<a href="http://www.ncsu.edu"><img src="http://www.ncsu.edu/images/ncsubell-red.gif"></a>

As you can see, the <img src> tag is inside the <a href></a> tag. When an image is a link it will have a blue box around it in some browsers. Because your user may be viewing your document with Lynx (and won't be able to access any images) it is a good idea to have text along with an image as a link.


 
 
 
 
 
 
Copyright © 2017, DNS Technology Consultants, Inc.
all rights reserved