Bienvenidos a este mini-vídeo
cuyo título es "HTML: ejemplo básico".
Mi nombre es Emilio Letón
y pertenezco al departamento de Inteligencia Artificial de la UNED.
En este mini-vídeo se trata de conocer la sintaxis básica
del lenguaje HTML, "Hypertext Markup Language"
o "Lenguaje de marcado hipertextual" que sirve para crear páginas web.
El lenguaje HTML se escribe usando "tags" o etiquetas.
En este ejemplo básico de HTML se verá que existen
etiquetas de inicio y etiquetas de cierre.
La primera etiqueta en una página web o página HTML
es la etiqueta de inicio html.
Como cualquier etiqueta de inicio empieza con el símbolo "menor que",
continúa con el nombre de la etiqueta, en este caso html
y termina con el símbolo "mayor que",
es decir, .
La última etiqueta en una página web es la etiqueta de cierre html.
Como cualquier etiqueta de cierre, empieza con el símbolo "menor que",
a continuación una barra inclinada,
después el nombre de la etiqueta, en este caso html
y termina con el símbolo "mayor que",
es decir, .
Dentro de una zona HTML hay dos zonas:
la zona descriptiva o de cabecera, head (cabeza)
y la zona del contenido en sí de la página, body (cuerpo).
La zona descriptiva
abarca desde la etiqueta de inicio, head, que se escribe
hasta la etiqueta de cierre head, que se escribe .
La zona del cuerpo
abarca desde la etiqueta de inicio body, que se escribe
hasta la etiqueta de cierre body, que se escribe .
Esta sintaxis escrita hasta ahora
sólo sirve para crear una página web vacía.
En este momento es bueno parar el mini-vídeo,
grabar el código escrito hasta ahora
en un archivo con extensión htm o html
y abrirlo con un navegador para visualizar lo realizado,
que en este caso es una página web en blanco.
A continuación se irán viendo etiquetas básicas
para ir creando contenidos dentro de dicha página.
En primer lugar conviene dar un título descriptivo a la página web.
Este título descriptivo se escribe dentro de la zona head.
El título descriptivo, que en este caso es "HTML: ejemplo básico"
se escribe entre la etiqueta de inicio ,
y la etiqueta de cierre title, .
A partir de ahora en este mini-vídeo
todo se escribirá dentro de la zona del cuerpo.
Empezaremos escribiendo un texto de encabezado,
que en este caso es "Ecuación 2º Grado".
Este texto se puede delimitar por la etiqueta de inicio
de "bold" (negrita),
y por la etiqueta de cierre .
Para centrar todo el texto en negrita
se delimita por la etiqueta de inicio center (centrado),
es decir,
y por la etiqueta de cierre center, .
A continuación, escribiremos un texto normal, que en este caso es
"La ecuación de 2º grado está dada por".
Esto no necesita de ninguna etiqueta y se escribe tal cual.
En esta transparencia se verá cómo escribir un texto matemático
que tiene un superíndice.
El texto matemático va a ser ax²+bx+c=0.
Este texto se escribe como ax,
etiqueta de inicio sup de "superindex" (superíndice),
luego "2" (de cuadrado), etiqueta de cierre sup,
es decir, ax2, y a continuación +bx+c=0.
Después de este texto matemático,
se puede escribir de forma normal si se desea.
En este caso se ha puesto una coma después del texto matemático
y a continuación el texto normal "siendo:".
En este momento es bueno volver a parar el mini-vídeo,
y grabar el código escrito hasta ahora
en un archivo con extensión htm o html
y abrirlo con un navegador para visualizar lo realizado.
Ahora se va a practicar un texto enumerado
que va a empezar en el "1"
y que se va a enumerar de forma automática y correlativa.
El texto enumerado va a comprender dos elementos.
El primero "b, c reales" y el segundo "a real no nulo".
Cada elemento se delimita por la etiqueta de inicio li,
de "list item" (listado de elementos),
y con la etiqueta de cierre li, .
A su vez, todos los items,
se delimitan por una etiqueta de inicio ol,
de "order list" (lista ordenada),
y por una etiqueta de cierre ol, .
En este caso la etiqueta de inicio ol
tiene información adicional,
que se conoce con el nombre de atributos.
que en este ejemplo conseguirán una lista arábiga empezando en el 1.
Para ello hay que escribir
donde type (tipo) igual a 1, indica enumeración arábiga,
y donde start (comienzo) igual a 1,
indica que la enumeración empieza en el 1.
En esta transparencia vamos a practicar
la sintaxis de símbolos matemáticos
sustituyendo algunas palabras de la transparencia anterior
por símbolos matemáticos.
En concreto la palabra reales
la vamos a sustituir por el símbolo pertenece
y por la letra del conjunto de los números reales, R mayúscula.
El símbolo pertenece se escribe con ampersand
o símbolo inglés para la conjunción y,
a continuación isin, todo junto, del inglés está en,
y por último punto y coma, es decir, ∈.
El símbolo de la letra del conjunto de los números reales
se escribe con ampersand, a continuación real (real)
y por último punto y coma, ℜ.
Para escribir real no nulo con símbolos,
es decir, perteneciente al conjunto de los reales y que no sea el cero,
se escribe ℜ-{0}.
Es conveniente a veces escribir comentarios en el código html
que no afectan al comportamiento del programa,
pero que son útiles para recordar lo que hemos hecho.
Por ejemplo, si queremos escribir dos líneas de comentarios,
una para que recordemos que ol es order list
y otra para que ul es unorder list,
se escriben la dos líneas como texto normal
y se delimitan por la etiqueta de inicio de comentarios,
que es especial y que es <!--
(en una línea antes de las líneas de los comentarios)
y por la etiqueta de fin de comentarios,
que es especial y que es -->
(en una línea después de las líneas de los comentarios).
Para terminar vamos a ver
qué es lo que hemos visto en este mini-vídeo.
Intentad vosotros pararlo
y escribid en esta transparencia lo que hemos visto en él.
Yo voy a seguir, pero, repito, intentad pararlo y hacerlo vosotros.
Hemos visto que el lenguaje de las páginas se escribe con etiquetas.
Hemos visto algunas etiquetas básicas.
Hemos aprendido a escribir un título descriptivo,
un texto de encabezado,
un texto normal,
un texto matemático
y un texto enumerado.
Hemos aprendido a escribir algunos símbolos matemáticos
y a escribir comentarios.
Por último, recordaos que es conveniente ver
la información complementaria en la web asociada a este mini-vídeo.