Basic HTML Tutorial for Beginners
Translated by
ScribdTranslationsBasic HTML Tutorial for Beginners
Translated by
ScribdTranslations15-7-2012
Let's go HTML TUTORIAL
BASIC HTML|Carlos
HTML Tutorial
Year of National Integration and the Recognition of Our
Diversity
Research work: 1
HTML TUTORIAL
Autor:CHATA YAURI, CARLOS
HTML Tutorial
Introduction to HTML
What does HTML mean? And a first example of this manual.
2
What are HTML files?
HTML (HyperText Markup Language) or 'Markup Language for'
Hypertext.
HTML files must have an html or htm extension.
To create an HTML file, you only need a text editor.
An HTML file is composed of tags.
The tags tell the browser (e.g., Internet Explorer, Firefox,
Mozilla, etc.) how to display the page.
Let's do a little test!
If you are using Windows, open the "Notepad".
If you are using a Mac, open "Simpletext".
Write in the same, the following text:
Save the file as "[Link]" (the extensions ".htm" or ".html"
they have the same meaning and indicate that it is an HTML file).
Open the Internet browser (Internet Explorer, Firefox, Opera, etc.).
Select "File" and then "Open."
A window will open, select 'Browse' and locate the file that
You just saved '[Link]' - select it and press 'Open'.
Now you see the address, for example "C:\My
Documents\[Link]". Press "OK" and the browser will display the
page.
HTML Tutorial
Let's explain the example
The first tag of the file is <html>. This indicates to the browser that it
It is about an HTML file. To close the file we use </html>. Everything that
it is located between the two tags is the HTML code of the page.
Then we see the <head> tag. What follows until its closing
</head>, it is the header of the document and is not displayed on the screen. Here
we put information such as the page title (<title>My first
web page</title>, keywords for search engines, a
description of the page and other data of the document.
Between the <body> and </body> tags is the body of the document.
y el contenido que se coloque en esta sección es el que veremos en pantalla,
Hello everyone.
Note: observe that all closing tags are different from those of
opening by having '/' before the name.
HTML Tutorial
HTML elements and tags
HTML tags are responsible for shaping our site.
4
What are the elements and tags of HTML?
Elements are declarations to visualize or shape a page.
Web.
Tags are marks inserted in an HTML document.
to provide information about a unit or content.
Basic rules
The tags are enclosed between the signs "<" and ">".
They usually come in pairs <p> and </p>.
The first is for opening and the second is for closing.
The text found between two tags is the content of
element.
The labels are not case sensitive, that is
<b> is the same as <B>.
HTML Tags
Let's see an example.
This is an HTML tag:
HTML Tutorial
The HTML element begins with the opening tag <b> (the tag that gives us
show the text in bold.
The content of that element is: This text is in bold.
The end of the HTML element is with the closing tag </b>.
Another HTML element in the example is:
The HTML element starts with the opening tag <body> (tag that 5
define the body of the document.
The content of that element is: Hello everyone. <b>This text is in
bold
The end of the HTML element is with the closing tag </body>.
What are the attributes of the tags?
Many tags have attributes. They provide more information.
to the HTML elements.
Attributes always follow the structure: name="value".
Attributes always go in the opening tag.
Values should always be placed in quotes.
An example of the attributes would be:
A piece of advice regarding the use of lowercase letters.
Although HTML accepts both uppercase <B> tags and lowercase
<b>, the World Wide Web Consortium (W3C)recommend the use of lowercase letters.
In addition, XHTML (the next version of HTML) only accepts lowercase.
That is why we recommend getting used to using lowercase when
write your HTML codes.
HTML Tutorial
Basic HTML Tags
The simplest and most commonly used tags in HTML.
Headings
6
They define the size of a title or header.
h1 gives us the largest font type.
the smallest font size.
HTML automatically adds a space before and after each title.
As it is used as the title of a web page, it is of utmost importance.
what is one of the parameters that Google takes into account when indexing
your site.
Paragraphs
Paragraphs are defined with the <p> tag.
HTML Tutorial
Comments
The tag <!-- ... --> is used to insert a comment within the code
that we are writing. It is ignored by the browser at the moment.
to read it. Comments help us better explain the code and are for
great help when we need to edit it.
Note that the exclamation mark is placed only at the beginning of the code.
Line break
The line break is defined with the tag<br>. It is used when
we want to end a line without needing to end the paragraph. The
label<br>forces a line break wherever we place it.
Draw a line
The <hr> tag allows us to draw a horizontal line like those that separate
the different sections of this tutorial.
The <hr> tag is self-closing.
HTML Tutorial
Table with basic labels
8
HTML Tutorial
Text format with HTML
Choose how to decorate and display the texts on your site.
9
Basic text format
HTML allows us to define the display format of the text on the screen.
Very useful when we want to highlight or emphasize a particular text.
Also very used to underline or write subscripts or superscripts.
These are just a few examples of what we can do with these elements.
To do this we use the following labels:
HTML Tutorial
Tags to shape the text
10
Structured text tags
These tags are commonly used to display codes of
programming.
Etiquetas de citaciones y definiciones
HTML Tutorial
Special Characters in HTML
Use of accents, opening question and exclamation marks, tildes, space
in white, etc.
11
Special characters
Many times we need to include in our texts signs that have a
special meaning in HTML (for example, "<" - less than). To be able to display them
we must use his code name.
The names of the entities are composed of the sign (&), then the
name of the entity and at the end (";" - semicolon). The numbers of these
characters are composed of (&), then (#- numeral), the number of the
entity and at the end (';' - semicolon).
For example, to display the sign "<" we must write <o<.
The most common use of special characters is the whitespace. If in
a text contains 5 successive blank spaces, HTML automatically removes
4. To insert blank spaces we use " " and HTML will leave them in its
place.
Another very common use is to insert accents into the html code through
of the entity numbers
HTML Tutorial
Frequently used special characters
12
HTML Tutorial
Links in HTML
The most important property of the Internet is the ability to connect with each other.
with the others.
13
What are Links?
Links allow us to connect with others
documents:
an image
a video
a sound file
websites (another website)
send an email
For this we must use the <a> tag which comes from the first letter of the
anchor
The tag <a>has a closing</a>.
Let's see an example
We are going to create a link to the home page of [Link]
The <a> tag indicates that it is a link.
The attribute href="[Link] indicates the address
where we will connect. The text The home of Virtualnauta is the one
will appear on screen.
The tag</a>is the closing tag.
HTML Tutorial
The target attribute
It is used to define where we want the document to open when pressing
about the link.
The example below will open the document in a new browser page.
14
The name attribute
This attribute is used to define a specific location within the
page.
Let's assume we define a link destination called 'destination-one' in the
file "[Link]".
This creates a link destination around the text: Chapter 1.
Once the destination is defined, we can create a link to it from the same.
document or from a different one, using a character '#' followed by the
name of the element.
For example:
Or in case the link is defined in the same document:
Creating a link to an email
It is used in case we want a link to send an email.
As soon as we click on that link, it will automatically open the
default email program that we have defined.
HTML Tutorial
mailto: indicates the email address to which it is addressed, in this example:
alguien@[Link].
15
A link from an image
Many times we want to use an image as a link to another document. To
we must place the <img> tag between the <a> and </a> tags in
place of the text.
Tags and attributes of links
HTML Tutorial
16
HTML Tutorial
17
Standard attributes
If you want a complete description, go to: standard attributes.
Intrinsic events
HTML Tutorial
Frames in HTML
We divided the page into smaller parts and in each of them we visualize
different documents.
18
What are frames?
Frames allow authors to present documents
with multiple views.
This allows certain information to remain visible while other views are
are displaced or replaced.
Each view is an independent document from the others.
The framese tag
The <frameset> tag is used to divide the browser window into
different frames that can be of different sizes.
Each frameset defines a group of rows and columns.
The frame tag
The <frame> tag defines which document we will place in each frame.
In the example, we divide the screen into a column of 25% and another of 75%.
The first column contains the document '[Link]' and the second
column the document '[Link]'. The <frame> tag should not have
closing label.
HTML Tutorial
The noframes tag
The <noframes> tag displays text for browsers that do not
support frames.
is placed inside the frameset tag
if the browser supports frames, the text of <noframes> is not displayed
will show
if we use the<noframes>tag, the text must be between the tags
<body> </body>
19
The iframe tag
The <iframe> tag is used to create an inline frame that contains
another document.
That is, I can display a window that contains another web page.
within the page we are designing
In this example, we can see that the result window is
showing the main page of [Link].
HTML Tutorial
Tags and attributes of frames
20
HTML Tutorial
21
Standard attributes
Intrinsic events
HTML Tutorial
HTML tables
We use them to compose a site or simply as a data table.
What are HTML tables?
22
Tables are a very useful tool for presenting data in tables and for design.
text and graphics of an HTML page.
Characteristics of tables
We define tables with the <table> tag.
The table is divided into rows defined by the <tr> tag.
And in turn, each row divided into cells defined with the <td> tag.
Cells can contain text, images, forms, lists, others
tables, etc.
Edges of the tables
To visualize the borders of a table, we need to add the attribute
border along with the value expressed in pixels, otherwise they will not be visible
the borders that divide the cells of the table.
HTML Tutorial
Let's see an example without borders:
23
Note: by not placing the border attribute, the borders are not visible but the
table exists.
Table headers
The headers of a table are defined with the <th> tag.
The <th> tag always displays the headers highlighted.
Cell margins
It is the space that is between the edges of the cell and its content.
We define the margins with the attribute cellpadding.
HTML Tutorial
24
Note: in this example we can see that the attribute cellpadding leaves 20
minimum pixels between words within each cell and the edges of the
same.
Spacing between cells
It is the space that is found between cell and cell.
It is defined with the attribute cellspacing.
HTML Tutorial
Labels and attributes of tables
25
HTML Tutorial
26
HTML Tutorial
27
HTML Tutorial
28
HTML Tutorial
Lists - Listings
Lists are ideal for menu design.
What are HTML lists?
29
Lists allow us to organize or enumerate data or elements to facilitate their
reading.
We have three types of lists:
Ordered.
Disordered.
Of definition.
Ordered Lists
They are those that order the list by placing numbers, letters, or signs in front.
Ordered lists start with the <ol> tag and for each of the
items from it, we use the <li> tag.
Unordered Lists
Present the list by preceding it with a dot, square, or black triangle.
Unordered lists start with the <ul> tag and for each of
For the items, we use the <li> tag.
HTML Tutorial
Definition lists 30
They are used to define terms.
Definition lists are represented with the <dl> tag.
The terms of the same with<dt>.
The definition of those terms begins with <dd>.
HTML Tutorial
Labels and attributes of lists
31
HTML Tutorial
HTML forms
Practical guide on how to design HTML forms for your site.
What are forms used for? 32
Forms are used for the user to enter data.
These data are sent to an agent for processing (e.g., to a
web server, to a mail server, etc.).
The form label
Inside the <form> tag is the form.
Users interact with the forms through the so-called
controls.
Types of controls:
Buttons
Checkboxes
Radiobuttons (radio buttons)
Menus
Text input
File selection
Hidden controls
Object controls
Inside the <form> tag, there is the action attribute. This gives us
It will specify the document that will handle the completed and submitted form.
We also have the attributemethod. It defines the method for us by
which will send the user's data to the server.
The input tag
Defines us the register where the user can enter the data.
The attribute type specifies the type of control to create.
Among them are the following values:
Text
Create a control that allows us to enter text in a line.
HTML Tutorial
33
Note: in this example we can observe the following:
action="[Link]"--> indicates that the file [Link] is the
responsible for manipulating the data that the user entered in the form
method="get" indicates that the form data will be sent
by theget method
name="nombre"--> assigns a name to the element that then
can be used in scripts or in style sheets
Radio buttons
They are used when we want the user to choose a single option from among a
series of possibilities.
Note: in this example we can observe the following:
action="[Link]"--> indicates that the file [Link] is the
in charge of handling the data that the user entered in the form
method="post" --> indicates that the form data will be sent
for thepost method
name="edad"--> we must use the same name (in this case
"age") for all elements of the same radio control.
value="mayor"--> define el valor del elemento<input>
Tutorial de HTML
Checkbox
Allows the user to choose multiple options from all the possibilities.
34
Note: in this example we can observe the following:
action="[Link]"--> indicates that the file [Link] is the
in charge of handling the data that the user entered in the form
method="get" --> indicates that the form data will be sent
by theget method
name="pasa"--> we must use the same name (in this case
"passes") for all the elements of the same checkbox control.
value="tv"--> define el valor del elemento<input>
Password
It works the same as text, but the input text is presented through a
serie de asteriscos. Es utilizado generalmente para ingresar contraseñas.
Submit
Data submission button of the form.
Reset
Reset button. When pressed, it resets all controls to their
initial values.
HTML Tutorial
35
Note: In this example we can observe the following:
action="datos_personales.php"--> tells us that the file
personal_data.php is responsible for manipulating the data that the
user entered in the form
method="post"--> indicates that the form data will be sent
for thepost method
name="name" - name="secret"--> assigns a name to
element that can later be used in scripts or stylesheets
value="Enviar"--> define el texto del botón"submit"
value="Borrar"--> define el texto del botón"reset"
The select and option tags
The <select> tag is used to create a dropdown menu.
Each option offered by the menu is represented by the <option> tag.
Note: in this example we can observe the following:
HTML Tutorial
action="[Link]"--> indicates to us that the file
[Link] is responsible for manipulating the data that the user
entered in the form
method="get"--> indicates that the form data will be sent
for theget method
name="continent"--> assigns a unique name to the menu
drop-down
value="america"--> define el valor del elemento<option>
The textarea tag
36
It is used to create a multiline text input control.
The attributes rows and cols indicate the number of rows and columns that
it will have the text area box.
Note: in this example we can observe the following:
action="[Link]"--> tells us that the file [Link] is the
in charge of manipulating the data that the user entered in the form
method="post"--> indicates to us that the form data will be sent
for thepost method
name="eltexto"--> assigns a name to the textarea element
HTML Tutorial
Form tags and attributes
37
HTML Tutorial
38
HTML Tutorial
39
HTML Tutorial
40
HTML Tutorial
Images in HTML
Images, graphics, and photos bring life and color to web pages.
How do we insert images in an HTML file? 41
To insert images on a site we will use the tag <img>.
This label is empty, meaning that we must use it with the src attribute.
It shows the image. The <img> tag does not have a closing tag.
Let's see an example
If we have to insert an image that has the filename
"[Link]" and is located in the directory
[Link]/images/, so this would be the way to write the
code:
Note: the <img> attribute inserts the image using the src attribute
[Link] located at the address "[Link]/images/"
Alternative text for the image
It is commonly used when we want to visualize an explanatory text of a
image.
This text appears when hovering the pointer over the image or in many cases
when the browser, for some reason, does not display the images and in its
place this alternative text inside a box.
For this we are going to use the alt attribute.
HTML Tutorial
Image tags and attributes 42
HTML Tutorial
43
HTML Tutorial
Wallpapers
It is the background of every webpage.
The background attribute
If we want to design more attractive sites, we must use images or colors. 44
for the background of our pages.
The background is defined in the <body> tag.
To insert a background image, we must use the background attribute.
inside the <body> tag.
The value of this attribute is the URL of the image we wish to place.
If the image is smaller than the browser window, it will repeat.
as many times as necessary to cover the entire screen.
Examples
The bgcolor attribute
El atributobgcolorespecífica el color de fondo de una página HTML. El valor
it can be expressed with a hexadecimal number, RGB value, or
color name (in English).
This attribute should also be within the <body> tag.
Examples
Important!
The attributes background and bgcolor are approved in the latest
HTML version (HTML4 and XHTML).
Instead, we should useCSS background propertiesto write a
correct code of our site.
HTML Tutorial
ADDITIONAL INFORMATION:
The brands or labels
The parts of the label that are enclosed in '[]' are optional. A label
it always goes between "<...>". Optionally, it can have a set of
attributes and values. Some attributes do not have an associated value; these
attributes are often referred to as compact. In case of having a value
associated, the value of the attribute must be in quotes. The content of the
label can be text, or other labels. Some labels have no
content. Normally, all tags must be closed.
All the content of an HTML document is found between the tags
<html>
45
</html>. Each page is further divided into a header (delimited between the
head tags <head> </head>) and body (delimited between the tags
The information included in the header is not
renders when viewing the document. It is considered 'meta information'.
a good practice to include a title within the header of the web page,
using the <title> tag. This will be the title that our web browser
show in your bar. This title is also considered by search engines
Internet, like Google, when it comes to determining what our
page.
Special characters
As in any programming language, there are some characters in HTML that
it has special meaning, such as < and >. Therefore, they cannot
should not be employed directly in the HTML code, but should be used a
equivalent escape sequence. In the following table we show the
most common escape sequences:
HTML Tutorial
46
As you may have noticed, all escape sequences start with
an '&' and end with a ';'. Most modern browsers
they allow you to write accented vowels and characters like 'ñ' directly in
HTML. However, it is usually a good idea to be cautious and use the
escape sequences for compatibility with older browsers.