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

(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

(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-linear-gradient(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;

}