We created this blog 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"...
- Beginner's guide to HTML - For those of you who are beginners in the way of creating a web page
- HTML full tutorial - For those of you who start the creation of web pages with some HTML base
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 an computer, so in this point of view you can ask for help to a friend: Before you continue learning HTML, you must:
- Know what is an notepad and how to use it
- Know how to open a file using internet Explorer (or any other browser, we recomend Chrome )
- Know how yo make and what represents a copy/paste
* does html programming even exists?
Sorry to disappoint you, but HTML programming does not exist because HTML it is not a programming language. It is a markup language. So it simply warp up content and nothing more
HTML quick reference guide
Below I have made a short list 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.
HTML - Elements
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 - Paragraph
HTML<p>This is a simple HTML paragraph.</p>
<p align="left">This is a left aligned paragraph.</p>
Demo
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 - Titles
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 withh1 is the biggest and the one defined with h6 is the smallest.
Html - Linebreak
<br /> is a Linebreak. The space between "br" and "/" is the difference between HTML 4 andvalid XHTML code.
HTML - Horrizontal rule
<hr /> is used to draw a horizontal line. The space between "hr" y "/" is the difference between HTML 4 and valid XHTML code.
HTML - Lists
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 - Links
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 - Images
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;" />
HTML - Forms
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>
HTML - Text fields
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>
HTML - table
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>
Html - Bgcolor
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.
Html - Background
To add a background image will use the following html code.
HTML<table background="img/pattern.jpg">
HTML - Comments
HTML<!-- Este es un simple comentario html-->
Html - Embed (Music and sound)
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" />
Html - Object (Video)
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 - Bold
HTML<b>Bold HTML text</b>
<strong>Strong HTML text</strong>
HTML - Italic
HTML<i>Italic</i>
<em>Emphasized</em>
HTML - Subscript, Superscript, Striketrough
Exponent, index and cutted text. Although not widely used, it is worth mentioning.
HTML<sub>Index!</sub>
<sup>Exponent</sup>
<del>Cutted text</del>
HTML - Uploading and hidden fields
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>
COMMENTS