Introducción a HTML
El Lenguaje de Marcado de Hipertexto
(HTML) es el código que se utiliza para estructurar y desplegar una página web
y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista
con viñetas, o imágenes y tablas de datos.
Etiquetas y su estructura
Cuando escribes código en HTML, estás
escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con un número
de partes específicas, incluyendo:
- ·
El
carácter “menor que” <
- · Una
palabra o carácter que determina qué etiqueta se está escribiendo
·
Cualquier
número de atributos HTML que se quiera usar, escritos de la forma nombre
=”valor”
- · El
carácter “mayor que” >
El hipertexto (HTML) es un lenguaje
informático que forma la mayoría de las páginas web y plataformas online. HTML
no se considera un lenguaje de programación, ya que no puede crear una
funcionalidad dinámica. Sin embargo, los usuarios web pueden crear y
estructurar secciones, párrafos y enlaces usando elementos, etiquetas y
atributos.
En la actualidad existen 142
etiquetas HTML disponibles que permiten la creación de varios elementos. A
pesar de que algunos ordenadores nuevos ya no admiten algunas de estas, es
importante tener constancia de la existencia de ellas.
Los elementos HTML suelen dividirse
en tres partes. Esta combinación de las tres crea un elemento HTML.
- Etiqueta
de apertura: Se utiliza para indicar dónde empieza un elemento. Está envuelta
en corchete de apertura y cierre. Por ejemplo puedes usar la etiqueta de inicio
<p> para crear un párrafo.
- Contenido:
El contenido es el resultado que ve la audiencia.
- Etiqueta
de cierre: Es lo mismo que la etiqueta de apertura pero con una barra inclinada
delante del nombre del elemento. Es decir, </p> para finalizar un
párrafo.
Otra parte fundamental de un elemento
HTML son los atributos. Estos tienen dos secciones:
- ·
Nombre:
El nombre identifica la información adicional que un usuario quiere agregar.
- · Valor del atributo: Da más detalles que el anterior.
Etiquetas básicas de HTML
Hay una serie de etiquetas que son
las más usadas para crear cualquier documento HTML, a continuación, las
explicamos:
<body> para el contenido
<head> para información sobre el documento
<div> división dentro del contenido
<a> para enlaces
<strong> para poner el texto en negrita
<br> para saltos de línea
<H1>…<H6> para títulos dentro del contenido
<img> para añadir imágenes al documento
<ol> para listas ordenadas, <ul> para listas
desordenadas, <li> para elementos dentro de la lista
<p> para parágrafos
<span> para estilos de una parte del texto
<body>
</body>
Indica la parte del cuerpo del
contenido de un documento HTML. Es una etiqueta esencial para cualquier
documento ya que indica donde empieza el contenido visible del documento.
<head></head>
La parte superior del documento HTML,
es donde podremos indicar los metadatos: título del documento, hojas de
estilos, javaScript, CSS…
<div>
</div>
Un elemento que es usado
mayoritariamente para agrupar otros elementos y actuar como plantilla de otros
controles. La etiqueta <div> nos ayuda a estructurar el documento en
secciones.
<a>
</a>
Es una etiqueta que nos ayuda a poder
crear un enlace a una página web. El atributo principal de la etiqueta HTML es
href, donde pondremos el enlace al que queremos conectar. Otro atributo muy
usado es target, el cual nos sirve para indicar si el enlace se abrirá en una
nueva ventana o en la misma.
<strong>
</strong>
Si tienes mucho texto, es importante
poder dar énfasis a una parte en concreto, con la etiqueta strong lo podemos
hacer.
<br>
Con esta etiqueta HTML le podemos
decir al navegador que viene un salto de línea. Nos sirve para hacer el texto
más leíble.
<H1>
</H1> …. <H6> </H6>
Hay diferentes niveles de títulos,
del 1 al 6. Las etiquetas <H + número> nos permiten indicar la
importancia del título y para estructurar el contenido, de esta forma ayudamos
a los bots a entender la importancia del contenido.
<IMG>
</IMG>
Usamos la etiqueta IMG para mostrar
imágenes dentro del contenido. Necesita el atributo src para funcionar, ya que
será donde indicaremos desde donde tiene que mostrar la imagen.
<OL>
<li></li> <OL> | <UL> <li></li> <UL>
Las etiquetas OL y LI nos sirven para
crear listas, OL para listas ordenadas y UL para listas sin orden. Dentro de
las listas, los elementos se identifican con la etiqueta LI.
Ejemplo HTML:
<ul>
<li>Primer
elemento</li>
<li>Segundo
elemento</li>
<ul>
<P>
</P>
Etiqueta que nos sirve para agrupar
texto dentro de un parágrafo. El propósito es poder hacer el contenido más
fácil de leer y organizado.
<SPAN>
</SPAN>
Con la etiqueta podemos personalizar
el estilo de solamente una parte del texto.
Ejemplo HTML:
Solo <span style=”color:
red;”>esta palabra</span> en rojo.
Comentarios