Para realizar sitios web debes probar su funcionamiento en la mayor cantidad de navegadores
posibles o en los más utilizados, los cuales son: Chrome (64,8%), Firefox (21,3%), IE (7,1%),
Safari (3,8%), Opera (1,8%). Junio de 2015. w3school.com
Estadísticas del uso de los navegadores en los dispositivos móviles hasta Abril del 2015.
Las cifras demuestran que hoy el uso de internet es mayoritariamente desde los dispositivos móviles que de escritorio.
Hoy ya no es necesario saber cierta aplicación para decir que se sabe de diseño web (como era
antes con Dreamweaver), ahora es más importante saber cierta tecnología independiente del
software. Puedes crear tus páginas desde el simple block de notas o aplicaciones gratuitas como
Brackets, Atom, Sublime Text, Bluefish, ICEcoder, TextWrangler, Notepad++, Kompozer, etc.
Capítulo 1: Etiquetas HTML
Estructura HTML
La mayoría de las etiquetas tienen un inicio y un final y su contenido se encuentra dentro de estas
dos, ej: <html> </html>
Pero existen otras que se cierran solas, ej: <img src=“foto.jpg”>
Las etiquetas que se cierran solas y las de apertura pueden llevar uno o más atributos
Curso de Desarrollo Web Prof. Jorge Llantén Briceño.
Diseñador Gráfico Publicitario de Universidad Santo Tomás (2000).
Diplomado Profesional Web Manager & Web Design Pro (2014).
jorgellantenb@gmail.com
9-98367785
www.j2.cl
<!DOCTYPE html> Esta etiqueta indica que nuestro documento es HTML5.
<html> Inicio de nuestro documento HTML.
<head><head> Cabecera del documento. Aquí va información importante para
los buscadores y no se ve dentro de nuestro navegador.
<body></body> Cuerpo del documento. Es todo lo visible en nuestro
navegador.
</html> Cierre del documento HTML.
Capitulo 1: Etiquetas HTML Página de1 6
ej: <html lang=“es”>(Indica que el contenido de nuestro documento está en
idioma español y si el navegador no esta en el mismo idioma te da la
alternativa de traducir el sitio.)
<!--comentario --> Etiqueta para aplicar comentarios dentro del HTML sin influir en el resto
del código.
Las siguientes etiquetas son las mas frecuentes que van dentro de <head>
<title></title> Titulo del documento. Es importante para los
buscadores, si no lo tienes quedaras abajo en
los resultados de búsqueda.
<meta> Define los metadatos que no pueden ser
definidos usando otro elemento HTML.Puede
tener los siguientes atributos.
<meta charset=“UTF-8”> Indica que la codificación de caracteres
utilizados es occidental.
<meta name="author" content="nombre
del autor”>
Autor del sitio.
<meta name="description"
content=“descripción de la página”>
Descripción del sitio.
<meta name="keywords"
content=“palabras, clave”>
Palabras clave separadas por “,” (Cada vez se
usa menos).
<meta name="viewport"
content="width=device-width, user-
scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-
scale=1.0”>
Hacer que nuestra página ajustable y se
adapte en IOS
<link> Un vinculo a otro archivo independiente.
Puede ir con los siguientes atributos
<link rel="stylesheet"
href=“style.css”>
Para llamar a nuestra hoja de estilos
<link rel="shortcut icon"
type="image/x-icon"
href=“favicon.ico”>
Agregar un Favicon. Para mostrar el resto de
los códigos para favicon de diferentes
plataformas y tamaños. Puedes general el
código y las imágenes desde
http://realfavicongenerator.net
<link href=“mobile.css”
rel=“stylesheet” type=“text/css”
media=“only screen and (min-width:
0px) and (max-width:320px)”>
Linea para llamar a diferentes archivos CSS de
una página adaptable. (las medidas son
variables)
<script><script> Define ya sea un script interno o un enlace
hacia un script externo. El lenguaje de
programación es JavaScript
<script src=“js/
jquery-1.11.2.min.js”></script>
Para utilizar la libreria de JQuery Suele
utilizarse también al final de la página, antes
que acabe la etiqueta <body>
Capitulo 1: Etiquetas HTML Página de2 6
<!—[if lt IE 9]>
<script src=“http://
html5shiv.googlecode.com/svn/trunk/
html5.js”></script>
<!—[endif]>
Hacer funcionar las etiquetas HTML5 en
versiones de IE incompatibles.
<style><style> Información de estilos. Se usa cada vez menos
dentro del documento HTML.
<style>p{margin: 0;}</style> Ejemplo de uso de la etiqueta <style>
<p></p> Párrafo
<strong></strong> Énfasis fuerte. deja el texto en negrita indicando
importancia
<em> </em> Énfasis menos fuerte. deja el texto en cursiva indicando
importancia, pero menos que <strong>
<h1></h1>…hasta… <h6></h6> Los elemento de cabecera  implementan seis niveles de
cabeceras de documentos; <h1> es la de mayor y <h6>
es la de menor importancia. Un elemento de cabecera
describe brevemente el tema de la sección que
introduce. <h1> solo se puede usar una vez.
<address></address> Define una sección que contiene información de
contacto.
<blockquote></blockquote> Representa una contenido citado desde otra fuente.
<q></q> Representa una  cita textual  inline.
<cite></cite> Representa el  título de una obra .
<abbr></abbr> Representa una  abreviación  o un  acrónimo ; la
expansión de la abreviatura puede ser representada por
el atributo title.
<code></code> Fragmento de código de computadora.
<dfn></dfn> Representa un término cuya  definición  está contenida
en su contenido ancestro más próximo.
<ins></ins> Define una adición en el documento.
<del></del> Define una remoción del documento.
<sub></sub> Representa un subíndice.
<sup></sup> Representa un superíndice.
<img> Representa una imagen. ej: <img src="logo.jpg" width="100" height="100"
alt="Logo" title="Logo de empresa"/>
<a></a> Representa un  hiperenlace o vínculo , enlazando a otro recurso.
Capitulo 1: Etiquetas HTML Página de3 6
Etiquetas HTML más comunes que podemos agregar dentro de <body>
Otros atributos que podemos agregar dentro del vinculo son:
target=”_blank” para abrir cada vínculo con esta opción en una ventana nueva.
target=”new” para abrir todos los vínculos con esta opción en una sola ventana nueva.
title=“textos” titulo que aparece al situar el cursor sobre el vínculo.
Ejemplos de vínculos <a>
<a href=“http://www.j2.cl”>Ir a J2</a> URL absoluta
<a href=“contacto.html”>contacto</a> URL relativa
<a href=“#arriba”>subir</a> Ancla dentro de la misma
página
<a href=“mailto:jorge@j2.cl”>Escribeme</a> Abre la aplicación de correo
electrónico por defecto con la
dirección de correo.
<a href=“1.pdf”>baja el archivo</a> Se puede vincular a cualquier
archivo.
<a href=“tel:+56955555”>llamame</a> En los móviles el vínculo
marca el número telefónico.
<a href=“sms:+56955555”>Enviame un mensaje</a> En los móviles el vínculo envía
un mensaje de texto a ese
número telefónico.
Listas
<ol></ol> Define una lista ordenada de artículos.
<ul></ul> Define una lista de artículos sin orden.
<li></li> Define un artículo de una lista ennumerada.
<dd></dd> Representa la definición de los términos listados antes que él.
<dl></dl> Define una lista de definiciones, es decir, una lista de términos y sus definiciones
asociadas.
<dt></dt> Representa un término definido por el siguiente <dd>.
Ejemplo de Lista de definición
<dl>
<dt>gato</dt>
<dd>es peludo</dd>
<dd>toma leche</dd>
<dt>perro</dt>
<dd>come huesos</dd>
</dl>
Resultado:
gato
es peludo
toma leche
perro
come huesos
Capitulo 1: Etiquetas HTML Página de4 6
Otras etiquetas usadas frecuentemente
<br> Representa un salto de línea.
<hr> Separador de linea horizontal.
<iframe></iframe> Representa un contexto anidado de navegación, es decir, un documento
HTML embebido.
Ejemplo de Lista sin orden
<ul>
<li>León</li>
<li>Elefante</li>
<li>Jirafa</li>
</ul>
Resultado:
• León
• Elefante
• Jirafa
Ejemplo de Lista ordenada
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ul>
Resultado:
1. Primero
2. Segundo
3. Tercero
Tablas
<table></table> Representa datos con más de una dimensión.
<tr></tr> Representa una fila de celdas en una tabla.
<td></td> Representa una celda de datos en una tabla.
<th></th> Representa una celda encabezado en una tabla. 
Formularios
<form></form> Representa un formulario, consistente de controles que puede
ser enviado a un servidor para procesamiento.
<fieldset></fieldset> Representa un conjunto de controles.
<legend></legend> Representa el título de un <fieldset>.
<label></label> Representa el título de un control de formulario.
<input> Representa un campo de datos escrito que permite al usuario
editar los datos.
<button></button> Representa un  botón
<select></select> Represents un control que permite la selección entre un
conjunto de opciones.
<datalist> </datalist> Representa un conjunto de opciones predefiniddas para otros
controles.
<option></option> Representa una opción en un elemento <select>, o una
sugerencia de un elemento <datalist>.
<textarea></textarea> Representa un control de edición de texto multi-línea.
<keygen> Representa un control de un generador de contraseñas.
Capitulo 1: Etiquetas HTML Página de5 6
Las etiquetas se pueden visualizar principalmente de 2 formas, en linea o en bloque. Hoy las
etiquetas que ocupamos en su mayoría tienen un significado semántico para que los buscadores
reconozcan el contenido de las etiquetas.
Existen 2 etiquetas que podrían reemplazar a todas esas que no tienen ningún contenido
semántico las cuales deberían ir desapareciendo mientras más se ocupen las etiquetas HTML5.
PRÓXIMO CAPITULO: ESTILOS CSS
<div></div> Representa un contenedor genérico sin ningún significado especial.
<span></span> Representa texto sin un significado específico.  Este debe ser usado
cuando ningún otro elemento semántico le confiere un significado
adecuado, en cuyo caso, provendrá de atributos globales como class,
lang, o id.
Etiquetas más comunes HTML5
<header> </header> Define la cabecera de una página o sección. Usualmente
contiene un logotipo, el título del sitio Web y una tabla de
navegación de contenidos.
<nav> </nav> Define una sección que solamente contiene enlaces de
navegación
<section> </section> Define una sección en un documento.
<article> </article> Define contenido autónomo que podría existir
independientemente del resto del contenido.
<aside> </aside> Define algunos contenidos vagamente relacionados con
el resto del contenido de la página. Si es removido, el
contenido restante seguirá teniendo sentido
<footer> </footer> Define el pie de una página o sección. Usualmente
contiene un mensaje de derechos de autoría, algunos
enlaces a información legal o direcciones para dar
información de retroalimentación.
<figure> </figure> Representa una figura ilustrada como parte  del
documento.
<figcaption> </figcaption> Representa la descripción de una figura.
<time> </time> Representa un valor de fecha y hora; el equivalente
legible por máquina puede ser representado en el
atributo datetime.
<video> </video> Representa un video , sus archivos de audio y canciones
asociadas, con la interfaz necesaria para reproducirlos. 
<audio> </audio> Representa un sonido o stream de audio.
<svg> </svg> Define una imagen vectorial insertada.
<main> </main> Define el contenido principal o importante en el
documento. Solamente existe un elemento <main> en el
documento.
Capitulo 1: Etiquetas HTML Página de6 6

Curso de Desarrollo Web: Etiquetas HTML

  • 1.
    Para realizar sitiosweb debes probar su funcionamiento en la mayor cantidad de navegadores posibles o en los más utilizados, los cuales son: Chrome (64,8%), Firefox (21,3%), IE (7,1%), Safari (3,8%), Opera (1,8%). Junio de 2015. w3school.com Estadísticas del uso de los navegadores en los dispositivos móviles hasta Abril del 2015. Las cifras demuestran que hoy el uso de internet es mayoritariamente desde los dispositivos móviles que de escritorio. Hoy ya no es necesario saber cierta aplicación para decir que se sabe de diseño web (como era antes con Dreamweaver), ahora es más importante saber cierta tecnología independiente del software. Puedes crear tus páginas desde el simple block de notas o aplicaciones gratuitas como Brackets, Atom, Sublime Text, Bluefish, ICEcoder, TextWrangler, Notepad++, Kompozer, etc. Capítulo 1: Etiquetas HTML Estructura HTML La mayoría de las etiquetas tienen un inicio y un final y su contenido se encuentra dentro de estas dos, ej: <html> </html> Pero existen otras que se cierran solas, ej: <img src=“foto.jpg”> Las etiquetas que se cierran solas y las de apertura pueden llevar uno o más atributos Curso de Desarrollo Web Prof. Jorge Llantén Briceño. Diseñador Gráfico Publicitario de Universidad Santo Tomás (2000). Diplomado Profesional Web Manager & Web Design Pro (2014). jorgellantenb@gmail.com 9-98367785 www.j2.cl <!DOCTYPE html> Esta etiqueta indica que nuestro documento es HTML5. <html> Inicio de nuestro documento HTML. <head><head> Cabecera del documento. Aquí va información importante para los buscadores y no se ve dentro de nuestro navegador. <body></body> Cuerpo del documento. Es todo lo visible en nuestro navegador. </html> Cierre del documento HTML. Capitulo 1: Etiquetas HTML Página de1 6
  • 2.
    ej: <html lang=“es”>(Indicaque el contenido de nuestro documento está en idioma español y si el navegador no esta en el mismo idioma te da la alternativa de traducir el sitio.) <!--comentario --> Etiqueta para aplicar comentarios dentro del HTML sin influir en el resto del código. Las siguientes etiquetas son las mas frecuentes que van dentro de <head> <title></title> Titulo del documento. Es importante para los buscadores, si no lo tienes quedaras abajo en los resultados de búsqueda. <meta> Define los metadatos que no pueden ser definidos usando otro elemento HTML.Puede tener los siguientes atributos. <meta charset=“UTF-8”> Indica que la codificación de caracteres utilizados es occidental. <meta name="author" content="nombre del autor”> Autor del sitio. <meta name="description" content=“descripción de la página”> Descripción del sitio. <meta name="keywords" content=“palabras, clave”> Palabras clave separadas por “,” (Cada vez se usa menos). <meta name="viewport" content="width=device-width, user- scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum- scale=1.0”> Hacer que nuestra página ajustable y se adapte en IOS <link> Un vinculo a otro archivo independiente. Puede ir con los siguientes atributos <link rel="stylesheet" href=“style.css”> Para llamar a nuestra hoja de estilos <link rel="shortcut icon" type="image/x-icon" href=“favicon.ico”> Agregar un Favicon. Para mostrar el resto de los códigos para favicon de diferentes plataformas y tamaños. Puedes general el código y las imágenes desde http://realfavicongenerator.net <link href=“mobile.css” rel=“stylesheet” type=“text/css” media=“only screen and (min-width: 0px) and (max-width:320px)”> Linea para llamar a diferentes archivos CSS de una página adaptable. (las medidas son variables) <script><script> Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript <script src=“js/ jquery-1.11.2.min.js”></script> Para utilizar la libreria de JQuery Suele utilizarse también al final de la página, antes que acabe la etiqueta <body> Capitulo 1: Etiquetas HTML Página de2 6
  • 3.
    <!—[if lt IE9]> <script src=“http:// html5shiv.googlecode.com/svn/trunk/ html5.js”></script> <!—[endif]> Hacer funcionar las etiquetas HTML5 en versiones de IE incompatibles. <style><style> Información de estilos. Se usa cada vez menos dentro del documento HTML. <style>p{margin: 0;}</style> Ejemplo de uso de la etiqueta <style> <p></p> Párrafo <strong></strong> Énfasis fuerte. deja el texto en negrita indicando importancia <em> </em> Énfasis menos fuerte. deja el texto en cursiva indicando importancia, pero menos que <strong> <h1></h1>…hasta… <h6></h6> Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce. <h1> solo se puede usar una vez. <address></address> Define una sección que contiene información de contacto. <blockquote></blockquote> Representa una contenido citado desde otra fuente. <q></q> Representa una  cita textual  inline. <cite></cite> Representa el  título de una obra . <abbr></abbr> Representa una  abreviación  o un  acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title. <code></code> Fragmento de código de computadora. <dfn></dfn> Representa un término cuya  definición  está contenida en su contenido ancestro más próximo. <ins></ins> Define una adición en el documento. <del></del> Define una remoción del documento. <sub></sub> Representa un subíndice. <sup></sup> Representa un superíndice. <img> Representa una imagen. ej: <img src="logo.jpg" width="100" height="100" alt="Logo" title="Logo de empresa"/> <a></a> Representa un  hiperenlace o vínculo , enlazando a otro recurso. Capitulo 1: Etiquetas HTML Página de3 6 Etiquetas HTML más comunes que podemos agregar dentro de <body>
  • 4.
    Otros atributos quepodemos agregar dentro del vinculo son: target=”_blank” para abrir cada vínculo con esta opción en una ventana nueva. target=”new” para abrir todos los vínculos con esta opción en una sola ventana nueva. title=“textos” titulo que aparece al situar el cursor sobre el vínculo. Ejemplos de vínculos <a> <a href=“http://www.j2.cl”>Ir a J2</a> URL absoluta <a href=“contacto.html”>contacto</a> URL relativa <a href=“#arriba”>subir</a> Ancla dentro de la misma página <a href=“mailto:jorge@j2.cl”>Escribeme</a> Abre la aplicación de correo electrónico por defecto con la dirección de correo. <a href=“1.pdf”>baja el archivo</a> Se puede vincular a cualquier archivo. <a href=“tel:+56955555”>llamame</a> En los móviles el vínculo marca el número telefónico. <a href=“sms:+56955555”>Enviame un mensaje</a> En los móviles el vínculo envía un mensaje de texto a ese número telefónico. Listas <ol></ol> Define una lista ordenada de artículos. <ul></ul> Define una lista de artículos sin orden. <li></li> Define un artículo de una lista ennumerada. <dd></dd> Representa la definición de los términos listados antes que él. <dl></dl> Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas. <dt></dt> Representa un término definido por el siguiente <dd>. Ejemplo de Lista de definición <dl> <dt>gato</dt> <dd>es peludo</dd> <dd>toma leche</dd> <dt>perro</dt> <dd>come huesos</dd> </dl> Resultado: gato es peludo toma leche perro come huesos Capitulo 1: Etiquetas HTML Página de4 6
  • 5.
    Otras etiquetas usadasfrecuentemente <br> Representa un salto de línea. <hr> Separador de linea horizontal. <iframe></iframe> Representa un contexto anidado de navegación, es decir, un documento HTML embebido. Ejemplo de Lista sin orden <ul> <li>León</li> <li>Elefante</li> <li>Jirafa</li> </ul> Resultado: • León • Elefante • Jirafa Ejemplo de Lista ordenada <ul> <li>Primero</li> <li>Segundo</li> <li>Tercero</li> </ul> Resultado: 1. Primero 2. Segundo 3. Tercero Tablas <table></table> Representa datos con más de una dimensión. <tr></tr> Representa una fila de celdas en una tabla. <td></td> Representa una celda de datos en una tabla. <th></th> Representa una celda encabezado en una tabla.  Formularios <form></form> Representa un formulario, consistente de controles que puede ser enviado a un servidor para procesamiento. <fieldset></fieldset> Representa un conjunto de controles. <legend></legend> Representa el título de un <fieldset>. <label></label> Representa el título de un control de formulario. <input> Representa un campo de datos escrito que permite al usuario editar los datos. <button></button> Representa un  botón <select></select> Represents un control que permite la selección entre un conjunto de opciones. <datalist> </datalist> Representa un conjunto de opciones predefiniddas para otros controles. <option></option> Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>. <textarea></textarea> Representa un control de edición de texto multi-línea. <keygen> Representa un control de un generador de contraseñas. Capitulo 1: Etiquetas HTML Página de5 6
  • 6.
    Las etiquetas sepueden visualizar principalmente de 2 formas, en linea o en bloque. Hoy las etiquetas que ocupamos en su mayoría tienen un significado semántico para que los buscadores reconozcan el contenido de las etiquetas. Existen 2 etiquetas que podrían reemplazar a todas esas que no tienen ningún contenido semántico las cuales deberían ir desapareciendo mientras más se ocupen las etiquetas HTML5. PRÓXIMO CAPITULO: ESTILOS CSS <div></div> Representa un contenedor genérico sin ningún significado especial. <span></span> Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o id. Etiquetas más comunes HTML5 <header> </header> Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos. <nav> </nav> Define una sección que solamente contiene enlaces de navegación <section> </section> Define una sección en un documento. <article> </article> Define contenido autónomo que podría existir independientemente del resto del contenido. <aside> </aside> Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido <footer> </footer> Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación. <figure> </figure> Representa una figura ilustrada como parte  del documento. <figcaption> </figcaption> Representa la descripción de una figura. <time> </time> Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime. <video> </video> Representa un video , sus archivos de audio y canciones asociadas, con la interfaz necesaria para reproducirlos.  <audio> </audio> Representa un sonido o stream de audio. <svg> </svg> Define una imagen vectorial insertada. <main> </main> Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento. Capitulo 1: Etiquetas HTML Página de6 6