Conceptos basicos prog web introduccion a html y css

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>

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

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>
<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

Imagen Logo
Menu navegación

Imagen

Sección
Superior

Sección
Contenido

Pie

Descripción
imagen

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>
<link href="../css/main.css" rel="stylesheet" type="text/css" >
</head>
<body>
<nav>
</nav>
<div id="imgDes">
</div>
</div>
</div>
</section>
</section>
<Footer>
</Footer>
</body>
</html>

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>
<link href="../css/main.css" rel="stylesheet" type="text/css" >
</head>
<body>
<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">
<p> Hola este es sitio web de Nombre </p>
</div>
</div>
</div>
</section>
</section>

<Footer>
</Footer>
</html>

Conceptos basicos prog web introduccion a html y css

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Destaque

Destaque (20)

Semelhante a Conceptos basicos prog web introduccion a html y css

Semelhante a Conceptos basicos prog web introduccion a html y css (20)

Mais de Ariel Adolfo Rodriguez Hernandez

Mais de Ariel Adolfo Rodriguez Hernandez (18)

Último

Último (16)

Conceptos basicos prog web introduccion a html y css