Ejercicios Html

Ejercicio 1 HTML:
1.- Introducción HTML........................................................................................................... 1
2.- ETIQUETA.................................................................................................................... 2
3.- EDITORES..........................................................................................................................3
3.1- Introducción:................................................................................................................3
3.2 Cómo crear una página WEB con el Bloc de notas..................................................... 4
3.3 Nombre de los archivos................................................................................................4
4.- COMENTARIOS................................................................................................................. 4
5.- ESTRUCTURA BÁSICA DE UNA PÁGINA WEB EN HTML ES LA SIGUIENTE:........... 5
5.1 CABECERA..................................................................................................................5
5.2 CUERPO...................................................................................................................... 6
6.TÍTULO............................................................................................................................6
Práctica 1:................................................................................................................................ 6

1.- Introducción HTML

HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las
páginas Web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto
de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de
cada elemento del documento.

HTML surge en 1991 y ha tenido un gran desarrollo por la posibilidad de insertar

enlaces a otras páginas, característica fundamental de Internet. Una página es un archivo
donde está contenido el código HTML en forma de texto. Estos archivos tienen extensión
.html o .htm (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo
haremos con un editor de textos y guardaremos nuestros trabajos con extensión .html, por
ejemplo mipagina.html
Necesita un programa que lea y presente las páginas Web llamado Navegador. Los
navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a
los usuarios las páginas web resultantes del código interpretado. Los navegadores tienen
que ser compatibles con la última versión HTML para poder interpretar el mayor número
posible de etiquetas.
El lenguaje HTML se escribe en texto plano, por lo que una buena opción es el Bloc de
notas. No se pueden usar otros editores como Word, pues dejan códigos que no son
compatibles. Hay muchos editores. Se suele destacar Atom y Notepad++. Acceso a
información sobre editores aquí
Nosotros en clase hemos optado por Notepad++, que requiere pocos recursos y te permite
cargar, crear y guardar archivos html

1 de 15
 Ejercicios Html

HTML es para especificar el contenido de las páginas web y no el aspecto que van
a tener.
Cuando nos referimos al contenido queremos indicar párrafos, imágenes, listas, tablas y
todo aquello que forma parte de "el qué". Nunca debemos usar HTML para definir cómo se
debe de ver un contenido, si el texto debe tener color rojo, con una fuente mayor, o si se
debe alinear a la derecha. Para especificar el aspecto que debe tener una web se usa un
lenguaje complementario, llamado CSS.

2.- ETIQUETA
El HTML es un "lenguaje de marcado". Basa su sintaxis en un elemento base al que
llamamos marca, tag o simplemente etiqueta. La etiqueta sirve para dar instrucciones al
navegador para realizar órdenes y que las mismas se muestren en pantalla. Las etiquetas
están delimitadas por los símbolos, menor que “ < “ y mayor que “ > “. A la hora de realizar
una instrucción en HTML debemos de comenzar por una etiqueta inicial <etiqueta> y
acabar con una etiqueta final </etiqueta>, así pues la etiqueta inicial activa la orden y la
etiqueta final la desactiva. Algunas etiquetas especiales no necesitan ser cerradas.

2 de 15
 Ejercicios Html

En primer lugar, verás que en el ejemplo de Notepad++ tenemos una etiqueta

singular. De momento debemos ponerla, aunque no es preciso conocer su significado. Se
debe a la herencia de los lenguajes HTML anteriores.
<!DOCTYPE html>
La mayoría de las etiquetas deberá ser cerrada, por ejemplo si queremos poner un
texto en negrita:

Otro ejemplo: que el navegador nos muestre un texto formado por uno o varios
párrafos o frases, utilizamos la etiqueta “ p “ siendo por tanto la instrucción inicial <p> a
continuación escribimos nuestro texto y terminamos con la instrucción final </p>.

También se puede poner un salto de línea simple con la etiqueta <br>, que no
necesita cerrarla

Otro ejemplo, si queremos que el navegador pinte una línea horizontal debemos de
escribir la instrucción <hr>, en este caso tampoco se necesita instrucción final.

3.- EDITORES

3.1- Introducción:
Un editor es un programa que nos permite redactar documentos. Hoy en día existen
un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni
una sola línea de código HTML. Estos editores disponen de un entorno visual, y generan
automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la
página en el navegador, se facilita la creación de las páginas, y el uso de menús permite
ganar rapidez.
Estos editores visuales pueden generar en ocasiones código basura, es decir,
código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir
directamente el código por lo que resulta necesario saber HTML para poder depurar el
código de nuestra páginas.

3 de 15
 Ejercicios Html

Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia,
Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog
Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja
de ser gratuitos.

3.2 Cómo crear una página WEB con el Bloc de notas

1º abrimos el Bloc de notas para crear nuestra página WEB en el Bloc de notas
2º Creamos nuestra página con las etiquetas de hipertexto
3º Para guardar nuestra página WEB creada en el bloc de notas como Página WEB
y que sea reconocida la misma por el navegador, debemos realizar la siguiente
instrucción:
Archivo 🡪 Guardar como Nombre miweb.html
Tipo Todos los archivos Documento de texto *.txt
Codificación ANSI

3.3 Nombre de los archivos

Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrarte
disgustos y líos.
Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. También te
ayudará escribir siempre las letras en minúsculas.
Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos
descriptivos para que te aclaren lo que hay dentro. Algún caracter como el guión "-" o el
guión bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

4.- COMENTARIOS.
Los comentarios html son textos que van dentro del código fuente pero que no son
mostrados por los navegadores. Estos comentarios son muy útiles para los editores de la
página, ya que ayudan a una mayor comprensión del código. La forma correcta de escribir
un comentario html es la siguiente:
<!--Esto es un comentario→. los comentarios no son visibles para el usuario, sólo para los
editores de la página.

4 de 15
 Ejercicios Html

5.- ESTRUCTURA BÁSICA DE UNA PÁGINA WEB EN HTML ES LA

SIGUIENTE:

Documento HTML comienza con una instrucción inicial <html> y termina con una
instrucción final </html> y por tanto todo lo que se encuentra entre ambas etiquetas estará
escrito en lenguaje de etiquetas de hipertexto.

Inicio <html>
Cabecera <head>
</head>

Cuerpo <body>
</body>
Final </html>

Dentro de las etiquetas <html>……..</html> se encuentran dos partes bien

diferenciadas:

5.1 CABECERA
La primera parte de nuestra página WEB es <head>…….…</head> es la cabecera
de la página. Aquí irá cierta información que no es directamente el contenido de la página.
Aquí se introduce toda aquella información que afecta a toda la página, por ejemplo el título
de la página, los metadatos, estilos, código javascript.

5 de 15
 Ejercicios Html

5.2 CUERPO
La segunda parte de nuestra página WEB es <body>…..</body>. Aquí va
propiamente el contenido de la página: fotos, párrafos, formularios, etc.

6.TÍTULO
El título de la página (lo que el navegador pone en la parte superior izquierda), lo
podemos poner de dos formas:
● <title>…..</title> así no se ve el título en nuestra página WEB.
● <tittle>…..</tittle> así se ve el título en nuestra página WEB.

Práctica 1:

1º- Crea en el bloc de notas de Windows un fichero con nombre prueba1.html en tu carpeta
de la Unidad Almacen con el siguiente contenido:

<html>
<head>
<title>Primera página</title>
</head>
<body>
Bienvenidos a nuestra primera página web
</body>
</html>

Lo guardas en una carpeta con tu nombre en el Almacén o pen con estas características,
con tu nombre, claro:

6 de 15
 Ejercicios Html

Busca el archivo y lo abres con cualquier navegador con doble clic

2º- Añade 2 líneas con tu nombre y la fecha debajo del mensaje de bienvenida y
comprueba el resultado con el navegador. Lo guardas como p1a.

7 de 15
 Ejercicios Html

Como podrás ver escribe todo el texto en una sola línea, debido a que el navegador
no reconoce el carácter INTRO. Para solucionar este problema inserta al final de cada línea
la etiqueta <br />

Si queremos delimitar un párrafo para aplicar algún formato determinado, es

aconsejable incluirlo entre las etiquetas <p> y </p>

3º Aplica a la cabecera de bienvenida el título de tipo h1 (Ver tabla de etiquetas) y

comprueba el resultado.

8 de 15
 Ejercicios Html

4º Inserta debajo de este mensaje una línea horizontal con la etiqueta <hr />

5º Pon el mensaje de bienvenida en cursiva y subrayado (Ver tabla de etiquetas) .

9 de 15
 Ejercicios Html

6º Inserta en el documento una imagen de Cuenca que consigas en Internet, con la

etiqueta. Recuerda que debes guardar la imagen en la misma carpeta:
<img src=”fichero.jpg” />

10 de 15
 Ejercicios Html

Si el fichero está en otra ubicación hay que poner el camino completo, por ejemplo tras
guardar la imagen podrás ver su ubicación con botón derecho -Propiedades

11 de 15
 Ejercicios Html

En este caso C:\Users\Pablo\Downloads\cuenca.jpg

12 de 15
 Ejercicios Html

7º Cambiar el color de fondo de la página, modificando la etiqueta body de la forma:

<body bgcolor=”#ccffcc”>

13 de 15
 Ejercicios Html

Podemos ver el código del color en cualquier programa de imagen, por ejemplo en gimp

14 de 15
 Ejercicios Html

Aunque lo mejor es buscarlo en una página web como esta: aquí

Una realizado todo, haces una página propia de tu invención, e intenta añadir algo de la
teoría que no se ha visto. Guarda el archivo en html con tu nombre en el OneNote
compartido.

15 de 15