HTML. Ejercicios para HTML. Las etiquetas <html> y </html> identifican el principio y el final del documento HTML.

(1)

HTML

HTML o Hypertext Markup Language o Lenguaje de Diseño de Hipertextos, es un lenguaje que se utiliza para crear páginas web.

Ejercicios para HTML

Las etiquetas <html> y </html> identifican el principio y el final del documento HTML.

Las etiquetas <head> y </head> limitan la cabecera del documento Las etiquetas <title> y </title> limitan el encabezado de la página Las etiquetas <body> y <body> limitan el cuerpo del documento.

Ejercicio 0. Realzaremos una plantilla del documento

EN EL ESCRITORIO, CREA UNA CARPETA CON TU NOMBRE Y PRACTICAS DE HTML

Guardamos el documento como: “plantilla.html”

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

(2)

Ejercicio 1. Realzaremos la primera página web Abre la plantilla y agrégale lo siguiente:

Guardamos el documento como: “ejercicio1.html”

ENCABEZADOS

Los encabezados son utilizados para resaltar palabras o frases. Hay seis tamaños de encabezados: Para el más grande se utilizan las etiquetas <h1> y </h1> y para el más pequeño se utilizan las etiquetas <h6> y </h6>

Si se quiere alinear el encabezado se utilizan el atributo ALIGN con la opción LEFT, CENTER, RIGHT O JUSTIFY.

Si no se utiliza ALIGN, el HTML supondrá la alineación LEFT.

<html>

<head>

<title>

1 Nombre

</title>

</head>

<body>

Mi nombre es: ________, estudio en el COBAQ y voy en el grupo: _

</body>

</html>

(3)

Ejemplo 2. Crearemos una página web que muestre el uso de los encabezados. En el bloc de notas escribimos el siguiente código:

GUARDALO EN LA CARPETA COMO: ejercicio2.html

<head>

<title>

Frases Nombre

</title>

</head>

<body>

<h1 Align=center> Frases Famosas </h1>

<h2> Ganar no es todo... es lo único. </h2>

<h3> El secreto de andar sobre las aguas, es saber dónde están las piedras. </h3>

<h4 Align=Right> Si piensas que puedes o no puedes, siempre tienes razón. </h4>

<h5 Align=Right> El conocimiento es poder. </h5>

<h6> Prohíbido, Prohibir </h6>

Que bonitas frases...

</body>

</html>

(4)

(5)

Ejemplo 3. Crearemos una página web que muestre el uso de los estilos de letra. Escribiremos el siguiente código.

GUARDALO EN LA CARPETA COMO: ejercicio3.html

<html>

<head>

<title>

Fórmulas1 Nombre

</title>

</head>

<body>

<h1 align=center> <u> <font color= Hotpink > Fórmulas Conocidas </font> </u> </h1>

Las siguientes <i> Fórmulas </i> son muy conocidas y <b> peligrosas de usar. </b>

Por lo tanto <u> <i> <b> recomendamos </u> </i> </b> experimentarlas en un laboratorio

<s> super seguro </s> en lo más profundo de la <font color=Brown> tierra. </font>

Fórmula del <Font Color=Green Size=+4> agua: </font>

H <sub> 2 </sub> O

Fórmula de la energía una <Font Size=-2> partícula: </font>

E=mc <sup> 2 </sup>

</body>

</html>

(6)

Tabla de colores

PARRAFOS Y ESPACIOS EN BLANCO

Como habrás notado en el ejemplo anterior, el HTML no hace caso a los espacios o enter que le damos a los párrafos ni a los múltiples espacios en blanco de la barra espaciadora.

Para eso utilizamos las siguientes Etiquetas:

<p> Indica un nuevo párrafo, dejando una línea en blanco.

<br> indica un nuevo párrafo si dejar ninguna línea en blanco.

&nbsp Deja un espacio en blanco… no es una etiqueta en sí, sino el carácter de espacio en

blanco.

(7)

Ejercicio 4. Modificaremos el ejercicio anterior para que se vea más presentable.

GUARDALO EN LA CARPETA COMO: ejercicio4.html

<html>

<head>

<title>

Fórmulas2 Nombre

</title>

</head>

<body>

<h1 align=center> <u> <font color= Hotpink > Fórmulas Conocidas </font> </u> </h1>

Las siguientes <i> Fórmulas </i> son muy conocidas y <b> peligrosas de usar. </b> <p>

Por lo tanto <u> <i> <b> recomendamos </u> </i> </b> experimentarlas en un laboratorio <br>

<s> super seguro </s> en lo más profundo de la <font color=Brown> tierra. </font> <br>

Fórmula del             <Font Color=Green Size=+4> agua: </font>

H <sub> 2 </sub> O <br> <br> <br>

Fórmula de la energía una <Font Size=-2> partícula: </font>

E=mc <sup> 2 </sup>

</body>

</html>

(8)

LINEAS

Las líneas que se pueden insertar en HTML, pueden tener distinto color, alineación, ancho horizontal y espesor. Se utilizan las siguientes etiquetas:

<hr>

<hr Color=”Color” Align=”Alineación” Width=”Ancho” Size=”Espesor”>

 “Color” es el color de la línea horizontal.

 “Alineación” puede ser: Left, right o center

 “Ancho” puede estar en píxeles o en porcentaje del ancho del documento

 “Espesor” puede ser en píxeles

Ejercicio 5. Dibujemos algunas líneas

(9)

GUARDALO EN LA CARPETA COMO: ejercicio5.html

<html>

<head>

<title>

Líneas Nombre

</title>

</head>

<body>

Línea de lado a lado <hr>

Linea en el centro con un ancho de 50% <hr width= 50%>

Linea a la derecha con un ancho de 25% <hr align=right width=25%>

Línea a la izquierda con un ancho de 75% <hr align=left width=75%>

Linea azul a la izquierda con un ancho de 25% <hr color=Blue align=Left width=25%>

Lienea verde en el centro con un ancho de 50% y un espesor de 10 píxeles <hr color=green width=50% size=10>

Linea roja a la derecha con un ancho de 25% y un espesor de 20 píxeles <hr color=red align=right width=25% size=20>

</body>

</html>

HTML. Ejercicios para HTML. Las etiquetas <html> y </html> identifican el principio y el final del documento HTML.

HTML

HTML o Hypertext Markup Language o Lenguaje de Diseño de Hipertextos, es un lenguaje que se utiliza para crear páginas web.

Ejercicios para HTML

Las etiquetas <html> y </html> identifican el principio y el final del documento HTML.

Las etiquetas <head> y </head> limitan la cabecera del documento Las etiquetas <title> y </title> limitan el encabezado de la página Las etiquetas <body> y <body> limitan el cuerpo del documento.

Ejercicio 0. Realzaremos una plantilla del documento

EN EL ESCRITORIO, CREA UNA CARPETA CON TU NOMBRE Y PRACTICAS DE HTML

Guardamos el documento como: “plantilla.html”

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

Ejercicio 1. Realzaremos la primera página web Abre la plantilla y agrégale lo siguiente:

Guardamos el documento como: “ejercicio1.html”

ENCABEZADOS

Los encabezados son utilizados para resaltar palabras o frases. Hay seis tamaños de encabezados: Para el más grande se utilizan las etiquetas <h1> y </h1> y para el más pequeño se utilizan las etiquetas <h6> y </h6>

Si se quiere alinear el encabezado se utilizan el atributo ALIGN con la opción LEFT, CENTER, RIGHT O JUSTIFY.

Si no se utiliza ALIGN, el HTML supondrá la alineación LEFT.

<html>

<head>

<title>

1 Nombre

</title>

</head>

<body>

Mi nombre es: ____________, estudio en el COBAQ y voy en el grupo: _____

</body>

</html>

Ejemplo 2. Crearemos una página web que muestre el uso de los encabezados. En el bloc de notas escribimos el siguiente código:

GUARDALO EN LA CARPETA COMO: ejercicio2.html

<head>

<title>

Frases Nombre

</title>

</head>

<body>

<h1 Align=center> Frases Famosas </h1>

<h2> Ganar no es todo... es lo único. </h2>

<h3> El secreto de andar sobre las aguas, es saber dónde están las piedras. </h3>

<h4 Align=Right> Si piensas que puedes o no puedes, siempre tienes razón. </h4>

<h5 Align=Right> El conocimiento es poder. </h5>

<h6> Prohíbido, Prohibir </h6>

Que bonitas frases...

</body>

</html>

Ejemplo 3. Crearemos una página web que muestre el uso de los estilos de letra. Escribiremos el siguiente código.

GUARDALO EN LA CARPETA COMO: ejercicio3.html

<html>

<head>

<title>

Fórmulas1 Nombre

</title>

</head>

<body>

<h1 align=center> <u> <font color= Hotpink > Fórmulas Conocidas </font> </u> </h1>

Las siguientes <i> Fórmulas </i> son muy conocidas y <b> peligrosas de usar. </b>

Por lo tanto <u> <i> <b> recomendamos </u> </i> </b> experimentarlas en un laboratorio

<s> super seguro </s> en lo más profundo de la <font color=Brown> tierra. </font>

Fórmula del <Font Color=Green Size=+4> agua: </font>

H <sub> 2 </sub> O

Fórmula de la energía una <Font Size=-2> partícula: </font>

E=mc <sup> 2 </sup>

</body>

</html>

Tabla de colores

PARRAFOS Y ESPACIOS EN BLANCO

Como habrás notado en el ejemplo anterior, el HTML no hace caso a los espacios o enter que le damos a los párrafos ni a los múltiples espacios en blanco de la barra espaciadora.

Para eso utilizamos las siguientes Etiquetas:

<p> Indica un nuevo párrafo, dejando una línea en blanco.

<br> indica un nuevo párrafo si dejar ninguna línea en blanco.

&nbsp Deja un espacio en blanco… no es una etiqueta en sí, sino el carácter de espacio en

blanco.

Ejercicio 4. Modificaremos el ejercicio anterior para que se vea más presentable.

GUARDALO EN LA CARPETA COMO: ejercicio4.html

<html>

Mi nombre es: ________, estudio en el COBAQ y voy en el grupo: _

Fórmula del <Font Color=Green Size=+4> agua: </font>