Desarrollo Web
Profesora Bascur Belén.
¿Qué es HTML?
Profesora Bascur Belén.
HTML
HyperText
Markup
Language
Es un estándar.
Esta compuesto
de elementos
formados por:
etiquetas y
atributos
Etiqueta
Atributos
Atributo vacío
REPASEMOS:
Elemento
Apertura
Contenido
Cierre
¿Cómo se compone un elemento?
• Una etiqueta de apertura
• Opcionalmente uno o más atributos
• El Contenido
• Una etiqueta de cierre. Algunos elemento no la llevan.
Estructura básica HTML
Versión de html
Inicio de la página
Configuración de la página
Contenido de la página
Fin de la página
Etiqueta <head>
<head>
Contendrá información
que no ve el usuario
La usamos para:
• Que el navegador pueda
tomar decisiones sobre
cómo presentar el
documento al usuario, por
ejemplo con la etiqueta
<title>.
• Contener metadatos para
resumir la información del
documento.
• Linkear archivos
complementarios.
Etiqueta <body>
<body>
La etiqueta <body>
contendrá todas las
etiquetas que compondrán
el documento, y por lo
tanto, la información que
visualizará el usuario en la
ventana del navegador.
Importante! El estándar de
HTML obliga a declarar el
contenido (texto) dentro de
una etiqueta. La etiqueta
<body> sólo puede contener
otras etiquetas.
Etiqueta <link>
Favicon
La etiqueta <link> tiene
varios usos, entre otros,
para linkear documentos.
En este caso, le indicará al
navegador qué ícono
mostrar en la pestaña.
• El atributo rel le indicará al
navegador qué ícono
mostrar en la pestaña.
• El atributo href define la
ubicación.
• El atributo type define el
formato de la imagen.
Etiqueta <meta>
Metadatos
Se declaran a través de la
etiqueta <meta> y, como su
nombre lo indica, sirven
para definir información
que podrán leer:
• Los navegadores.
• Los motores de búsqueda.
• Herramientas de
accesibilidad.
En muchos casos el
atributo name define que
tipo de información declara.
El atributo content es para
declarar los datos
provistos.
Etiqueta <meta>
Charset
Este elemento simplemente
especifica la codificación de
caracteres del documento:
el conjunto de caracteres
que el documento puede
usar.
utf-8 es un juego de
caracteres universal que
incluye prácticamente
cualquier carácter de
cualquier idioma humano.
De esta manera el sitio web
podrá manejar la
visualización de cualquier
idioma.
Etiqueta <meta>
Author & Description
En el caso de sitios y
aplicaciones web que
tienen interés en ser
accedidos de manera
pública, se suelen agregar
metadatos que resuman a
motores de búsqueda la
descripción y el autor del
sitio.
Estos motores hoy también
tienen la capacidad de leer
el cuerpo del documento
HTML, por lo cual es
importante la consistencia
en cuanto a la información
provista en ambos casos.
Etiqueta <meta>
Metadatos: viewport
En general, los dispositivos
móviles poseen distintos
tamaños de pantalla física.
Sin embargo la resolución
puede ser la misma.
Para esto los navegadores
interpretan el metadato
viewport que recibe
indicaciones acerca de
cómo renderizar la web de
manera uniforme.
Nos servirá cuando
trabajemos con diseño web
responsive
Encabezados
Encabezados
Etiqueta <p>
Párrafo
Los elementos de
párrafo <p>, nos
permiten distribuir
el texto en
párrafos. Podemos
usar tantos como
necesitemos
Etiquetas <ol> & <li>
Listas
ordenadas
Las listas ordenadas
nos permiten
enumerar ítems de
manera consecutiva.
Por defecto van a
empezar en el n° 1 y
se irán
incrementando con
cada ítem nuevo.
Etiquetas <ol> & <li>
Listas
ordenadas
Las listas
ordenadas se van
a ver de la
siguiente manera
Etiquetas <ol> & <li>
Listas
ordenadas
Etiquetas <ol> & <li>
Listas
ordenadas
Etiquetas <ul> & <li>
Listas
Desordenadas
Las listas
desordenadas
también nos
permiten listar
ítems. Por defecto
generan una viñeta
tipo “bolita” por cada
ítem nuevo que se
agregue.
Etiquetas <ul> & <li>
Listas
Desordenadas
¿Qué es una ruta?
Ruta Absoluta:
• Puedo acceder a ese recurso desde
Es una dirección o cualquier sitio donde esté.
camino, que le va a Ejemplo:
permitir al [Link]
navegador
encontrar un Ruta Relativa:
recurso, ya sea una • Va a depender de donde esté en ese
página web, una momento para poder acceder al recurso. Es
imagen, un video o decir es relativa a mi posición actual
cualquier otro tipo
de archivo Ejemplo:
../imágenes/[Link]
Etiqueta <a>
Enlaces
Las A traces de la
etiqueta <a> vamos a
poder crear enlaces.
Etiqueta <img>
Fuente de una
imagen
Dentro de nuestro
documento HTML
podemos agregar
imágenes a traces
de la etiqueta <img>
Etiqueta <img>
Texto
alternativo
Nos permite
describir una
imagen. Se muestra
cuando la imagen no
carga por alguna
razón o para las
personas que usen
lectores de pantalla
Etiqueta <img>
Anchos y Altos
Etiqueta <iframe>
Iframe
A través de esta
etiqueta podemos
insertar contenido de
otros sitios webs.
Este contenido va a
traer incorporados
estilos del sitio de
origen.
Usando width y height,
podemos modificar su
tamaño
Etiqueta <video>
Etiqueta <audio>
Actividad:
Mi Artista Favorito
Ejercicio:
Mi artista Favorito
Ejercicio:
Mi artista Favorito
Ejercicio:
Mi artista Favorito
[Link]