UADE Clase 3

Diseño y Desarrollo Web
TEMAS A DESARROLLAR
1. Estructura básica de una pagina web
2. Uso de div
3. Introducción a CSS – Definición - Estilos
4. Definición de clases e indentificadores
5. Estructura básica de una pagina en HTML 5

Introducción al
Desarrollo Web
Estructura básica de una página web
Aquí se coloca usualmente

un logo, título, subtítulos y una
breve descripción del sitio o la
pagina.
Aquí usualmente aparece un
menú de opciones o enlaces
que permiten navegar el sitio.
Acá se coloca toda la Pueden aparecer listas

información importante de la de enlaces . Sobre cada
pagina . uno de los temas que
aparecen en la
Información Principal.
Esta es el área donde

normalmente escribe
información del sitio. Como
por ejemplo: autor del sitio o
de la empresa; reglas,
términos y condiciones y todo
aquello que el diseñador
considere importante.
Uso de <div></div>
Es una etiqueta que se utiliza para dividir la pagina en diferentes secciones, pudiéndole dar a
cada una un formato y contenido diferente. Por ejemplo, podemos obtener un diseño como el
siguiente:
Uso de <div></div> (continuación)
El diseño anterior está además enlazado con una pagina css para aplicarle el
formato correspondiente a la página.
Ejemplo de div con css:
Veremos paso a paso el código del diseño anterior
<link rel="StyleSheet" href="estilos.css" type="text/css">

<link href="estilomascolumnas.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1>Título de la página</h1>
</div>
<div id="columna1">
<p>columna1. columna1. columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1. columna1. columna1.</p>
</div>
<div id="columna3">
<p>columna3. columna3. columna3. columna3. columna3. columna3. columna3.
columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3.
columna3. columna3. columna3. columna3. columna3. columna3. columna3. </p>
</div>
<div id="columna2">
<h2>Título de la columna</h2>
<p>Contenido de la columna2. Contenido de la columna2.
Contenido de la columna2. Contenido de la columna2. Contenido de
la columna2. Contenido de la columna2. Contenido de la columna2.
Contenido de la columna2.</p>
</div>
<div id="pie">
Pie de página.
</div>
</div>
¿Qué son las CSS?
Son las siglas de Hojas de estilo en cascada. Las CSS sirven para poder,
justamente darle estilos a las páginas en archivos externos al html. Antes
del surgimiento de las CSS, los diseñadores debían darle formato a las
distintas páginas dentro de cada una de las etiquetas de html. Para poder
incluir el código CSS en la pagina HTML se debe escribir lo siguiente:
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
Características de las CSS
Las distintas directivas de formato mediante CSS, se pueden escribir en la misma

pagina html, escribiendo <style type="text/css"></style>, dentro del encabezado
de la pagina, entre las etiquetas <head></head>. Cabe recordar que todo lo que
se escriba entre las etiquetas <head></head>, no se visualizará en la pagina
terminada.
CSS permite separar los contenidos de la página y su aspecto. Por ejemplo, si

queremos que todas las etiquetas <h1> tengan el mismo formato, solo es necesario
escribir:
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }

Funcionamiento de los archivos CSS
Cuando el navegador carga la página HTML que estamos diseñando, antes de

mostrar sus contenidos también descarga los archivos CSS externos enlazados
mediante la etiqueta <link> y aplica los estilos a los contenidos de la pagina.
La etiqueta <link> tiene dos atributos importantes que se tienen que definir,
cuando se enlaza un archivo CSS:
Indica el tipo de relación que tiene el recurso enlazado

(en este caso, el archivo CSS) y la página HTML. Para
rel
los archivos CSS, siempre se utiliza el valor stylesheet
indica el tipo de recurso enlazado. Sus valores están

type estandarizados y para los archivos CSS su valor siempre
es text/css.
Componentes de una regla CSS
CSS define una serie de términos que permiten describir cada una de las
partes que componen los estilos CSS. El siguiente esquema muestra las partes
que forman un estilo CSS básico:
Componentes de una regla CSS (continuación)
Veremos ahora qué significa cada parte de una regla CSS
✔ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla
está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({),
otra parte denominada "declaración" y por último, un símbolo de "llave de cierre"
(}).
✔ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
✔ Declaración: especifica los estilos que se aplican a los elementos. Está compuesta
por una o más propiedades CSS.
✔ Propiedad: permite modificar el aspecto de una característica del elemento.
✔ Valor: indica el nuevo valor de la característica modificada en el elemento.

Estilos aplicados al ejemplo
body{margin:0px;}
#contenedor
{
width:100%;
border:1px solid #000;
line-height:130%;
background-color:#f2f2f2;
}
#cabecera
{
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}
#columna1
{
float:left;
width:200px;
margin:0px; /*separación de un elemento de otro. Forma reducida para establecer
los márgenes en los cuatro ángulos*/
padding:20px;
}
Estilos aplicados al ejemplo (continuación)
#columna2
{
margin-left:210px;
margin-right:230px;
border-left:1px solid #aaa;
border-right:1px solid #aaa;
padding:20px;
}
#columna3
{
float:right;
width:200px;
margin:0px;
padding:20px;
}
#pie {
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}
Selectores básicos
Selector de tipo o etiqueta: Selecciona todos los elementos de la página

cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo
selecciona todos los párrafos de la página:
p{
...
}
Este ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:
h1 {
color: red;
}
h2 {
color: blue;
}
p{
color: black;
}
Selectores básicos (continuación)
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar
los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los
mismos estilos:
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
Selector de clase: son los que más se utilizan junto con los de Id. La principal
característica de este selector es que en una misma página HTML varios elementos
diferentes pueden utilizar el mismo valor en el atributo class:
<body>
<p class="destacado">Ejemplo de texto com CSS </p>
<p> CSS<a href="#" class="destacado">Ir a </a>
</p>
</body>
Selectores básicos (continuación)
Selectores de ID: A veces es necesario aplicar estilos CSS a un único elemento de la

página. El selector de ID permite seleccionar un elemento de la página a través del
valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la
página porque el valor del atributo id no se puede repetir en dos elementos diferentes
de una misma página. La sintaxis es la siguiente:
#destacado { color: red; }

<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
El símbolo de #indica que estamos usando un selector de Id.

Estructura básica de una página web con
HTML 5 (continuación)
<header></header>: sirve para colocar un título o subtítulo en la pagina, no es lo

mismo que <head></head>. Recordemos que ésta última se usa para información
acerca de todo el documento pero no aparece en la pagina.
Ejemplo:
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
</body>
<nav></nav>: sirve para colocar un título o subtítulo en la pagina, no es lo mismo

que <head></head>. Recordemos que ésta última se usa para información acerca
de todo el documento pero no aparece en la pagina.
Ejercicio de aplicación de Div´s y CSS
Realizar el siguiente diseño utilizando div y css.
<nav></nav>: generalmente incluye una lista de links que pueden estar contenidos en
una lista ordenada o desordenada
<html>
<body>
<nav>
<ul>
<li><a href="Inicio.html">Principal</a>
<li><a href="Fotos.html">Fotos</a>
<li><a href="Videos.html">Videos</a>
<li><a href="Contactos.html">Contáctenos</a>
</ul>
</nav>
</body>
</html>
Estructura básica de una página web con HTML
5 (continuación)
<section></section>: se utiliza para separar el contenido por temas, por lo tanto, cada
sección, es un grupo temático de contenido, sin embargo el contenido de las diferentes
secciones está relacionado, es decir, que los contenidos son dependientes unos de otros. El
contenido que puede tener esta etiqueta puede ser cualquiera: texto, imágenes Por lo general,
los diseñadores usan esta etiqueta para dividir un texto que es muy extenso en capítulos para
dividir por ejemplo, las secciones temáticamente. Por ejemplo:
<aside></aside>: se utiliza para escribir información que no tiene la misma

relevancia que la de la sección principal pero sí está relacionada con ella.
<footer></footer>: es el pie de una sección, que como mencionamos anteriormente,

contiene información sobre el autor del sitio o de la empresa; reglas, términos y
condiciones y todo aquello que el diseñador considere importante
<article></article>: Define una parte independiente del contenido de un documento,

como una entrada de blog o un artículo periodístico
<footer>
<p>Posted by: XXXXXXXXX</p>
<p><time datetime="2024-03-20">Hace 5 minutos</time></p>
</footer>
<p>Hola!! Gracias por visitarme!!</p>
</div>
</footer>
Ejercicio de Repaso
Utilizando Div’s y CSS, diseñar una pagina de una inmobiliaria en donde figuren
los datos de la misma (ver diapositivas), imágenes, formularios, etc.

UADE Clase 3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

UADE Clase 3

Cargado por

Copyright:

Formatos disponibles

Diseño y Desarrollo Web

3. Introducción a CSS – Definición - Estilos

4. Definición de clases e indentificadores

5. Estructura básica de una pagina en HTML 5

Aquí se coloca usualmente

Acá se coloca toda la Pueden aparecer listas

Esta es el área donde

Veremos paso a paso el código del diseño anterior

<link rel="StyleSheet" href="estilos.css" type="text/css">

p { color: black; font-family: Verdana; }

Las distintas directivas de formato mediante CSS, se pueden escribir en la misma

CSS permite separar los contenidos de la página y su aspecto. Por ejemplo, si

h1 { color: red; font-family: Arial; font-size: large; }

p { color: gray; font-family: Verdana; font-size: medium; }

Cuando el navegador carga la página HTML que estamos diseñando, antes de

Indica el tipo de relación que tiene el recurso enlazado

indica el tipo de recurso enlazado. Sus valores están

Veremos ahora qué significa cada parte de una regla CSS

✔ Propiedad: permite modificar el aspecto de una característica del elemento.

✔ Valor: indica el nuevo valor de la característica modificada en el elemento.

Selector de tipo o etiqueta: Selecciona todos los elementos de la página

Selectores de ID: A veces es necesario aplicar estilos CSS a un único elemento de la

#destacado { color: red; }

El símbolo de #indica que estamos usando un selector de Id.

<header></header>: sirve para colocar un título o subtítulo en la pagina, no es lo

<nav></nav>: sirve para colocar un título o subtítulo en la pagina, no es lo mismo

<aside></aside>: se utiliza para escribir información que no tiene la misma

<footer></footer>: es el pie de una sección, que como mencionamos anteriormente,

<article></article>: Define una parte independiente del contenido de un documento,

También podría gustarte