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
eva@evaferreira.com.ar
Descargar