Diario de clase TIyC 4º de ESO: HTML, toma de contacto y primer ejercicio

Primer día que hablamos de HTML

Vemos la estructura de una página. Vemos que HTML es un lenguaje de marcas que se utiliza para crear páginas y sitios web.
El lenguaje HTML utiliza etiquetas que por lo general van en pares, una de inicio y otra de cierre. Cada etiqueta puede tener un conjunto de atributos, propiedades.
En el siguiente recuadro podemos ver la estructura básica de un documento HTML:

Aquí vemos el código HTML de una página básica:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8"> 
  <title>primera prueba</title>
</head>

<body>

  <h1>Segunda evaluación</h1>
  <p>En esta evaluación aprenderemos
   a
   hacer
   <b>páginas web</b> usando      HTML5 y    CSS3.</p>
   <h1> Título nivel 1 </h1>
   <h2> Título nivel 2 </h2>
   <h3> Título nivel 3 </h3>
   <p> La memoria de núcleos magnéticos o memoria de 
   toros, fue una forma de memoria 
   principal de los computadores, 
   hasta comienzos de 1970.<br> 
   La función de esta memoria era similar a la que
    realiza la memoria <b>RAM</b> en
    la actualidad: es el espacio de trabajo, para la CPU,
   </p>
</body>
</html>

Etiquetas más comunes

<h1>...</h1>, ..., <h6>...</h6> son encabezados, para los títulos.
<p>...</p> párrafo.
<a ...>... </a> enlaces
<img ...> para insertar una imagen, no tiene etiqueta de cierre.
<br> salto de línea, no tiene etiqueta de cierre

Blogger permite crear las entradas del blog sin tener conocimientos de HTML pero es bueno aprender un poco para poder hacer cosas que no se pueden hacer directamente.
Para modificar el cógigo html de una entrada debemos pulsar el botón 'HTML' y para volver a la vista normal del editor pulsamos el botón 'Redactar'.
Hoy vamos a ver dos ejemplos de cosas que no se pueden hacer directamente:

Un separador

Un separador (<hr>). La etiqueta <hr> no tiene etiqueta final y se puede escribir de dos formas: <hr> o <hr />.

Lo que viene a continuación es un separador:

Ejemplo de lista

Blogger me permite crear listas, pero no listas dentro de listas, por eso es bueno saber algo de HTML:

Estaciones del año:

Primavera.
Verano.
Otoño.
Invierno.

Ahora veremos un ejemplo en el que nos haría falta crear listas con varios niveles:

Provincias por comunidad autónoma:

Extremadura

Cáceres
Badajoz

Aragón

Huesca
Teruel
Zaragoza

Cataluña

Barcelona
Girona
Lleida
Tarragona

Aquí vemos el código para poder crear una lista de listas como la anterior:

<ul>
  <li>Extremadura</li>
 <ul>
   <li>Cáceres</li>
   <li>Badajoz</li>
 </ul>
  <li>Aragón</li>
 <ul>
   <li>Huesca</li>
   <li>Teruel</li>
   <li>Zaragoza</li>
 </ul>
  <li>Cataluña</li>
 <ul>
   <li>Barcelona</li>
   <li>Girona</li>
   <li>Lleida</li>
   <li>Tarragona</li>
 </ul>

</ul>

Blog

21 de enero de 2019

HTML, toma de contacto y primer ejercicio