Jump to content

Tutorial: Basic HTML


Guest

Recommended Posts

Tutorial: Basic HTML

This is a tutorial that will teach the typical newbie the basics of web design. First we will cover some of the basic tags that are used in HTML. Something to remember about HTML tags is that they all have opening and closing tags. Some do not require a closing tag, but most do. A closing tag can be identified by the “/” that it has in front of the word.

<html></html>

These tags surround everything in a web page.

<head></head>

These tags surround the header of the document. The header is the area where the meta tags, title, some scripts, and anything that you wish to preload are placed. Most of what is placed in the header will not be seen by those who view the page.

<body></body>

This is where the main content of a web page is placed. This section defines the majority of the visual appearance of the page. This tag has modifiers that can be used within it to change the general color scheme of the page. The basic modifiers that it can use are bgcolor (background color), text (text color), link (link color), vlink (visited link color), and alink (active link color).

Example:

<body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000"></body>

As demonstrated, all of the modifiers are included in the opening tag. Using those colors, all of the above would be black. We will discuss colors later in this tutorial.

<title></title>

The text contained by these tags will be the title of the page, and will be displayed in the title bar of the browser (usually this is the very top bar for the browser window).

Example:

<title>This is a test page</title>

The above will print “This is a test page” in the title bar of the browser.

<meta>

This is a meta tag. Meta tags are descriptive tags that help classify websites for search engines. Good meta tags are essential to any page that you wish to be found by others on the web. The meta tag has no closing tag. This tutorial will not cover them in their entirety, but will give a general overview of their basics.

Examples:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

This tag defines the language a browser should attempt to print the page as.

<meta name="keywords" content="keyword1, keyword2, etc…”>

This tag defines the keywords for a search engine to use when cataloging your site. It is not usually a good idea to repeat words as many search engines “blacklist” sites that do that.

<meta name="description" content="A generic description here.”>

This tag defines the description that will appear in a search engine’s results.

Those are the only three meta tags that are to be covered in this tutorial.

<div align></div>

These tags will define the position on the page of the objects they surround.

Example:

<div align=”center”>

Text

</div>

The above will center the word “Text” on the horizontal (X) axis of the page. The modifiers that the div tag can use are “center, left, right.”

<br>

A carriage return. This does not require a closing tag in basic HTML.

Example:

This is a test.<br>

This is a new line single spaced.

<p></p>

A new section. This is essentially the same as a dual carriage return.

Example:

This is a test

<p>This is a new line double spaced.</p>

<img src>

This is an image tag. It does not have a closing tag.

Example:

<img src="/image.jpg" alt="" width="30" height="30" border="0">

“/image.jpg” is the path to the image file. If the image file is in the same directory as the page that uses it, it does not need to identify the full path, however if they are in different directories, the full path must be defined. The above demonstrates a square image. Note that if you do not wish to resize the image (leave it at its default height/width) then you do not need to use the width and height modifiers. The same applies for the border modifier.

<a href></a>

These tags enclose a link.

Example:

<a href="http://www.test.com">Test</a>

The above will turn the word “Test” into a link to “www.test.com.” This can be used with either images or text.

<table></table>

These tags will create a table. They have modifiers that must be used which define the height, width, border, cell spacing (distance between cells in the table), and cell padding (distance from text to the cell wall).

Example:

<table width="100" border="1" cellspacing="0" cellpadding="0">

<tr>

<td></td>

<td></td>

</tr>

<tr><td></td><td></td></tr>

</table>

This is a two by two celled table. There are four cells total. The width of the table can be defined as pixels (as above) or as a percent of the total page (will resize with the page). This is done using <table width=”100%”>, which will make a table that spans the width of the page. Also, as demonstrated, there is more than one format that can be used. I prefer to use the first format, as I find it easier to read. However it all boils down to personal preference. This is common in HTML.

<style type="text/css"></style>

or, to link to an external CSS file:

<link rel=StyleSheet href="stylesheet.css" title="Stylesheet">

These tags are used to enclose a stylesheet. Stylesheets will be covered in another tutorial at a later time.

<script language="JavaScript"></script>

These tags are used to enclose a javascript. As with stylesheets, javascripts will not be covered in this tutorial.

Colors:

This section will teach you how to select colors for your web page. I will use black as my first example, as it was used earlier in this tutorial.

“Black” is represented by the number “#000000.”

Each color is represented in three pieces. 00-00-00.

The first 00 defines the amount of red that the color contains.

The second 00 defines the amount of green that the color contains.

The third 00 defines the amount of blue that the color contains.

The numbers are ascending, with 0 being the lowest and 255 being the highest. However the numbers are represented in hex, which means that 255 is actually represented as FF. Here is a brief breakdown of how hex differs from normal numbers:

Normal numbers go 0 thru 9. Hex numbers go 0 thru F as follows:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, F

Basically, hex has 14 possible variables where normal numbers have only 10.

So, knowing that, we can tell that black, which is “#000000” has no red, green, or blue. Thus it has no color, and is black. Here are a few examples of RGB colors. Pay attention to what is being altered.

#FF0000 – This is red. Note that the red placeholder is the only one modified, and it is at its highest possible value.

#00FF00 – This is green. Again, note the values and their locations.

#0000FF – This is blue. Getting the idea?

Now, following the present course, we know that black is the absence of color. That means that white is the presence of all colors, or #FFFFFF. Make sense?

Also, note that most browsers will recognize colors by names as well as by their values. That is to say that “#000000” and the word “black” will present the same result. However it’s still good to understand how the colors work, as it gives you more freedom to create the perfect shade.

An Example Web Page:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="keywords" content="keyword1, keyword2, etc…”>

<meta name="description" content="A generic description here.”>

<title>This is a test page.</title>

<link rel=StyleSheet href="stylesheet.css" title="Stylesheet">

</head>

<body bgcolor="#000000" text="#FFFFFF" link="#FF0000" vlink="#00FF00" alink="#0000FF">

This is my example website.<br>

<a href="http://www.test.com"><img src="/image.jpg" alt="" width="30" height="30" border="0"></a>

</body>

</html>

Well that’s the basic jest of it. I hope this helped, and remember that there’s a lot more to web design than I have shown here. This is literally just the tip of the iceberg.

Link to comment
Share on other sites

  • 5 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...