NT1 - I de Secundaria-Html5

INTERNET, WWW y HTML5
Por: Lic. José M. Pingo Medina
Las Etiquetas o Tags en HTML

¿Qué es HTML?
Las Etiquetas HTML son palabras
HTML es un lenguaje de marcado para crear
clave (nombres de etiqueta o
documentos web (páginas web).
HTML significa: tagname) rodeadas por paréntesis
Hyper Text Markup Language angulares: Se escriben así:
Un lenguaje de marcas es un conjunto de etiquetas <tagname>contenido</tagname>.
de marcas. Se abren y cierran. Ej: <p> y </ p>
Los documentos HTML son descritos por las etiquetas La primera etiqueta es la etiqueta de
HTML. Cada etiqueta HTML describe diferentes inicio, la segunda es la de cierre.
contenidos del documento. La etiqueta final se escribe como la de
inicio, pero antes se pone /. Ejemplo:
Versión Año Versiones de HTML.
<h1>Mi página web</h1>. Algunas
HTML 1991 Timothy Berners Lee etiquetas no se cierran. Ejemplo:
HTML 2.0 1995 inventó la WWW en el <br>. Las tags se pueden escribir en
HTML 3.2 1997 año 1989 y en al año minúsculas o mayúsculas en html5.
HTML 4.01 1999 1991 crea HTML, desde
XHTML 2000 allí han existido varias
HTML5 2014 versiones de HTML
<!DOCTYPE html>
<html> Esta es una estructura general de un
documento en HTML5, como podemos
<head>
observar la base del documento sigue de
<title>página de muestra</title> igual forma que la versión anterior de HTML,
</head> lo único que difiere es la etiqueta
<body> <!DOCTYPE html>. Por supuesto que esto
<h1>Este es un encabezado</h1> no es lo único de novedad en HTML5, existen
numerosas etiquetas y beneficios del
<p>Este es un párrafo sencilla.</p> lenguaje.
<!—Este es un comentario -->
</body>
</html>
Principales etiquetas de html5.

Contenidos entre <html> y </ html> describe un documento HTML.
Contenidos entre <head> y </ head> proporciona información sobre el documento, es la cabecera de la página.
Contenido entre <title> y </ title> ofrece un título que aparecerá en la parte superior del navegador.
Contenido entre <body> y </ body> describe el contenido o cuerpo de la página visible.
Contenido entre <h1> y </ h1> describe un título o encabezado.
Contenido entre <p> y </ p> describe un párrafo. Lo que está entre estas etiquetas se considera párrafo.
Las anteriores etiquetas son comunes a la versión HTML 4.01, pero ahora veremos:
<! DOCTYPE> es la que ayuda al navegador a mostrar una página web correctamente. DOCTYPE es una declaración
que define el tipo de documento para ser HTML., ya que hay varios tipos de ellos en la web.
Para mostrar un documento correctamente, el navegador debe conocer tanto el tipo y la versión.
La declaración de tipo de documento se puede poner en mayúsculas o minúsculas.
Para crear una página web como sabemos, podemos seguir utilizando cualquier editor de texto, pero también con
HTML5 es recomendable básicamente el bloc de notas en una PC o texedit en una Mac.
A continuación brindaré una página ejemplo hecha con algunas instrucciones o atributos de html5, pero hay que notar
que muchas de las etiquetas se repiten o vienen de html 4.01.
Abrimos el bloc de notas e ingresamos:

<!DOCTYPE html>
<html>
<head>
<title>ejemplo de página</title>
</head>
<body style=background-color:orange;>
<h1 style=color:blue;>Talara, provincia del Oro Negro</h1>
<p style=font-size=160%;>Se le llama así porque en estas tierras abunda de materia prima el petróleo y
desde principios del siglo XX, se inició su explotación en esta zona, en la cual también se tiene como
riqueza la pesca.</p>
<!—Este es el final del primer párrafo -->
</body>
</html>
Los estilos dentro de HTML5 los marca en este caso el atributo style: El cual se
utiliza de la siguiente manera:
<body style=background-color:orange;>Cambiar color de fondo de página.
<h1 style=color:blue;>Color azul para el encabezado 1.
<p style=font-size=160%;>tamaño de fuente aumentado en el párrafo.
<h1 style=text-align:center;>alineación del texto “centrado” h1.
<p style=font-family:verdana;>tipo de fuente para el párrafo “verdana”
<!DOCTYPE html>
<html>
<head>
<title>muestra de enlace</title>
Veamos otro ejemplo
</head>
<body style=background-color:yellow;>
<h1 style=text-align:center;>El Petróleo</h1>
<p style=font-family:verdana;> Se produce en el interior de la Tierra, por transformación de la materia
orgánica acumulada en sedimentos del pasado geológico y puede acumularse en trampas
geológicas naturales, de donde se extrae mediante la perforación de pozos</p>.
<img src="plataforma.jpg" width=250 height=300>
</body>
</html>
Guardando la página: Como estamos desde el bloc de notas, hacemos click en el menú Archivo, luego en guardar,
posteriormente aparece una ventana donde debemos de poner el nombre del archivo, en este caso se llamará
“crudo”, luego escribimos seguido la extensión .html. Si vemos la opción codificación escogemos UTF-8.
Posteriormente presionamos el botón guardar.
Debemos de tener en cuenta en qué carpeta guardamos nuestro archivos para luego entrar y ejecutar la página
haciendo doble click en el icono que tiene el nombre.
De la misma manera si queremos editar el documento para corregirlo, debemos de ir hacia el menú archivo, luego
la opción abrir y buscar el documento, luego de encontrarlo, hacemos clic para abrirlo y modificarlo.
Otra forma es en la carpeta donde se encuentra el archivo, ver el icono del navegador que tiene el nombre de la
página, hacer click con el botón derecho del mouse y luego poner la opción abrir.
Las Listas en HTML5

Para trabajar listas en HTML5 podemos hacerlo con:
a. Listas ordenadas (ordered list): se trabajan con <OL> y con el parámetro <LI> y aparecen en el navegador
enumeradas. Ejemplo:
<ol>
<li>Perú.</li> 1. Perú.
<li>Colombia.</li> 2. Colombia.
<li>Brasil.</li> 3. Brasil.
<li>Argentina.</li> 4. Argentina.
</ol>
b. Listas desordenadas (unordered list): se trabajan con <UL> y con el parámetro <LI> y aparecen en el
navegador con viñetas. Ejemplo:
<ul>
<li>Ciencia.</li>  Ciencia.
<li>Virtud.</li>  Virtud.
<li>Trabajo.</li>  Trabajo.
<li>Responsabilidad.</li>  Responsabilidad.
</ul>
Insertar Imágenes en HTML5

Como observamos dentro de este último ejemplo se está insertando una imagen y para ello se está utilizando la
siguiente etiqueta: <img src> cuya sintaxis (como se utiliza en el documento) es:
<img src=”nombre del archivo.extensión” parámetros>
<img src="plataforma.jpg" width=250 height=300>
En este caso la imagen se llama “plataforma” y la extensión es “.jpg” que viene a ser el formato de la
imagen, es decir la calidad de la misma. Debemos de conocer que un formato de imagen no es el mismo
siempre, varía. El formato más popular en el mundo es JPEG, que al ingresar el código le ponemos “.jpg”,
debido a que las imágenes con jpg, no tienen mucho peso en bytes y además son de gran calidad en
resolución. Hay otros formatos como gif, tif, png, bmp, etc. Por eso cada vez que tengamos que insertar
una imagen debemos conocer correctamente lo siguiente:
1. El nombre de la imagen
2. Su formato o extensión.
3. La ubicación de la imagen, de preferencia es mejor tener guardada la imagen en la misma carpeta
donde se encuentra guardada la página.
Los parámetros Width, es para poner el ancho de la imagen y height es para poner la altura de la imagen que
deseamos.
Insertar Hipervínculos en HTML5

Un hipervínculo es una palabra u objeto enlace que ayuda a que el usuario pueda acceder de una página a
otra, pasar de un documento a otro, o también dentro de la misma página web ir hacia otra parte
específica del sitio, todo ello se hace sólo con un clic en él.
A los hipervínculos se les conoce también con el nombre de Links, hyperlinks, vinculo, enlace o
hiperenlace.
Cuando se desea insertar un hipervínculo dentro de una página web, hay que tener en cuenta que vamos a
enlazar con otro documento u otro sitio de la misma página. Por ello debemos conocer:
 Nombre correcto del documento a enlazar.
 De preferencia que los dos o más documentos a enlazar estén todos en una misma carpeta.
 Escribir correctamente la instrucción.
La instrucción es:
<a href=”nombre del documento enlace.extension”>palabra enlace</a>
Ejemplo: <a href=”talara.html”>ciudad del oro negro</a>
Desarrolla los siguientes ejercicios que hicimos como practica en el aula. Lo único que varían son las imágenes que
debes de bajarlas en la computadora de tu casa, cualquier imagen relacionada a los temas e insertarla.
Eran tres páginas. La primera se llamaba REGIONES.HTML y le pusimos el siguiente código. Fíjate en el
código para el hipervínculo y nota cómo se pone en una lista y en un texto normal.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de hipervinculo</title>
</head>
<body style=background-color:black;>
<h1 style=color:white;>LAS REGIONES DEL PERÚ</h1>
<BR>
<img src="mapa.jpg" width=300 height=400>
<br>
<ul style=color:white;>
<li><a href="costa.html">la region costa</a></li>
<li>la region sierra</li>
<li><a href="selva.html">la region selva</a></li>
</ul>
</body>
</html>
La segunda página se llamó COSTA. HTML
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo2</title>
</head>
<body style=background-color:yellow;>
<h1 style=color:blue;>LA REGION COSTA</H1>
<p style=color:blue;>La región costa.
Se extiende desde Tumbes hasta Tacna. Es la región económica del país y de allí derivan la mayoría de las
exportaciones. La región costera tiene grandes desiertos, dunas y valles. En los valles del norte, hay una gran
producción de algodón y caña de azúcar. En el sur se producen uvas, aceitunas y frutas. La costa es rica en
especies marinas y la industria pesquera es una de las más poderosas del Perú. Se localiza una inmensa
variedad de peces como tollo, jurel, cojinova, lenguado, chita, atún y muchos más. </p>
<img src="costa.jpg" width=300 height=400>
<br>
<a href="regiones.html">inicio</a>
<br>
</body>
</html>
La tercera página se llamó SELVA.HTML
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo2</title>
</head>
<body style=background-color:green;>
<h1 style=color:blue;>LA REGION SELVA</H1>
<p style=color:blue;>La Selva o región Amazónica.
Es la más extensa y vasta del Perú. Tiene una gran variedad de recursos naturales. Llena de vegetación,
presenta un clima húmedo, pero cálido, por un lado y por otro caluroso y tropical. La Amazonía se divide en
dos partes: la selva alta y la selva baja. Su recorrido es desde Amazonas hasta Madre de Dios.</p>
<img src="lago.jpg" width=500 height=350 align=center>
<br>
<br>
<A HREF="REGIONES.HTML">INICIO</A>
</body>
</html>

NT1 - I de Secundaria-Html5

Cargado por

Copyright:

Formatos disponibles

NT1 - I de Secundaria-Html5

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

NT1 - I de Secundaria-Html5

Cargado por

Copyright:

Formatos disponibles

INTERNET, WWW y HTML5

Por: Lic. José M. Pingo Medina

Las Etiquetas o Tags en HTML

Principales etiquetas de html5.

Abrimos el bloc de notas e ingresamos:

Las Listas en HTML5

Insertar Imágenes en HTML5

<img src=”nombre del archivo.extensión” parámetros>

<img src="plataforma.jpg" width=250 height=300>

Insertar Hipervínculos en HTML5

<a href=”nombre del documento enlace.extension”>palabra enlace</a>

Ejemplo: <a href=”talara.html”>ciudad del oro negro</a>

La segunda página se llamó COSTA. HTML

La tercera página se llamó SELVA.HTML

También podría gustarte