3. ¿QUÉ ES?
Lenguaje usado para describir sitios web
HTML son las siglas de Hyper Text Markup Language
HTML es un lenguaje de markup que se refiere al
conjunto de etiquetas
Las etiquetas describen el contenido del documento
Los documentos HTML contienen etiquetas en texto
plano
http://www.w3schools.com
4. ETIQUETAS HTML
Las etiquetas HTML son palabras claves rodeadas
que se colocan dentro de paréntesis angulados
<html>
Por lo regular vienen en pares, una etiqueta que
abre <strong> y una que cierra </strong>.
http://www.w3schools.com
5. ES LA ESTRUCTURA
El HTML provee la estructura de un sitio web
Los navegadores leen los documentos HTML y los
despliegan como sitios web.
El navegador no muestra las etiquetas pero las
utiliza para determinar cómo se va a desplegar el
contenido
http://www.w3schools.com
6. W3C
WORLD WIDE WEB CONSORTIUM
Comunidad internacional en la que organizaciones,
un staff definido y público en general trabajan para
desarrollar Estándares Web
Encabezado por el inventor de la web Tim
Berners-Lee y el CEO Jeffrey Jaffe
www.w3.org
11. <!DOCTYPE>
Es el primer elemento que debe incluirse en un
documento HTML
La declaración del<!DOCTYPE> ayuda a los
navegadores a mostrar el sitio web de manera correcta
Para las versiones anteriores a HTML la declaración del
<!DOCTYPE> era muy extensa
Los editores WYSIWYG proporcionan la declaración sin
necesidad de escribirla
http://www.w3schools.com
16. ETIQUETAS DE
INFORMACIÓN DE LA PÁGINA
<meta> - Meta data
<title> - Título
<link /> - Recursos relevantes
<style> - Recursos de estilo
<script> - Recursos de scripts
17. SINTAXIS HTML
CON CONTENIDO:
<x> = apertura
</x> = cierre
<x> contenido </x>
SIN CONTENIDO
<x/> = cierre al final
<br/>, <img />, …
18. HTML
IDENTIFICADORES Y CLASES
IDENTIFICADORES
Identificar un elemento del documento.
No debe repetirse, debe ser único.
<div id="menu"> ... </div>
CLASES
Identificar un grupo de elementos.
Reutilizar reglas sobre un grupo de elementos.
<div class="menu">... </div>
19.
20. TIPS
Descubre cómo están
escritos algunos de los
sitios web que sueles
visitar
Dependiendo del
navegador que uses
busca la opción para
ver el código fuente,
descubrirás muchas
cosas interesantes
22. ¿QUÉ ES?
CSS son las siglas de Cascading Style Sheets (Hojas de
Estilo en Cascada)
Los estilos definen cómo se van a mostrar los elementos
HTML
Los estilos se agregaron a HTML 4.0 para resolver un
problema
Si HTML proporciona la estructura, CSS proporciona todos
los elementos visuales y de estilo de un sitio web
http://www.w3schools.com
23. RESOLVIENDO UN PROBLEMA
Las etiquetas HTML no fueron diseñadas para contener
información que le diera formato a un documento
Para versiones anteriores se crearon etiquetas como <font>
a las cuales se les podía agregar algunos atributos de estilo
Esto derivó en conflictos a la hora de desarrollar ya que cada
estilo debía ser colocado en todas y cada una de las páginas
http://www.w3schools.com
24. RESOLVIENDO UN PROBLEMA
Para resolver este problema la World Wide Web Consortium
(W3C) creó CSS
A partir de su creación todos los formatos podían ser
removidos de la estructura HTML y reunirse en un archivo
CSS independiente
En la actualidad todos los navegadores soportan CSS
http://www.w3schools.com
26. SINTAXIS CSS
Regla: cada uno de los estilos que componen una hoja de
estilos CSS.
Selector: indica el elemento o elementos HTML a los que
se aplica la regla CSS.
Declaración: especifica los estilos que se aplican a los
elementos. Está compuesta por una o más propiedades
CSS.
Propiedad: característica que se modifica en el elemento
seleccionado, como por ejemplo su tamaño de letra, su
color de fondo, etc.
27. HTML
IDENTIFICADORES Y CLASES
IDENTIFICADORES
Identificar un elemento del documento.
No debe repetirse, debe ser único.
Se reconocen por el signo #
#menu { }
CLASES
Identificar un grupo de elementos.
Reutilizar reglas sobre un grupo de elementos.
Se reconocen por el signo .
.menu { }
28. HTML + CSS
Cómo agregar un CSS a un HTML
Incluir CSS en los elementos HTML (inline)
<p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>
Incluir CSS en el mismo documento HTML
(Interno)
Usando etiqueta Style <style></style>
Relacionar un archivo CSS independiente
29. HTML + CSS
Cómo agregar un CSS a un HTML
DEFINIR CSS EN UN ARCHIVO EXTERNO (EXTERNO)
<link rel="stylesheet" type="text/css" href="/css/estilos.css"
media="screen" />
rel: Para los archivos CSS, siempre se utiliza el valor stylesheet
type: indica el tipo de recurso enlazado.
href: indica la URL del archivo CSS que contiene los estilos. La
URL indicada puede ser relativa o absoluta y puede apuntar a un
recurso interno o externo al sitio web.
media: indica el medio en el que se van a aplicar los estilos del
archivo CSS.
