Scribd
Cargar
54 vistas6 páginas

HTML Etiquetas PDF

Este documento explica la estructura básica de un documento HTML, incluyendo las etiquetas principales como <!DOCTYPE html>, <html>, <head>, <body>, <title>, <header>, <main>, <footer>, así como etiquetas comunes como <p>, <ul>, <ol>, <a>, <img>, <h1-h6>. Además, describe el propósito de cada etiqueta y cómo se usan correctamente en la estructura de una página web.

Cargado por

eric montenegro
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 PDF, TXT o lee en línea desde Scribd
54 vistas6 páginas

HTML Etiquetas PDF

Este documento explica la estructura básica de un documento HTML, incluyendo las etiquetas principales como <!DOCTYPE html>, <html>, <head>, <body>, <title>, <header>, <main>, <footer>, así como etiquetas comunes como <p>, <ul>, <ol>, <a>, <img>, <h1-h6>. Además, describe el propósito de cada etiqueta y cómo se usan correctamente en la estructura de una página web.

Cargado por

eric montenegro
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 PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

ESTRUCTURA HTML

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="desciption" content="Esta pagina te va a mostrar.....">
<title>Document</title>
<link rel="stylesheet" href="">
</head>
<body>
<main>

</main>
<footer>

</footer>
</body>
</html>
Explicación estructura HTML
• Esta etiqueta, le permite a el navegador identificar que se usará código HTML
<!DOCTYPE html>
• La etiqueta <html> <html> es el contenedor madre, donde se encuentra toda la información del código
<html lang="en">
La etiqueta cuenta con un atributo llamado Lang= “en” , la cual se usa para indicarle al navegador el
idioma nativo del código. Ejemplo: Español -> “es” , Ingles -> “en”

HEAD

• La etiqueta <head> </head> es toda la configuración importante para el navegador. Esto no lo ve el


usuario.
La etiqueta head cuenta con unos atributos llamados meta, como se muestra a continuación:
• El atributo charset= “UFT-8” se usa para que el navegador entienda caracteres especiales como tildes,
emojis, letra ñ, entre otros.
<meta charset="UTF-8">
• El atributo name = “Viewport” se usa para el tema de responsive, es decir, se usa para que la página se
adapte en una versión móvil y no se utilice siempre la versión de escritorio
<meta name="viewport" content="width=device-width, initial-scale=1.0">
• El atributo name = “descripción” se usa para añadir una breve descripción de la página
<meta name="desciption" content="Esta página te va a mostrar.....">
TITLE

• La etiqueta <title> </title> se usa para añadirle un titulo a la pestaña del navegador
<title>Document</title>

LINK

La etiqueta <link> se usa importar otro archivo o usar frameworks .

Cuando se desea importar un archivo de CSS o JS, se utiliza esta etiqueta.

<link rel="stylesheet" href="">


BODY

En la etiqueta <body></Body> se encuentra todo el cuerpo del HTML, esta parte si es visible para el
usuario.

MAIN

Dentro de la etiqueta <main> </main> esta etiqueta se indica la estructura del código

<body>
<main>

</main>
</body>
FOOTER

En esta etiqueta se encuentra el pie de página e información adicional de nuestro proyecto web.
Ejemplo: Contáctanos, más información, redes sociales, entre otros

<body>
<footer>
</footer>
</body>
ETIQUETAS MÁS USADAS EN HTML

• <header> </header>: Cabecera del documento.

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscar Reserva</title>
<link rel="shortcut icon" href="/img/iconos/head.png">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet"
integrity="sha384-
gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous">
<script src="https://kit.fontawesome.com/dbed6b6114.js"
crossorigin="anonymous"></script>
<link rel = "stylesheet" href = "/css/buscar.css" type="text/css">
</head>

• <section> </section>: Se usa para diferenciar las secciones principales del contenido.

<section id="inicio" class="destacada">


<h2>Bienvenidos a mi sitio web</h2>
<p>En este sitio encontrarás información sobre nuestra empresa y los
servicios que ofrecemos.</p>
</section>

• <article></article>: Diferencias artículos o secciones del documento como artículos o proyectos.

<article id="main-content">
<header>
<h2>Contenido principal</h2>
</header>
<p>Aquí es donde se incluye el contenido principal del artículo.</p>
<p>Puede incluir texto, imágenes, vídeos, tablas, etc.</p>
</article>
• <footer> </footer>: Pie de página del documento.

<footer>
<address>
Jhonny Doe<br>
[email protected]
</address>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/food">Food</a></li>
<li><a href="/drinks">Drinks</a></li>
</ul>
</footer>

• <ul> </ul>: Lista desordenada.

<ul>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>

• <ol> </ol>: Lista ordenada (Se observa con numeración).

<ol>
<li>Enero</li>
<li>Febrero</li>
<li>Marzo</li>
</ol>

• <div> </div>: Cualquier división para organizar el contenido.

<body>
<div class="myDiv">
<h2>Investigadores analizaron si lanzar polvo al espacio podría generar
sombra. </h2>
<p>El equipo buscaba proporcionar un oscurecimiento temporal de la
estrella.</p>
</div>
• <nav></nav>: Para hacer menús de navegación.

<nav>
<a href="#inicio">Inicio</a>
<a href="#acerca">Acerca de</a>
<a href="#servicios">Servicios</a>
<a href="#contacto">Contacto</a>
</nav>

• <aside></aside>: Contenido menos relevante, como publicidad, etc.

<body>
<main>
<p>Terremoto afecta a Turquía y Siria. </p>
</main>
<aside>
<p>El sudeste de Turquía y el noreste de Siria afectados. </p>
</aside>
</body>

• <h1></h1>: Son etiquetas para indicar títulos con un estilo que destaca del resto. Existe hasta la
etiqueta H6, entre más grande sea el H, menos el tamaño de la letra.

<h1>Bienvenido al curso de HTML, CSS, Javascript</h1>


<h2>Bienvenido al curso de HTML, CSS, Javascript</h2>
<h3>Bienvenido al curso de HTML, CSS, Javascript</h3>

• <p></p>: Define el texto de un párrafo.

<p>El hielo marino del Ártico y la Antártida registra su extensión más baja
en enero.</p>

• <small></small>: Aplica una apariencia de texto reducido en tamaño.

<p><small>Unete a nuestra web y lee los mejores artículos. </small></p>

• <strong></strong>: Aplica al texto un formato de negrita.

<strong>Las noticias mas importantes del mundo. </strong>


• <a>/<a> : Corresponde a un ancla o enlace a una url interna o externa del documento.

<ul>
<li><a href="https://mipagina.com">Web</a></li>
<li><a href="[email protected]">Correo</a></li>
<li><a href="tel:+5730123456">Telefono</a></li>
</ul>

• <img></img>: con esta etiqueta podemos enlazar imágenes en el documento.

<img src="/img/iconos/icono.png" alt="logo" width="100">

También podría gustarte