Está en la página 1de 17

HTML<p>Ejemplo de <b>Texto en negrita</b></p>

<p>Ejemplo de <em>Texto acentuado</em></p>

<p>Ejemplo de <strong>Texto fuerte</strong></p>

<p>Ejemplo de <i>Texto en cursiva</i></p>

<p>Ejemplo de <sup>Texto de superíndice</sup> o exponente</p>

<p>Ejemplo de <sub>Texto de subíndice</sub> o simplemente indice</p>

<p>Ejemplo de <del>Texto tachado</del></p>

<p>Ejemplo de <code>Texto de código</code></p>

Demo
Ejemplo de Texto en negrita

Ejemplo de Texto acentuado

Ejemplo de Texto fuerte

Ejemplo de Texto en cursiva

Ejemplo de Texto de superíndice


o exponente

Ejemplo de Texto de subíndice o simplemente indice

Ejemplo de Texto tachado

Ejemplo de Texto de código

Hay tres maneras distintas de definir un color. La manera más fácil es


nombrar el color usando la palabra en inglés. Por ejemplo: black (negro),
white (blanco), red (rojo), green (verde) y blue (azul). He juntado aquí los
nombres de los colores que son soportados en HTML.

Color Hexa Color Hex Color Hex Color Hex

aqua #00FFFF green #008000 navy #000080 silver #C0C0C0

black #000000 gray #808080 olive #808000 teal #008080

blue #0000FF lime #00FF00 purple #800080 white #FFFFFF


fuchsi #FF00FF maroon #800000 red #FF0000 yello #FFFF00
a w

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.

Un elemento tiene tres partes: Una etiqueta de abertura, el contenido del


elemento y una etiqueta de cierre.

 <p> - la etiqueta que abre un párrafo


 Contenido del elemento - el párrafo en sí
 </p> - la etiqueta de cierre

Todas las páginas web tendrán al menos los elementos


base: html, head, title y body.

Las etiquetas están escritas en letras pequeñas. Este es el estándar en


XHTML, y en HTML dinámico.

Abajo hay algunos ejemplos sobre etiquetas en HTML:


HTML<body> actúa como una cápsula del contenido.

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

Por favor abre un bloc de notas y copia el siguiente código:

HTML<html>

</html>

Guarda el documento desde "Archivo/Guardar como". Selecciona "Todos


los archivos" y nombra el nuevo archivo como "index.html". Dale
"Guardar". Ahora abre el archivo en un navegador de manera que puedas
actualizar la página (F5).

Si hiciste todo correctamente podrás ver tu página web, en blanco!

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.

Por el momento dejaremos así con la excepción de que introducimos el


elemento desde la lista, pero primero observemos todo sin él:

HTML<html>

<head>

</head>

</html>

Si guardas el documento e intentas actualizar la página web desde el


navegador, no veras ninguna diferencia. Ten un poco de paciencia,
porque a continuación estudiaremos algunos elementos visibles.
El elemento title
Para que todo salga bien tendrás que poner la etiqueta title dentro de la
etiqueta head. Lo que escribas dentro de estas dos etiquetas
de title ( <title> y </title<) será visto como el nombre del navegador,
normalmente en la parte superior derecha. A continuación tenemos el
código HTML

:
HTML<html>

<head>

<title> Mi primera página web!</title>

</head>

</html>

Guarda el archivo y abrelo en tu navegador. Podrás ver el título en la


pestaña del navegador en la parte superior izquierda (en la mayoría de
los navegadores) o derecha (en algunos).

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.

Por ahora lo que necesitas recordar es que body abarca todo el


contenido de la página.

HTML<html>

<head>

<title> Mi primera página web!</title>

</head>
<body>

Hola chicos! Aquí pondremos el contenido un poco mas tarde!

</body>

</html>

Ahora guarda y actualiza tu pagina HTML. Deberías poder ver este


mensaje en tu navegador. Pero esto es solo el comiendo, pasa al
siguiente tutorial para que aprendas sobre los siguientes elementos de
una pagina html.

Excepciones - etiquetas que no requieran


una etiqueta de cierre
Hay algunas etiquetas que no cumplen con el modelo mostrado encima.
La razón es que, de hecho, estas etiquetas no tienen contenido. Debido a
esto usaremos una manera distinta para escribir estas etiquetas.

El ejemplo más simple es el "salto de linea" (linebreak)


HTML<br/>

Esta etiqueta combina las dos etiquetas, abertura y cierre en un forma


mucho mas eficiente de usar. El salto de línea se utiliza para indicarle al
navegador que queremos estar una línea más abajo, sin cerrar el párrafo.

Siguiendo este ejemplo, otras etiquetas han sido modificadas para


escribir códigos HTML de una manera rápida y sencilla.

HTML<img src="../img/image.jpg" /> -- Etiqueta de imagen --

<br /> -- Etiqueta de salto de línea --

<input type="text" size="12" /> -- Campo de entrada --


Como puedes ver el navegador es capaz de reproducir la imagen, siempre
y cuando le proporcionemos la ubicación de la misma, usando el atributo
"src". Más sobre esto en el atributo ser y imágenes en general, en los
siguientes tutoriales.

HTML - El atributo align


Si deseas alinear a un lado o al otro, algunos elementos de tu página,
entonces tendrás a tu disposición el atributo "align". Puedes alinear
hacia la izquierda, derecha o hacia el centro de la página casi cualquier
elemento. Por defecto los elementos se alinean hacia la izquierda,
excepto cuando se especifica otra alineación.

HTML<h2 align="center">Título centrado </h2>

Demo

Título centrado
Otros ejemplos:

HTML<h2 align="left">Título alineado hacia la izquierda </h2>

<h2 align="center">Título centrado </h2>

<h2 align="right">Título alineado hacia la derecha </h2>

Demo

Título alineado hacia la izquierda


Título centrado
Título alineado hacia la derecha

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

align right, left, center Alineación horizontal

valign top, middle, bottom Alineación vertical

bgcolor Valor numérico, Un fondo detrás de el elemento.


hexadecimal o RGB

backgrou URL Un fondo detrás de el elemento.


nd

id Definido por el usuario Nombra un elemento que será usado


con CSS.

class Definido por el usuario Clasifica un elemento que será usado


con CSS.

width Valor numérico Especifica el ancho de un elemento.

height Valor numérico Especifica la altura de un elemento.

title Definido por el usuario Muestra un "pop-up" con un título


para un elemento.

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.

HTML<h2 title="Soy un atributo de título!">Un título cualquiera</h2>

<a href="#" title="Yo soy un enlace en HTML">Pon el cursor encima mia</a>


Demo

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

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>

Demo
Este atributo ubica un espacio vacío encima y
debajo del texto para hacerlo evidente, así el buscador podrá
reconocerlo como es.

En este ejemplo cada linea del párrafo ha sido centrada en la mitad de la


linea anterior.

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 estará 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<body>

<h1>Los encabezados</h1>

<h2>son</h2>

<h3>geniales</h3>

<h4>para</h4>
<h5>los títulos</h5>

<h6>y los subtítulos</h6>

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

Títulos HTML - Ejemplo práctico


Ahora veremos un ejemplo fácil y lo practicaremos un poco para que la
información sea entendida totalmente. Sería recomendable que te
familiarices con estos términos antes de seguir con los siguientes
tutoriales HTML.

HTML<h2 align="center">HTML - Títulos 1:6 (Encabezados)</h2>

<p>En HTML, un título es exactamente lo que parece: un título o un subtitulo


real. Cuando pones un texto en una etiqueta <em>h1</em> , 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.</p>

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.

El salto de linea (linebreak) es diferente a las otras etiquetas que vimos


en los tutoriales anteriores. La etiqueta linebreak, terminará la linea y
empezara una nueva un poco mas abajo, dejando un espacio un poco más
pequeño que el de un párrafo. Normalmente se usa dentro de un párrafo,
como puedes ver, en el siguiente ejemplo.

HTML<p>

Charles Brownstone <br />

Florida Street No 1 <br />

New York, USA <br />

</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 />

Charles Brownstone <br />

Vicepresidente
</p>

Demo
Gracias,

Charles Brownstone
Vicepresidente

ETIQUETAS PARA MANEJAR TEXTOS

NEGRITAS <b>texto en negrita sin importancia</b>


NEGRITAS <strong> texto en negrita, pero con significado semántico e importancia
más fuerte</strong>

CURSIVA <i>texto en cursiva sin importancia</i>


CURSIVA<em> texto en cursiva, pero con significado semántico e importancia más
fuerte</em>

LETRA MAS PEQUEÑA <small> una palabra más pequeña que las otras</small>

RESALTAR UN TEXTO <mark>párrafo</mark>

TEXTO TACHADO <del>tachado</del>

TEXTO SUBRAYADO <ins>subrayado</ins>

SUB INDICE <sub>sub índice</sub>

SUPER INDICE <sup> super índice </sup>

CAMBIAR EL COLOR Y EL TAMAÑO TEXTO <h1 style=“color: blue; font=size:


20px;” > soy un título </h1>

PIE DE PAGINA <footer> </footer>

<p>El párrafo es un elemento base en la edición de texto. La etiqueta para un párrafo es


<em>p</em>.</p>
<p>Este atributo ubica un espacio vacíoencima y debajo del texto para hacerlo evidente,
así el buscador podrá reconocerlo como es.</p>

HTML - Párrafo justifido


Los párrafos pueden ser editados con la misma facilidad que lo hace un editor de texto
normal y corriente. El siguiente ejemplo es para ejemplificar el atributo justify

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>

HTML - El párrafo alineado a la derecha


HTML
<p align="right">Este atributo deja un espacio vacío encima y debajo del texto para <br
/>evidenciarlo, así tanto el navegador como el usuario lo podrá distinguir como tal.</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.

Enlace local Descripción


src="image.jpg" la imagen está ubicada al mismo nivel del archivo .html
src="../image.jpg" la imagen está ubicada en un nivel previo al archivo .html
src="../img/image.jpg" la imagen está ubicada en la carpeta "img" en un nivel
previo al archivo .html

HTML - atributo "alternative" para imágenes


El atributo "alt" es usado para visualizar un texto en vez de una imagen en caso de que
tu navegador, por alguna razón, no puede mostrar la imagen o cuando un usuario ha
desactivado la opción "Show Image".

HTML
<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg" />
Demo
imagen html de ejemplo

HTML - la altura y el ancho de una imagen


Para determinar la altura y el ancho de una imagen se usan los atributos height y width.
Lógico, cierto!

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.

HTML - alineación horizontal y vertical de una imagen


Para esto utilizaremos los atributos align y valign. Las opciones ofrecidas por estos
atributos son:
Align (horizontal)

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.

ul - lista sin clasificar, bullets (puntos).


ol - listas ordenadas, números.
dl - lista de definiciones.
HTML - La lista ordenada
Usa la etiqueta ol para construir lista lista ordenada. Para señalizar al navegador los
elementos de una lista tienes que usar la etiqueta li dentro de ol.

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 - La lista de definición


También puedes hacer listas de definición utilizando la etiqueta dl. Esta lista dará la
definición a la palabra especificada. Para que la palabra sea mas evidente y que se
distinga bien de la descripción se suele poner también en negrita.

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.

Para crear este tipo de texto podemos usar lo siguiente:

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 - Tablas asimétricas


Para formar tablas asimétricas usaremos 'rospawn' para unir más de una linea y 'colspan'
para unir más de una columna. Ademas, si queremos que la primera linea sirva como
linea de título para las columnas usaremos la etiqueta <th>. Estas serán escritas con
letras en negrilla como veremos en el siguiente ejemplo:

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.

También podría gustarte