We created this website to teach beginner "programmers*", even those with a poor base, how to use HTML but not only. We invite you to start the "programming*" course right away. But first, "the menu"...
This series of tutorials is made to give you some experience so that you can be capable to read and write HTML, to be able to save documents, and after that to see your work in a web browser. Unfortunately, this page does not have a section for teaching you how to use all base functions of a computer, so in this point of view you can ask for help from a friend: Before you continue learning HTML, you must:
Sorry to disappoint you, but HTML programming does not exist because HTML is not a programming language. It is a markup language. So it simply warps up content and nothing more
Below I have made a shortlist of the most used HTML codes. You can add this page to favorites to get back here easier when you do not know how to create an HTML code or just do not remember it.
The main HTML elements are <html>, <head>, <title> and <body>. Below is a simple example of how to build a website.
html<html>
<head>
<title>My first website using html codes!</title>
</head>
<body>
Hi guys! Here I put the contents of the HTML page.
</body>
</html>html<p>This is a simple HTML paragraph.</p>
<p align="left">This is a left aligned paragraph.</p>This is a simple HTML paragraph.
This is a left aligned paragraph.
To align the html elements we will use the align label with the attributes: left, right, center, justify.
html<h1>This is the HTML tag for the biggest title</h1>Other tags to define titles or headers in html are: h1, h2, h3, h4, h5, h6. The title defined with h1 is the biggest and the one defined with h6 is the smallest.
<br /> is a Linebreak. The space between "br" and "/" is the difference between HTML 4 and valid XHTML code.
<hr /> is used to draw a horizontal line. The space between "hr" y "/" is the difference between HTML 4 and valid XHTML code.
Here is a simple HTML list example:
html<ol>
<li>The first html element in the lista</li>
<li>The second html element in the list</li>
<li>The third html element in the list</li>
</ol>The example above is an example of ordered html list. Other html lists are: unordered and definition list.
html<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Go to top </a> (<a name="top"></a>)
<a href="mailto:admin@exemplu.com" >Contact us</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>Above, you have an example of a normal HTML link, a link between two sections on the same page, a link that links to an email, and a link linking an image. Although no longer used in HTML deserves mention.
html<base href="http://www.tutorialehtml.com/">Basehref has been removed from the index tags HTML 5.
html<img src="img//html_image.jpg" alt="Html Image" width="100" height="50" align="center" />It is recommended, to align images using CSS. This would transform the HTML code above into:
html<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />This is just one example of HTML code used to create a form. It is what a user might use to enter information. But to process such information you need a PHP file (for example) that sends the info to the database, mailed, etc.
html<form method="post" name="myform" action="process.php">
<!--text fields used to enter information-->
<input type="submit" value="Send">
<input type="reset" value="Delete" />
</form>Below are a few examples of HTML text fields.
html<input type="text" size="10" maxlength="40" name="name"> --> regular text field
<input type="password" size="10" maxlength="10" name="pass"> --> password field
<input type="radio" name="color" value="red"> --> radio button
<input type="checkbox" name="check" value="yes"> --> checkbox
<select name="select"> --> simple select list / drop-down list
<option>Html 4.1</option>
<option>Html 5</option>
</select>The basic structure of a table in HTML is as follows:
html<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
<tr>
<td>Fila 1 Celda 1</td>
<td>Fila 1 Celda 2</td>
</tr>
<tr>
<td>Fila 2 Celda 1</td>
<td>Fila 2 Celda 2</td>
</tr>
</table>Bgcolor is used to set the background color. Here I leave a few examples of how to use it:
html<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.To add a background image will use the following html code.
html<table background="img/pattern.jpg">html<!-- Este es un simple comentario html-->To insert music or sound in a HTML document use embed tag, as follows
html<embed src="example.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />To insert video in a HTML document use embed tag, as follows:
html<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>html<b>Bold HTML text</b>
<strong>Strong HTML text</strong>html<i>Italic</i>
<em>Emphasized</em>Exponent, index, and cut text. Although not widely used, it is worth mentioning.
html<sub>Index!</sub>
<sup>Exponent</sup>
<del>Cutted text</del>The form below is used to upload a file to the server. Do not forget that it is just the HTML part. To make it functional you should process it using PHP, asp, or any other server-side language.
html<form method="post" action="process.php">
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" />
<input type="submit" value="Upload">
<input type="reset" value="Reset" />
</form>