Conceptos Teóricos de HTML5 (material extra adicional libro):

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Conceptos Teóricos de HTML5 (material extra adicional libro):"

Julia Concepción Soler Cruz
hace 7 años
Vistas:

1 Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas básicas Conexión de html y css (uso de link rel) Listas numeradas y no numeradas Parrafos, saltos de línea, encabezados del h1 al h6 Uso de la etiqueta section, article, header Fondo de color simple y degradado Uso de meta charset (para reconocer caracteres especiales) CSS básico Elementos básicos de CSS Material a estudiar (Teórica y Práctica) Repasar, Practicar y Estudiar de nuevo todas las guías académicas que se encuentran en wuupa y en la página del curso salesianosdb2016.jimdo.com que son las mismas que se encuentran impresas y pegadas en el cuaderno. Estudiar los casos vistos y el capítulo 1 y 2 del libro de texto DISEÑO WEB CON HTML5 Y CSS3 Repasar, estudiar y practicar el ejemplo de la tarea no 1 del cuaderno así como los conceptos teóricos de las guías. MATERIAL DE APOYO TEORICO Y PRACTICO AVISO: PRACTICA LOS SIGUIENTES EJEMPLOS EN HTML Y CSS PARA QUE TU PUEDAS TENER MAS HABILIDAD, RECUERDA SIEMPRE TENER INSTALADO EL SUBLIME TEXT PARA PRACTICAR EN CUALQUIER MOMENTO O SITUACIÓN. Conceptos Teóricos de HTML5 (material extra adicional libro): 1. <!DOCTYPE html>: Coloca la versión html5 en la pagina web 2. <html>: Indica el inicio y el final de la pagina web 3. <head>: Dentro de esta etiqueta va el titulo de la pestaña del navegador asi como la etiqueta link

2 4. <link rel= stylesheet type= text/css href= deco.css />: Sirve para CONECTAR HTML Y CSS 5. <body>: Cuerpo de la pagina 6. <h1>..<h6>: Encabezados de pagina según el tamaño 7. <p>: Etiqueta para los párrafos 8. </br>: Saltos de línea 9. <section></section>: Crea una sección o caja en la pagina 10. <article></article>: Crea un articulo o caa en la pagina 11. <header></header>: Crea una caja la cual generalmente va en la parte superior para colocar un mensaje decorado. 12. Id: Atributo de identificador para cada etiqueta que sirve de selector para CSS entre otros 13. Class: Atributo de clase para varios elementos web que también al igual que Id nos ayuda a decorar con CSS para elementos de esta clase. 14. <ul></ul>: Lista desordenada o no ordenada que contiene elementos. Usa viñetas 15. <ol></ol>: Lista ordenada que contiene elementos. Usa Números. 16. <li></li>: Cada elemento de la lista. 17. #: El símbolo de numeral conecta el id del html en css 18.. : El símbolo del punto conecta la clase de html en css. 19. <img src= >: Inserción de una imagen Conceptos Teóricos de CSS: 1. Border-style: Estilo de borde 2. Border-width: Ancho de borde 3. Border-color: Color de borde 4. Border-radius: Sirve para redondear cada esquina de cualquier elemento. 5. Width: Ancho de un elemento 6. Height: Alto de un elemento 7. Display: Coloca algún elemento en forma de bloque. 8. Float: Coloca un elemento en forma flotante de alguna posición 9. Margin: Margen de algún elemento o texto, puede ser left, right entre otros, por ejemplo: margin-left:60px; 10. Padding: Espaciado de alrededor de un elemento o texto puede utilizar múltiples medidas 11. Background: Color de fondo de algo. 12. Box-shadow: Sombreado de la caja de algún elemento decorativo puede combinar varias variantes y colores con medidas 13. Text-Decoration: Decora el texto en varios sentidos como subrayado entre otros 14. Text-Shadow: Le coloca un sombreado al texto

3 15. Text-transform: Transforma el texto, por ejemplo mayúsculas 16. Font-Size: Tamaño de letra 17. Color: Color de letra 18. Max-Width/Min-width: Elemento que sirve para el máximo y mínimo del ancho de un elemento por ejemplo section o article. 19. Font-Family: Tipo de letra. 20. Hover: Efecto que cuando pasa el mouse encima cambia la decoración, entiéndase color entre otros 21. Text-align: Alineación del texto ya sea a la izquierda, derecha, centro o justificado. 22. webkit-linear-gradient: Esta función sirve para colocar un color de fondo para cualquier cosa pero la diferencia PRINCIPAL con background es que combina una serie de colores, MEZCLA DOS O MAS COLORES DEPENDIENDO EL NUMERO DE DEGRADACIÓN. INFORMACIÓN IMPORTANTE: En tu libro aparecen múltiples formas de colocar la parte inicial del html con lo que usa una estándar es decir una forma única para lo cual te dejamos la siguiente: <!DOCTYPE html> <html> <head><title> hola </title> <link rel= stylesheet type= text/css href= estilo.css > </head> CODIGO DE APOYO (PRUEBALO EN TU COMPUTADORA GUÁRDALO COMO ejercicio.html. Recuerda que el archivo stilo.css debe llevar el mismo nombre en la etiqueta link asi como cuando lo guardas en tu css) <!DOCTYPE html> <html> <head> <title> Mi pagina web </title> <link rel="stylesheet" type="text/css" href="stilo.css" /> </head> <body> <meta charset="utf-8" /> <section id="sec"> <h1> Cuaresma y Semana Santa en Guatemala </h1> <article id="art"> <h2> Tradiciones en Guatemala </h2> <p> El dia 1 de marzo del 2017 inicia lo que es en la iglesia catolica la época de la cuaresma en la cual se

4 inicia un tiempo de reflexión y conversión para en el en la República de Guatemala se demuestra con mucho arraigo desde tiempo inmemoriables con la muestra de fé con procesiones que recorren varias ciudades del pais. </p> <h3> Dos ciudades donde se manifiestan procesiones </h3> <ol> <li> Guatemala </li> <li> Antigua Guatemala </li> </ol> <h3> Dos tradiciones cuaresmales </h3> <ul> <li> Rezos </li> <li> Procesiones </li> </ul> </article> </section> </body> </html> Parte de CSS (Guárdalo como stilo.css ya que en la etiqueta link debe tener el mismo nombre) body { background:-webkit-lineargradient(13deg,black,orange,red,gray,brown); } #sec { width:600px; height:550px; background:-webkit-linear-gradient(3deg,pink,purple,orange,red); border-style:dotted; border-color:pink; border-width:11px; border-radius:22px; font-family:impact; color:blue; font-size:30px; box-shadow:11px 12px 11px 11px yellow; text-align:center; margin:70px; } #art {

5 } width:400px; height:350px; background:purple; border-style:dashed; border-color:gray; border-width:9px; border-radius:20px; font-family:comic Sans MS; color:white; font-size:13px; text-align:justify; margin-left:60px;

Documentos relacionados

Taller de Paginas Web

Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion