Introducción a HTML y CSS
34
HTML + CSS
-
Upload
adriana-atzimba -
Category
Internet
-
view
260 -
download
4
description
Introducción a conceptos de HTML y CSS
Transcript of Introducción a HTML y CSS
HTML + CSS
HTMLHYPER TEXT MARKUP LANGUAGE
¿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 <b> y una que cierra </b>
http://www.w3schools.com
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
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
<!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
ETIQUETAS DE ESTRUCTURA GENERAL
<!DOCTYPE>
<html>
<head>
<body>
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
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 HTMLCON CONTENIDO: <x> = apertura!</x> = cierre!!<x> contenido </x>
SIN CONTENIDO <x/> = cierre al final!!<br/>, <img />, …
HTML IDENTIFICADORES Y CLASESIDENTIFICADORES
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
CSSCASCADE STYLE SHEETS
¿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
RESOLVIENDO UN PROBLEMALas 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
Para resolver este problema la World Wide Web Consortium (W3C) creó CSS
A partirtodos los formatos podían ser remvidos de la estructura HTML y reunirse en un archivo CSS independiente
En la actualidad todos los navegadores soportan CSS
http://www.w3schools.com
SINTAXIS CSS
http://www.w3schools.com/css/css_syntax.asp
SINTAXIS CSSRegla: 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 CLASESIDENTIFICADORES
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 el mismo documento HTML (Interno)
Usando etiqueta Style <style></style>
Incluir CSS en los elementos HTML (Entre lineas)<p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>
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 GARDENWWW.CSSZENGARDEN.COM
EDITORESHTML, CSS
¿QUÉ ES?
Son aplicaciones diseñadas con el fin de facilitar la creación y edición de documentos HTML o XHTML.
Su complejidad puede variar desde la de un simple editor de texto plano hasta entornos WYSIWYG.
WYSIWYG
What You See Is What You Get
OPEN SOURCE
Brackets (multiplataforma)http://brackets.io/
Notepad++ (PC)http://notepad-plus-plus.org/
Atom (Multiplataforma)https://atom.io/
TextWrangler (Mac OS) https://itunes.apple.com/us/app/textwrangler/id404010395?mt=12
BAJO LICENCIAHTML Kit (PC)http://www.htmlkit.com/
Coda (Mac OS)https://itunes.apple.com/us/app/coda-2/id499340368?mt=12
Coffeecuphttp://www.coffeecup.com/free-editor/
Sublime text (multiplataforma)http://www.sublimetext.com/
CodeEdit (Mac OS)https://itunes.apple.com/us/app/codeedit/id506732810?mt=12
Dreamweaver (Multiplataforma)http://www.adobe.com/mx/products/dreamweaver.html
OTRAS HERRAMIENTAS
Adobe Musehttp://www.adobe.com/mx/products/muse.html
EDITORES CSSExpressohttp://macrabbit.com/espresso/
Coda (Mac OS)https://itunes.apple.com/us/app/coda-2/id499340368?mt=12
TextWrangler (Mac OS)https://itunes.apple.com/us/app/textwrangler/id404010395?mt=12
