Pixela
Creamos experiencias digitales
HTML: Bases para un nuevo mundo
Introducción
Las páginas web son documentos electrónicos escritos con un lenguaje de marcado llamado HTML.
HyperText Marked Language es un lenguaje de mucha práctica.
HTML tiene su:
- Vocabulario: Etiquetas que se pueden emplear.
- <a> <p> <img>
- Gramática: Reglas que establecen como deben emplearse las etiquetas para escribir un documento.
- <p>Hola mundo</p>
Flashbacks
Inicios
- Tim Berners-Lee desarrollo HTML a partir de SGML.
- Se creo la etiqueta <a> para los enlaces.
- En 1993 se obtiene la primera versión de HTML (1.0)
- En 1994 se funda el W3C que se encarga de las tecnologías del desarrollo web.
- En 1995 se desarrolla HTML 2.0, primera versión que fue un estándar.
HTML hoy
- En 1999 se publica la última revisión HTML 4.01
- Luego el W3C abandonó el desarrollo de HTML y concentro todos sus esfuerzos en XML.
- En 2004 WhatTWG retoma el desarrollo de HTML.
- HTML5 es la última versión estable.
- Actualmente se desarrolla HTML 5.1
Conceptos básicos
Estructura
- HTML está compuesto por etiquetas.
- Actualmente hay más de 100 etiquetas.
- El elemento es el componente básico.
Etiquetas esenciales
- <html> Etiqueta principal o raíz.
- <head> Cabecera, define los metadatos.
- <title> Título de la página.
- <body> Cuerpo, contenido visible.
Ejemplo
Reglas básicas
- Etiquetas siempre cerradas.
- Documentos bien formados.
- Correcto orden de apertura-cierre.
- Etiquetas en minúsculas.
- Valores de atributos en comillas.
Etiquetas de texto
- <h1> Encabezados o títulos.
- <p> Párrafos de texto.
- <b> Negrita.
- <i> Cursiva.
- <a> Enlaces o hipervinculos
Ejemplos
Imágenes
- Las imágenes son el principal elemento de las páginas que les da el carácter de hipermedia.
- La etiqueta es: <img>
- Atributos obligatorios: src y alt
<img src="pixela.jpg" alt="Logo de Pixela">
Ejemplo
Lista no ordenada
- Primer elemento
- Segundo elemento
- Tercer elemento
- Cuarto elemento
Lista ordenada
- Primer elemento
- Segundo elemento
- Tercer elemento
- Cuarto elemento
<ul>
<ol>
Para los elementos:
<li>
Listas
Ejemplo
Enlaces
- Los enlaces son el elemento principal que confiere a la web su carácter de hipertexto.
- Los enlaces están compuestos por:
- Nodos
- Enlaces
- Anclajes
Tipos de enlaces
- Enlace intradocumental: Enlace a un mismo punto en el mismo documento.
- Enlace extradocumental: Enlace a otro documento, normalmente una página web.
Ejemplo
Contenedores
- La etiqueta <div> es un elemento a nivel de bloque que se utiliza a menudo como un contenedor de otros elementos HTML.
- No requiere atributos, pero los estilos y clases son comunes.
- HTML5 introdujo nuevos contenedores eliminando la div-itis
Estructura HTML5
HTML5 Doctor nos ayuda
Formularios
- Para los usuarios los formularios tienen ahora un comportamiento mucho más intuitivo.
- En HTML5 hay nuevos estados del atributo "type" del elemento "input".
- url, tel, email, number, color, etc.
Ejemplo
Formularios
- El atributo "action" define la acción que se realiza cuando se envía el formulario.
- El atributo "method" especifica el método HTTP cuando se envía el formulario.
- Con HTML5 hay mucho por explotar.
Queda mucho por aprender
Recuerda que lo más importante con HTML es...
Practicar
Practicar
Practicar
Algunas opciones para aprender HTML
- W3 Schools
- Code Academy
- Code School
- Muchas más ....
No olvides seguirnos
- facebook.com/PixelaGT/
- twitter.com/PixelaGT/
- instagram.com/pixelagt/
- fb.com/elcuartitocafeyjardin/
- instagram.com/elcuartitocafe/
- www.elcuartitocafe.com
Fuentes
- Code Academy
- iDesWeb
- W3 Schools
- Wikipedia
Hora de la práctica
HTML basico
By Pixela
HTML basico
Todo lo necesario para empezar a escribir páginas web
