Practica 1
- 1. Universidad Gerardo Barrios Facultad de Ciencia y Tecnología Fecha: 22/01/2018 Repaso Html5 y Css3 Programación Computacional IV Objetivos: - Repasar la creación de documentos utilizando html5 y css3 - Aplicar diseño web a la estructura del sitio web Estructura básica de un documento de HTML5 El lenguaje utilizado para la creación de sitios web es el HTML. En la actualidad se trabaja con HTML5 que pone a disposición una nueva serie de elementos, representados por etiquetas, con un significado semántico. Los documentos realizados con este lenguaje para que estén bien construidos deben seguir una estructura básica. Los nuevos elementos propuestos en HTML5 son similares a los conocidos elementos DIV o SPAN, con la diferencia que poseen nombres más semánticos que los hacen más entendibles a los seres humanos, como HEADER, NAV, SECTION, ARTICLE, FOOTER, AUDIO, VIDEO, CANVAS, etc. Sin embargo, como los nuevos elementos no son reconocidos por navegadores antiguos, es recomendable que los usuarios actualicen sus navegadores por versiones más modernas. Examinemos algunos de los elementos HTML de la estructura básica de un documento. Empecemos con el DOCTYPE, es muy sencillo de escribir y ha sido recortado, después la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio. Muy sencillo para empezar ¿no?, ahora toca el turno del título, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le decimos al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y ñ con más compatibilidad. En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestión es resumir el código.
- 2. asemos a las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia, el atributo REL que usamos en los links para cuestiones de SEO. REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED. Ya terminamos con la parte no visible de la página web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo útil para lo mismo, pero a continuación empieza algo interesante que son las etiquetas de la estructura del sitio visual. La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la página web, ejemplo. Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner más de un H1 y HEADER. Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora tenemos una etiqueta especial para ello. Pasamos con el contenido o SECTION usando H2 de título y el contenido en etiquetas P dentro de una etiqueta llamada ARTICLE para artículos o post, esto por cuestiones de SEO que es muy recomendable también, ejemplo. SECTION es el equivalente a un DIV con ID=”contenido” y ARTICLE a un DIV con ID=”post” o “articulo” Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy facil de implementar con H3 de titulo y P de contenido dentro de ella.
- 3. ASIDE es nuestro equivalente a un DIV con ID=”sidebar” o “barra” Y finalizando con el pie de la pagina con la etiqueta muy obvia FOOTER , un ejemplo. FOOTER es nuestro equivalente a un DIV con ID=”footer” o “pie” Ahora veamos nuestro código completo: CSS3 Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de
- 4. formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. CSS tiene una sintaxis muy sencilla, que usa unas cuantas palabras clave tomadas del inglés para especificar los nombres de las propiedades y la mayoría de los valores. Guía de Referencia:
- 11. Ejercicios. Visitar el sitio para referencias: https://goo.gl/C8QvH6 1. Abra un editor, para el desarrollo de los ejemplos se hace uso del editor Notepad++ 2. Comentarios, formatos y tamaños de texto. Visualice el resultado del ejemplo anterior. 3.Uso de colores.
- 12. 4. Tablas 5. Icono en barra de direcciones. Descargar un icono en la carpeta que contiene la pagina y agregar el siguiente código en el head de la página. 6. Descargue archivos de estilo aquí: Archivos.rar
- 13. 7. Formulario con validaciones utilizando características de CSS que facilitan al usuario su correcto llenado. 8. Ejemplo de Menú utilizando css, html y JavaScript. Menú 1
- 14. Menú 2 9. Realice un sitio web que contenga: Un menú con cuatro opciones Una página que muestre el contenido de inicio Una página con un formulario de registro con los siguientes campos. o Código o Nombre o Fecha de Nacimiento, utilice el control de tipo fecha. o Correo 10. Deje evidencia del desarrollo de los ejercicios de repaso.
- 15. 9-PÁGINA
- 18. ICONO
- 19. 10-CAPTURAS DE LOS EJERCICIOS