Home » Internet » Web Programming » HTML

HTML Basics Tutorial

Ranked #1,106 in Internet, #61,182 overall

What's HTML?

HTML (HyperText Markup Language) is a markup language that is used to take care of the graphical look ( design ) of webpages and to markup the contents of webpages. HTML works with, so-called, 'tags' that can be used to markup text or create other graphical things for your webpages (adding images, links, tables, etc.).

Previews added!

Table of Contents

How to create a HTML webpage?

To create your own HTML webpage you need to create a file with the HTML extension ( e.g. 'filename.html' ). So for example: create a new text file ( e.g. "untitled.txt" ) and rename it to anything with a HTML extension ( e.g. "webpage.html" ). If the extension of files is not displayed, you might want change this by going to Start > Control Panel and then click 'Files and Icons' and go to 'Display Options' and uncheck 'Hide extension of known filetypes'. An alternative would be to create a text file, then open it in notepad and go to File > Save As and then change the Filetype from 'Text Files' to 'Any files *' and then save it as 'webpage.html' (replace 'webpage' by any desired filename, just make sure it has the .html extension).

Knowing this, we can start writing HTML inside of this file. Open the HTML file with notepad. Now we're ready to write HTML inside of this file. A HTML webpage usually starts and ends with the HTML tag. In general tags are formed with the < and > symbol, where < opens the tag and > ends the tag and between it we write the name of the tag. However: some ( or should I say: many ) HTML tags consist of a start and end tag. The 'end tag' has a slashforward (/) in it. So in general:

<begin tagname>
</end tagname>

Now if we go back to the tag that indicates the begin and end of a HTML webpage, with the tagname 'html', we can now easily construct it:

<html>

</html>

Inbetween of these HTML tags we write our HTML code. We can split our HTML code in another 3 parts: a head-, body- and footer part:

<html>

<head>

</head>

<body>

</body>

<footer>

</footer>

</html>

Inside of the head part of the webpage we can create a title for the webpage (which will be displayed in the browser tab name and browser topbar). We can use the 'title' tag to do this:

<title> My First HTML Webpage! </title>

We have to put this inside of the head part - inbetween of the head tags. We can also give the webpage a background color by adding the bgColor attribute to the body tag of the webpage, all together:

<html>

<head>
<title> My First HTML Webpage! </title>
</head>

<body bgColor="blue">

This text will be displayed on my webpage! The background color is now blue, how wonderful. For color codes check out this webpage.

</body>

<footer>

This text will be displayed on my webpage, as well! Just on the same place as the other text, so the foot tags are just for the style of the code and do not have any effect on the text put in between of it. Therefore the footer tag isn't used a lot, more essential are the html, head and body tags.

</footer>

</html>



Preview: Click here

Marking up text.

To markup text in HTML you can use several tags. Each markup has its own tag for it;.

b tag
The b tag makes the text that's put in between of the begin and end tag bold:

<b>This text is bold now.</b>

which outputs:

This text is bold now.

i tag
The i tag makes text that's put in between of the begin and end tag italic:

<i>This text is italic now.</i>

which outputs:

This text is italic now.

u tag
The u tag makes text that's put in between of the begin and end tag underlined:

<u>This text is underlined now.</u>

which outputs:

This text is underlined now.

del tag
The del tag makes text that's put in between of the begin and end tag crossed out (line through it):

<del>This text is put a line through now - 'deleted'.</del>

Click here for preview

Creating blank lines and paragraphs.

To create blank lines in HTML the br tag is used:

This is line 1. <br /> This is line 2.

which outputs:

This is line 1.
This is line 2.

Note: Simply putting a blank line into the code won't work in HTML and therefore the br tag is required to put a blank line inbetween different sentences. At squidoo the text filled into the textareas is automaticly converted and blank lines are therefore automaticly converted to br tags.

To add extra spaces in between words the syntax &nbsp; is used ( simply hitting spaces won't work unless the text is put between pre tags - the same goes for enters ). E.g.:

this will work:

word1 &nbsp; &nbsp; word2 <br /> word3 &nbsp; &nbsp; word4

but this will work too:

<pre>word1     word2
word3     word4</pre>

To create a new paragraph ( which means: a paragraph is seperated from the rest of the text by a larger blank line ) use the p tag:

<p>This is a heading.</p>

which outputs

This is a paragraph.



Note: the p begin tag can also be used alone ( without an end tag nor text ) to create a larger blank line.

Creating links.

To create a link in HTML simply use the following tag:

<a href="url" target="target">link text</a>

Where 'url' is the url the link points to and 'link text' is the text to be displayed for the link. The target attribute is optional: if you like to have the link opened in a new window for example, you could use target="_blank". You can also leave the target attribute out of it and it will just open the link in the current tab. So for example:

< a href="http://www.squidoo.com">Click here to go to Squidoo.com!</a>

outputs:

Click here to go to Squidoo.com!

Creating lists.

To create a list in HTML we can use the following tags:


  • ul - creates an unordered list.

  • ol - creates an ordered list.

  • li - adds a list item to the unordered or ordered list.


So for example we could create an unordered list with 3 items in it:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Which outputs:


  • Item 1

  • Item 2

  • Item 3


But we could also make it an ordered list:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

which outputs:


  1. Item 1

  2. Item 2

  3. Item 3

Creating forms.

Forms can be created in HTML using the form tag:

<form method="method" action="action" name="name">
</form>

where method = the way to submit the form data ( this can be POST or GET (recommends POST for forms) ) and action = the page to submit the form to (this page will be loaded after form submission) and name = optional name for the form ( this way the form fields can be accessed easily dynamicly using Javascript ).

However a form would be pretty useless without any input fields and fortunately these can be created with the input tag:

<input type="type" name="name" value="value">

where type = the type of input field, which can be for example:


  • text - a text input field (most common type

  • submit - submit button to submit the form with

  • radio - clickable circle, in one form only 1 radio input field can be selected

  • checkbox - clickable square, in one form multiple checkboxes can be checked

  • hidden - a hidden input field that cannot be seen by the user (nor altered) but IS submitted by the form


Note: there are more html input types which are not mentioned ( as they're less common or more 'complicated' ) such as files, images and reset.

further the name and value of the input field are optional; the name however is pretty essential for the submission as input fields are submitted by their name and corresponding value. The value that can be set for the input field is just a beginvalue (that can be changed by the user that fills in the input field).

To make an input field uneditable the READONLY attribute can be added to the input tag. To actually disable an input field (=uneditable AND not sent through form submission) use the DISABLE attribute. For example:

<input type="text" name="field1" value="test" READONLY>
<input type="text" name="field2" value="test" DISABLED>

When creating a form: put all input fields for the form in between of the form tags. So an example of a valid form could be:

test.html

<form method="POST" action="test.html">
<input type="text" name="test">
<input type="submit" name="submit_button" value="Submit Form!">
</form>

However, usually the action of a form is to a PHP file (sometimes CGI or asp is used, but PHP is the most common way to handle form submission data). If you're interested to learn more about PHP, please check out the PHP basics tutorial.

Creating headings.

HTML has 6 headings tags ( even though you could create them manually as well by styling with CSS ): H1 through H6. Where H1 is the largest heading and H6 the smallest. For example:

<h1>This is a large heading!</h1>

<h6>This is a very small heading</h6>

Click here for a preview

Creating images.

To 'create' an image in HTML we can use the img tag:

<img src="img path or url" border="px size">

where 'img path or url' is the path from the current directory to the img ( for example: images/my_image.jpg ) or the url to the img ( for example: somewebsite.com/images/my_image.jpg ). The border is not necessary to be set but is optional. An example of usage:

<img src="http://img98.imageshack.us/img98/3513/wlogo.png">

which outputs:



It's also possible to set a width and height attribute for the image. If only the width attribute is set, the height is automaticly generated ( keeping the same width:height relation as the original image ):

<img src="http://img98.imageshack.us/img98/3513/wlogo.png" width="50">

which outputs:



We could also combine the a href tag and the img tag to create a link for the image:

<a href="http://www.squidoo.com/lensmasters/webcodez"><img src="http://img98.imageshack.us/img98/3513/wlogo.png" border="0"></a>

which outputs:



Note: We set the border=0 attribute for the image because when linking an image it automaticly gets a border which isn't desired in this case.

Creating iframes.

It's possible to display (multiple) webpages inside of your webpage (in a so-called 'iframe'). We can use the iframe tag to do this. However I do not recommend using (i)frames if not necessary because it is inefficient and may not be supported HTML anymore in future (in fact, (i)frames are getting outdated, just like tables).

<iframe src="url" width="px width" height="px height"></iframe>

Where url is the url of the webpage to display within the iframe and px width/px height is the size of the iframe in pixels (optional).

Creating tables.

Before using tables in HTML, please consider the use of divs instead. HTML tables are slow and outdated and getting more and more replaced by HTML divs. Especially when it comes to creating the layout of your webpage, I do not recommend using tables anymore. When using divs it may however require some more knowledge as for CSS styling, but it's worth it.

Anyway, tables in HTML can still be useful for displaying data easily within a table. To initially create a table use:

<table border="px border" width="px width" height="px height">

</table>

Where the border, width and height are optional and in pixels when supplied. A table consists of rows and cells within these rows. To create a row within the table we can use the tr tag and to create a cell within such row we can use the td tag, for example:

<table border="1">
<tr>
<td>Row1 Cell1</td>
<td>Row1 Cell2</td>
<td>Row1 Cell3</td>
</tr>
<tr>
<td>Row2 Cell1</td>
<td>Row2 Cell2</td>
<td>Row2 Cell3</td>
</tr>
</table>

Unfortunatelly tables cannot be used within Squidoo Text Modules and therefore I cannot supply you with a preview right here but you may want to check out the preview here.

Creating divs.

Divs are sort of "boxes" that can hold different contents of your website. To create a div the div tag is used:

<div id="optional id">
</div>

Inbetween of the begin div tag and end div tag you put the content for the div ( text e.g. ). Without any CSS styling all divs would be displayed below eachother. However without any styling divs would be pretty useless and therefore some CSS knowledge is pretty much a must in order to (efficiently) work with divs,

Some examples of styles that can be set for a div are: width, height, border, background(-color) and float (=position of divs relative to eachother, e.g. left from the previous divs or just below them). The usage is:

<div style="...">
</div>

Where ... should be replaced by the CSS styles, for example:

<div style="width: 500px; height: 250px; border: 1px solid black;">
Some text for the div to display,
</div>

More about CSS styling in the next tutorial about the CSS basics.

Creating meta tags.

Meta tags can be used to supply search engines with information for the listing of your webpage. In general, a meta tag is formed like this:

<meta name="name" content="content" lang="lang">

where name is the name of the meta tag ( e.g. keywords ), content is the 'value' of the meta tag ( e.g. keyword1,keyword2,keyword3 ) and lang is the language in which the content of the meta tag is written ( e.g. en ). So, we could for example have a meta tag supplying the search engine with keywords for our webpage like this:

<meta name="keywords" content="keyword1, keyword2, keyword3" lang="en">

More types of commonly used meta tags are (by name):


  • description - for supplying the search engines with a description of your webpage, e.g.:

    <meta name="description" content="This is a description for my webpage." lang="en">


  • author - for supplying the search engines with the author of the webpage, e.g.:

    <meta name="author" content="Webcodez" lang="en">


  • robots - If you wish your website not to be crawled by search engines, then the robots meta tag can be used which can have multiple values, most importantly: none ( website won't be index and links on webpages won't be followed by crawler ), index or noindex (crawler will or will not index the webpage), follow or nofollow (crawler will or will not follow the links on the webpage):

    <meta name="robots" content="(no)index, (no)archive, (no)follow">


Note: Do make sure you put any meta tags in the head-part of your webpage ( between the head tags: <head> and </head> ).

You might also like ...

Loading

Learn more HTML from books

Loading

Learn more CSS from books

Loading

Comments & Questions

Got any questions about the tutorial or just want to comment? This is the place to do so.

  • Ladymermaid Feb 25, 2012 @ 12:18 pm | delete
    There is always so very much to learn when you work online. I have definitely got to write it all down one day because I am always loosing the html code that I need.
  • StaCslns Feb 16, 2012 @ 7:49 am | delete
    Thank you! You made this easy to understand! It's obvious you took your time to help us understand html.
  • cffutah Feb 7, 2012 @ 8:34 am | delete
    Some great tips for others, well done.
  • JeriBaker Nov 15, 2011 @ 8:21 am | delete
    Great information. I am teaching myself as I go along, and I have bookmarked your lens. I am sure I will refer to it often. Thank you.
  • canoz Oct 18, 2011 @ 4:59 am | delete
    Thank you so much for this information. It's a simple and basic explanation for me to start with that wasn't too overwhelming! Gives me a lot to play with while I'm finding my way with lots of other new things as well! ;-)
  • Load More
Show All

by

webcodez

"Give a man a program and you'll frustrate him for one day. Teach a man to program and you'll frustrate him for a whole lifetime."

webcodez
GameHeroes more »

Feeling creative? Create a Lens!

Explore related pages

Related Tags