Curso de Desarrollo Web: Etiquetas HTML

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.)
 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>

<!—[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.
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

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 ﬁla 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 predeﬁniddas 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.

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.

Curso de Desarrollo Web: Etiquetas HTML

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Curso de Desarrollo Web: Etiquetas HTML

Más de Jorge Llanten

Último

Curso de Desarrollo Web: Etiquetas HTML