Scribd
Cargar
4 vistas4 páginas

Teoria HTML5

HTML es un lenguaje interpretado utilizado para estructurar páginas web mediante etiquetas que representan diferentes elementos como texto, imágenes y videos. La estructura de un documento HTML se asemeja a un árbol genealógico, donde elementos como <head> y <body> son fundamentales para organizar la información. Además, HTML permite crear listas, enlaces y formatear texto, facilitando la presentación de contenido en la web.

Cargado por

José Alex
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
4 vistas4 páginas

Teoria HTML5

HTML es un lenguaje interpretado utilizado para estructurar páginas web mediante etiquetas que representan diferentes elementos como texto, imágenes y videos. La estructura de un documento HTML se asemeja a un árbol genealógico, donde elementos como <head> y <body> son fundamentales para organizar la información. Además, HTML permite crear listas, enlaces y formatear texto, facilitando la presentación de contenido en la web.

Cargado por

José Alex
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

¿Qué es HTML?

Html es un lenguaje interpretado, esto significa que necesita de más programas para poder
comunicarse de forma eficiente y codificar la sintaxis que se escriba en el archivo HTML

Con HTML armamos la estructura de nuestra página, cada elemento llamado tag, o etiquetas, es
un bloque en el cual HTML toma información para poder interpretarla , por ejemplo un video, texto,
imagen, etc…

https://developer.mozilla.org/es/docs/Web/HTML/Element

Estructura de una Página Web


Padre e hijos
Los elementos de nuestro archivo HTML están organizados de forma similar a un árbol
genealógico. La mayoría de los elementos individuales pueden ser padres con uno o más
elementos secundarios.
 <head>y <body>son hijos de <html>.
 <title>es hijo de <head>.
 <i>es hijo de <p>y nieto de <body>.

<head>
Esta el encabezado que contiene información que no es visible de la página, links de API’s, paths
de carpetas que manda a traer el archivo en el que estamos trabajando
</head>
Para la parte visible de nuestra página web, todo lo que queramos que sea la parte visible, va en la
parte de body <body> </body>

Párrafos y Encabezados <p>


<p>Los párrafos se utilizan para describir los párrafos </p>
Lo importante es que siempre se tenga una idea y un concepto, así escribiendo un elemento o una
sección informativa, abarcando algo diferente, pero con la misma idea de un tema
Por parte de la sección de encabezados, existen desde h1 hasta h6, pero solo h1 se ocupa una
vez para que el navegador pueda identificar el nombre de nuestra página y poder resaltarla en la
barra de navegación, y para el cuerpo de nuestra página, los párrafos se conforman por subtítulos,
es decir, mientras más alto sea el número de H1, más pequeño será el subtitulo
Listas <ol> <ul>
Existen dos tipos de listas
 Ordenadas <li> </li>, la cual tiene artículos <li></li> . Se muestran con números (u otros
marcadores secuenciales, como letras o números romanos) para indicar el orden.
 Uso: Se emplean cuando el orden es significativo, como en instrucciones paso a paso,
rankings o cualquier lista en la que el orden de los elementos influya en su interpretación.
 Desordenadas: Se representan con la etiqueta <ul> y cada elemento de la lista se define
con <li>. Los elementos se muestran normalmente con viñetas.
 Uso: Son ideales para cuando el orden de los elementos no es importante, como en menús
de navegación, listas de características o elementos agrupados sin una secuencia lógica.
 Listas de Definición: Se usan junto con las etiquetas <dl>, <dt> (término) y <dd>
(definición). Estas listas permiten emparejar un término con su descripción o definición.
 Uso: Son útiles para mostrar glosarios, preguntas y respuestas, o para definir términos
técnicos y conceptos.

Enlaces (Anclas)///Hipervinculos <a>


Atributos
Ya sea archivos o vínculos, se pueden hacer referencia, con <a href=”” >, entre las comillas se
puede abrir el archivo o link de un video, ya sea copiando el Path , o para abrir el otra pestaña, se
puede hacer colocando el atributo target = ;
El cual tiene los siguientes atributos
 _self = Atributo por defecto que redirige a una página o enlace, haciendo autorefresh en la
misma pestaña

 Blank = Redirige a una nueva pestaña, alojando el contenido en una nueva pestaña

 Parent = Carga la URL en el contexto de navegación padre (parent) del actual. Si no existe
el padre, este se comporta del mismo modo que _self.

 _top = Carga la URL en el contexto más alto de navegación (el cual es un ancestro del
actual, y no tiene padre (parent)). Si no hay padre (parent), este se comporta del mismo
modo que _self .

 mailto:, tel: o :sms:

 <a href="mailto:[email protected]">📧</a>
 <a href="tel:212-555-2368">🤙</a>
 <a href="sms:320-250-HTML">💬</a>

 Img : Añadir imágenes (cierre automático)

<p>Here's a cute pic:</p>


<img src="https://i.redd.it/5unn16axx1v81.jpg">
Para la mayoría de las imágenes, la ruta del archivo se puede encontrar haciendo clic derecho en
la imagen y seleccionando "Copiar dirección de imagen".

<a href="index.html" target="_self"> Pagina con Autorefresh</a>


<a href="listas.html" target="_blank"> Pagina con pestaña nueva</a>
<a href="styles.css" target="_parent"> Pagina con redireccion ?</a>
<a href="listas.html" target="_top" >¡¡¡???</a>
<a href="listas.html" title="Biñeta con informacion del
hipervinculo">Listas_info</a>

Salto de Línea <br>


Supongamos que también queremos añadir una nueva línea dentro de un elemento de párrafo.
Presionar enter nos servirá de nada, ya que HTML ignora los espacios y saltos de línea dentro de
los elementos.
¡Entonces debemos utilizar la <br>etiqueta break aquí!
La <br>etiqueta de salto agrega un salto de línea:

<body>
<h1>Breaking News</h1>
<p>Florida man robs convenience store with an alligator. <br> Leaves a
baby Crocs behind.</p>
</body>

Formato de texto <b> <i> <u> <s>


 <b>Elemento para convertir texto en negrita.
 <i>Elemento para poner texto en cursiva.
 <u>Elemento para subrayar texto.
 <s>elemento para tachar un texto

Etiquetas autocerrables (auto-cerrable)


Las etiquetas son

Etiquetas de bloque y etiquetas de línea

Tipo de Etiquetas
Si lo crees, lo creas: Elimina tus dudas, cambia
tus creencias y suelta el pasado para alcanzar
todo tu potencial
Deja de ser tu Joe Dispenza

También podría gustarte