HTML APUNTES

¿Qué es HTML y para que sirve?

HTML, «HyperText Markup Language» (Lenguaje de Marcado de Hipertexto), es un lenguaje de programación utilizado para definir la estructura y el formato de una página web, como los encabezados, párrafos, imágenes, enlaces y otros elementos.

En HTML se utilizan «etiquetas» para definir los diferentes elementos dentro de una página web. Estas etiquetas indican al navegador cómo debe mostrar y presentar cada elemento al usuario.

INICIO EN HTML

Este lenguaje de programación esta compuesto por etiquetas, la mayoría por una de apertura y una de cierre; hay algunas que solo están compuestas por una, estas se definen como vacías.

Las principales etiquetas que se deben conocer son las siguientes:

<!doctype html> : Define el tipo de documento y la versión de HTML que se está utilizando. En este caso HTML 5, que es la versión renovada de HTML. Un archivo HTML se iniciará con esta etiqueta.

<html> </html>: Entre ambas irá todo el contenido de la página. Una marcando el inicio y una marcando el final.

<head></head>: Entre ellas se colocan elementos y metadatos que no son visibles directamente en la página, como el título de la página (que se muestra en la pestaña del navegador), enlaces a hojas de estilo CSS, scripts, entre otros.

<title></title>: Aquí definiremos el título de la página que se mostrará en la pestaña del navegador.

<body></body>: Aquí es donde se coloca el contenido visible de la página, como texto, imágenes, enlaces y otros elementos que los usuarios verán en el navegador.

En la foto se puede ver se ha utilizado <title> dentro de head, ya que será el nombre de la página que aparecerá en el navegador.

ETIQUETAS DENTRO DE <body></body>

Encabezados : Los encabezados en HTML van de h1 a h6 y se componen por una etiqueta de apertura y una de cierre. <h1></h1>

<p></p>: Introduce un párrafo.

<button></button>: Esta etiqueta sirve para crear botones que al pulsarlos nos redijiran a otra página.

Si creamos varios botones estos se añadirán unos al lado del otro. Si por el contrario queremos añadir uno debajo deberemos añadir la etiqueta <br>, es una etiqueta vacia que cumple la función de santo de línea.

<strong></strong>: Esta etiqueta marcara en texto como importante, dándole un aspecto en negrita.

<em></em>: Le da énfasis al texto poniéndolo en cursiva.

Tanto <strong> como <em> son etiquetas que aportan significado semántico al contenido y no solo cambian su estilo visual.

Para insertar una imagen usaremos la etiqueta <img>, podemos utilizar un enlace de una imagen en un servidor web o por en contrario la ruta de ubicación en un servidor local; para eso usaremos el atributo ‘src’(source):

<img src= «ruta o enlace de la imagen» alt= descrición de la imagen»>

También podemos utilizar el atributo ‘alt’ (alternative text) para introducir una descripción de la imagen, esto no se vera en nuestra página.

 <img src=«https://imgs.search.brave.com/f_g1M7l3MSqhGhS6R5p3HFJ0OSADqsK0Xf_tt31tzik/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9ibG9n/Lmh1YnNwb3QuZXMv/aHViZnMvbWVkaWEv/aW1hZ2VuaHRtbGVq/ZW1wbG8ucG5n» alt=«HTML5 IMAGEN»>

Para definir el tamaño de la imagen utilizaremos los atributos width=»ancho» y height=»alto» dentro de la etiqueta img.

<a></a>: Crea enlaces o hipervínculos en una página web. Se usa el atributo href (hypertext reference) que se utiliza para especificar la URL de destino a la que deseas que apunte el enlace. Puede ser una URL completa a otra página web, un recurso en línea, una dirección de correo electrónico, un archivo en tu servidor local, entre otros.

Ahora es necesario introducirse también en CSS, ya que es el lenguaje de programación que nos permite dar estilos y que el contenido se vea más atractivo.

Deja un comentario

Diseña un sitio como este con WordPress.com
Comenzar