conceptos basicos prog web introduccion a html y css

9
Conceptos básicos de Programación Web Ing. Ariel Adolfo Rodríguez [email protected] 3144163790 @aadolforh arielrodriguezh.blogspot.com facebook.com/aadolforh

Upload: ariel-adolfo-rodriguez-hernandez

Post on 18-Nov-2014

2.340 views

Category:

Technology


2 download

DESCRIPTION

Intro HTML 5 y CSS

TRANSCRIPT

Page 1: Conceptos basicos prog web   introduccion a html y css

Conceptos básicos de Programación Web

Ing. Ariel Adolfo Rodríguez

[email protected] 3144163790 @aadolforh arielrodriguezh.blogspot.com facebook.com/aadolforh

Page 2: Conceptos basicos prog web   introduccion a html y css

Contenido de la unidad

1. Creación del sitio y definición de estructura

2. Creación archivo inicial

3. Estructura básica

4. Revisión del boceto

5. Estilos iniciales con CSS

6. Contenido inicial

7. Configurar Web Fonts

8. Usar fuente web

9. Formatear menú

10. Finalizar el menú

11.CSS Reset

12. Finalizar el encabezado

13. Estructura del contenido

14. Elementos del contenido

15.Crear botón con CSS

16.Creación de plantilla

17.Ajuste final de las páginas

Page 3: Conceptos basicos prog web   introduccion a html y css

1. Creación del sitio y definición de estructura

Un sitio web debe tener la siguiente estructura.

Nombre sitio

Carpeta de imágenes (img)

Carpeta de CSS

Carpeta de plantillas (templates)

Carpeta archivos fuente (assets)

Archivos de pagina (index.html)

Practica: Crear el sitio en Dreamweaver

Page 4: Conceptos basicos prog web   introduccion a html y css

2. Creando el archivo base o inicial

Este archivo es la base del sitio web, que luego más adelante se convertirá en plantilla (Template del sitio).

Se crea un archivo y se guarda como archivo temporal, en formato html5. El código que se genera es el siguiente:

<!doctype html> <html>

<head>

<meta charset="utf-8">

<title> Documento sin título</title>

</head>

<body>

</body>

</html>

Tipo de documento

Etiqueta HTML

Etiqueta head (Cabeza)

Formato caracteres: Cambiar a ISO-8859-1

Etiqueta donde inicia el cuerpo del sitio web

Page 5: Conceptos basicos prog web   introduccion a html y css

3. Estructura básica en HTML5

Se crean las estructuras y secciones del sitio web:

Sección superior:

Encabezado

Sección contenido

Sección Pie

<!doctype html> <html> <head> <meta charset="utf-8"> <title> Documento sin título</title> </head> <body> <section id="superior"> <div id="encabezado"> <nav> </nav> <div id="imgDes"> <div id=“descripcion”> </div> </div> </div> </section> <section id="contenido"> </section> <Footer> </Footer> </body> </html>

Page 6: Conceptos basicos prog web   introduccion a html y css

4. Revisar Boceto del Sitio

Sección Superior

Sección Contenido

Pie

Imagen Logo

Menu navegación

Imagen Descripción imagen

Page 7: Conceptos basicos prog web   introduccion a html y css

5. Estilos iniciales con CSS

1. Se un nuevo archivo de tipo CSS y se guarda carpeta CSS.

2. Se enlaza el archivo CSS con el archivo base HTML5.

3. En el archivo base se crea nueva línea de codigo automático.

<!doctype html> <html> <head> <meta charset="utf-8"> <title> Documento sin título</title> <link href="../css/main.css" rel="stylesheet" type="text/css" > </head> <body> <section id="superior"> <div id="encabezado"> <nav> </nav> <div id="imgDes"> <div id=“descripcion”> </div> </div> </div> </section> <section id="contenido"> </section> <Footer> </Footer> </body> </html>

Page 8: Conceptos basicos prog web   introduccion a html y css

5. Estilos iniciales con CSS

Se va al archivo CSS para empezar a crear estilos:

1. Creamos estilo sección superior: Le damos ancho, la almohadilla y color fondo negro.

2. Creamos estilo para Encabezado, margen, ancho , color naranja.

3. Creamos estilo para Descripcion, ancho, alto, color fondo gris, y flotante izquierda.

4. Creamos estilo para sección contenido, ancho, margen, color fondo (naranja)

5. Creamos estilo pie. Centramos texto, margen y tamaño letra.

@charset "UTF-8"; /* CSS Document */ #superior { width: 100%; padding: 30px 0px; background-color: #231f20; } #encabezado { margin: 0px auto; width: 960px; color: #ffcb05; } #descripcion { width: 960px; heigth: 360px; background-color: #888; float: left; } #contenido { width: 960px; margin: 0px auto; (auto es para centrar) clear: left; (no ubicar elementos a la izquierda) background-color: #ffcb05; } #pie { text-align: center; margin: 15px; font-size: .7em; }

Page 9: Conceptos basicos prog web   introduccion a html y css

6. Agregar contenido.

Se va al archivo base HTML para empezar a agregar contenido:

1. Agreguemos la imagen del logo en nav. Etiqueta <img src

2. Creamos lista no ordenada para el menú navegación. Etiqueta <ul> y <li>

3. Agregamos una nueva imagen central

4. Agregamos texto de la descripción de la imagen

5. Creamos estilo pie. Centramos texto, margen y tamaño letra.

<!doctype html> <html> <head> <meta charset="utf-8"> <title> Documento sin título</title> <link href="../css/main.css" rel="stylesheet" type="text/css" > </head> <body> <section id="superior"> <div id="encabezado"> <nav> <img src="../img/logo.jpg" with:= “200” heingth= “50” alt="Uptc logo“> <ul> <li<Inicio</li> <li<Programas</li> <li<Galeria</li> </nav> <div id="imgDes"> <img src ="../img/prog.jpg" with:= “200” heingth= “50” alt=“Imagen central"> <div id=“descripcion”> <p> Hola este es sitio web de Nombre </p> </div> </div> </div> </section> <section id="contenido"> </section> <Footer> </Footer> </html>