Intro to Basic Html
HTML is a hyper text Markup Language that allows Web publishers to create complex pages of text and images that can be
viewed by anyone on the Web. HTML files is a text file containing small markup tags. The markup tags tell the Web browser how
to display the page, also the HTML file must have an html or htm file extension. For example this page (file) you are viewing
right now is: "www.listto.net/basic_html.html", the name of the file is basic_html and the extension is .html. You can create
HTML files by using a simple text editor. You do not need any special software to create an HTML files. A Word processor
(such as SimpleText, or Microsoft Word) and a working knowledge of HTML is all you need to get started.
Html Elements
HTML elements are (HTML) tags that are
integrated into a text document. The tags tell the browser what to do, and what to show. HTML tags are usually English words
or abbreviations, but they are distinguished from the regular text because they are placed in small angle brackets. HTML tags are surrounded by the two characters < and >. These are called angle brackets. HTML tags normally travel in pairs like
<b> and </b>. The first tag in a pair is the start tag; the second tag is the end tag. Note the slash - / -
before the "b"; that's what distinguishes a closing tag from an opening tag. The text between the start and end tags is the
element content HTML tags. HTML tags are not case sensitive: <B> means the same as <b>. I always use lowercase
tags. Why? The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next
generation HTML) demands lowercase tags.
The basic HTML page begins with the tag <html> and ends with
</html>. The file has two sections, the header and the body.The header is enclosed by the <head> and
</head> tags and contains information about a page that won't appear on the page itself, such as the title. The body is
enclosed by <body> and </body> is where the action is. The main content will appears on the page within these
tags. Your basic document will look something like this:
<html>
<head>
<title>Title of your page</title>
</head>
<body> Page CONTENT </body>
</html>
|
HTML Basic Tags
The comment tag is used to insert comments in the HTML source code. You can use comments to explain your code, which can help
you when you edit it at a later date. A comment will be ignored by the browser.
<!-- This is a comment -->
The important tags in HTML are tags that define headings, paragraphs and line breaks.
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the
smallest heading. Heading tags will have an extra line break before and after the heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
|
Paragraphs are defined with the <p> tag. Paragraph tags will have an extra line break before and after the
paragraph.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
|
<br> or <br /> More often you will see the <br> tag written like this: <br />
This is because the <br> tag has no closing tag It breaks one of the rules, that all elements must be closed in future
HTML.
HTML Tag Attributes
HTML tags can have attributes. Attributes provide additional information to an HTML element.
Attributes always come as: name="value". Keep in mind that attributes are always specified in the start tag of an HTML
element. Here are three examples
1.<h1 align="center"> Aligns the header center.
2.<body bgcolor="yellow"> Makes the background color yellow.
3.<table border="1">Makes border around the table 1px. |
HTML Tables
Here are some basic "Table Tags"
<table> Makes a table
<th> Makes a table header
<tr> Makes a table row
<td> Makes a table cell
<caption> Makes a table caption
<colgroup> Makes groups of table columns
<col> Makes the attribute values for one or more columns in a table
<thead> Makes a table head
<tbody> Makes a table body
<tfoot> Makes a table footer
|
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data
cell. A data cell can contain one of the following; text, images, lists, paragraphs, forms, tables, etc. Table Border
Attribute; To display a table with borders, the border attribute is:( border="1" )
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>
|
Browser look:
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
| row 3, cell 1 |
row 3, cell 2 |
Headings in a table are defined with the <th>tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Heading #2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>
|
Browser look:
| Heading |
Heading #2 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
| row 3, cell 1 |
row 3, cell 2 |
HTML Formatting Tags
There are a lot of HTML elements for formatting, like bold or italic text.
Here are some examples of "Text Formatting Tags":
| <b>text</b> |
Bolds text |
| <i>text</i> |
Makes text italic |
| <small>text</small> |
Makes text small |
| <big>text</big> |
Makes text big |
| <strong>text</strong> |
Makes text strong |
| <em>text</em> |
Makes text emphasized |
| <sub>text</sub> |
Makes text subscripted |
| <sup>text</sup> |
Makes text superscripted |
| <ins>text</ins> |
Makes text inserted |
| <del>text</del> |
Makes text deleted |
Here are some examples of "Computer Output Tags":
| <code>text</code> |
computer code text |
| <kbd>text</kbd> |
keyboard text |
| <samp>text</samp> |
sample computer code |
| <tt>text</tt> |
teletype text |
| <var>text</var> |
Creates a variable |
| <pre>text</pre> |
preformatted text |
Here are some examples of "Citations, Definition, and Quotations Tags":
| <abbr>text</abbr> |
abbreviation |
| <acronym>text</acronym> |
acronym |
| <address>text</address> |
address element |
| <bdo>text</bdo> |
text direction |
| <blockquote>text</blockquote> |
<blockquote> long quotation</blockquote> |
| <q>text</q> |
short quotation |
| <cite>text</cite> |
citation |
| <dfn>text</dfn> |
definition term |
HTML Lists
List Tags HTML; ordered, unordered and definition lists.
<ol> Makes an ordered list
<ul> Makes an unordered list
<li> Makes a list item
<dl> Makes a definition list
<dt> Makes a definition term
<dd> Makes a definition description
|
Unordered list are a list of items which are marked with a bullet in front. Unordered list starts with the <ul> tags.
Each list item starts with the <li> tags.
<ul>
<li>bread</li>
<li>sugar</li>
</ul>
|
Browser look:
Ordered list are also a list of items which are marked with numbers. Ordered list starts with the <ol> tags. Each list
item starts with the <li> tags.
<ol>
<li>bread</li>
<li>sugar</li>
</ol>
|
Browser look:
- bread
- sugar
Definition list is not a list of items, but a list of terms and explanation of the terms.
Definition list starts with the <dl> tags. Each definition-list term starts with the <dt> tags, then the
<dd> tags starts each definition.
<dl>
<dt>Water</dt>
<dd>A clear colorless liquid</dd>
<dt>Land</dt>
<dd>The solid part of the Earth's surface.</dd>
</dl>
|
Browser look:
- Water
- A clear colorless liquid.
- Land
- The solid part of the Earth's surface.
HTML Frames
HTML document is called a frame, and each frame is independent of the others, also you can display more than one HTML
document in the same browser window. The <frameset> tag defines how to divide the window into frames and
each frameset defines a set of rows or columns. The values of the rows/columns indicate the amount of screen area each
row/column will occupy.
The <frame> tag defines what HTML document to put into each frame. In the example
the first column is set to 30% of the width of the browser window. The second column is set to 60% of the width of the
browser window. The HTML document "frame1.html" is put into the first column, and the HTML document "frame2.html" is put into
the second column.
<frameset cols="30%,60%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
Frame Tags
| Tag |
Description |
| <frameset> |
Makes a set of frames |
| <frame> |
Makes a sub window |
| <noframes> |
Makes a noframe section for browsers that do not handle frames |
| <iframe> |
Makes an inline sub window |
HTML Colors
HTML colors are hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).
| Color HEX |
Color RGB |
Color |
| #000000 |
rgb(0,0,0) |
 |
| #FF0000 |
rgb(255,0,0) |
 |
| #00FF00 |
rgb(0,255,0) |
 |
| #0000FF |
rgb(0,0,255) |
 |
| #FFFF00 |
rgb(255,255,0) |
 |
| #00FFFF |
rgb(0,255,255) |
 |
| #FF00FF |
rgb(255,0,255) |
 |
| #C0C0C0 |
rgb(192,192,192) |
 |
| #FFFFFF |
rgb(255,255,255) |
|
To veiw all HTML Colors go to our
References: Color Chart
HTML Images
HTML images tags start with the <img> and has no closing tag. To display an image on a page, you need the src attribute. Src stands for "source" and the value of the src attribute is the URL of the image.
<img src="url">
The URL points to the location where the image is stored (your server). An image named "black.PNG" located in the directory "images" on "www.listto.net" has the URL: http://www.listto.net/images/black.PNG . The browser will put the image where you place your image tag in your document.
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: Mouse on the black image
<img src="images/black.PNG" alt="The alt tag is BLACK" />
If the browser can't load images, the browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute to have a better description of the page to help improve search engine rankings. Also for people who have text-only browsers.
Image Tags
| Tag |
Description |
| <img> |
Defines an image |
| <map> |
Defines an image map |
| <area> |
Defines a clickable area inside an image map |
HTML Character Entities
Some characters have a special meaning, like the less than sign (<) that start of an HTML tag. You must insert character
entities in the HTML code If you want the browser to display these characters. A character entity has three main parts. 1.
ampersand (&) 2. Entity name or a # and an entity number. 3> Finally a semicolon (;). Remember not all browsers support the newest entity names. Here are the most common character entities.
| Result |
Description |
Entity Name |
Entity Number |
| " |
quotation mark |
" |
" |
| & |
ampersand |
& |
& |
| ' |
apostrophe |
' (does not work in IE) |
' |
| < |
less-than |
< |
< |
| > |
greater-than |
> |
> |
| |
non-breaking space |
|
  |
| ¡ |
inverted exclamation mark |
¡ |
¡ |
| ¢ |
cent |
¢ |
¢ |
| £ |
pound |
£ |
£ |
| ¤ |
currency |
¤ |
¤ |
To veiw all HTML Character Entities go to our
References: Character Entities
Backgrounds
The <body> tag has two attributes where your background can be a color or an image. The bgcolor attribute specifies a background-color. The value of this attribute can be an RGB value, a hexadecimal number, or even a color name. Also background attribute specifies a background-image. The value of this attribute is the URL of the image you want to use.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
<body background="http://www.listto.net/images/black.PNG">
HTML Links
HTML uses the <a> which is the anchor tag to create a link this anchor can point to a HTML page, an image, a movie, a sound file, and a lot more. The <a> tag is used to create an anchor to link from.
<a href="url"<Displayed Text</a>
The href attribute is the address to the document, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
<a href="http://www.listto.net/color_chart.html">Color Chart</a> =
Color Chart
With the target attribute can be define where the linked document will be opened. Here (target="_blank") below will open the document in a new browser window.
<a href=" http://www.listto.net/color_chart.html " target="_blank">Color Chart</a>
HTML Forms
HTML Meta Tags
Meta Tags are used to help index your pages. Search engines on the WWW will use the name and content attributes of the meta tag to index your pages. These tags go between the two head tag (not in the body tags). The description and keywords tags are the most important tags of all.
This meta element defines a description of your page. You can use capital letters in the description.
<meta name="description" content="ListTo: Basic Html Tutorial - Html Code, tags, table, frames, links, color codes, lists, images, special character, formatting, forms, HTML Tags, codes " />
This meta element defines keywords for your page. Do not use capital letters in your keyword. It will not help your search engine ranking at all.
<meta name="keywords" content=" listto, basic html code, tags, table, frames, links, color codes, lists, images, special character, formatting, forms, html tags, codes, listto.net " />
EXAMPLE:
<html>
<head>
<title>Title of your page</title>
<meta name="description" content="DESCRIPTION OF YOUR WEBSITE" />
<meta name="keywords" content="WEBSITE KEYWORDS" />
</head>
<body> Page CONTENT </body>
</html>
|
