Tema 1: HTML
1. Estructura de una pgina web
Al comienzo de la pgina encontramos la etiqueta <!doctype html> para decirle al navegador
que tipo de documento es. Despus tenemos el tag <html> que indica donde comienza el
cdigo de la pgina. Cada etiqueta debe cerrarse, por ejemplo: <html></html> <html/>.
Normalmente la primera parte que encontramos dentro de <html> es la etiqueta <head> que
da informacin sobre la pgina y enlaza con otros ficheros (css, js,). Dentro de head,
encontramos la etiqueta <title>, que indica el nombre de la pgina (el nombre que aparece en
la pestaa del navegador). Las etiquetas meta ofrecen informacin como la codificacin del
texto (charset), el content-type (text/html), el viewport (escala, ancho de la pgina,). Por
ltmo, la etiqueta <style>, define el diseo, el css de la pgina.
Despues de head, encontramos el body, donde se definen todos los elementos de la pgina
(prrafos, formularios, tablas,). Podemos encontrarnos la etiqueta <div> que es una divisin
de la pgina. La etiqueta <h1> (o h2,,h6) sirve para definir los ttulos de la pgina. Por ltimo,
la etiqueta <p> se usa para definir un prrafo de texto. Tambin se pueden definir
hipervnculos de la siguiente forma:
<a href=link>hipervnculo</a>
2. Etiquetas de cabecera
Las etiquetas <h1>, <h2>,, <h6> sirven para definir los ttulos de nuestra pgina (h1 tiene un
tamao mayor que h2, y h2 mayor que h3,, sin embargo slo llegan hasta 6, si escribes <h7>,
escribir el texto a tamao normal).
3. Etiquetas de prrafo
HTML permite escribir texto directamente sin etiquetas, sin embargo no interpreta los saltos
de lnea y ms de un espacio, es decir, escribe todo el texto seguido. Por ello se usan etiquetas
como <p> para definir prrafos, <br/> para saltos de lnea y <hr/> para salto de lnea con una
barra divisoria.
4. Formato de texto
Para formatear el texto, disponemos de 4 etiquetas:
<strong> para negrita
<em> para cursiva
<u> para subrayado
<strike> para tachado.
5. Listas ordenadas y no ordenadas
Una lista no ordenada es de la forma:
Item1
Item2
Item3
Y se define con la etiqueta <ol>, para la lista, y con la etiqueta <li> para sus elementos.
Por otro lado, una lista ordenada es de la forma:
1. Item1
2. Item2
3. Item3
Y se define con la etiqueta <ul>, para la lista, y con la etiqueta <li> para sus elementos.
6. Imgenes
Podemos insertar dos tipos de imgenes, las
almacenadas localmente (<img
src=img/img.png/>)
y
las
almacenadas
en
la
web
(<img
src=https://i.ytimg.com/vi/RIPvcEwIQvU/hqdefault.jpg/>)
7. Formularios
Un formulario permite al usuario introducir informacin en la web. Se define con la etiqueta
<form>. Podemos usar mltiples elementos dentro del formulario:
Entrada de texto: <input type=text/>
rea de texto: <textarea></textarea>
Menu desplegable: <select><option></option></select>
Radiobuttons: <input type=radio>
Checkboxes: <input type=checkbox>
Botn de enviar: <input type=submit>
8. Links
Tenemos 3 tipos de enlaces:
1. Enlaces a otras webs: <a href=http://www.youtube.com>Enlace</a>
2. Enlaces a una pgina local: <a href=Pagina.html>Enlace</a>
3. Enlace a un punto de la pgina actual:
a. Primero definimos el ancla o punto: <a name=ancla>
b. Segundo definimos el enlace: <a href=#ancla>Enlace</a>
9. Tablas
Las tablas se definen con la etiqueta <table> y constan de tres elementos:
1. Cabeceras: <th>.
2. Filas: <tr>
3. Columnas: <td>
10. Entidades HTML
Las entidades HTML se utilizan para escribir smbolos como el del dlar, yen, euro, igual,
menor que,
Las entidades se definen as: &entidad;
11. IFrames
Los IFrames se utilizan para incluir partes de otras pginas en tu propia pgina (por ejemplo,
un vdeo de YouTube). Se definen de la siguiente forma:
<iframe src=HelloWorld.html></iframe>
12. Pgina web de ejemplo
<!doctype html>
<html>
<head>
<title>Test Web Page</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<a name="top/">
<!--####### HEADER TAGS #######-->
<h1>Header h1</h1>
<h2>Header h2</h2>
<h3>Header h3</h3>
<h4>Header h4</h4>
<h5>Header h5</h5>
<h6>Header h6</h6>
<hr/>
<!--####### PARAGRAPH TAGS #######-->
<h2>Paragraphs</h2>
<p>This is the first text line.<br/>This is extra text.</p>
<p>This is another paragraph.</p>
<hr/>
<!--####### FORMATTING TEXT #######-->
<h2>Formatting Text</h2>
<p><strong>This is a bold piece of text.</strong></p>
<p><em>This is a italic piece of text.</em></p>
<p><u>This is an underlined piece of text.</u></p>
<p><strike>This is a wrong piece of text.</strike></p>
<hr/>
<!--####### UNORDERED LISTS #######-->
<h2>Unnordered list</h2>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<hr/>
<!--####### ORDERED LISTS #######-->
<h2>Ordered list</h2>
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
<hr/>
<!--####### IMAGES #######-->
<img src="img/img1.png" height="100" />
<img
src="http://fastdecals.com/shop/images/detailed/15/eyebrowraise_happyface16.jpg?t=1434622821"
width="100"/>
<hr/>
<!--####### FORM #######-->
<h2>Form</h2>
<form>
<input type="text" value="value" name="text"/>
<input type="text" placeholder="placeholder" name="placeholder"/>
<input type="email" name="email"/>
<br/>
<textarea name="textarea">Content</textarea>
<br/>
<select name="select">
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
<br/>
<input type="radio" name="radiobutton"/>Radiobutton1
<input type="radio" name="radiobutton"/>Radiobutton2
<br/>
<input type="checkbox" name="ch1"/> Checkbox 1
<input type="checkbox" name="ch2"/> Checkbox 2
<input type="checkbox" name="ch3"/> Checkbox 3
<br/>
<input type="submit" value="BUTTON"/>
</form>
<hr/>
<!--####### LINKS #######-->
<h2>Links</h2>
<p><a href="http://www.youtube.com">YouTube</a></p>
<p><a href="HelloWorld.html">Hello World</a></p>
<p><a href="#top">Back to top</a>
<hr/>
<!--####### TABLES #######-->
<h2>Table</h2>
<table>
<tr>
<th>Names</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>Rob</td>
<td>33</td>
<td>Male</td>
</tr>
<tr>
<td>Kirsten</td>
<td>34</td>
<td>Female</td>
</tr>
<tr>
<td>Tom</td>
<td>3</td>
<td>Male</td>
</tr>
</table>
<hr/>
<!--####### HTML ENTITIES #######-->
<h2>HTML ENTITIES</h2>
<a>¥
<hr/>
<!--####### IFRAMES #######-->
<h2>IFrames</h2>
<iframe src="HelloWorld.html"></iframe>
<br/>
<iframe aling=left width="420" height="315"
src="https://www.youtube.com/embed/oVBXxlG5YBA" frameborder="0" allowfullscreen></iframe>
</body>
</html>
19/6/2016
TestWebPage
Headerh1
Headerh2
Headerh3
Headerh4
Headerh5
Headerh6
Paragraphs
Thisisthefirsttextline.
Thisisextratext.
Thisisanotherparagraph.
FormattingText
Thisisaboldpieceoftext.
Thisisaitalicpieceoftext.
Thisisanunderlinedpieceoftext.
Thisisawrongpieceoftext.
Unnorderedlist
Item1
Item2
Item3
Orderedlist
1.Item1
2.Item2
3.Item3
file:///C:/Users/BugaDM/Desktop/Curso%20Desarrollo%20Web/HTML/Clase%201/index.html?text=value&placeholder=sida&email=cancer%40sida.con&...
1/3
19/6/2016
TestWebPage
Form
placeholder
value
Content
Radiobutton1 Radiobutton2
Checkbox1 Checkbox2 Checkbox3
Opt1
BUTTON
Links
YouTube
HelloWorld
Backtotop
Table
Names
Rob
Kirsten
Tom
Age Gender
33 Male
34 Female
3 Male
HTMLENTITIES
<a>
IFrames
HelloWorld!
file:///C:/Users/BugaDM/Desktop/Curso%20Desarrollo%20Web/HTML/Clase%201/index.html?text=value&placeholder=sida&email=cancer%40sida.con&...
2/3
19/6/2016
TestWebPage
Ojete Calor - Tonta Gilip
file:///C:/Users/BugaDM/Desktop/Curso%20Desarrollo%20Web/HTML/Clase%201/index.html?text=value&placeholder=sida&email=cancer%40sida.con&...
3/3
HTML Tag Reference
!
The tag reference below was taken from w3schools.com. Click on any tag to get more information
on that tag. There will be several tags you havent seen yet - feel free to click on them to find out
more.!
!!
!
<!--...-->
Defines a comment
<!DOCTYPE>
Defines the document type
<a>
Defines a hyperlink
<abbr>
Defines an abbreviation
<acronym>
Not supported in HTML5. Use
<abbr> instead.
Defines an acronym
<address>
Defines contact information for
the author/owner of a document
<applet>
Not supported in HTML5. Use
<object> instead.
Defines an embedded applet
<area>
Defines an area inside an imagemap
<article>
Defines an article
<aside>
Defines content aside from the
page content
<audio>
Defines sound content
<b>
Defines bold text
<base>
Specifies the base URL/target for
all relative URLs in a document
<basefont>
Not supported in HTML5. Use CSS
instead.
Specifies a default color, size, and
font for all text in a document
<bdi>
Isolates a part of text that might
be formatted in a different
direction from other text outside it
<bdo>
Overrides the current text
direction
<big>
Not supported in HTML5. Use CSS
instead.
Defines big text
<blockquote>
Defines a section that is quoted
from another source
<body>
Defines the document's body
<br>
Defines a single line break
<button>
Defines a clickable button
<canvas>
Used to draw graphics, on the fly,
via scripting (usually JavaScript)
<caption>
Defines a table caption
<center>
Not supported in HTML5. Use CSS
instead.
Defines centered text
<cite>
Defines the title of a work
<code>
Defines a piece of computer code
<col>
Specifies column properties for
each column within a <colgroup>
element
<colgroup>
Specifies a group of one or more
columns in a table for formatting
<datalist>
Specifies a list of pre-defined
options for input controls
<dd>
Defines a description/value of a
term in a description list
<del>
Defines text that has been deleted
from a document
<details>
Defines additional details that the
user can view or hide
<dfn>
Defines a definition term
<dialog>
Defines a dialog box or window
<dir>
Not supported in HTML5. Use
<ul> instead.
Defines a directory list
<div>
Defines a section in a document
<dl>
Defines a description list
<dt>
Defines a term/name in a
description list
<em>
Defines emphasized text
<embed>
Defines a container for an external
(non-HTML) application
<fieldset>
Groups related elements in a form
<figcaption>
Defines a caption for a <figure>
element
<figure>
Specifies self-contained content
<font>
Not supported in HTML5. Use CSS
instead.
Defines font, color, and size for
text
<footer>
Defines a footer for a document or
section
<form>
Defines an HTML form for user
input
<frame>
Not supported in HTML5.
Defines a window (a frame) in a
frameset
<frameset>
Not supported in HTML5.
Defines a set of frames
<h1> to <h6>
Defines HTML headings
<head>
Defines information about the
document
<header>
Defines a header for a document
or section
<hr>
Defines a thematic change in the
content
<html>
Defines the root of an HTML
document
<i>
Defines a part of text in an
alternate voice or mood
<iframe>
Defines an inline frame
<img>
Defines an image
<input>
Defines an input control
<ins>
Defines a text that has been
inserted into a document
<kbd>
Defines keyboard input
<keygen>
Defines a key-pair generator field
(for forms)
<label>
Defines a label for an <input>
element
<legend>
Defines a caption for a <fieldset>
element
<li>
Defines a list item
<link>
Defines the relationship between a
document and an external
resource (most used to link to
style sheets)
<main>
Specifies the main content of a
document
<map>
Defines a client-side image-map
<mark>
Defines marked/highlighted text
<menu>
Defines a list/menu of commands
<meta>
Defines metadata about an HTML
document
<meter>
Defines a scalar measurement
within a known range (a gauge)
<nav>
Defines navigation links
<noframes>
Not supported in HTML5.
Defines an alternate content for
users that do not support frames
<noscript>
Defines an alternate content for
users that do not support clientside scripts
<object>
Defines an embedded object
<ol>
Defines an ordered list
<optgroup>
Defines a group of related options
in a drop-down list
<option>
Defines an option in a drop-down
list
<output>
Defines the result of a calculation
<p>
Defines a paragraph
<param>
Defines a parameter for an object
<pre>
Defines preformatted text
<progress>
Represents the progress of a task
<q>
Defines a short quotation
<rp>
Defines what to show in browsers
that do not support ruby
annotations
<rt>
Defines an explanation/
pronunciation of characters (for
East Asian typography)
<ruby>
Defines a ruby annotation (for
East Asian typography)
<s>
Defines text that is no longer
correct
<samp>
Defines sample output from a
computer program
<script>
Defines a client-side script
<section>
Defines a section in a document
<select>
Defines a drop-down list
<small>
Defines smaller text
<source>
Defines multiple media resources
for media elements (<video> and
<audio>)
<span>
Defines a section in a document
<strike>
Not supported in HTML5. Use
<del> instead.
Defines strikethrough text
<strong>
Defines important text
<style>
Defines style information for a
document
<sub>
Defines subscripted text
<summary>
Defines a visible heading for a
<details> element
<sup>
Defines superscripted text
<table>
Defines a table
<tbody>
Groups the body content in a table
<td>
Defines a cell in a table
<textarea>
Defines a multiline input control
(text area)
<tfoot>
Groups the footer content in a
table
<th>
Defines a header cell in a table
<thead>
Groups the header content in a
table
<time>
Defines a date/time
<title>
Defines a title for the document
<tr>
Defines a row in a table
<track>
Defines text tracks for media
elements (<video> and <audio>)
<tt>
Not supported in HTML5. Use CSS
instead.
Defines teletype text
<u>
Defines text that should be
stylistically different from normal
text
<ul>
Defines an unordered list
<var>
Defines a variable
<video>
Defines a video or movie
<wbr>
Defines a possible line-break
