Html css
- 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
- 2. Introducci´on HTML CSS Introducci´on Estructura HTML HTML Boxes CSS CSS 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