conceptos basicos prog web introduccion a html y css
Post on 18-Nov-2014
2.338 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
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
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
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>
4. Revisar Boceto del Sitio
Sección Superior
Sección Contenido
Pie
Imagen Logo
Menu navegación
Imagen Descripción imagen
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>
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; }
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>
top related