Scribd
Cargar
138 vistas9 páginas

Conceptos Basicos Prog Web - Introduccion A HTML y CSS

Este documento presenta los pasos para crear la estructura y diseño básico de un sitio web utilizando HTML5 y CSS. Explica cómo crear la carpeta del proyecto, agregar la estructura HTML con secciones para encabezado, contenido y pie de página, y luego aplicar estilos iniciales como colores de fondo y márgenes utilizando hojas de estilo en CSS. Finalmente, muestra cómo insertar contenido como imágenes, texto y un menú de navegación.

Cargado por

Ivan Leonardo Fonseca
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
138 vistas9 páginas

Conceptos Basicos Prog Web - Introduccion A HTML y CSS

Este documento presenta los pasos para crear la estructura y diseño básico de un sitio web utilizando HTML5 y CSS. Explica cómo crear la carpeta del proyecto, agregar la estructura HTML con secciones para encabezado, contenido y pie de página, y luego aplicar estilos iniciales como colores de fondo y márgenes utilizando hojas de estilo en CSS. Finalmente, muestra cómo insertar contenido como imágenes, texto y un menú de navegación.

Cargado por

Ivan Leonardo Fonseca
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

Conceptos bsicos de

Programacin Web
Ing. Ariel Adolfo Rodrguez

[email protected]

3144163790

@aadolforh

arielrodriguezh.blogspot.com

facebook.com/aadolforh


Contenido de la unidad
1. Creacin del sitio y definicin de estructura
2. Creacin archivo inicial
3. Estructura bsica
4. Revisin 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 botn con CSS
16. Creacin de plantilla
17. Ajuste final de las pginas

1. Creacin del sitio y definicin de estructura



Un sitio web debe tener la
siguiente estructura.

Nombre sitio
Carpeta de imgenes (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 ms adelante se
convertir en plantilla (Template del sitio).

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

<!doctype html>
<html>

<head>


<meta charset="utf-8">

<title> Documento sin ttulo</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 bsica en HTML5
Se crean las estructuras y secciones del sitio web:





Seccin superior:
Encabezado






Seccin contenido


Seccin Pie

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Documento sin ttulo</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
Seccin
Superior
Seccin
Contenido
Pie
Imagen Logo
Menu navegacin
Imagen
Descripcin
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 lnea de codigo automtico.






<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Documento sin ttulo</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 seccin 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 seccin
contenido, ancho, margen, color
fondo (naranja)


5. Creamos estilo pie. Centramos
texto, margen y tamao 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 navegacin. Etiqueta <ul> y
<li>


3. Agregamos una nueva imagen central

4. Agregamos texto de la descripcin de
la imagen


5. Creamos estilo pie. Centramos texto,
margen y tamao letra.





<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Documento sin ttulo</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>

También podría gustarte