Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Demo
Ejemplo de Texto en negrita
Los elementos HTML tienen muchos rangos. Todo lo que ves: párrafos,
logo, baner, los enlaces de navegación del lado izquierdo y derecho y
todos son elementos de esta página.
<h2>Título (encabezado)<h2>
<p>Párrafo</p>
<i>cursiva</i>
<b>negrita</b>
</body>
El elemento html
Un documento HTML siempre empezará y terminará con una etiqueta
<html> y su respectivo </html>. Esta es la estructura estándar de un
documento HTML.
HTML<html>
</html>
El elemento head
El elemento head es el que va a continuación. Mientras lo pongas
entre html y body todo debería ir bien. Head no tiene una función
evidente, así que hablaremos de este aspecto en los siguientes
tutoriales. Sin embargo quiero mencionar que <head> puede ofrecerle
información muy útil al navegador. Aquí puedes introducir otros códigos
como Javascript o CSS.
HTML<html>
<head>
</head>
</html>
:
HTML<html>
<head>
</head>
</html>
Puedes ponerle el nombre que quieras, solo recuerda que los nombres
descriptivos son los más fáciles de encontrar después.
El elemento body
El elemento body es el que define el comienzo del contenido de la
página en sí misma (títulos, párrafos, fotos, música y todo lo demás).
Como puedes ver en el menú de la izquierda, tratamos uno por uno, todos
estos elementos del contenido.
HTML<html>
<head>
</head>
<body>
</body>
</html>
Demo
Título centrado
Otros ejemplos:
Demo
Atributos genéricos
Debes recordar que los atributos son utilizados para personalizar los
elementos de una página web. He juntado aquí algunos de los atributos
más comunes utilizados en HTML:
Atributo Opciones Función
El atributo title
El atributo title se usa normalmente para enlaces y muestra un pop-up,
con el texto introducido, cuando se pone el cursor encima. El atributo
title es una pieza fundamental para la optimización de contenidos para el
motor de búsqueda como vera un poco mas tarde. Aunque, como ya he
dicho, el atributo title se suele usar con los enlaces, se puede aplicar a
la mayoría de etiquetas HTML.
Un título cualquiera
Pon el cursor encima mia
Pasa tu ratón por encima del titulo o el enlace de arriba, así veras la
magia del atributo "title". Este atributo le dará a tu página un poco más
de
Demo
Este atributo ubica un espacio vacío encima y
debajo del texto para hacerlo evidente, así el buscador podrá
reconocerlo como es.
HTML<body>
<h1>Los encabezados</h1>
<h2>son</h2>
<h3>geniales</h3>
<h4>para</h4>
<h5>los títulos</h5>
</body>
Demo
Los encabezados
son
geniales
para
los títulos
y los subtítulos
Puedes ver que cada título tiene un salto de linea antes y después. Cada
vez que pongas un encabezado, el navegador creará un espacio
automáticamente entre las lineas, tanto arriba como abajo.
Demo
HTML - Títulos 1:6 (Encabezados)
En HTML, un título es exactamente lo que parece: un título o un subtitulo
real. Cuando pones un texto en una etiqueta h1 , El texto será puesto en
negrilla, y la dimensión de la letra será igual al número del encabezado.
Los títulos pueden tener dimensiones entre 1 y 6 , siendo 1 la mas
pequeña y 6 la mas grande.
HTML<p>
</p>
Demo
Charles Brownstone
Florida Street No 1
New York, USA
También puede ser usado para señalar una firma, por ejemplo al final de
una carta.
HTML<p>
Gracias,<br />
<br />
<br />
Vicepresidente
</p>
Demo
Gracias,
Charles Brownstone
Vicepresidente
LETRA MAS PEQUEÑA <small> una palabra más pequeña que las otras</small>
HTML
<p align="justify">Este atributo ubica un espacio vació encima y debajo del texto para
hacerlo evidente, así el buscador podrá reconocerlo como es.</p>
HTML - Párrafo centrado
HTML
<p align="center">Este atributo ubica un espacio vacío encima y <br />debajo del texto
para hacerlo evidente, así el buscador podrá reconocerlo como es.</p>
Las imágenes son muy importantes en una página web. Por lo tanto es conveniente
utilizarlas de manera correcta. Inserta imágenes usando la etiqueta <img/>.
HTML
<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg" />
"src" es el acceso directo para "source". Este atributo es usado para indicar la ubicación
de la foto.
HTML
<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg" />
Demo
imagen html de ejemplo
HTML
<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg" width="120"
height="75" />
Demo
imagen html de ejemplo
Tambien puedes definir el tamaño de una imagen usando CSS.
right (derecha)
left (izquierda)
center (centro)
Valigh (vertical)
top (arriba)
bottom (abajo)
center (centro)
HTML
<img alt="imagen html de ejemplo" align="right" src="/assets_tutorials/img/image.jpg"
/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
En HTML existen tres tipos de listas. ol muestra una lista ordenada mientras que ul
muestra una lista no ordenada, y para realizar una lista de definiciones, la etiqueta
usaremos dl. Usa los atributos type y start para hacer una lista según tus necesidades.
HTML
<h4 align="center">Objetivos</h4>
<ol>
<li>Encontrar un trabajo</li>
<li>Ganar mucho dinero</li>
<li>Cambiarse de ciudad</li>
</ol>
Puedes empezar tu lista con el número que desees simplemente especificandolo con la
ayuda del atributo start.
HTML
<h4 align="center">Objetivo</h4>
<ol start="4">
<li>Encontrar un trabajo</li>
<li>Ganar mucho dinero</li>
<li>Cambiarse de ciudad</li>
</ol>
Lista no ordenada
Para construir una lista no ordenada usamos la etiqueta ul. Las listas no ordenadas son
de diferentes tipos: Casillas, puntos, y círculos. El valor estándar en la mayoría de los
navegadores son los puntos o bullets.
Lista de compras
HTML
<ul>
<li>leche</li>
<li>queso</li>
<li>huevos</li>
<li>azúcar</li>
</ul>
Demo
leche
queso
huevos
azúcar
Mas abajo puedes ver como se formas los diferentes estilos de listas que comentamos
anteriormente.
HTML
<ul type="square">
<ul type="disc">
<ul type="circle">
HTML
<dl>
<dt><strong>Cheese</strong></dt>
<dd>Palabra en inglés para queso</dd>
<dt><strong>Computer</strong></dt>
<dd>Palabra en inglés para ordenador</dd>
</dl>
Demo
Cheese
Palabra en inglés para queso
Computer
Palabra en inglés para ordenador
Las etiquetas para poner el texto en cursiva, al igual que la etiqueta bold, se usa para
subrayar ciertos términos o palabras claves, a veces una frase entera. Aunque, no es
recomendable abusar de su uso del texto en cursiva.
HTML
Etiqueta <i>Italic</i>. Texto estilo cursiva!<br />
Etiqueta <em>Emphasized</em>. Texto resaltado, normalmente en cursiva.
Dependiendo del dispositivo puede ser resaltado de otras formas!
Demo
Etiqueta Italic. Texto estilo cursiva!
Etiqueta Emphasized. Texto resaltado, normalmente en cursiva. Dependiendo del
dispositivo puede ser resaltado de otras formas!
Normalmente, el navegador interpretará estas etiquetas de la misma manera.
Las tablas pueden parecer difíciles al principio, pero con un poco de paciencia y
práctica veras que las cosas no son como parecen. La etiqueta <table> se usa para abrir
una tabla. Dentro de esta etiqueta encontraremos otras dos etiquetas típicas, <tr> (lineas
de la tabla) y <td> (columnas de la tabla). Pero la mejor explicación es siempre un
ejemplo:
HTML
<table border="1">
<tr>
<td>Fila 1 Celda 1</td>
<td>Fila 1 Celda 2</td>
</tr>
<tr>
<td>Fila 2 Celda 1</td>
<td>Fila 2 Celda 2</td>
</tr>
</table>
El contenido será ubicado dentro de las filas de la tabla. Una fila representa lo que está
entre <td> y </td>. El atributo border establece el ancho del borde la de tabla.
HTML
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Fila 1 Celda 1</td>
<td>Row 1 Cell 2</td>
<td>Fila 1 Celda 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Linea 2 Celda 3</td>
</tr>
<tr>
<td colspan="3">Linea 3 Celda 1</td>
</tr>
</table>
HTML - Espacio entre las celdas
Con la ayuda de los atributos 'cellpadding' y 'cellspacing' podemos establecer la
distancia entre la celdas. cellspacing determina el tamaño del borde, y cellspadding la
distancia entre el marco y el contenido. En el siguiente ejemplo hemos añadido también
poco de color.
HTML
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
<tr>
<td>Fila 1 Celda 1</td>
<td>Fila 1 Celda 2</td>
</tr>
<tr>
<td>Fila 2 Celda 1</td>
<td>Fila 2 Celda 2</td>
</tr>
</table>
Para mostrar mejor la diferencia puedes borrar el borde del ejemplo anterior.
La distancia entre las celdas y el borde será interpretado en pixeles por el navegador.
Sabiendo esto, un valor de 10 significa en realidad 10 pixeles. Este atributo no es el
único que usa como unidad de medida los pixeles, pero aprenderemos sobre los demás a
medida que avancemos en los siguientes tutoriales.