1. Introducción
Que es un HTML ?
HTML es un lenguaje de marcación que sirve para definir el contenido de las páginas web. Se compone en base a etiquetas, también llamadas marcas o tags, con las cuales conseguimos expresar las partes de un documento, cabecera, cuerpo, encabezados, párrafos, etc. En definitiva, el contenido de una página web. Por ejemplo, tomemos la siguiente línea de contenido:
Si queremos especificar que es un párrafo se encierra con una etiqueta de elemento párrafo asi:
<p>Soy un aprendiz Sena </p>
Anatomía de un elemento HTML
Cómo ya hemos dicho es un lenguaje de marcas (etiquetas). Así que todo nuestro texto estará encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.
-
<p>
Etiqueta de apertura:
Se trata de escribir el nombre de la etiqueta en cuestión, colocándola entre los carácteres < y >. Aunque no es terminantemente obligatorio, se recomienda y considera una buena costumbre escribir las etiquetas siempre en minúsculas.
-
</p>
Etiqueta de cierre:
Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error, y puede conducir a resultados extraños.
-
Contenido:
En el interior del elemento (después de la etiqueta de apertura y antes de la etiqueta de cierre) se debe colocar la información que queremos que sea afectada por dicha etiqueta.que en este caso es solo texto.
-
Elemento:
lo conforman la suma de la etiqueta de apertura ,la etiqueta de cierre y el contenido .
Atributos
En algunas etiquetas HTML, existen algunos atributos específicos (que pueden ser opcionales u obligatorios). Los atributos determinan cierta información sobre la etiqueta (o su modo de actuar) y generalmente van asociados a un valor determinado.
-
class
Atributo:
Se escribe después del nombre de la etiqueta tal como se ve en su anatomia, separándola por un espacio y el nombre del atributo, seguido por un signo igual, antes del carácter > de la etiqueta de apertura. cada atributo tiene una misión y comportamiento concreto.
-
valor
Valor del Atributo:
El valor del atributo indica una función especifica. Aunque los valores pueden ir rodeados por comillas simples, se recomienda escribir el valor siempre entre comillas dobles .
Elementos Anidados
También puedes poner elementos dentro de otros elementos; esto se llama anidamiento. Si quisiéramos decir "Soy un aprendiz Sena de la formación ADSI" podríamos encerrar la palabra «Sena» en un elemento <strong> para que aparezca destacada y encerrar la palabra «Sena» en un elemento <em> para darle importancia, observemos el ejemplo:
Soy un aprendiz Sena de la formación ADSI
En este caso vemos que la etiqueta <p> tiene como contenido a otra etiqueta <strong>. En este caso se dice que:
-
padre
<p> <strong> </strong> <em> <em> </p>
La etiqueta <p> es el padre de la etiqueta <strong> y <em>.
-
hijas
<strong> </strong> <em> <em> </p>
Las etiqueta <strong> y <em> son hijas de <p> .
-
herm
<strong> </strong> <em> <em> </p>
Las etiqueta <strong> y <em> son hermanas
Debes asegurarte de que los elementos estén anidados adecuadamente: en el ejemplo anterior, primero abrimos el elemento p y luego el elemento strong y seguido el elemento em, por lo tanto, debemos cerrar primero el elemento strong y el elemento em , y luego el p. Es incorrecto hacerlo del modo siguiente:
Soy un aprendiz Sena de la formación ADSI
Anatomia del documento HTML
Un documento HTML debe tener siempre una estructura inicial, con algunas etiquetas y características obligatorias y otras recomendables. Ese esquema es el siguiente, donde se diferencian tres partes principales:
-
html
<html> </html>
Este elemento engloba todo el contenido de la página y es conocido en ocasiones como el elemento raíz.
-
head
<head> </head>
Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que no será visible a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más.
-
body
<body> </body>
Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.
Estructura básica de HTML5
Hasta aquí alcanzan las bases de los elementos HTML de manera individual, aunque no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa
-
1
<!DOCTYPE html>
En su primera línea, es siempre conveniente indicar el tipo de documento a utilizar. Para indicar que se trata de un documento HTML5.
-
3
<html lang="en"> </html>
En su tercera línea, en estas etiquetas debemos especificar la lengua en la que está redactado el contenido del documento, en nuestro caso se trata de "en" ingles segun aparece en el ejemplo.
-
6
<meta charset="UTF-8">
En su sexta línea, este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurarlo y puede te ayudar a evitar problemas más adelante.
-
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
En su septima línea, Un elemento de ventana
<meta>le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página. Si estás diseñando flexiblemente, usa la etiqueta meta viewport te prepara para adaptar tu pagina a multi-dispositivo. -
8
<title> </title>
En su octava línea, este elemento establece el título de la página, que aparece en la pestaña/ventana de tu navegador cuando la página se carga y se utiliza para describir la página cuando la añades a tus marcadores o la marcas como favorita.
-
10
<body> </body>
En su decima línea, en esta zona se incluyen todas las etiquetas HTML que si tienen repercusión visual en el navegador del usuario, generalmente utilizadas para dibujar secciones o partes de una página.
-
12
<!--Comentario en HTML-- >
En su doceava línea, Como se puede ver, para introducir estos comentarios en el código HTML, basta con escribir los fragmentos de texto < !-- y --> entre el comentario que se desea realizar. Los comentarios son ignorados por el navegador y son invisibles para el usuario. Su propósito es permitir comentar el código para aclarar su funcionamiento, explicar el codigo que se esta escribiendo.
Elementos de bloque y elementos en línea
Hay dos categorías de elementos en HTML, que es importante que conozcas. Estos son los elementos de bloque y los elementos en línea.
Los elementos de bloque forman un bloque visible en la página; aparecerán en una línea nueva después de cualquier contenido anterior; y cualquier contenido que vaya después también aparecerá en una línea nueva. Los elementos de bloque tienden a ser elementos estructurales en la página que representan, por ejemplo, párrafos, listas, menús de navegación, pies de página, etc. Un elemento de bloque no estaría anidado dentro de un elemento en línea, pero podría estar anidado dentro de otro elemento de nivel de bloque.
El elemento que se muestra en la página anterior es un párrafo. Los párrafos son elementos de bloque y por ese motivo su caja empieza en una nueva línea y llega hasta el final de esa misma línea. Aunque los contenidos de texto del párrafo no son suficientes para ocupar toda la línea, el navegador reserva todo el espacio disponible en la primera línea.
Los elementos de bloque definidos por HTML son: address, blockquote, center,
dir, div, dl, fieldset, form, h1,
h2, h3, h4, h5, h6, hr,
isindex, menu, noframes, noscript, ol,
p, pre, table, ul, dd, dt,
frameset, li, tbody, td, tfoot, th,
thead, tr.
Los elementos en línea son aquellos que ocupado el espacion necesario del contenidos, dentro de elementos de bloque y delimitan solo pequeñas partes del contenido del documento, no párrafos enteros ni agrupaciones de contenido. Un elemento en línea no hará aparecer una línea nueva en el documento; normalmente aparecen dentro de un párrafo o texto, por ejemplo es el caso de un elemento <a> (hipervínculo) o elementos de énfasis como <em> o <strong>.
El elemento que muestra en la página es un span. Los span son elementos en línea, por lo que su caja sólo ocupa el espacio necesario para mostrar sus contenidos. Si después de este elemento se incluye otro elemento en línea (por ejemplo otro span, enlace o una imagen) el navegador mostraría los dos elementos en la misma línea, ya que existe espacio suficiente.
Los elementos en línea definidos por HTML son: a, abbr, acronym,
b, basefont, bdo, big, br, cite,
code, dfn, em, font, i, img,
input, kbd, label, q, s, samp,
select, small, span, strike, strong,
sub, sup, textarea, tt, u, var.
Actividad #1 HTML5:
Construir un videos de forma grupal para dar una respuesta amplia a los temas asignados. Cada grupo debe ponerse de acuerdo para buscar la estrategia del desarrollo de esta actividad. Todos los integrantes del grupo deben aparecer en el vídeo participando. Una sola personas se encargará de editar el vídeo y subir a Youtube y de enviar el enlace a classroom.
Te ha resultado util esta guia de aprendizaje ?
Que tal el contenido?