1. Introducci´on HTML CSS
HTML y CSS
Introducci´on
Ing. Joel C. Flores Escalante, MCC
UAC
4 de agosto de 2015
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
3. Introducci´on HTML CSS
Estructura
HTML, CSS, JavaScript
Pueden pensar en un sitio web como en su casa:
HTML es la estructura donde se coloca las paredes, delimitando
que espacio es la cocina, dormitorios, sala, etc.
CSS es el estilo de la casa: el color de piso, de paredes, las
decoraciones, etc.
JavaScript son los componentes interactivos: el port´on
automatico, el control remoto. Son los componentes que estan
cambiando alg´un elemento de su casa.
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2771378557
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
4. Introducci´on HTML CSS
HTML
HTML
HTML significa HyperText Markup Language (((lenguaje de marcas
de hipertexto))), hace referencia al lenguaje de marcado para la
elaboraci´on de p´aginas web.
Es un est´andar que sirve de referencia para la elaboraci´on de
p´aginas web en sus diferentes versiones, define una estructura
b´asica y un c´odigo (denominado c´odigo HTML) para la definici´on de
contenido de una p´agina web, como texto, im´agenes, etc.
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
5. Introducci´on HTML CSS
HTML
Es un est´andar a cargo de la W3C, organizaci´on dedicada a la estan-
darizaci´on de casi todas las tecnolog´ıas ligadas a la web, sobre todo
en lo referente a su escritura e interpretaci´on. Es el lenguaje con el
que se definen las p´aginas web.
Enlaces recomendados:
http://es.wikipedia.org/wiki/HTML
http://www.w3schools.com/html/DEFAULT.asp
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
6. Introducci´on HTML CSS
HTML
HTML etiquetas b´asicas
<! − − −− > Comentarios
< a > Poner un hyperlink
< align > Alinea el contenido a: left,right,centered o justified
< body > Define el los limites del cuerpo del documento
< br > Salto de l´ınea
< center > Centra el contenido
< form > Define un formulario
< h1 > El primer nivel para tama˜no de t´ıtulos
< head > Define los l´ımites del encabezado del documento
< html > Define los l´ımites del documento HTML
< input type > Para insertar un componente en un formulario
< p > Un nuevo p´arrafo
< title > Para ponerle t´ıtulo al documento HTML
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
7. Introducci´on HTML CSS
HTML
HTML etiquetas b´asicas
< div > divisi´on
< b > Negritas
< i > Cursivas
< u > Subrayado
M´as sobre etiquetas para formato de texto en:
http://html.hazunaweb.com/103.php
Para problemas con acentos leer:
http://www.gestiweb.com/?q=content/problemas-html-acentos-y-
e%C3%B1es-charset-utf-8-iso-8859-1
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
8. Introducci´on HTML CSS
HTML
Un ejemplo sencillo
Utilizando un block de notas (sublime, notepad, notepad++, etc) crea
el siguiente documento HTML. Nota: Se recomienda el uso de
sublime http://www.sublimetext.com/
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
9. Introducci´on HTML CSS
HTML
C´odigo HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title> Mi p´agina HTML </title>
<!-- aqui van los estilos y c´odigo javascript que desee incluir -->
</head>
<body>
<h1> Bienvenido a mi sitio en internet </h1>
<h2> Por favor lee el siguiente p´arrafo: </h2>
<p>
"¿Qui´en sabe de donde viene la inspiraci´on? Quiz´a surja de la
desesperaci´on, quiz´a de las carambolas del universo, de la
bondad de las musas." <b>(Amy Tan)</b>
</p>
<p>
Si te mueve la pasi´on, deja que la raz´on lleve las riendas."
<b>(Benjamin Franklin)</b>
</p>
</body>
<html>
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
10. Introducci´on HTML CSS
HTML
Tips
Para mantener ordenado tu c´odigo HTML, sigue estos consejos:
Utiliza identaci´on a la hora de escribir c´odigo HTML.
Siempre abre y cierra las etiquetas.
La mejor forma de aprender es escribiendo c´odigo, proponerse retos
e investigar en manuales y/o Internet.
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
11. Introducci´on HTML CSS
HTML
Herramientas de exploraci´on
En navegadores como Google Chrome y firefox existen herramientas
que pueden ayudar al desarrollo de aplicaciones web:
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2771378558/m-2771378559
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
12. Introducci´on HTML CSS
HTML
Estructura de arbol
La estructura de HTML puede verse como jerarquica y como un arbol
de nodos.
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2771378561/m-2771378562
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
13. Introducci´on HTML CSS
HTML
HTML, CSS & DOM
HTML. HyperText Markup Language.
CSS. Cascading Style Sheets es un lenguaje usado para definir
y crear la presentaci´on de un documento estructurado escrito en
HTML.
DOM. Document Object Model Proporciona un conjunto
estandar de objetos y una interfaz para acceder a ellos y
manipularlos.
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2596138815
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
14. Introducci´on HTML CSS
Boxes
Boxes
Visualizar un documento HTML divido en cuadros, facilita el dise˜no.
https://www.udacity.com/course/viewer#!/c-ud304/l-
2617868617/e-2608808598/m-2599508886
https://www.udacity.com/course/viewer#!/c-ud304/l-
2617868617/m-2771378567
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
15. Introducci´on HTML CSS
Boxes
¿Cuantos cuadros?
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2672258561/m-2600669133
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
16. Introducci´on HTML CSS
Boxes
¿Como pasar el dise˜no de cuadros a HTML?
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2635788572
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
17. Introducci´on HTML CSS
Boxes
Ejercicio 1
Sigue las instrucciones en:
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2965478547/m-2972378541
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
18. Introducci´on HTML CSS
CSS
CSS
Es un lenguaje para definir y crear la presentaci´on de un
documento. La idea que se encuentra detr´as del desarrollo de
CSS es separar la estructura de un documento de su
presentaci´on.
La informaci´on de estilo puede ser definida en un documento
separado o en el mismo documento HTML. En este ´ultimo caso
podr´ıan definirse estilos generales en la cabecera del documento
o en cada etiqueta particular mediante el atributo ((style)).
Sintaxis y ejemplos: http://www.w3schools.com/css/
Mozilla CSS Reference:
https://developer.mozilla.org/es/docs/Web/CSS/Referencia CSS
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
19. Introducci´on HTML CSS
CSS
A˜nadiendo estilo
Utilizando el c´odigo del ejercicio 1:
A˜nade el texto que va en la secci´on de “descripci´on”.
A˜nade el estilo para la descripci´on.
Sigue las instrucciones en
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2599208804/m-2603798584
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
20. Introducci´on HTML CSS
CSS
Entendiendo el significado de CSS
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2771378568
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
21. Introducci´on HTML CSS
CSS
Usando la documentaci´on
Usando la documentaci´on provista en
https://developer.mozilla.org/en-US/docs/Web/CSS/font contesta el
cuestionario: https://www.udacity.com/course/viewer#!/c-ud304/l-
2617868617/e-2663568566/m-2628848562
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
22. Introducci´on HTML CSS
CSS
Etiquetas sem´anticas
La etiqueta “h” (h1,h2,etc), son usadas para poner titulos y subtitulos.
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2811608545/m-2810478547
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
23. Introducci´on HTML CSS
CSS
El m´odelo de cajas
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2771378569/m-2792478544
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
24. Introducci´on HTML CSS
CSS
Manipulando las cajas
Sigue las instrucciones en:
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/e-
2771378569/m-2885858554
Nota: En el ejemplo los autores han renombrado la clase “screenshot” por “image”.
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
25. Introducci´on HTML CSS
CSS
Posicionando las cajas
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2771378571
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
26. Introducci´on HTML CSS
CSS
Codifica, prueba, refina
Termina el ejercicio para que el documento HTML luzca como en la
figura. Explora propiedades como:
https://www.udacity.com/course/viewer#!/c-ud304/l-2617868617/m-
2771378574
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
27. Introducci´on HTML CSS
CSS
Herramientas de desarrollo
Puedes hacer uso de diversas herramientas para apoyarte en tu
desarrollo web:
Las herramientas de desarrollador de Chrome, Firefox:
https://www.udacity.com/course/viewer#!/c-ud304/l-
2617868617/e-2771378575/m-2771378576
Validador de c´odigo HTML:
https://validator.w3.org/#validate by input
Validador de c´odigo CSS:
http://jigsaw.w3.org/css-validator/#validate by input
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
28. Introducci´on HTML CSS
CSS
¿Como aprender m´as?
Una manera de aprender a desarrollar HTML y CSS, es simplemente
fijandonos en el Internet y en cosas que nos gustar´ıa saber como
fueron hechas. Escribe c´odigo, proponte retos e investiga en Internet.
https://www.udacity.com/course/viewer#!/c-ud304/l-2932638555/m-
2890368536
Ing. Joel C. Flores Escalante, MCC UAC
HTML y CSS
