Slides presentación - María Evangelina Ferreira
Anuncio
Introducción a HTML María Evangelina Ferreira Twitter: @evaferreira92 Archivos disponibles http://evaferreira.com.ar/introhtml Introducción a HTML 1. ¿Qué es y cómo se trabaja? 2. Sintaxis básica 1. Etiquetas 2. Atributos 3. Enlaces 3. ¡Mi artículo de Wikipedia! 4. Notas finales y links útiles ¿Qué es HTML? Es el lenguaje básico de la web. ¿Qué es HTML? • HyperText Markup Language • La extensión del archivo es .html • Estándar mundial a cargo de la W3C • Lenguaje de etiquetas • Cada etiqueta define un elemento de nuestra página • Data de 1991 ¿Qué necesito para trabajarlo? 1. Un editor de texto plano • Notepad++ • Brackets.io • SublimeText 2. Un navegador web • • • • Firefox Chrome Safari Internet Explorer/Edge Sintaxis Lenguaje de etiquetas Etiquetas • Definen cada elemento en la página • Tienen la forma de <nombre>, donde nombre es el elemento que estoy definiendo y el interior será el contenido: <title>Este es el título</title> <p>Este es un párrafo.</p> Estructura • Los documentos HTML se dividen en dos partes: 1. Head: Información sobre el documento 2. Body: Todo lo que el usuario ve en su pantalla Etiquetas fundamentales • <html> • Comienzo y final del documento (con una sola excepción) • <head> • Información de la página • <body> • Todo lo que ve el usuario Ejemplo de HTML básico <!doctype html> <html> <head> <title>Título de la página</title> </head> <body> Cuerpo de la página </body> </html> El <!doctype html> • Define la versión de HTML que estamos utilizando • La versión actual es HTML 5.1 • El doctype de la versión 4 era: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Uso de caracteres especiales • Definir el charset del archivo <meta charset=“utf-8”> Comentarios del código • No se ejecutan <!-- Comentario en HTML --> Encabezados • Etiquetas <h1> hasta <h6> • Jerarquizan el contenido Encabezados • No es necesario utilizar todos los niveles Estilos Predeterminados Los párrafos <p>Párrafo de texto</p> <br> Salto de línea Los enlaces Absolutos y relativos Enlaces • Absolutos • Externos, necesitan el protocolo http:// • Es conveniente que se abran en una nueva pestaña • Relativos • El destino debe estar en la misma carpeta • O en el mismo archivo (necesidad de un ID) Enlaces absolutos <a href=“http://www.google.com” target=“_blank”> Ir a Google </a> Atributos: Href: Destino Target: Nueva pestaña Enlaces relativos <a href=“contacto.html”> Ir a Contacto </a> Atributos: Href: Destino, el archivo debe estar dentro de la misma carpeta Enlaces relativos en mismo archivo <a href=“#biografia”> Ir a Contacto </a> <h2 id=“biografia”>Biografía</h2> Atributos: Href: # + ID de sección Importante: El ID no puede contener espacios, ni tildes, ni ñs y es ideal que no tenga mayúsculas. ¡Mi Wikipedia! Ejercicio práctico Ejercicio Práctico • Archivo biografia.html Notas finales Y links útiles Notas finales • HTML + CSS + JavaScript • HTML para contenido • CSS para diseño, animaciones e interacción • JavaScript para animaciones, interacción y APIs Links útiles • W3C: estándar HTML 5.1 • Webplatform • Codecademy • Codrops • CSS Reference ¡Gracias! Twitter: @evaferreira92 [email protected]
