Conceptos básicos de
Programación Web
Ing. Ariel Adolfo Rodríguez
ariel.rodriguez@uptc.edu.co
3144163790
@aadolforh
arielr...
Contenido de la unidad
1. Creación del sitio y definición de estructura
2. Creación archivo inicial
3. Estructura básica
4...
1. Creación del sitio y definición de estructura

Un sitio web debe tener la
siguiente estructura.
Nombre sitio
 Carpeta ...
2. Creando el archivo base o inicial
Este archivo es la base del sitio web, que luego más adelante se
convertirá en planti...
3. Estructura básica en HTML5
Se crean las estructuras y secciones del sitio web:

Sección superior:
Encabezado

Sección c...
4. Revisar Boceto del Sitio

Imagen Logo
Menu navegación

Imagen

Sección
Superior

Sección
Contenido

Pie

Descripción
im...
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 e...
5. Estilos iniciales con CSS
Se va al archivo CSS para empezar a
crear estilos:
1.

Creamos estilo sección superior:
Le da...
6. Agregar contenido.
Se va al archivo base HTML para empezar
a agregar contenido:
1.

Agreguemos la imagen del logo en
na...
Upcoming SlideShare
Loading in …5
×

Conceptos basicos prog web introduccion a html y css

3,630 views

Published on

Intro HTML 5 y CSS

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
3,630
On SlideShare
0
From Embeds
0
Number of Embeds
2,623
Actions
Shares
0
Downloads
40
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Conceptos basicos prog web introduccion a html y css

  1. 1. Conceptos básicos de Programación Web Ing. Ariel Adolfo Rodríguez ariel.rodriguez@uptc.edu.co 3144163790 @aadolforh arielrodriguezh.blogspot.com facebook.com/aadolforh
  2. 2. 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
  3. 3. 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
  4. 4. 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> Tipo de documento Etiqueta HTML <head> Etiqueta head (Cabeza) <meta charset="utf-8"> Formato caracteres: <title> Documento sin título</title>Cambiar a ISO-8859-1 </head> <body> </body> </html> Etiqueta donde inicia el cuerpo del sitio web
  5. 5. 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>
  6. 6. 4. Revisar Boceto del Sitio Imagen Logo Menu navegación Imagen Sección Superior Sección Contenido Pie Descripción imagen
  7. 7. 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>
  8. 8. 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; }
  9. 9. 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>

×