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>

HTML Y TABLAS
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.

HTML Y TABLAS
<!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.

HTML Y TABLAS
<!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>

HTML Y TABLAS
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>

HTML Y TABLAS
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.

HTML Y TABLAS
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>

HTML Y TABLAS
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 Y TABLAS

Html, css y tablas.compressed

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Similar to Html, css y tablas.compressed

Similar to Html, css y tablas.compressed (20)

Html, css y tablas.compressed