1. Etiquetas
2. Atributos
3. Valores
<!doctype html>
Se tiene que especificar, línea principal del documento HTML
<head>
Representa una colección de metadatos para el documento
<head> Título </head> Información en las hojas de estilo. No se ve la información dentro del Navegador.
Codificado de Caracteres
<meta charset="utf-8">
Descripción de la página web
<meta name = “desripcion”>
Keywords de la página web
<meta name= “keywords”>
<body>
Representa el contenido principal del documento, es el contenido visible
<body>
<p> Esto es lo que se ve </p>
</body>
<body bgcolor="#00aa00" link="#ffff00" vlink="#ffcc33" alink="#ff9900" text="#ffffff">
color="color_name|hex_number|rgb_number"
Colores de background y links se definen en body. Son utilizados el nombre del color en inglés o en números hexadecimales (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) o valores rgb, </body>
Color de texto se define <font color="red">Lo que este aquí adentro es rojo </font>
<body background="images/back.jpg">Con Imagen de Fondo </body>
<title>
El titulo de la página Web, es usado en la barra de los Navegadores, historia, bookmarks o Favoritos en resultados de búsqueda
<title> TITULO DE PAGINA WEB</title>
Headings
<h1></h1> Mayor rango
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>Menor Rango
Parrafos
<p> Esto es un párrafo</p>
Línea
<hr> es un elemento vacío y se puede no cerrar.
Line Break
<br />
Bold
<b> </b>
Strong
<strong> </strong>
Italic
<i> </i>
Enfásis
<em> </em>
Listas
Sin orden
<ul>
<li> cubo</li>
<li> esfera</li>
<li> piramide</li>
</ul>
Ordenada
<ol type= “1”>
<li> cubo</li>
<li> esfera</li>
<li> piramide</li>
</ol>
1 Números décimales
I Números romanos
a Orden alfabético minúsculas
A Orden alfabético mayúsculas
Descriptiva
<dl>
<dt> cubo</dt>
<dd> definición</dd>
<dt> esfera</dt>
<dd> definición</dd>
</dl>
Enlaces
<a> Inserta Vinculos
<a href="http://www.w3.org"> World Wide Web Consortium (W3C)</a>
Vínculos entre páginas del mismo sitio
<ul>
<li> <a href="Index.html"> Inicio</a> </li>
<li> <a href="Nosotros.html"> Nosotros</a> </li>
<li> <a href="Historias Extraordinarias.html"> Historias Extraordinarias</a> </li>
</ul>
Estructura de directorio: <a href="Carpeta/Archivo">
mailto:
<a href="mailto:juanban8@gmail.com"> Inicio</a>
Vínculos en nuevas pestañas
<target="_blank">Nueva ventana o pestaña
<a href="Nosotros.html" target="_blank"> Nosotros</a>
Vinculos dentro de la misma página
<id>Enlace dentro de la misma página
<h1 id="top">Título</h1>
<p>Mucho texto</p>
<a href="#top">Título</a>
<adress>
Utilizado para poner los datos del creador de la página.
Imágenes
<img>
<img src="images/archivo.jpg" alt="Descripción de la imágen" title="Título de la imagen">
Alineacion (tablas, imagenes, objetos, parrafos)
<img src="images/archivo.jpg" align="left">Izquierda
<img src="images/archivo.jpg" align="right">Derecha
<img src="images/archivo.jpg" align="top">Arriba
<img src="images/archivo.jpg" align="middle">Mitad
<img src="images/archivo.jpg" align="bottom">Abajo
Video
<video>
<video src="videos/archivo.mp4" poster="images/archivo.jpg" width="400" height="400"
preload Puede ser auto o none o metada
controls
autoplay
loop>
<p>Un video de prueba</p>
<Video>
Audio
<audio>Enlace dentro de la misma página
<audio src="audios/archivo.mp3" controls autoplay>
<p>Se escucha algo</p>
</audio>
<nav>
Utilizado para enlaces de navegación HTML5
<audio>Enlace dentro de la misma página
<audio src="audios/archivo.mp3" controls autoplay>
<p>Se escucha algo</p>
</audio>
<nav>
Utilizado para enlaces de navegación HTML5
<nav>
<a href="Inicio">Inicio</a>
<a href="Galería">Galería</a>
<a href="Contacto">Contacto</a>
</nav>
<table>
Para crear Tablas
Para crear Tablas
<table>
<tr>
<td>uno</td>
<td>dos</td>
<td>tres</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<td>uno</td>
<td>dos</td>
<td>tres</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<div>
Sirve para agrupar un grupo de elementos en un nivel, si se usa el elemento id con CSS se puede definir el estilo de esa división, sirve para localizar secciones de una página
Sirve para agrupar un grupo de elementos en un nivel, si se usa el elemento id con CSS se puede definir el estilo de esa división, sirve para localizar secciones de una página
<div id="header" align="center">
<img src="images/archivo.jpg">
<p>Esta es la parte de arriba</td>
</div> <!--fin de header -->
<!-- -->
Comentarios que no se desplegan en el navegador
<p>Esta es la parte de arriba</td>
</div> <!--fin de header -->
<!-- -->
Comentarios que no se desplegan en el navegador
