HTMLCSS
ISIS2603 Desarrollo de Software en Equipos. Uniandes. 2021
Existe variedad de material disponible sobre HTML y CSS en la web. En particular, recomendamos el contenido de los sitios Mozilla Developer Network y w3schools.
El propósito de este capítulo es presentar de manera breve los conceptos básicos de HTML y CSS incluyendo algunos ejemplos y ejercicios.
HTML es un lenguaje de marcado estandarizado para hipertexto Hypertext Markup Language. Con las marcas (Tags) que provee HTML definimos la estructura del contenido del documento. Por ejemplo, se podría definir la siguiente estructura: hay dos secciones principales, cada una con dos párrafos. Una de las secciones tiene subsecciones y una de ellas tiene una tabla.
Con CSS (siglas en inglés de Cascading Style Sheets) definimos el estilo, por ejemplo: un color para el fondo, uno para el título, las fuentes tipográficas y el tamaño de la letra.
El marcado es lo que va dentro de los símbolos menor, mayor < >. Estas marcas tienen una semántica predefinida y debe ser entendida por todos los navegadores de la misma forma. Por ejemplo, tenemos la marca h1 que se compone de la que abre (\<h1\>) y de la que cierra (\</h1\>). La semántica de h1 (header 1) es que se mostrará un título de primer nivel.
Cuando no se define un estilo particular el navegador utilizará los parámetros por defecto, que puede ser una fuente de tipo Arial, con un tamaño de 14 y en negrita.
Vamos a explicar los elementos de estructura de HTML con el siguiente ejemplo simple:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Título de la Página</title>
</head>
<body>
<h1>Encabezado nivel 1</h1>
<p>Er zijn vele variaties van passages van Lorem Ipsum beschikbaar maar
het merendeel heeft te lijden gehad van wijzigingen in een of andere vorm,
door ingevoegde humor of willekeurig gekozen woorden die nog niet half
geloofwaardig ogen.
</p>
</body>
</html>Todos los documentos HTML deben empezar con el tipo de documento:
<!DOCTYPE html>La anterior estructura tiene la etiqueta raíz html y está dividida en dos secciones:
- head: contenedor con todas las etiquetas de configuración de estilos (css), archivos javascript y metadata como el título de la página y la codificación de caracteres utilizada.
- body: contenedor de todas las etiquetas visuales de la página: títulos, hipervínculos, imágenes, tablas, formularios, etc.
Por cada uno de los elementos del archivo existe una marca html para definirlo, como, por ejemplo: \<title\>, \<header\>, \<article\>, \<section\>, \<p\>, \<div\>, \<span\>, \<img\>, \<table\> y otros más. Cada marca abre y debe cerrar. Para indicar cierre se escribe la marca antecedida de /.
En el listado anterior, las dos últimas líneas son la marca de cierre para \</body\> y luego, una marca de cierre para \</html\>.
El documento estará bien construido si su estructura es arborescente. La representación en árbol del listado anterior es:
 |
|---|
| Figura 1 |
Una marca puede tener o no un valor y puede tener o no un conjunto de atributos. En el ejemplo, el valor del elemento h1 es "Encabezado nivel 1". El elemento meta no tiene valor, pero si tiene un atributo llamado charset cuyo valor es "UTF-8". El valor de los atributos debe ir siempre entre comillas.
Los atributos válidos para una marca particular están especificados como parte del lenguaje y como tal deben ser interpretados por el browser para visualizarlos. Por ejemplo, la marca para definir enlaces es \<a\>\</a\>. El valor del elemento es el texto que queremos que aparezca en la página. El enlace propiamente dicho lo debemos definir como el valor de un atributo llamado href, así:
<a href="https://www.w3schools.com">Esto es un enlace a https://www.w3schools.com </a>
Veamos el elemento <table> que permite la construcción de tablas. Cada fila (row) está definida por la marca <tr> (table row) y dentro de ésta van las columnas definidas por <td> (_table data):
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Usuario</th>
</tr>
<tr>
<td>María</td>
<td>Díaz</td>
<td>maria.diaz</td>
</tr>
<tr>
<td>Juan</td>
<td>Castro</td>
<td>juan.castro</td>
</tr>
<tr>
<td>Ernesto</td>
<td>Velez</td>
<td>ernesto.velez</td>
</tr>
</table>El navegador muestra la siguiente tabla a la que aún no le hemos definido ningún estilo.
 |
|---|
| Figura 2 |
El siguiente ejemplo muestra cómo utilizar la marca para incrustar una imagen en la página web.
<img src="https://pixnio.com/free-images/2017/12/08/2017-12-08-09-47-26-1200x800.jpg" alt="Trulli" width="500" height="333"/>La imagen que se mostrará en el navegador es la siguiente. De nuevo no hay ningún estilo defininido, solo la imagen en su tamaño original:
 |
|---|
| Figura 3 |
El siguiente ejemplo muestra cómo definir un enlace a otra página web. En el ejemplo estamos además utilizando el atributo target="_blank" que indica que la página del enlace se abrirá en una nueva pestaña.
<a href="https://sicuaplus.uniandes.edu.co/" target="_blank">Sicuaplus Uniandes</a> Veamos ahora un ejemplo del elemento form que permite crear un formulario. Si bien la intención es que un usuario ingrese datos, aquí solo estamos mostrando el HTML sin estilos ni comportamiento.
<!DOCTYPE html>
<html>
<body>
<h2>Formulario HTML</h2>
<form>
Ciudad:
<br/>
<br/>
<input type="text" name="ciudad" value="Bogotá">
<br/>
<br/> Zipcode:
<br/>
<br/>
<input type="text" name="zipcode" value="1101001">
<br/>
<br/>
<input type="submit" value="Enviar">
</form>
</body>
</html>El navegador despliega el siguiente formulario. Note que la marca <br/> permite dejar una línea en blanco.
 |
|---|
| Figura 4 |
Cada campo marcado con input, está definido para que el usuario ingrese algún valor. En el ejemplo hay un valor por defecto que se muestra con el formulario. El atributo name define el nombre de la variable donde quedará el valor correspondiente. Como veremos más adelante, asociado con el formulario puede ir una función donde definiremos el comportamiento del formulario cuando el usuario haga click en Enviar .
La sintaxis básica de CSS consiste de un conjunto de reglas. Cada regla está asociada con un elemento de marcado estándar y define las propiedades (color, tamaño, etc.) del elemento para que el navegador sepa cómo desplegar el documento.
<style>
body {
background-color: lightyellow;
}
h1 {
color: black;
text-align: center;
}
p {
font-family: times;
font-size: 12px;
}
</style>Del ejemplo anterior tenemos tres reglas sobre un elemento selector: body, h1 y p. Cada regla es un conjunto de parejas propiedad: valor las cuales deben estar separadas por punto y coma ;.
- La regla para
bodydefine el color de fondo de toda la página. - La regla para
h1define el color del texto para los encabezados de primer nivel. Además indica que esos encabezados definidos conh1van a ir centrados. - La regla para
pdefine que todos los párrafos van a utilizar la fuente times en tamaño de 12 pixeles.
Podemos definir estilos distintos para los párrafos. Por ejemplo, la regla:
p.centrado {
font-family: times;
font-size: 12px;
text-align: center
}Aplica a los párrafos en los cuales el atributo "class" se denomina centrado. En la siguiente sección veremos ejemplos sobre cómo aplicar los estilos y sobre cómo definir otros selectores.
 Ejercicio: |
Utilizando como selector thead agregue en el archivo de estilos un estilo para que el encabezado tenga letras color rojo, en negrilla y con fuente times 14 |
|---|
La definición de una regla CSS siempre debe tener un elemento selector. Como vimos en los ejemplos anteriores, este selector puede ser el nombre de la marca o tag html a la que le queremos aplicar el estilo (h1, p, thead, etc.). Si queremos que los estilos sean iguales en todo el html, por ejemplo, todos los párrafos p son times 12, no hay necesidad de indicar en el html la referencia al estilo. Sin embargo, muy frecuentemente se quiere que los estilos sean más especializados caso por caso, por ejemplo, tabla por tabla, o lista por lista. En estos casos necesitamos diferenciar el selector.
En la Figura 5 se muestra un ejemplo donde se ha definido un estilo para el elemento Html table y se muestra el efecto en el despliegue. El estilo se aplicó a toda la tabla.
 |
|---|
| Figura 5: Ejemplo elemento Html como selector |
Para aplicarlo se debe definir, en la o las marcas donde se vaya a aplicar, el atributo id. Ejemplo: En la Figura 6 se muestra un ejemplo donde se ha definido un estilo llamado titulotabla. Este estilo se ha aplicado en el HTML sobre los elementos de título de las columnas de la tabla:
 |
|---|
| Figura 6: Ejemplo con id |
Para aplicarlo se debe definir, en la o las marcas donde se vaya a aplicar, el atributo class. Ejemplo: En la figura 7 se muestra un ejemplo donde se ha definido un estilo llamado p.center y un estilo llamado colorazul. En el ejemplo se muestra la aplicación de ambos estilos en un elemento Html de párrafo p. Note que se puede aplicar más de un estilo separados por espacio en blanco:
 |
|---|
| Figura 7: Ejemplo con class |
|
Ejercicio: |
Tomados de w3schools. |
|---|---|
| HTML-CSS Ejercicios básicos CSS de w3schools |
|
Ejercicio: |
Practicar Tablas y grillas |
|---|---|
| Utilizando tablestyler, construya tablas de distintos formatos y genere el código HTML y el código CSS. | |
| Copie los códigos en un proyecto propio y modifique los estilos a la mano para ver los efectos en el resultado. |
Este libro fue creado para el curso ISIS2603 Desarrollo de Software en Equipos en la Universidad de los Andes. © Desarrollado por Rubby Casallas con la colaboración de César Forero, Kelly Garcés, Jaime Chavarriaga y José Bocanegra. Universidad de los Andes, Bogotá, Colombia. 2021.