Unidad 1 / Escenario 2

Lectura Fundamental

HTML

Contenido

1 El Lenguaje de Marcado de Hipertexto: HTML 1

2 Construcción de Formularios 10

3 HTML5 13

Palabras Claves: Desarrollo Web, tecnologı́as Web, HTML, lenguajes de etiquetas.

El lenguaje utilizado para describir el conjunto de elementos de una página Web es HTML, que junto con otras
tecnologı́as como Cascading Style Sheets (CSS) y JavaScript, permiten dar vida a los sitios Web tales como los
conocemos hoy en dı́a.

1. El Lenguaje de Marcado de Hipertexto: HTML

1.1. Estructura Básica de una Página HTML

HTML permite establecer el contenido de una página. Para ello define un conjunto de elementos que permiten
especificar los componentes que harán parte de la página.

Los elementos son indicados dentro de HTML por medio del uso de etiquetas. Una etiqueta de apertura y una
etiqueta de cierre son utilizadas para representar un elemento, aunque en algunas ocasiones la etiqueta de cierre es
opcional1 . Las etiquetas son palabras encerradas con los sı́mbolos ‘<’ y ‘>’, además la etiqueta de cierre incluye el
sı́mbolo ‘/’ al inicio de la palabra. Por ejemplo, para el elemento tı́tulo la etiqueta de apertura es <title> y la
respectiva etiqueta de cierre es </title>.

tag de tag de
apertura cierre

< title > Politecnico Grancolombiano - Sitio Web Oficial </ title >

Figura 1. texto
Fuente: elaboración propia

1.2. Elementos HTML de Texto

Uno de los elementos de texto que HTML permite definir es un párrafo. Para ello se debe encerrar el texto que
hace parte del párrafo dentro las etiquetas <p> y </p>.
1
para el elemento br basta la etiqueta de apertura <br>

POLITÉCNICO GRANCOLOMBIANO 1
 <p>Al definir una secuencia de párrafos,
estos son separados por una lı́nea en blanco
sin necesidad de especificar algún elemento
adicional.</p>

<p>Además cada párrafo iniciará en una

nueva lı́nea.<p>

<p>Por defecto los navegadores ajustan

automáticamente el texto de los párrafos
de acuerdo al ancho de la ventana.</p> Figura 2. Párrafos definidos a través de la
etiqueta <p>
Fuente: elaboración propia

Si fuera necesario especificar saltos de lı́nea, es posible hacerlo mediante el uso de la etiqueta <br/>.

Note que no es necesario utilizar la etiqueta de apertura y la respectiva etiqueta de cierre para este elemento.
HTML define varios elementos para los cuales no es necesario.

Para establecer tı́tulos dentro de una página suelen utilizarse los encabezados, la diferencia entre tipos de
encabezado se determina entre el tamaño de letra, separación que existe entre palabras y los elementos que
están a su alrededor, las etiquetas <h1> y </h1> suelen utilizarse para definir tı́tulos principales, las etiquetas
<h2> </h2>, <h3> </h3>... en adelante se utilizan para definir subtı́tulos del tı́tulo principal.

<h1>Tı́tulo principal</h1>
<h2>Subtı́tulo 1</h2>
<h3>Subtı́tulo 2</h3>
<h4>Subtı́tulo 3</h4>

Figura 3. Encabezados definidos a través de

las etiquetas <h1> a <h4>
Fuente: elaboración propia

Las etiquetas <strong> </strong> son utilizadas principalmente para definir o resaltar una palabra importante en el
texto, produce el efecto de aplicar negrita. Por otro lado la etiqueta <em> </em> suele ser utilizada para establecer
énfasis en alguna palabra del texto, produce el efecto de hacer la letra cursiva.

<p>El siguiente <strong>párrafo

</strong> contiene una mezcla de los
diferentes <strong>énfasis</strong>
en un <em>texto</em>, resaltando
palabras con la etiqueta
<strong>strong</strong> y haciendo
un énfasis con la etiqueta
<em>em</em></p> Figura 4. Texto resaltado en un párrafo
Fuente: elaboración propia

POLITÉCNICO GRANCOLOMBIANO 2
Strong y em no son las únicas etiquetas en el lenguaje HTML para definir palabras o frases en negrita y cursiva
respectivamente, también existen las etiquetas bold, <b> </b> para resaltar una palabra con el efecto de negrita y
las etiquetas italic, <i> </i> para hacer énfasis, o crear el efecto de letra cursiva.

<p>El siguiente <b>párrafo</b>

contiene una mezcla de los
diferentes <b>énfasis</b> en
un <i>texto</i>, resaltando
palabras con la etiqueta <b>b</b>
y haciendo un énfasis con la
etiqueta <i>i</i></p> Figura 5. Texto en negrita y cursiva
Fuente: elaboración propia

En HTML es posible crear superı́ndices y subı́ndices, ya sea para una formula matemática o una referencia.
Los subı́ndices y superı́ndices son un número o letra de un tamaño menor al de la escritura normal que puede estar
tanto arriba como abajo, siendo esto definido al ser un superı́ndice o subı́ndice respectivamente. Un superı́ndice se
crea con las etiquetas , y un subı́ndice se crea con las etiquetas .

<p>La <b>identidad de Euler</b>

está definida como:</p>

<p>e^i&#120587; + 1 = 0</p>

<p>El <b>óxido de sodio</b>

Na₂O se considera un
<i>óxido básico</i></p> Figura 6. Texto con súper ı́ndices y
sub-ı́ndices
Fuente: elaboración propia

En el lenguaje existen algunas etiquetas especiales, una de ellas es la etiqueta <hr/> ue representa una lı́nea
horizontal que puede ser utilizada para separar secciones del texto por medio de una lı́nea, como puede ser el
caso de separar entre tı́tulo y subtı́tulo, tı́tulo y párrafo o entre párrafo y párrafo, la etiqueta <hr/> a diferencia de
las demás etiquetas no tiene una de apertura y una de cierre, sólo es necesaria una.

<h1>Tı́tulo del texto</h1>

<hr/>
<p>Contenido del texto</p>

Figura 7. Texto con encabezados y párrafos

Fuente: elaboración propia

Si en el texto desea utilizar la abreviación de alguna palabra o un acrónimo por diferentes razones, se deben
utilizar las etiquetas <abrr> </abrr> y <acronym> </acronym> respectivamente para cada acción y con ayuda del atributo
title se agregan estas referencias o abreviaciones.

POLITÉCNICO GRANCOLOMBIANO 3
 <p>El <acronym title="Instituto
Distrital de Recreación y Deporte">
IDRD</acronym> genera espacios
para promover el deporte en Bogotá
<abrr title="Distrito Capital">
D.C.</abrr></p>
Figura 8. Texto con acrónimos
Fuente: elaboración propia

Para poder citar alguna frase o fragmento de texto se pueden utilizar las etiquetas <cite> </cite> y <q> </q>, la
primera de ellas permite convertir el texto a un formato similar al que harı́a una etiqueta de énfasis, mientras que
la otra permite ubicar comillas (””) en cada extremo del texto a citar.

<p><q>Nadie debe conocer su

sentido mientras no hayan
cumplido cien a~ nos</q>, fragmento
sacado del libro <cite>Cien a~ nos
de soledad</cite> de Gabriel
Garcı́a Márquez.</p>
Figura 9. Texto con citas
Fuente: elaboración propia

Si el texto es de constante modificación es posible que desee tener una referencia de lo que estaba antes de ser
modificado, por lo que el lenguaje provee unas etiquetas las cuales permiten hacer este tipo de modificaciones. Con
la etiqueta <del> </del> es posible hacer una marca o linea en medio del texto, el cual permite mostrar que la frase
ahora no es usada correctamente, alterno a esto puede usarse también la etiqueta <ins> </ins> para mostrar una
nueva palabra o frase que serı́a el reemplazo de la frase modificada se puede diferenciar por que está ahora sobre
una lı́nea.

<p>Smartphone:</p>
<p><del>Antes $750</del></p>
<p>Ahora <ins>$350</ins></p>
Figura 10. Texto tachado
Fuente: elaboración propia

En el texto, es posible agregar enlaces o hipervı́nculos que permiten al usuario navegar hacia otras páginas o
recursos. Para insertar estos enlaces se utilizan las etiquetas <a> </a> y por medio del atributo href se indica la
dirección del recurso al que se quiere dirigir.

<p>Para acceder a la
página de Google, siga
el siguiente
<a href="http://www.google.com">
enlace</a></p> Figura 11. Texto con enlaces
Fuente: elaboración propia

POLITÉCNICO GRANCOLOMBIANO 4
1.3. Listas

HTML permite crear diferentes tipos de listas, una de estas es la lista ordenada, que permite mostrar los
elementos numerados. Para crear una lista ordenada, es necesario utilizar las etiquetas <ol> </ol>, y dentro de estas
especificar los elementos en el orden en que serán numerados encerrando cada uno con las etiquetas <li> </li>. El
nombre del elemento ol del inglés ordered list y el nombre li, list item, elemento de lista.

<p>Lista de ingredientes.</p>
<ol>
<li>1kg de harina.</li>
<li>15g de sal.</li>
<li>500ml de agua.</li>
<li>45g de levadura.</li>
<li>50ml de aceite.</li>
<ol> Figura 12. Listas ordenadas
Fuente: elaboración propia

Otro tipo de listas utilizada comúnmente son las listas no ordenadas. Para crear una lista no ordenada, deben
utilizarse las etiquetas <ul> </ul>, e igual que en las listas ordenadas, para cada elemento dentro de la lista será
necesario utilizar las etiquetas <li> </li>.

<p>Lugares por visitar.</p>

<ul>
<li>Francia.</li>
<li>Irlanda.</li>
<li>Canada.</li>
<li>Australia.</li>
<li>Alemania.</li>
<ul> Figura 13. Listas no ordenadas
Fuente: elaboración propia

Es posible crear listas cuyos elementos incluyan una definición o descripción. Este tipo de listas son listas de
definición. Para crear una lista de definición se utilizan las etiquetas <dl> </dl>, dentro de ellas se define cada
elemento de la lista con las etiquetas <dt> </dt> y para la definición de cada elemento se utilizan las etiquetas
<dd> </dd>.

<dl>
<dt>BFS.</dt>
<dd>Búsqueda en anchura.</dd>
<dt>DFS.</dt>
<dd>Búsqueda en profundidad.</dd>
<dt>Dijkstra.</dt>
<dd>Caminos mı́nimos.</dd>
<dt>Prim.</dt>
<dd>Árbol recubridor mı́nimo.
</dd>
<dt>Edmonds-Karp.</dt>
<dd>Flujo máximo.</dd> Figura 14. Listas de definiciones
</dl>
Fuente: elaboración propia

POLITÉCNICO GRANCOLOMBIANO 5
De ser necesario es posible anidar listas, esto es, incluir un tipo de lista sea ordenada o no ordenada dentro de otra.
Un ejemplo de esta práctica es el siguiente, en donde se una lista no ordenada hace parte de los elementos de una
lista ordenada. Esto suele servir para mostrar clasificaciones de objetos o mostrar sus dependencias.

<p>Productos.</p>
<ol>
<li>Huevos</li>
<li>Leche</li>
<li>Queso</li>
<ul>
<li>Cheddar</li>
<li>Mozarella</li>
<li>Parmesano</li>
</ul>
<li>Café</li> Figura 15. Listas anidadas
</ol> Fuente: elaboración propia

1.4. Imágenes

Otra posibilidad que brinda HTML es la de agregar imágenes. Esto se logra por medio de la etiqueta <img/>
con ayuda de los atributos src, alt y title, los cuales permiten agregar la imagen desde una ruta, hacer una
descripción y generar un tı́tulo para la imagen, respectivamente.

<img src="images/html.jpg"
alt="Logo HTML en blanco y negro."
title="Logo HTML."/>

Figura 16. Imagen en página HTML

Fuente: elaboración propia

En una imagen podemos de igual forma manipular su tamaño, dentro de la etiqueta <img/> utilizando los atributos
height y width cuyos valores están dados en pı́xeles.

<img src="images/html.jpg"
alt="Logo HTML en blanco y negro."
height="300" width="300"/>
Figura 17. Imagen con ancho y alto
especificados dentro a través de los
atributos de la etiqueta <img>
Fuente: elaboración propia

POLITÉCNICO GRANCOLOMBIANO 6
Con el atributo align es posible ubicar las imágenes en los laterales de un párrafo.

<p><img src="images/html.jpg"
alt="Logo HTML en blanco y negro."
height="50" width="50" align="left"/>
Agregar la imágen en la
parte lateral izquierdo
de un párrafo.</p>
<hr/>
<p><img src="images/html.jpg"
alt="Logo HTML en blanco y negro,"
height="50" width="50" align="right"/>
Agregar la imagen en la
Figura 18. Imágenes alineadas dentro de un
parte lateral derecha párrafo
de un párrafo.</p> Fuente: elaboración propia

También es posible agregar una imagen junto con un párrafo, ya sea antes, iniciando o en medio del párrafo.

<img src="images/html.jpg"
alt="Logo HTML en blanco y negro."
height="50" width="50"/>
<p>Agregar la imagen antes
de un párrafo.</p>
<hr/>
<p><img src="images/html.jpg"
alt="Logo HTML en blanco y negro,"
height="50" width="50"/>
Agregar la imagen en la primer lı́nea
del párrafo.</p>
<hr/>
<p>Agregar la imagen en
una lı́nea intermedia
<img src="images/html.jpg"
alt="Logo HTML en blanco y negro."
height="50" width="50"/>
de un párrafo.</p> Figura 19. Imágenes dentro de párrafos
Fuente: elaboración propia

1.5. Tablas

Para crear un conjunto de datos o tabla, HTML provee las etiquetas <table> </table> en las cuales se pueden
agregar subconjuntos de datos fila por fila, por medio de las etiquetas <tr> </tr> y dentro de ellas cada uno de los
elementos que pertenecen a esta fila por medio de las etiquetas <td> </td>.

POLITÉCNICO GRANCOLOMBIANO 7
 <table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr> Figura 20. Tabla de 3 filas y 3 columnas
<td>7</td><td>8</td><td>9</td> Fuente: elaboración propia
</tr>
</table>

Pueden agregarse a la tabla especificaciones sobre los elementos que están contenidos, con las etiquetas <th> </th>
podemos especificar el tipo de dato en cada fila o columna de la tabla utilizando el atributo scope.

<table>
<tr>
<th></th>
<th scope="col">Precio Normal</th>
<th scope="col">Precio Descuento</th>
</tr>
<tr>
<th scope="row">Televisor: </th>
<td>$670</td>
<td>$470</td>
</tr> Figura 21. Tabla con encabezados
<tr>
<th scope="row">Computador: </th> Fuente: elaboración propia
<td>$990</td>
<td>$650</td>
</tr>
</table>

Si se desea dar formato a una tabla haciendo unión de celdas entre filas o entre columnas, se puede hacer uso de los
atributos rowspan y colspan dentro de la etiquetas <td> y <th>.

<table>
<tr>
<th></th>
<th scope="col">Precio Normal</th>
<th scope="col">Precio Descuento</th>
</tr>
<tr>
<th scope="row">Televisor: </th>
<td rowspan="2">$870</td>
<td>$470</td> Figura 22. Tablas con celdas que ocupan
</tr> más de un fila o columna
<tr> Fuente: elaboración propia
<th scope="row">Computador: </th>
<td>$650</td>
</tr>
</table>

POLITÉCNICO GRANCOLOMBIANO 8
Si la tabla tiene un gran contenido, el cual se debe diferenciar entre sı́, el uso de las etiquetas <thead> </thead>,
<tbody> </tbody> y <tfoot> </tfoot>, permiten separar campos de datos.

<table>
<thead>
<tr>
<th>Dia</th>
<th>Mes</th>
<th>A~
no</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Enero</td>
<td>1970</td>
</tr>
<tr>
Figura 23. Tabla haciendo uso de las
<td>2</td>
<td>Octubre</td> etiquetas <thead> y <tbody>
<td>1996</td> Fuente: elaboración propia
</tr>
<tr>
<td>28</td>
<td>Febrero</td>
<td>2008</td>
</tr>
</tbody>
</table>

Existen atributos para formatos en tablas los cuales permiten dar un color, tamaño o establecer bordes para
diferenciar las filas y columnas, estos atributos son border, bgcolor, width y height, en el atributo border se
especifica el tamaño del borde en pı́xeles, en el atributo bgcolor se especifica el color de fondo para la tabla, este
color debe ser ingresado como un valor hexadecimal y los atributos width y height especifican el tamaño de la fila
o columna en pı́xeles.

<table border="2" bgcolor="#efefef">

<tr>
<th width="100"></th>
<th scope="col">Precio Normal</th>
<th scope="col" bgcolor="#cccccc">
Precio Descuento</th>
</tr>
<tr>
<th scope="row">Televisor: </th>
<td rowspan="2">$870</td>
<td bgcolor="#cccccc">$470</td> Figura 24. Tabla personalizada a través de
</tr> los atributos de las etiquetas <th> y <td>
<tr> Fuente: elaboración propia
<th scope="row">Computador: </th>
<td bgcolor="#cccccc">$650</td>
</tr>
</table>

POLITÉCNICO GRANCOLOMBIANO 9
2. Construcción de Formularios

Para que el navegador envı́e datos adicionales al servidor estos deben ser ingresados por el usuario, por tal
razón la página debe brindar los mecanismos para capturarlos. HTML define un conjunto de elementos especiales
que permiten recopilar datos. Tales elementos se traducen en componentes gráficos que permiten ingresar texto,
seleccionar opciones, seleccionar archivos del sistema de archivos del pc, entre otros. Todos estos elementos son
reunidos en un formulario (form) que permite agrupar los elementos de captura que hacen parte de un mismo
envı́o.

Para crear un formulario se utilizan las etiquetas <form> </form>, en cada etiqueta <form> es posible especificar
el atributo action cuyo valor debe ser una ruta de acceso al servidor del que recibe y procesa la información.
Un formulario tiene dos tipos de método de acceso get y post que corresponden con el método HTTP que será
indicado en la petición al servidor, el método get es ideal cuando recibe textos cortos y el método post cuando el
usuario desea agregar un archivo o enviar información sensible al servidor que posiblemente es almacenada.

La etiqueta <input/> es utilizada para recibir información por medio de una caja de texto, ésta etiqueta contiene
atributos como type que especifica el tipo de texto de entrada, name que crea una variable donde se almacena el
texto de entrada, size asigna un tamaño al cuadro de ingreso del texto y maxlength determina la cantidad de
caracteres que están permitidos dentro del cuadro de texto.

<form action="http://www.ejemplo.com">
<p>Nombre:
<input type="text" name="nombre"
size="15" maxlength="40"/> Figura 25. Formulario con un solo campo
</p>
</form> Fuente: elaboración propia

El tipo de texto puede variar para dependiendo de la necesidad, entre los más usados en HTML se encuentra el tipo
de texto password, que oculta los sı́mbolos ingresados en el caja de texto visualizándolos como puntos o asteriscos
impidiendo la identificación del texto ingresado.

<form action="http://www.ejemplo.com">
<p>Nombre:
<input type="text" name="nombre"
size="15" maxlength="40"/>
</p>
<p>Contrase~
na:
<input type="password" name="clave" Figura 26. Formulario con campo de
size="15" maxlength="10"/> contraseña
</p> Fuente: elaboración propia
</form>

Para tener una caja de texto de varias lı́neas es necesario utilizar la etiqueta <textarea> </textarea>, que permite
especificar su tamaño con los atributos cols y rows.

POLITÉCNICO GRANCOLOMBIANO 10
 <form action="http://www.ejemplo.com">
<p>Ingresar texto</p>
<textarea name="ingreso" cols="20"
rows="4">Ingrese el texto.</textarea>
</form>
Figura 27. Formulario con caja de texto
Fuente: elaboración propia

Uno de los tipos de controles que permite seleccionar una opción entre varias es el tipo radio que se define igual
que las cajas de texto por medio de la etiqueta <input/> pero en el atributo type se debe especificar el valor radio.
De similar manera que para las cajas de texto, se utilizan los atributos name que asigna un nombre para el valor
que será enviado, value que representa el texto de la opción y en el caso del radio el atributo checked que sirve
para dejar marcada una de las opciones de manera predeterminada.

<form action="http://www.ejemplo.com">
<p>Seleccione una opción:<br/>
<input type="radio" name="opciones"
value="uno" checked="checked"/> Opción 1
<input type="radio" name="opciones"
value="dos" /> Opción 2
<input type="radio" name="opciones" Figura 28. Formulario con radiobuttons
value="tres" /> Opción 3 Fuente: elaboración propia
</p>
</form>

Otro control es el tipo checkbox que permite seleccionar cero o más opciones dentro de un listado de posibles
opciones, incluye los mismos atributos que el control de tipo radio.

<form action="http://www.ejemplo.com">
<p>Seleccione las opciones:<br/>
<input type="checkbox" name="opciones"
value="uno" checked="checked"/> Opción 1
<input type="checkbox" name="opciones"
value="dos" /> Opción 2
<input type="checkbox" name="opciones" Figura 29. Formulario con checkboxes
value="tres" /> Opción 3 Fuente: elaboración propia
</p>
</form>

Se pueden almacenar las opciones dentro de una lista desplegable o caja de opciones con las etiquetas <select> </select>,
dentro de ellas para agregar cada elemento en la lista se utilizan las etiquetas <option> </option>.

POLITÉCNICO GRANCOLOMBIANO 11
 <form action="http://www.ejemplo.com">
<p>Seleccione una opción:</p>
<select name="opciones">
<option value="uno">Opción 1
</option>
<option value="dos">Opción 2
</option>
<option value="tres">Opción 3
</option> Figura 30. Formulario con lista desplegable
</select> Fuente: elaboración propia
</form>

Es posible recibir archivos por medio de un cuadro de texto, por ejemplo imágenes, videos, pdf, en la etiqueta
<input/> se utiliza el atributo de tipo file para cargar el archivo y control input con el atributo de tipo submit
permite enviarlo.

<form action="http://www.ejemplo.com">
<p>Agregue un archivo:</p>
<input type="file" name="archivo"/><br/>
<input type="submit" name="Enviar"/>
</form> Figura 31. Formulario con botones para
cargar archivos y envı́o de datos
Fuente: elaboración propia

El control input de tipo submit, permite visualizar un botón que es utilizado para realizar el envı́o de la información
especificada en un formulario.

<form action="http://www.ejemplo.com">
<p>Ingrese su nombre:</p>
<input type="text" name="nombre"/><br/>
<input type="submit" name="Enviar"
value="Suscribirse"/>
</form> Figura 32. Formulario con botón de envı́o
Fuente: elaboración propia

HTML permite agregar botones o controles ocultos (hidden) que permiten diferentes acciones, como por
ejemplo agregar archivos haciendo una mezcla entre texto e imágenes utilizando las etiquetas <button> </button>.

<form action="http://www.ejemplo.com">
<button>
<img scr="images/add.jpg" alt="add"
width="10" height="20"/>Agregar
</button>
<input type="hidden" name="archivo"
value="archivo"/>
</form>
Figura 33. Formulario con elementos ocultos
Fuente: elaboración propia

POLITÉCNICO GRANCOLOMBIANO 12
Para etiquetar los elementos de captura de datos, se utiliza <label> </label>, de tal manera que se permite relacionar
una etiqueta con un control, estos elementos son útiles dado que permite a los software de asistencia para personas
invidentes conocer los campos del formulario. Uno de los atributos de la etiqueta es for que permite relacionar un
elemento label con un control a través del id.

<label> Edad: <input type="text"

name="edad"> </label><br/>
Acepta términos y condiciones<br/>
<input id="acepta" type="radio"
name="condicion" value="si">
<label for="acepta">Si</label> Figura 34. Formulario con elementos
<input id="rechaza" type="radio"
name="condicion" value="no">
etiquetados
<label for="rechaza">No</label> Fuente: elaboración propia

Si desea tener un grupo de campos de entrada puede utilizar la etiqueta <fieldset> </fieldset>, junto con la etiqueta
<legend> </legend> que permite separar estos campos.

<filedset>
<legend>Ingrese los números</legend>
<label>Número 1:<br/>
<input type="text name="uno/>
</label><br/>
<label>Número 2:<br/>
<input type="text name="dos/>
</label><br/>
<label>Número 3:<br/>
<input type="text name="tres/> Figura 35. Formulario con grupos de
</label><br/> campos
</fieldset> Fuente: elaboración propia

3. HTML5

El objetivo de HTML5 es asegurar que el estándar HTML refleje el estado actual de la Web.

Una de las caracterı́sticas de esta nueva especificación es que el viejo HTML y XHTML continuará siendo válido.

Con HTML5 el DOCTYPE puede ser ignorado y basta con poner html simplemente de la siguiente manera:
<!DOCTYPE html> .

POLITÉCNICO GRANCOLOMBIANO 13
Para finalizar

Como pudo observar, el lenguaje de marcado HTML es muy importante en la creación de páginas Web debido a
que por medio de este es posible definir el contenido de una página Web, la cual puede incluir, texto sin o con
formato, imágenes, audio y video, entre otros.

Sin embargo, presenta grandes limitaciones que de no ser cubiertas por otras tecnologı́as como CSS y JavaScript no
se podrı́a escribir aplicaciones que proporcionen al usuario una gran experiencia, como ocurre en las aplicaciones o
sitios Web hoy en dı́a.

Aun ası́, dado que HTML es el lenguaje estándar para describir el contenido de una página Web es de gran
importancia para la construcción de aplicaciones Web.

POLITÉCNICO GRANCOLOMBIANO 14
Referencias

Basham, B., Sierra, K., & Bates, B. (2008). Head first servlets and jsp: passing the sun certified web component
developer exam. Head first series. O’Reilly Media. Recuperado desde https://books.google.com.co/books?id=
15wp6fmAy4sC
Code School LLC. (2017). Server-side languages. Recuperado desde https://www.codeschool.com/beginners-guide-
to-web-development/server-side-languages
Collins, M. (2017). Pro html5 with css, javascript, and multimedia: complete website development and best practices.
Apress.
Connolly, D. (2017). Hypertext transfer protocol http 1.1. Recuperado desde https://www.w3.org/Protocols/
rfc2616/rfc2616.html
Duckett, J. (2014). Html and css: design and build websites (1.a ed.). Wiley Publishing.
Haverbeke, M. (2017). Http requests. Recuperado desde http://eloquentjavascript.net/1st edition/chapter14.html
Meloni, J. (2014). Html, css and javascript all in one, sams teach yourself: covering html5, ccs3, and jquery (2.a ed.).
Sams.
Mozilla Developer Network y colaboradores. (2017). Http request methods. Recuperado desde https://developer.
mozilla.org/en-US/docs/Web/HTTP/Methods
Mozilla Developer Network y colaboradores individuales. (2017, 1 de agosto). How the web works. Recuperado
desde https://developer.mozilla.org/en-US/docs/Learn/Getting started with the web/How the Web works
Shenoy, A. (2014). Thinking in html. Packt Publishing Ltd.

POLITÉCNICO GRANCOLOMBIANO 15
 INFORMACIÓN TÉCNICA

Módulo: Desarrollo de Front-End

Unidad 1: Desarrolo Web y HTML
Escenario 2: HTML

Autor: Diego Satoba

Asesor Pedagógico: Ingrid Ospina Posada

Diseñador Gráfico: Catalina López
Asistente: Angie Laiton

Este material pertenece al Politécnico Grancolombiano.

Por ende, es de uso exclusivo de las Instituciones
adscritas a la Red Ilumno. Prohibida su reproducción
total o parcial.

POLITÉCNICO GRANCOLOMBIANO 16