EDICIÓN DE

PÁGINAS WEB
HTML

Tecnologías Digitales Aplicadas I

1° BACH
Índice

 Introducción.
 Código HTML.
 Editores HTML.
 Páginas web en el servidor
 Estructura interna de una página HTML.
 Las páginas web son documentos que se utilizan para
INTRODUCCIÓN publicar información en internet y se diseñan para ser
visualizadas en un navegador.
Introducción

Primera página Web

publicada en 1990

https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Introducción

Al conjunto de todas las páginas

web que hay en el mundo se le
llama World Wide Web, que
podría traducirse como la red
mundial.
Introducción

Cada página web tiene una

dirección en la World Wide Web.
A la dirección web también se le
llama URL (Uniform Resource
Locator).
Introducción

Ventajas de las páginas web

 Se necesitan pocos medios.
 Tienen poco coste.
 Se pude publicar mucha información.
 Cualquier persona puede publicar.
 Forma muy rápida de comunicar.
 Código HTML

Las páginas web se escriben utilizando

un lenguaje denominado HTML
(Hyper Text Markup Language).
Se dice que es un lenguaje marcado
porque utiliza marcas, también
llamadas etiquetas o "tags", para
describir las características del
contenido.
 Código HTML
Si ponemos <title>Éste es el título</title> indicamos al navegador que este es
título de la web.
Se le llama de hipertexto porque tiene enlaces que, al ser clicados, llevan al
usuario a la información que hay en otra web.
 Código HTML
Acceder al código HTML
de una web es muy
sencillo:
1. Clica el botón derecho
en un lugar sin enlace
ni imágenes.
2. Selecciona "Ver cóigo
fuente de la página".
3. Se muestra el código
fuente.
 Editores HTML
▪ Una página web básica es un archivo que tiene texto en su interior, el código
HTML.
▪ Para indicar el sistema operativo y a los navegadores que este archivo es una
página web, debe tener la extensión ".html".
Editores HTML
▪ Se pueden utilizar editores sencillos como el bloc de notas del sistema
operativo.
▪ Los diseñadores profesionales de páginas web utilizan programas
especializados para escribir el código HTML llamados editores HTML.
▪ Estos editores destacan con colores las etiquetas del código, recuerdan el
nombre de algunas etiquetas, avisan si hay errores...
Páginas web en el servidor
 Para colocar en un servidor web una página que hemos hecho en
nuestro ordenador y permitir que pueda verla todo el mundo, debemos
utilizar un programa FTP (File Transfer Protocol).
 Este programa conecta nuestro ordenador con el servidor a través de
internet y nos permite transferir archivos entre ambos.
 Puede tratarse de un programa especializado como FileZilla, aunque la
mayoría de editores HTML, como Dreamweaver, tienen incorporado un
programa FTP.
Estructura interna de una página HTML

 Las instrucciones HTML están

encerradas entre los caracteres: < y >.
 Muchos elementos HTML requieren
una marca de comienzo y otra de
finalización. Todo aquello que está
fuera de las marcas del lenguaje se
imprime en la pantalla (dentro del
navegador).
Estructura básica de una página HTML
Práctica 1

• Confecciona una página con las marcas mínimas que debe tener la
página HTML y, en el cuerpo de la misma, pon tu nombre y apellidos.
• Guarda el archivo en formato .html con el nombre
P1_NombreXY_1H.html.
Salto de línea <br>
 Todo el texto que disponemos en el
cuerpo de la página aparece en la misma
línea.
 Para indicarle al navegador que queremos
que continúe en la próxima línea debemos
hacerlo con el elemento HTML <br>.
 Cuando aparece la marca <br> el
navegador continúa con el texto en la línea
siguiente. Es uno de los pocos elementos
HTML que no tiene marca de cerrado
como habíamos visto hasta ahora.
Práctica 2

• Confecciona una página HTML que muestre tu nombre y apellidos y, en

las siguientes dos líneas, los nombres y apellidos de tus padres.
• Guarda el archivo en formato .html con el nombre
P2_NombreXY_1H.html.
 Párrafo <P>
 Un párrafo es una oración
o conjunto de oraciones
referentes a un mismo
tema.
 Todo lo que encerremos
entre las marcas <p> y
</p> aparecerá separado  Dentro de un párrafo puede haber saltos de
por un espacio con línea <br>.
respecto al próximo
párrafo.
Práctica 3
• Confecciona una página que muestre:
o Un párrafo donde expliques qué modalidad de Bachillerato y
materias quieres cursar el próximo año.
o Otro párrafo separado en el que expliques hacia qué campo quieres
enfocar tu formación después del Bachillerato..
• Guarda el archivo en formato .html con el nombre
P3_NombreXY_1H.html.
Salto de línea <h1><h2><h3><h4>

 El título de mayor nivel es <h1>, es decir el que tiene

normalmente una fuente de mayor tamaño.
 Según la importancia del título, utilizaremos alguno de
estos elementos HTML. Requiere la marca de cerrado
del título con la barra invertida como hemos visto.
 No hay que confundir el título de la página que va en
la sección del head con el elemento title.
Práctica 4

• Confeccionar una revista web del Instituto periódico con un título de

nivel 1 con el nombre de tu página. Luego definir dos títulos de segundo
nivel con los textos (Noticias académicas y Actividades extraescolares),
en cada una de estas secciones definir dos titulares de tercer nivel con
un párrafo cada una.
• Guarda el archivo en formato .html con el nombre
P4_html_NombreXY_1H.html.
  Enfatizar algo significa realzar la importancia de una
cosa, por ejemplo una palabra o conjunto de palabras.
ENFASIS  Así, como tenemos seis niveles de títulos para enfatizar un
(<EM> <STRONG>) bloque contamos con dos elementos que son <em> y
<strong>.
 El elemento de mayor fuerza de énfasis es "strong" y le
sigue "em".
Enfasis (<em> <strong>)

Este sería el
resultado en el
navegador
Práctica 5
• Confeccionar una página que muestre la definición de tres palabras
asociadas a la ciberseguridad.
• Aplicar el elemento "strong" a cada palabra previo a su definición.
• Agregar el elemento "em" a una palabra o a un conjunto de palabras
dentro de la definición.
• Guarda el archivo en formato .html con el nombre
P5_html_NombreXY_1H.html.
 Hipervínculo a otra página del mismo sitio <a>
 Un hipervínculo 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 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.
 El elemento de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:
<a href="pagina2.html">Noticias</a>

 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.
Práctica 6

• Confecciona una página principal con dos hipervínculos a dos de las

páginas creadas en las prácticas anteriores.
• Guarda el archivo con el nombre: P6_html_NombreXY_1H.html.
  La sintaxis para disponer un hipervínculo a otro sitio de internet
es:
<a href="http://www.google.com">Buscador
Google</a>

 Hay que anteceder al nombre del dominio es el tipo de
protocolo a utilizar. Cuando se trata de una página de internet, el
Hipervínculo a protocolo es el http.
otro sitio de  Resumiendo a la propiedad href la inicializamos con el nombre
del protocolo (http) seguida de dos puntos (:) y dos barras (//)
internet <a> luego la cadena (www.) y finalmente el nombre de dominio del
sitio a enlazar.
Práctica 7

• Crear 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.
• Guarda el archivo con el nombre: P7_html_NombreXY_1H.html.
 Hipervínculo a otro sitio de internet <a>
 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.
 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.
Práctica 8

• Crea una página que contenga un hipervínculo a un periódico (indicar

sólo el nombre de dominio del periódico).
• Añade además un segundo hipervínculo a una página determinada de ese
periódico.
• Guarda el archivo con el nombre: P8_html_NombreXY_1H.html.
 Imágenes dentro de una página <img>
 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".
Imágenes dentro de una página <img>
 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.
Práctica 9
• Desarrolla una página que muestre dos imagenes llamadas foto1.jpg y
foto2.jpg, que se encuetran almacenadas en el servidor en la misma
carpeta donde se almacenará la página vas a desarrollar.
• Añade un título a cada imagen.
• Guarda el archivo con el nombre: P9_html_NombreXY_1H.html.
• Añade el enlace a las dos fotos utilizadas con
los nombres: P9_Foto1_NombreXY_1H.jpg
y P9_Foto2_NombreXY_1H.jpg
Imágenes dentro de una página <img>
 Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página,
ahora podemos implementar un hipervínculo, pero, en vez de mostrar un texto,
mostraremos una imagen.
 La solución es simple y consiste en disponer la etiqueta <img> encerrada entre la
marca de comienzo y fin del enlace(<a>)

 Confeccionemos una página que

muestre dos imagenes (foto1.jpg
y foto2.jpg) como hipervínculos.
Al ser presionados llamar a otra
página.
Práctica 10

• Crea tres páginas con una foto cada una (foto3.jpg, foto4.jpg y foto5.jpg)
• Posteriormente, al ser presionada debe avanzar a la siguiente página, es decir
de la pagina1.html llamar a la pagina2.html, de la pagina2.html pasar a la
pagina3.html y de ésta a la primera.
• Las imágenes se encuentran en el directorio padre .

• Guarda el archivo con el nombre: P10_html_NombreXY_1H.html y los

archivos en JPG de las fotos utilizadas.
 Apertura de un hipervínculo en otra pestaña del navegador

 El elemento "a" tiene una propiedad target que nos permite indicar que la referencia
del recurso sea abierto en otra pestaña.
 Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar que
la página sea abierta en otra pestaña.

 En este ejemplo, vemos una

página que contiene dos
hipervínculos. El primer
abre el sitio en el mismo
navegador y el segundo en
otra pestaña:
Práctica 11

• Confecciona una página que muestre enlaces a distintos blogs.

• Agrupalos bajo dos títulos que muestren los mismos enlaces, el primero
"Hacer la apertura en otra pestaña" y el segundo "Hacer la apertura en
el mismo navegador.
• Guarda el archivo con el nombre: P11_html_NombreXY_1H.html.
 Hipervínculo a un cliente de correo <a>

 El elemento "a" permite direccionar un hipervínculo a un programa de envío de

correos que tengamos configurado en nuestro PC.
 La sintaxis para disponer un título por defecto y un cuerpo de mensaje es:
<a href="mailto:[email protected]">Enviar mail.</a>
Práctica 12

• Diseña una página que contenga un hipervínculo configurando la

propiedad href de tal manera que abra tu dirección de correo
electrónico.
• Guarda el archivo con el nombre: P12_html_NombreXY_1H.html.
 Anclas: llamadas desde la misma página

 Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la
página para poder posteriormente disponer un hipervínculo a dicha marca.
 Es una práctica común cuanda queremos desplazarnos dentro de una página de gran
tamaño. Se disponen hipervínculos a diferentes anclas.
 La sintaxis para definir un ancla es: <a name="nombreancla"></a>
 Un ancla se la define en una parte de la página que queremos que el operador llegue a
partir de un hipervínculo. Ahora la sintaxis para ir a un ancla desde un hipervínculo es
la siguiente:
<a href="#nombreancla">Introducción</a><br>
 ANCLAS:
llamadas desde la
misma página

ESTE SERÍA EL EJEMPLO:

Práctica 13

• Elige una noticia del día y añade tres hipervínculos con anclas que se
encuentren más abajo en la misma noticia.
• Guarda el archivo con el nombre: P13_html_NombreXY_1H.html.
 Lista ordenada <ol>
 Esta etiqueta HTML es útil cuando debemos
numerar o listar una serie de datos.
 La marca <ol> y su correspondiente marca de
cerrado es </ol>
 En su interior cada uno de los items se los dispone
con el elemento li, que también tiene la marca de
comienzo <li> y la marca de fin de item </li>
 Posteriormente se encarga el navegador de numerar
cada uno de los items contenidos en la lista,
tengamos en cuenta que se numeran porque se
trata de una lista ordenada.
Práctica 14

• Crea una lista ordenada de con los cuatro primeros clasificados del Tour
de Francia de 2023.
• Añade un título de segundo nivel para encabezar la lista en la parte
superior.
• Guarda el archivo con el nombre: P14_html_NombreXY_1H.html.
 Lista no ordenada <ul>

 Una lista no ordenada como su nombre lo

indica no utiliza un número delante de cada
items sino un pequeño símbolo gráfico.
 La forma de implementar este tipo de listas
es idéntico a las listas ordenadas.
 Veamos un ejemplo donde implementamos
una lista no ordenada:
Práctica 15

• Crea una lista no ordenada que contenga hipervínculos a las cinco

páginas web que más suelas utilizar.
• Guarda el archivo con el nombre: P15_html_NombreXY_1H.html.