Ya habéis realizado una página web sencilla, pero es muy simple y así no tendríamos muchas visitas. Tenemos que ponerla más alegre dotándola de colores, insertando tablas y haciendo que cada apartado quede en su sitio.
Estoy seguro de que seréis capaces de rediseñar vuestra página web para tener miles de visitas.
Y para ayudaros en la tarea aquí tenéis varias actividades que os facilitarán la labor y que os guiarán paso a paso.
¡Seguimos con nuestro documento HTML!
Vamos a cambiar la estructura de un documento HTML para realizar un portfolio personal. Realizaréis un diseño común que cada uno personalizará finalmente con sus propios trabajos en esta asignatura. Cuando lo finalicemos, ¡podrás ponerlo a disposición de todos en Internet creando una nueva entrada en tu blog de la materia!
Basándonos en la estructura básica que se proporciona en el código de la derecha, seguid atentamente los pasos indicados en la zona izquierda:
Estructura base HTML
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Título de la página…</title>
<meta charset="UTF-8">
<meta name="description" content="Descripción de la página…">
</head>
<body>
<div class=”barra-lateral”>
<h3>Título…</h3>
<p>Texto</p>
</div>
<div class=”contenido”>
<h1>Otro título…</h1>
<p>Otro texto</p>
<p>Más texto… </p>
</div>
</body>
</html>Usad la plantilla como sigue:
Ahora vamos a introducir un nuevo elemento que se puede utilizar en páginas web, las tablas.
La etiqueta <table> demarca la tabla. Dentro de ella, cualquier fila se demarca con <tr> que viene de “table-row” (fila de tabla, en inglés).
Podemos tener una primera fila con celdas con la etiqueta <th> (“table header”, cabecera de tabla en inglés) que actúan como cabecera y luego el resto, serían celdas (columnas) ordinarias con datos con la etiqueta <td>, “table data”. Todo ello lo puedes observar en el ejemplo:
<table border=1>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Web</th>
</tr>
<tr>
<td>Lara</td>
<td>Centeno</td>
<td>https://www.laracenteno.com/</td>
</tr>
<tr>
<td>Patricio</td>
<td>Rivas</td>
<td>https://www.patriciorivas.com/</td>
</tr>
</table>
Los formularios HTML hacen posible que un usuario envíe información a una web. Los comentarios de Instagram, Facebook o Twitter en el que realizas tus publicaciones son ejemplos de formularios HTML.
La mejor manera de ver los posibles comandos que puedes usar, es verlo en un ejemplo y analizarlo:
Ejemplo de formulario web
<form action="https://miweb.com/contacto/solicitud">
<p>Tu nombre:</p>
<input type="text" name="nombre"/>
<p>Tu email:</p>
<input type="text" name="email"/>
<p>Asunto de tu solicito:</p>
<input type="text" name="asunto"/>
<p>Texto de tu solicitud:</p>
<input type="textarea" name="solicitud"/ rows="5" cols="40">
<p><input type="submit" value="Enviar"></p>
</form>Explicación del ejemplo
En este ejemplo, con los elementos input podemos crear campos en la página que recogen la información que el usuario introduce, una información estructurada que puede ser procesada por una máquina.
En este formulario, tenemos cuatro parejas campo – valor:
En el momento que el usuario haga clic en el botón del formulario, esta información se envía a la URL especificada en el atributo action de la etiqueta form.
Imagen que aparecería en la web con el ejemplo anterior.
CURIOSIDAD: ¿Cómo se procesa un formulario?
Lo que sucede a partir del momento en el que se pulsa el botón de Enviar, sucederá en el servidor, ya no estamos en la página, la página ya ha hecho su trabajo: enviar al servidor esta información. Entonces, para poder usar el contenido de un formulario enviado por un usuario al servidor, tiene que haber algún tipo de programa que procese esa información en el servidor. Esto lo veremos más adelante en el recurso.
En HTML cualquier color se puede generar combinando con diferentes niveles de intensidad los tres colores básicos: rojo, verde y azul. Por razones informáticas se usan 256 niveles en cada uno (de 0 a 255, valores que corresponden a un byte).
Estos códigos de colores HTML se suelen especificar en tripletes RGB. Mira los ejemplos:
Muchas veces no se usan los números del sistema decimal, a los que estamos acostumbrados, sino que se usa también mucho el sistema de numeración hexadecimal, donde se le antepone al número la almohadilla (#): 255,138,138 en hexadecimal sería #FF8A8A.
¿Cómo ponemos entonces las letras y fondos de nuestras páginas web en diferentes colores? La respuesta es sencilla: aplicando el atributo color a la etiqueta correspondiente. Averigua, en las opciones dadas, qué hace la etiqueta proporcionada. Ayúdate si te hace falta del conversor de colores: conversor de colores
Ya conoces las bases del formateo de textos y presentación de elementos en un documento HTML para una página web. ¡Es el momento de crear el contenido que aparecerá en cada sección de tu portfolio según el diseño presentado en grupo en el punto 1!
De momento, en este ejercicio de esta sección HTML sólo vamos a crear el contenido. El posicionamiento de este contenido dentro de la página web lo haremos en la siguiente sección donde aprenderás a utilizar CSS, que localiza cada sección en su lugar gracias al estilo aplicado.
Entonces, lo que debes realizar en este ejercicio es:
En el caso de que uses una barra lateral con enlaces a las distintas secciones de tu portfolio de diferente contenido, te recomendamos que en dichos enlaces utilices anclas a los títulos de la sección que tiene dicho contenido (encabezado de sección). Por ejemplo:
<a id="identificador"></a>
...
<h2 id="identificador">.......</h2>Por mayor comodidad, te proporcionamos aquí una tabla con las etiquetas básicas de formateo de texto en línea. Hay mucha información por Internet, pero en líneas generales estas son las más utilizadas:
| Etiqueta | Función |
|---|---|
| <b></b> | Para poner texto en negrita |
| <tt></tt> | Texto monoespaciado teletipo |
| <sub></sub> | Índice inferior |
| <sup></sup> | Índice superior |
| <strong></strong> | Texto destacado |
| <em></em> | Texto enfatizado |
| <small></small> | Texto pequeño |
| <big></big> | Texto grande |
| <u></u> | Texto subrayado |
| <i></i> | Texto cursiva |
| <del></del> | Texto tachado |
Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0