Está en la página 1de 21

Introducción HTML5

Julio Proaño
Introducción
HTML (Hypertext Markup Language) es un lenguaje de marcado.

Sirve para definir la estructura y la semántica de nuestra página web.

Fue creado y es mantenido por W3C (World Wide Web Consortium)


Objetivos
Introducir los conceptos generales de HTML5

Conocer las principales etiquetas de HTML5


Snippets HTML
https://libro.cursohtml5desdecero.com/snippets/html/
HTML: etiquetas
Las etiquetas sólo pueden ser de dos tipos:

1.Las que tienen una apertura y un cierre

Ejemplo:

<elemento atributo="valor">Contenido</elemento>

<a href="http://www.google.com">Google</a>

Tenemos un elemento a donde el valor del atributo href es http://www.google.com,


y qué su contenido es Google
HTML: etiquetas
Las etiquetas están siempre contenidas entre <> y el cierre sólo incluye el nombre
del elemento precedido de la barra “/”. Ejemplo </elemento>

las etiquetas siempre están contenidas entre los símbolos < >

2. Elementos autocontenidos (no se cierran explícitamente)

<elemento atributo="valor">

<img src="html-css-js.png" alt="Logotipos de HTML5, CSS3 y


JavaScript">
Ejemplos de etiquetas
Ejemplos de etiquetas en HTML5

elemento: html, head, meta, title, body, img…

atributo: charset, src, alt, …

valor: UTF-8, "url" (la URL a un recurso), "texto", ...


Anidación de etiquetas
<head>

<title>Título de la página</title>

<meta name="author" content="Raúl Jiménez


Ortega - @hhkaos">

</head>

La etiqueta head es el padre de la etiqueta title y meta.

La etiqueta title y meta son hijas de la etiqueta head.


Orden de apertura y cierre
Cuando se anidan etiquetas, la primera etiqueta en cerrarse tiene que ser la
última que se abrió.

<p>El orden es <strong>muy importante</p></strong>

La forma correcta de hacerlo sería:

<p>El orden es <strong>muy importante</strong></p>


Otros aspectos
No todas las etiquetas son anidables entre sí; por ejemplo: una etiqueta body no
puede contener una etiqueta head.

Es muy importante añadir la sangría en el código para distinguir entre las


etiquetas.

No existe un límite máximo de anidamiento.


Estructura básica de una página
Estructura inicial
<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>Título de la página</title>

</head>

<body></body>

</html>
Estructura básica de una página
<!DOCTYPE html>: indicar al navegador que el código HTML en el que está
escrita la página es en la versión 5, osea que es HTML5.

<html lang="es">... </html>: indica la raíz del documento y todas las etiquetas
deben estar incluidas dentro. Además, especifica del idioma.

<head> ... </head>:se usa para envolver otras etiquetas que ofrecen
información principalmente a: al navegador, a los buscadores y a otras páginas
(como pueden ser redes sociales, etc).

La información especificada dentro del head no se muestra dentro de la página


web que ve el usuario.
Estructura básica de una página
<head> ... </head>:se usa para envolver otras etiquetas que ofrecen
información principalmente a: al navegador, a los buscadores y a otras páginas
(como pueden ser redes sociales, etc).

La información especificada dentro del head no se muestra dentro de la página


web que ve el usuario.

<meta charset="UTF-8">: le indica al navegador qué tipo de caracteres contiene


la página.
Estructura básica de una página
<title> ... </title>: indica el título de nuestra página. Este se muestra en la
pestaña del navegador.

<body> ... </body>: contiene todo el contenido visible por el usuario.


Estructura básica de una página
Etiquetas básicas
<p></p> : representa un párrafo.

<br> : representa un salto de línea.

<ul></ul> : representa una lista, en donde el orden de los elementos no es


importante.

<ol></ol> : representa una lista de elementos, donde el orden de los


elementos es importante.

<li></li> : representa un elemento de la lista y su padre siempre tiene que ser


una etiqueta ol o ul.
<strong></strong> : representa algo muy importante , serio (para avisos o
precauciones) o urgente (qué debe ser leído antes).

<em></em> : sirve para enfatizar contenido.

<!-- --> : se utiliza para añadir comentarios dentro del código qué el usuario
no podrá ver.
Resumen
h1 = heading1; h2 = heading 2; ...

p = paragraph

br = break line

ul = unordered list

ol = ordered list

li = list item

em = emphasis
Ejercicios 1:

https://www.w3schools.com/html/exercise.asp?filename=exercise_attributes5

https://www.w3schools.com/html/exercise.asp?filename=exercise_paragraphs1

https://www.w3schools.com/html/exercise.asp?filename=exercise_lists1

https://www.w3schools.com/html/exercise.asp?filename=exercise_formatting1
Ejercicio 2

Escribir su CV usando las etiquetas básicas de HTML5