Introducción a HTML y CSS

HTML
HYPER TEXT MARKUP
LANGUAGE
(LENGUAJE DE MARCAS DE
HIPERTEXTO)

¿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

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>.

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

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

VERSIONES

ETIQUETAS DE ESTRUCTURA
GENERAL

ETIQUETAS
DE ESTRUCTURA GENERAL
<!DOCTYPE> - Versión de (X) HTML

<html> - Documento HTML

<head> - Información de la página

<body> - Contenido de la página

<!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

DECLARACIÓN DE <!DOCTYPE>

ETIQUETAS
DE ESTRUCTURA GENERAL
Doctype
EN EL NAVEGADOR SÓLO SE DESPLIEGA LA SECCIÓN MARCADA EN BLANCO

ETIQUETAS DE
INFORMACIÓN DE LA PÁGINA
<meta>

<title>

<link />

<style>

<script>

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

SINTAXIS HTML
CON CONTENIDO:
<x> = apertura
</x> = cierre
<x> contenido </x>
SIN CONTENIDO
<x/> = cierre al ﬁnal
<br/>, <img />, …

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>

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

¿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

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

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

SINTAXIS CSS
http://www.w3schools.com/css/css_syntax.asp

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.

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 { }

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

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.

CSS ZEN GARDEN
WWW.CSSZENGARDEN.COM

ADRIANA ATZIMBA TIENDA MARTÍNEZ
ATZIMBATM@GMAIL.COM

Introducción a HTML y CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Introducción a HTML y CSS

Similar a Introducción a HTML y CSS (20)

Más de Adriana Tienda

Más de Adriana Tienda (17)

Último

Último (9)

Introducción a HTML y CSS