Html, css y tablas.compressed

Facultad de Ingeniería de Sistemas e Informática Taller de Lenguajes de programación avanzada III

HTML Y TABLAS Docente : Carlos H. Rueda C.

HTML, CSS Y TABLAS

Introducción

Lo primero que debemos hacer es configurar el esqueleto de la página.

Escribí siempre <!DOCTYPE html> en la primera línea. Esto le dice al navegador qué lenguaje está leyendo (en este caso, HTML).

Escribí siempre <html> en la línea siguiente. Esto comienza el documento de HTML.

Escribí siempre </html> en la última línea. Esto finaliza el documento de HTML.

<!DOCTYPE html> <html> </html>

Tamaño de fuente con CSS

Acodarte de que <p> y </p> son etiquetas de inicio y de cierre de un párrafo.

Usa el atributo style para cambiar el tamaño del texto. Como valor del atributo usamos el (font-size), seguido de dos puntos, del tamaño que deseamos, y finalizamos con px (abreviatura de "píxeles"). Por ejemplo:

<p style = "font-size: 12px">

Ejercicio:

Crea un archivo nuevo, guárdalo como index.html y escribe el siguiente código.

<!DOCTYPE html> <html> <head> <title>Primer cambio de tamaño de letra</title> </head> <body> <p style = "font-size: 7px"> Algún texto cortito </p> <p style = "font-size: 20px"> Algún texto de tamaño normal</p> <p style = "font-size: 40px"> Algún texto largo</p> </body> </html>



Guarda el archivo y abre un navegador, después carga la página que acabas de crear y observa como cambia el tamaño de la fuente.

Color de fuente con CSS Para cambiar el color del texto, simplemente agrega el atributo style en la etiqueta de inicio y después hace que el estilo sea igual a "color:blue" (color azul) o cualquier color que quieras. Por ejemplo:

<h2 style="color:red">

Para cambiar el color y el tamaño de la fuente solo tienes que agregar un punto y como (;) entre el medio. Por ejemplo:

<h2 style="color: green; font-size:12px">

Ejercicio:

Crea un archivo nuevo, guárdalo como colorcss.html y escribe el siguiente código.

<!DOCTYPE html> <html> <head> <title>Cambiar colores</title> </head> <body> <h1 style="color:green; font-size:16px">Título grande</h1> <p style="color:magenta">Un oso gigante y un patito eran amigos.<p> <p style="color:red; font-size:10px">Pero cuando crecieron se transformaron en archienemigos.</p> </body> </html>

Tipos de fuentes con CSS Para cambiar el tipo de fuente con CSS lo hacemos usando font-family, de esta manera:

<h1 style="font-family: Arial">Title</h1>

Ejercicio:

Crea un archivo nuevo, guárdalo como fuentescss.html y escribe el siguiente código.



<!DOCTYPE html> <html> <head> <title>Me encanta cambiar los tipos de letra</title> </head> <body> <h1 style="font-family: Arial">Título grande</h1> <ol> <li style="font-size: 16px">Este ítem es Arial tamaño grande.</li> <li style="font-size: 12px; font-family: Verdana">Este ítem es Verdana tamaño medio.</li> <li style="font-size: 10px; font-family: Impact">Este ítem es Impact tamaño chico.</li> </ol> </body> </html>

Repaso Se ha visto como cambiar el tamaño, el color y el tipo de una fuente usando CSS. Los atributos que se usan están dentro de la etiqueta style. Con los valores como el siguiente ejemplo:

a. font-size: 14px b. color: orange c. Font-family: Verdana

Se puede colocar todo en un atributo style así:

<p style = "font-size:14px; color: orange; font-family: Bodoni">

Color de fondo con CSS Para cambiar el color de fondo con CSS lo hacemos usando el atributo style y se ajusta el background-color, de esta manera:

<p style="background-color: red;">¡Hola!</p>

Ejercicio:

Crea un archivo nuevo, guárdalo como fondocss.html y escribe el siguiente código.

Observa que se modifica la etiqueta body y se le da un fondo Brown con style. Tambien las etiquetas <ol> se les da un color de fondo yellow con style.



<!DOCTYPE html> <html> <head> <title>¡Qué buen color de fondo!</title> </head> <body style="background-color: brown;"> <h3>Equipos de fútbol preferidos</h3> <ol style="background-color: yellow;"> <li>River</li> <li>Boca</li> <li>Independiente</li> </ol> </body> </html>

Alineación del con CSS

Para eso, también usamos el atributo style. Y luego usaremos "text-align:left" (alineación de texto: left (izquierda); o right, (derecha); o center (centro) para determinar la ubicación del texto.

<h1 style="text-align:center">

Ejercicio:

Crea un archivo nuevo, guárdalo como alineacioncss.html y escribe el siguiente código.

<!DOCTYPE html> <html> <head> <title>¡Qué buen color de fondo!</title> </head> <body> <h3 style="text-align:center">Equipos de fútbol preferidos</h3> <ol> <li style="text-align:left">River</li> <li style="text-align:center">Boca</li> <li style="text-align:right">Independiente</li> </ol> </body> </html>



Negrita

Para dar negrita, se usa la etiqueta <strong> … </strong>

Ejercicio:

Crea un archivo nuevo, guárdalo como negritacss.html y escribe el siguiente código.

<!DOCTYPE html> <html> <head> <title>¡Me voy de vacaciones!</title> </head> <body> <p>¿Escuchás a la gente <strong>cantar?</strong></p> <p>No. Estoy <strong>muy</strong> ocupado comiendo torta.</p> </body> </html>

Resaltar palabras

a veces queremos enfatizarlas usando itálicas.

Igual que con las negritas, no necesitamos usar el atributo style. Hay que hacer así: <em> .. </em>

Ejercicio:

Crea un archivo nuevo, guárdalo como italicascss.html y escribe el siguiente código.

<!DOCTYPE html> <html> <head> <title>Buena práctica</title> </head> <body> <p>¡No digas <em>eso</em>!</p> <p>Estoy <em>tan</em> cansado...</p> </body> </html>



Resumen

Hasta ahora hemos visto los siguientes elementos:

a. Cambiar el color, tamaño y tipo de fuente b. Colocar fondo c. Alinear texto d. Poner negrita e itálica.

Ejercicio:

A continuación hay un segmento de código el cual debes modificar con las instrucciones que aparecen más abajo:

<!DOCTYPE html> <html> <head> <title>Veamos las tablas</title> </head> <body> <h1>Las tablas son geniales</h1> </body> </html>

1. Hacer que el encabezado tenga el tipo de fuente Arial 2. Agregar una imagen 3. Agregar una segunda imagen sobre la que se pueda hacer clic y que enlace a un sitio

web.



Tablas

Las tablas son muy útiles. Se usan para guardar datos tabulares, para que sean fáciles de leer.

Para crear una tabla se usa la etiqueta <table> y </table>

Ejercicio:

Crea un archivo nuevo, guárdalo como tablas.html y escribe el siguiente código.

<!DOCTYPE html> <html> <head> <title>Veamos tablas</title> </head> <body> </body> </html>

a. Luego agrega un par de etiquetas <table>, una de inicio y una de cierre. b. Guarda el archivo y ábrelo con un navegador. Veras que agregar las etiquetas <table> no

hace nada visible.

Filas

Las filas se hacen con la etiqueta <tr></tr>

Ejercicio:

Al archivo anterior agrega tres filas (tres etiquetas <tr></tr>) dentro de la etiqueta <table></table>. Guarda el archivo y revísalo en el browser.

Columnas

Las columnas se hacen con la etiqueta <td> … </td>



Ejercicio:

Modifica el archivo anterior con el siguiente código:

<html> <head> <title>Ahora las tablas</title> </head> <body> <table border="1px"> <tr> <td>Una</td> </tr> <tr> </tr> <tr> </tr> </table> </body> </html>

a. En la segunda fila agrega una celda de datos de tabla (<td></td>) y escribe Dos en medio de las etiquetas

b. En la tercera fila, agrega otra celda y escribe Tres en medio de las etiquetas. c. Guarda el archivo y ábrelo con un browser.

Html, css y tablas.compressed

Documents

Transcript of Html, css y tablas.compressed