computación y robótica

3º ESO

UDI 3 - Edición de páginas con HTML

1.- Introducción

El lenguaje HTML es un lenguaje de hipertexto, es decir, texto en documentos que permiten enlazar directamente con otros documentos. Fue creado en 1980 para poder transmitir documentos por Internet con las velocidades tan limitadas de la época, ya que el emisor lo que se transmite son una serie de instrucciones para construir el documento en el ordenador del receptor.

HTML es el primer lenguaje que una persona debe conocer si desea comenzar a realizar páginas web, ya que es el primero que se utilizó y es la base de los lenguajes de edición actuales. No se trata de un lenguaje de programación propiamente dicho, aunque a veces se le denomina así coloquialmente.

1.1.- Editores de texto para HTML

Para empezar a crear páginas web solo necesitaremos un editor de texto básico y un navegador web.

Como editor de texto nos servirá el Bloc de Notas de Windows (Notepad) o algún editor de texto básico de Linux.

Existen editores de texto orientados a la programación que ofrecen ventajas a la hora de editar un documento HTML, como Notepadd++ para Windows o Notepadqq para Linux:

Resaltan las palabras clave en distintos colores para facilitar la edición de código,
Autocompleta las etiquetas HTML.
Ofrecen consejos de ejecución.

En EducaAdOS 20.04 disponemos del Editor de textos, aunque también podemos instalar Notepadqq desde el Centro de Software de EducaAndOS.

También existen editores HTML online, como veremos más adelante.

Editor Notepad++

Editor Notepadqq

1.1.- Navegadores web

Todos los navegadores web actuales soportan el lenguaje HTML (Además de otros), así que son capaces de mostrar las páginas web creadas con HTML con el mismo aspecto, independientemente del sistema operativo utilizado.

En el siguiente esquema vemos los navegadores más utilizados

2. Primeros pasos con HTML

El lenguaje HTML está compuesto por una serie de etiquetas (Tags) que el navegador interpreta y da forma en la pantalla (Etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.).

Las etiquetas se escriben empleando los caracteres menor que "<", mayor que ">" y barra inclinada "/".

Las palabras clave del lenguaje se denominan elementos y se colocan entre los caracteres vistos anteriormente, según se trate de una etiqueta de inicio de una etiqueta de fin.

Los elementos pueden escribirse indistintamente en minúscula, mayúscula o ambas.

Por ejemplo, para el elemento ("html") existen las etiquetas de inicio (<html>) y fin (</html>)

Veamos los principales elementos de todo documento HTML:

Elemento "html"

Representan al elemento raíz ("html") que en todo documento HTML hay que escribir al principio y al final.

<html>

</html>

Elemento "head"

Dentro del elemento "html", es decir, entre <html> y </html>, se debe escribir el elemento "head" que, como iremos viendo a lo largo del tutorial, puede contener diversa información sobre el documento:

<html>

<head>

</head>

</html>

Las etiquetas se suelen identar o colocar en distintos niveles de tabulación para hacer el código más legible.

Elemento "title"

Entre <head> y </head> se pueden escribir otros elementos. Por ejemplo, el elemento "title", el cual sirve para indicar el título del documento.

<html>

<head>

<title>Ejemplo</title>

</head>

</html>

Es el titulo que se visualiza en la parte superior de la pestaña donde se muestra la página web en el navegador.

Las etiquetas pueden colocarse en la misma línea, como en el código anterior, aunque se suelen colocar arriba y abajo para la mejor compresión del código.

Elemento "body"

En un documento HTML, después del "head", hay que escribir el elemento "body":

<html>

<head>

<title>Ejemplo</title>

</head>

<body>

</body>

</html>

El elemento "body" alberga todo el contenido (párrafos, imágenes, vídeos...) del documento, los cuales se mostrarán en el navegador.

Elemento "p"

En este caso, entre <body> y </body> se incluyen dos elementos "p" delimitados por la etiqueta de inicio <p> y la de cierre </p>:

<html>

<head>

<title>Ejemplo</title>

</head>

<body>

<p>Mi primera página web</p>

</body>

</html>

En este apartado se pueden añadir tantos párrafos como necesitemos.

<html>

<head>

<title>Ejemplo de 2 párrafos</title>

</head>

<body>

<p>Esto es un párrafo.</p>

<p>Esto es otro párrafo.</p>

</body>

</html>

Elemento "font"

Mediante <font> ... </font> podemos escribir un párrafo, seleccionando el tipo de fuente, el tamaño de la letra y el color, como veremos más adelante.

actividad 1

Instala el editor de texto Notepad++.
Abre el editor de texto Notepad ++y copia el código visto justo anteriormente y guárdala como Ejemplo.html, después, busca en ordenador la página creada y ábrela con el navegador

2.1.- Estructura básica de un documento HTML

Hemos escrito la estructura básica de un documento HTML que muestra por pantalla dos párrafos. Gráficamente, los elementos utilizados se pueden representar del siguiente modo:

Finalmente, completaremos el código de este primer ejemplo añadiendo algunas cosas:

<!DOCTYPE html>

<html lang="es-ES">

<head>

<meta charset="utf-8">

<title>Ejemplo de 2 párrafos</title>

</head>

<body>

<p>Esto es un párrafo.</p>

<p>Esto es otro párrafo.</p>

</body>

</html>

A continuación pasamos a explicarlas:

<!DOCTYPE html> en la primera línea. Esta es la forma de indicar al navegador donde se visualice el documento que este está escrito en la versión HTML5.
lang="es-ES" en la etiqueta de inicio <html>. Esto sirve para especificar, mediante el atributo lang, el idioma del contenido del elemento "html". En este caso español (España).
<meta charset="utf-8"> dentro del elemento "head". Así, se indica la codificación de caracteres del documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits). Obsérvese que, el elemento "meta" está vacío (no tiene contenido) y en consecuencia, no necesita ser cerrado escribiendo </meta>. Sin no incluimos esta línea, no se mostrarán las tildes ni la letra ñ.

Ejercicio: En el siguiente editor de HTML, borra el mensaje de bienvenida y pega el último código visto, puedes ver el resultado inmediatamente en la ventana de abajo.

Prueba a crear más párrafos.

Comentarios

En todos los lenguajes de programación existe la posibilidad de incluir comentarios dentro del código, los comentarios son muy útiles para los programadores, para comprender un programa que no han hecho ellos o para explicar ciertas partes del código un documento .

En HTML, los comentarios pueden escribirse entre los caracteres "".

Por ejemplo: 

El intérprete de código ignora todas los comentarios.

2.2.- Formato de texto

Para hacer más llamativa nuestra página, existen etiquetas HTML que modifican los tamaños, colores y disposición del texto:

Títulos del documento

Para los títulos dentro de la página y existen 6 tamaños; el tamaño del texto <h1>...</h1> es el tipo de texto más grande y <h6>...</h6> el más pequeño:

<!DOCTYPE html>

<html lang="es-ES">

<html>

<head>

<meta charset="utf-8">

<title>Ejemplo de tipos de título</title>

</head>

<body>

<h1>Título 1</h1>

<h2>Título 2</h2>

<h3>Título 3</h3>

<h4>Título 4</h4>

<h5>Título 5</h5>

<h6>Título 6</h6>

</body>

</html>

En el ejemplo anterior se ha incluido un comentario para recordar el tamaño de los títulos.

Ejercicio: Prueba el código anterior en el editor de HTML

Ejercicio: Intenta hacer en el editor de HTML un documento HTML como el siguiente:

Formato de caracteres

Las siguientes etiquetas modifican los caracteres que hay entre ellas para mostrarlos en negrita, cursiva, subrayado, subíndice o superíndice:

<b>...</b> Negrita

<i>...</i> Cursiva

<u>...</u> Subrayado

<sub>...</sub> Subíndice

<sup>...</sup> Superíndice

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver todos los tipos de caracteres:

<!DOCTYPE html>

<html lang="es-ES">

<html>

<head>

<meta charset="utf-8">

<title>Ejemplo de formato de caracteres</title>

</head>

<body>

<h1>Tipos de caracteres</h1>

<p> Este es un ejemplo de palabra en <b> negrita </b> </p>

<p> Este es un ejemplo de palabra en <i> cursiva </i> </p>

<p> Este es un ejemplo de palabra <u> subrayada </u> </p>

<p> Este es un ejemplo de palabra en <sub> subíndice </sub> </p>

<p> Este es un ejemplo de palabra en <sup> superíndice </sup> </p>

</body>

</html>

Alineación de texto

A los elementos <p> y <h> que nos permiten escribir párrafos y títulos respectivamente, se les pueden aplicar unos atributos para modificar el aspecto del texto:

<p align="right"> ... </p> alinea el texto a la derecha

<p align="center"> ... </p> centra el texto

<p align="left"> ... </p> alinea el texto a la izquierda

Estos códigos son aplicables al elemento <h>, como hemos dicho anteriormente.

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver cómo se alinean los títulos y párrafos:

<!doctype html>

<html lang="es">

<html>

<head>

<meta charset="utf-8" />

<title>Ejemplo de alineación de texto</title>

</head>

<body>

<h1 align="center">Introducción</h1>

<p align="right">Este es un párrafo alineado a la derecha</p>

<p align="center">Este es un párrafo centrado</p>

<p align="left">Este es un párrafo alineado a la derecha</p>

</body>

</html>

Tipo de fuente, tamaño y color de los caracteres:

Mediante el elemento <font> ... </font>, se pueden especificar el tipo de fuente, el tamaño y el color de los caracteres:

Como tipo de fuente, podemos elegir "arial", "courier", "comic sans ms", "times new roman" , etc. (Son las fuentes instaladas en el ordenador).

Como colores, podemos seleccionar los indicados en el siguiente ejemplo:

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver los distintos colores que puedes aplicar a los caracteres de tu página:

<!DOCTYPE html>

<html lang="es">

<html>

<head>

<meta charset="utf-8" />

<title>Ejemplo de colores de los caracteres</title>

</head>

<body>

<b>

<font color="red">Texto ROJO </font> <br>

<font color="blue">Texto AZUL </font> <br>

<font color="navy">Texto AZUL MARINO </font> <br>

<font color="green">Texto VERDE </font> <br>

<font color="olive">Texto OLIVA </font> <br>

<font color="yellow">Texto AMARILLO </font> <br>

<font color="lime">Texto LIMA </font> <br>

<font color="magenta">Texto MAGENTA </font> <br>

<font color="purple">Texto PURPURA </font> <br>

<font color="cyan">Texto CYAN </font> <br>

<font color="brown">Texto MARRON </font> <br>

<font color="black">Texto NEGRO </font> <br>

<font color="gray">Texto GRIS </font> <br>

<font color="teal">Texto TEAL </font> <br>

<font color="white">Texto BLANCO </font> <br>

</b>

</body>

</html>

Observa que se ha utilizado el elemento <br> para incluir un salto de línea después de cada tipo de color.

Los atributos de fuente (face), tamaño (size) y color (color) pueden aplicarse a un solo elemento <font> ... </font>, como puedes ver en el siguiente ejemplo:

<html lang="es">

<html>

<head>

<meta charset="utf-8" />

<title>Ejemplo de colores de los caracteres</title>

</head>

<body>

<font face="arial" size="25" color="red">Este texto posee varias especificaciones de formato.</font>

</body>

</html>

actividad 2

Escribe el código para generar una página web como la siguiente, respetando colores, tamaños y tipos de letra, etc.

Utiliza el visualizador de códigos que hay más abajo.

a partir de aquí seguiremos estos tutoriales con ejemplos y ejercicios

HTM L

HTML5

CSS

Listas

Las listas son elementos que, como los títulos, permiten presentar niveles jerarquizados de texto.

Los documentos HTML permiten dos tipos de listas:

1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>...</UL>
2. Listas ordenadas o numeradas (numbered list): su etiqueta principal es <OL>...</OL>
3. Listas de definiciones (definition list): su etiqueta principal es <DL>...</DL>

Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de distinta manera según el tipo:

En las listas ordenadas (<OL>...</OL>) o no ordenadas (<UL>...</UL>), cada elemento de dicha lista se marca con la etiqueta <LI>...</LI> (list item).

En las listas de definición (<DL>...</DL>), se utilizan dos: cada elemento que se define se marca con <DT>...</DT> y el texto de cada definición se marca con <DD>...</DD>. Esta etiqueta se puede repetir si se necesita introducir varios elementos de definición.

Las listas se pueden encajar unas dentro de otras, además de con el resto de las etiquetas disponibles.

Ejercicio: prueba el siguiente código en el editor de HTML para poder ver las distintas opciones de listas:

<!DOCTYPE html>

<html lang="es">

<html>

<head>

<meta charset="utf-8" />

<title>Ejemplo de listas</title>

</head>

<body>

<h3>Los meses de primavera</h3>

<ul>

<li>Abril</li>

<li>Mayo</li>

<li>Junio</li>

</ul>

<br>

<H3>Los meses de verano</H3>

<ol>

<li>Julio</li>

<li>Agosto</li>

<li>Septiembre</li>

</ol>

<br>

<h3>Los meses del año</h3>

<ul>

<li>Los meses de primavera

<ol>

<li>Abril</li>

<li>Mayo</li>

<li>Junio</li>

</ol>

</li>

<li>Los meses de verano

<ol>

<li>Julio</li>

<li>Agosto</li>

<li>Septiembre</li>

</ol>

</li>

</ul>

</body>

</html>

Hipervínculo

El elemento más importante que tiene una página de internet es el hipervínculo, estos nos permiten cargar otra página en el navegador. Esto es lo que hace diferente la página de un libro con la página de un sitio en internet. Normalmente un libro lo recorremos en forma secuencial, pero un sitio de internet podemos disponer estos enlaces entre un conjunto de páginas y luego tener distintas alternativas de recorrido.

Normalmente un navegador al encontrar esta etiqueta HTML muestra un texto subrayado, y al hacer clic con el mouse sobre éste el navegador carga la página indicada por dicho hipervínculo.

Primero veremos cual es la sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros). El elemento de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:

<a href="pagina2.html">Noticias</a>

Como vemos, se trata de otro elemento HTML que tiene comienzo de marca y fin de marca. Lo que se encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la página (normalmente subrayado).

Lo nuevo que aparece en éste elemento es el concepto de una propiedad. Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor. El valor de la propiedad debe ir entre comillas dobles. La propiedad href del elemento "a" hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo:

<!DOCTYPE html>

<html>

<head>

<title>Título de la página 1</title>

<meta charset="UTF-8">

</head>

<body>

<h1>Página principal.</h1>

<a href="pagina2.html">Noticias</a>

</body>

</html>

La sintaxis para disponer un hipervínculo a otro sitio de internet es:

<a href="http://www.google.com">Buscador Google</a>

Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio.

Algo importante que hay que anteceder al nombre del dominio es el tipo de protocolo a utilizar. Cuando se trata de una página de internet, el protocolo es el http.

Resumiendo a la propiedad href la inicializamos con el nombre del protocolo (http) seguida de dos puntos (:) y dos barras (//) luego la cadena (www.) y finalmente el nombre de dominio del sitio a enlazar. La siguiente página muestra un hipervínculo al sitio principal del buscador Google:

<!DOCTYPE html>

<html>

<head>

<title>Título de la página</title>

<meta charset="UTF-8">

</head>

<body>

<a href="http://www.google.com">Buscador Google</a>

</body>

</html>

Imagen dentro de una web

Para insertar una imagen dentro de una página debemos utilizar el elemento HTML <img>, la misma no tiene una marca de finalización (similar a la etiqueta <br>).

Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.

La sintaxis de esta etiqueta es:

<img src="foto1.jpg" alt="Pintura geométrica">

Como mínimo, debemos inicializar las propiedades src y alt de la etiqueta HTML "img".

En la propiedad src indicamos el nombre del archivo que contiene la imagen (en un servidor Linux es sensible a mayúsculas y minúsculas por lo que recomiendo que siempre utilicen minúsculas para los nombres de archivos).

Como la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de carpetas)

Otra propiedad muy recomendada es alt, donde disponemos un texto que verán los usuarios que visiten el sitio con un navegador que sólo permite texto (o con un navegador que tenga desactivada la opción de descarga de imágenes). El texto debe describir el contenido de la imagen.

<!DOCTYPE html>

<html>

<head>

<title>Título de la página</title>

<meta charset="UTF-8">

</head>

<body>

<img src="foto1.jpg" alt="Pintura geométrica">

</body>

</html>

Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla será:

<img src="imagenes/foto1.jpg" alt="Pintura geométrica">

Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /

Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será:

<img src="../foto1.jpg" alt="Pintura geométrica">

Es decir, le antecedemos .. y la barra / al nombre de la imagen

Si queremos subir dos carpetas luego escribimos:

<img src="../../foto1.jpg" alt="Pintura geométrica">

Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que está al mismo nivel:

<img src="../imagenes/foto1.jpg" alt="Pintura geométrica">

Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar.

ACTIVIDAD 3

a) Confeccionar una página que contenga un hipervínculo a un periódico (indicar sólo el nombre de dominio del periódico). Disponer además un segundo hipervínculo a una página determinada de ese periódico.

b) Desarrollar una página que muestre dos imagenes llamadas foto2.jpg y foto3.jpg, las mismas se encuetran almacenadas en el servidor en la misma carpeta donde se almacenará la página que usted desarrollará. Disponer un título a cada imagen.

3. hojas de estilos css

Con todo lo vista hasta ahora, podemos controlar el tipo de letra, color y posición de los títulos y textos de un documento editado en HTML. Si realizamos un documento extenso, con varios tipos de letra, colores, etc. el código se complica ya que hay que utilizar muchos elementos de formato de texto.

A partir de la versión 5 de HTML se han incluido las hojas de estilos CSS, que simplifican enormemente el formato de texto dentro de un documento HTML.

SCRIPTS

CANVAS

SPRITES

GRAFICOS

SONIDO

VARIABLES

CONSTANTES

CADENAS Y NÚMEROS

OPERADORES

CONDICIONALES

BUCLES

FUNCIONES

Contenidos extraídos de:

https://www.abrirllave.com/

https://paginaspersonales.deusto.es/

Page updated

Report abuse