PAGINAS WEB 4TA. CLASE Luis Rojas.  Recordemos apagar/silenciar nuestros teléfonos móviles.

Presentación del tema: "PAGINAS WEB 4TA. CLASE Luis Rojas.  Recordemos apagar/silenciar nuestros teléfonos móviles."— Transcripción de la presentación:

1 PAGINAS WEB 4TA. CLASE Luis Rojas

2  Recordemos apagar/silenciar nuestros teléfonos móviles.

3  Tablas sin bordes  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_tables3 http://www.w3schools.com/html/tryit.asp?filename =tryhtml_tables3  Encabezados de tabla  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_table_headers http://www.w3schools.com/html/tryit.asp?filename =tryhtml_table_headers

4  Etiquetas dentro de una tabla  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_table_elements http://www.w3schools.com/html/tryit.asp?filename =tryhtml_table_elements  Espaciado de celdas  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_table_cellpadding http://www.w3schools.com/html/tryit.asp?filename =tryhtml_table_cellpadding

5  Espaciado del Borde  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_table_cellspacing http://www.w3schools.com/html/tryit.asp?filename =tryhtml_table_cellspacing  Listas  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_lists4 http://www.w3schools.com/html/tryit.asp?filename =tryhtml_lists4

6  Listas ordenadas  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_lists http://www.w3schools.com/html/tryit.asp?filename =tryhtml_lists  Variedad de listas ordenadas  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_lists_ordered http://www.w3schools.com/html/tryit.asp?filename =tryhtml_lists_ordered

7  Variedad de listas sin orden  http://www.w3schools.com/html/tryit.asp?filename=tryhtml _lists_unordered http://www.w3schools.com/html/tryit.asp?filename=tryhtml _lists_unordered  Variedad de listas con orden  http://www.w3schools.com/html/tryit.asp?filename=tryhtml _lists_ordered http://www.w3schools.com/html/tryit.asp?filename=tryhtml _lists_ordered  Listas anidadas  http://www.w3schools.com/html/tryit.asp?filename=tryhtml _lists2 http://www.w3schools.com/html/tryit.asp?filename=tryhtml _lists2

8 Recepción de Datos  Textos  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_input http://www.w3schools.com/html/tryit.asp?filename =tryhtml_input  Usuario y contraseña  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_inputpassword http://www.w3schools.com/html/tryit.asp?filename =tryhtml_inputpassword

9  Checkboxes  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_checkbox http://www.w3schools.com/html/tryit.asp?filename =tryhtml_checkbox  Selección única  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_radio http://www.w3schools.com/html/tryit.asp?filename =tryhtml_radio

10  Listas de elección  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_select2 http://www.w3schools.com/html/tryit.asp?filename =tryhtml_select2  Áreas de texto  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_textarea http://www.w3schools.com/html/tryit.asp?filename =tryhtml_textarea

11  Botón  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_button http://www.w3schools.com/html/tryit.asp?filename =tryhtml_button

12  Encabezados  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_title http://www.w3schools.com/html/tryit.asp?filename =tryhtml_title  Meta tags  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_meta http://www.w3schools.com/html/tryit.asp?filename =tryhtml_meta

13  Meta tag descripcion del sitio y keywords  www.w3schools.com/html/tryit.asp?filename=tryhtm l_keywords

14  Div 

15  Alta en google  https://www.google.com/webmasters/tools/submit- url?hl=es https://www.google.com/webmasters/tools/submit- url?hl=es

16 CSS  Hojas de Estilo en Cascada  Sintáxis básica:  Nombre_de_Etiqueta  {  Instruccion_css: valor ;  }

17 CSS  Ejemplo  body  {  color:red;  }  h1  {  Color : red;  }

18 Introducción a los estilos CSS  http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-color_body http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-color_body  Estilos en un archivo externo  http://www.w3schools.com/html/tryit.asp?filename =tryhtml_link http://www.w3schools.com/html/tryit.asp?filename =tryhtml_link

19 Colores para CSS (hexadecimal)  http://www.colorpicker.com/ http://www.colorpicker.com/

20 Clases CSS  Tipo 1 (clase para un solo tipo de etiqueta)  p.azul{ color: blue; }  p.rojo{ color: red; }  This is a paragraph that uses the p.first CSS code!  This is a paragraph that uses the p.second CSS code!

21 Clases CSS  Tipo 2 (clase para varios tipos de etiqueta) .center  {  text-align:center;  }  Center-aligned heading  Center-aligned paragraph.

22  Color de fondo  http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-color_body http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-color_body  http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-color_elements http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-color_elements

23  Imagen de fondo (no del todo recomendado)  http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-image http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-image  Por ésto:  http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-image_bad http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-image_bad

24  Imagen que se repite de fondo  http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-image_gradient2 http://www.w3schools.com/css/tryit.asp?filename=t rycss_background-image_gradient2  Imagen Imagen