Scribd
Cargar
15 vistas

TDAweb HTML - CSS

Este documento presenta las instrucciones para aplicar estilos CSS a un documento HTML. Se explica cómo separar la hoja de estilo del código HTML para permitir el desarrollo independiente. Luego, se detallan 8 pasos para aplicar estilos CSS al documento HTML, como cambiar los colores de fondo y texto, agregar fuentes y posicionar elementos. Finalmente, se separa completamente la hoja de estilo en un archivo CSS externo.

Cargado por

Steve Adair
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
15 vistas

TDAweb HTML - CSS

Este documento presenta las instrucciones para aplicar estilos CSS a un documento HTML. Se explica cómo separar la hoja de estilo del código HTML para permitir el desarrollo independiente. Luego, se detallan 8 pasos para aplicar estilos CSS al documento HTML, como cambiar los colores de fondo y texto, agregar fuentes y posicionar elementos. Finalmente, se separa completamente la hoja de estilo en un archivo CSS externo.

Cargado por

Steve Adair
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/ 8

Asignatura: Tecnologías para el Desarrollo de Aplicaciones Web.

Tema: Diseño con estilo CSS para una interfaz de usuario HTML.

Introducción a CSS.
Las hojas de estilo generalmente se encuentran en archivos separados del código principal, en este caso HTML. Esto
permitirá que, en un equipo de trabajo, el programador y el diseñador puedan realizar sus tareas de forma independiente y
paralela, sin el riesgo de interferencias entre ambos pues ello no alterará el resultado final.

Al dividir el contenido y la apariencia se obtienen archivos más ligeros, y esto reporta dos beneficios: reducción de los
tiempos de carga del sitio en el navegador y la capacidad de éste para mantener la hoja de estilo en caché. Inclusive, se
reduce el volumen de tráfico del servidor; por un lado, si se tiene un servicio de hosting gratuito en el que se tienen cuotas
muy reducidas, que si se paga por tener alojamiento propio.

Nota: Observar que, en el código HTML no se cambia el contenido entre las etiquetas <body> y </body> y esto se indica
con [etc.].

DESARROLLO.
1. Abrir un editor de texto y capturar el código siguiente. Al terminar la captura, guardar el documento con el nombre
html-css.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
</head>
<body>
<!-- Menú de navegación del sitio -->
<ul class="navbar">
<li><a href="https://www.google.com/">Google</a>
<li><a href="https://espanol.yahoo.com/?p=us">Yahoo</a>
<li><a href="https://www.gmail.com/">Gmail </a>
<li><a href="enlaces.html">Otros enlaces</a>
</ul>
<!-- Contenido principal -->
<h1>Esta es una primera página con CSS</h1>
<p>Bienvenido a esta página Web utilizando CSS.
<p>Se aplicar&aacute; un estilo sin imágenes.
Algunos enlaces pueden no tener acceso hacia algún sitio.
<address>IPN<br>
Tecnologìas para el Desarrollo de Aplicaciones Web.
</address>
</body>
</html>

Ejecutar el archivo html-css.html en el navegador. La imagen de la página debe ser similar a la que se muestra al visualizarla
en el navegador, ver la figura 1.

Dr. Alejandro Cifuentes.


Figura 1. El navegador muestra la página utilizando el código inicial.

2. Corregir ortográficamente la sintaxis del código del documento, como se indica enseguida con negritas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
</head>
<body>
<!-- Menú de navegación del sitio -->
<ul class="navbar">
<li><a href="https://www.google.com/">Google</a>
<li><a href="https://espanol.yahoo.com/?p=us">Yahoo</a>
<li><a href="https://www.gmail.com/">Gmail </a>
<li><a href="enlaces.html">Otros enlaces</a>
</ul>
<!-- Contenido principal -->
<h1>Esta es una primera p&aacute;gina con CSS</h1>
<p>Bienvenido a esta p&aacute;gina Web utilizando CSS.
<p>Se aplicar&aacute; un estilo sin im&aacute;genes.
Algunos enlaces pueden no tener acceso hacia alg&uacute;n sitio.
<address>IPN<br>
Tecnolog&iacute;as para el Desarrollo de Aplicaciones Web.
</address>
</body>
</html>

Figura 2. El código corregido.

3. Agregar un elemento <style> en el archivo HTML, como se indica enseguida con letra negrita. La hoja de
estilo estará en el interior de ese elemento <style>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
<style type="text/css">
body {
color: blue;
Dr. Alejandro Cifuentes.
background-color: #F8E469
}
</style>
</head>
<body>
:
[etc.]

Figura 3. Agregando la etiqueta <style>.

4. Añadir al código las siguientes líneas para la fuente y tamaño de letra en negritas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
<style type="text/css">
body {
font-familiy: Georgia, "Times New Roman", Times, serif;
color: blue;
background-color: #F8E469
}
h1{
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
</style>
</head>
<body>
:
[etc.]

Figura 4. Actualización con el atributo font-family.

5. Agregar las propiedades padding-left (mover el texto del elemento body) y position (mover el menú) que
se indican con negritas. Se puede utilizar también column y layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
Dr. Alejandro Cifuentes.
<style type="text/css">
body {
padding-left: 11em;
font-familiy: Georgia, "Times New Roman", Times, serif;
color: blue;
background-color: #F8E469
}
ul.navbar{
position: absolute;
top: 2em;
left: 1em;
width: 9em
}
h1{
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
</style>
</head>
<body>
:
[etc.]

Figura 5. Actualización con las propiedades padding-left y position.

6. Agregar el color de los enlaces: utilizar el color azul para aquellos enlaces que el usuario no ha visitado todavía, y
el color morado para los enlaces que ya se han visitado. Los cambios se indican con negritas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-familiy: Georgia, "Times New Roman", Times, serif;
color: blue;
background-color: #F8E469
}
ul.navbar{
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em
}
h1{
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
Dr. Alejandro Cifuentes.
}
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black
}
ul.navbar a {
text-decoration: none
}
a: link {
color: blue
}
a: visited {
color: purple
}
</style>
</head>
<body>
:
[etc.]

Figura 6. Actualización de colores para los sitios visitados y no visitados.

7. Añadir una línea horizontal para separar el texto que se encuentra al final. Utilizar border-top para añadir una
línea punteada encima del elemento <address>. Los cambios se indican con negritas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
<style type="text/css">
body {
padding-left: 11em;
font-familiy: Georgia, "Times New Roman", Times, serif;
color: blue;
background-color: #F8E469
}
:
a: visited {
color: purple
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}
</style>
</head>
<body>
Dr. Alejandro Cifuentes.
:
[etc.]

Figura 7. Se añade una línea horizontal.

8. Ahora, se separará la hoja de estilo del archivo html-css.html. Crear otro archivo de texto y guardarlo el nombre
estilo.css, en la misma carpeta que html-css.html. Cortar todo lo que hay dentro de los elementos <style> y
</style> del archivo HTML y pegarlo en el nuevo archivo CSS. No copiar las etiquetas <style> y </style>
pues éstas pertenecen a HTML, y no a CSS. En el nuevo archivo, se tiene la hoja de estilo, completa, únicamente:
body {
padding-left: 11em;
font-familiy: Georgia, "Times New Roman", Times, serif;
color: blue;
background-color: #F8E469
}
ul.navbar{
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em
}
h1{
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black
}
ul.navbar a {
text-decoration: none
}
a:link {
color: blue
}
a:visited {
color: purple
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}

Dr. Alejandro Cifuentes.


9. En el archivo HTML se borra todo lo que hay dentro de las etiquetas, desde <style> hasta </style>, ambas
inclusive, y reemplazarlas por un elemento <link>. Los cambios se indican con negritas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
:
</body>
</html>

La línea de <link> le indica al navegador que la hoja de estilo se encuentra en el archivo creado estilo.css.

10. Ejecutar la aplicación en el navegador. Verificar que no existen errores y que se muestra lo mostrado en el
navegador.

Figura 10. La página se muestra con los mismos cambios del archivo CSS.

11. Por último, cambiar los enlaces para que posean otra funcionalidad hacia los sitios correspondientes. Además,
agregar las imágenes como se indica en la figura 11. Los cambios se indican con negritas. Ejecutar de nuevo la
aplicación.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esta es una página con CSS</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<ul class="navbar">
<li><a href=" https://www.youtube.com/">Youtube</a>
<li><a href=" mailto:[email protected]">Yahoo</a>
<li><a href="contactos.html">IPN<img src="ipn.png" width="20"
height="25O" alt="Lista de contactos"></a>
<li><a href="enlaces.html">Otros enlaces</a>
</ul>
<h1>Esta es una primera p&aacute;gina con CSS</h1>
<p>Bienvenido a esta p&aacute;gina Web utilizando CSS.
<p>Se aplicar&aacute; un estilo sin im&aacute;genes.
Algunos enlaces pueden no tener acceso hacia alg&uacute;n sitio.
<address>IPN<br>
Tecnolog&iacute;as para el Desarrollo de Aplicaciones Web.
</address>
<center><img src="escom.png" border="0"></center>
</body>

Dr. Alejandro Cifuentes.


</html>

Figura 11. La aplicación completa.

NOTA. Generar un documento que muestre el desarrollo y la solución obtenida, incluyendo las imágenes mostradas.
Guardar los archivos obtenidos en una carpeta comprimida AlumnoHTML-CSSGrupo.zip, y enviarla al sitio indicado por
el profesor.

Dr. Alejandro Cifuentes.

También podría gustarte