Scribd
Cargar
40 vistas3 páginas

Curso HTML Apuntes

La estructura básica de una página web HTML incluye un encabezado, contenido principal, barra lateral y pie de página. El documento explica cómo codificar esta estructura usando etiquetas como <header>, <main>, <sidebar> y <footer>. También describe etiquetas importantes como <html>, <head>, <body>, <title> y <link> y cómo usarlas para definir el idioma, meta datos, hojas de estilo y más.

Cargado por

Anarkoz Poker
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 RTF, PDF, TXT o lee en línea desde Scribd
40 vistas3 páginas

Curso HTML Apuntes

La estructura básica de una página web HTML incluye un encabezado, contenido principal, barra lateral y pie de página. El documento explica cómo codificar esta estructura usando etiquetas como <header>, <main>, <sidebar> y <footer>. También describe etiquetas importantes como <html>, <head>, <body>, <title> y <link> y cómo usarlas para definir el idioma, meta datos, hojas de estilo y más.

Cargado por

Anarkoz Poker
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 RTF, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

Estructura de una página web HTML (Hyper Text Markup Language)

Container (Que lo que contiene las partes)

Header (Donde tendremos un logo y navigation) <header></header>

Main Content (Donde pondremos el contenido y secciones) <main></main>

Sidebar (Barra lateral)

Footer (El pie de página) <footer></footer>

______________________________________________________________________________
_____

Codificando HTML
Estructura

Establecer que todo lo que vendrá es HTML 5 con la instrucción: <!DOCTYPE html>

Establecer contenedor padre que tendrá todo contenido y etiquetas: <html></html>

· tendrá el atributo lang="" : Que le dice al navegador en que idioma está el contenido.

· Resultado etiqueta más atributo: <html lang="es">

Contenedor <head></head> : Cargamos todo lo importante que necesita el navegador


para cargar el proyecto, pero que no es visual para el usuario final. Ej: Llamamos
Librerias externas, nuestro css, etc.

Contenedor <body></body>: Aquí va todo lo que el usuario verá (texto, videos,


imágenes, etc).

Cuidar la tabulación respecto a la etiqueta padre e hijo ejemplo:

<html lang="es">

<head></head>

<body></body>

</html>

Hay etiquetas que se abren y se cierran y otras que se auto cierran solas como <!DOCTYPE html>

En <head></head> Etiquetas meta que cargaremos, ejemplo de algunas importantes:

<meta charset="UTF-8">
· Atributo charset: Para caracteres especiales

· UTF-8: Para que el navegador pueda entender caracteres especiales.

· También existe el "UTF-16" y "UTF-32".

<meta name="description" content="Esta página te mostrará fotos de gatos">

· Sirve para SEO, donde describiremos de que trata la página con la ayuda del
atributo content.

<meta name="robots" content="index,follow">

· Meta para robots de posicionamiento en buscadores. Si no queremos que nos


indexen, ponemos unfollow.

<title>Es mi página</title>

· El título que aparecerá en la pestaña del navegador.

<meta name="viewport" content="width=device-width, inictial-scale=1.0">

· Todos los sitios deben ser responsive, este meta sirve para que se vea el sitio en todos
los dispositivos, compu, celular, que el tamaño se ajuste bien.

<link rel="stylesheet" href="style.css">

· Para cargar CSS.

· Atributo relativo, rel=stylecheet" para cargar una hoja de estilos y la referencia (en
donde se encuentra ese documento) href="styel.css" que es la ruta (la ruta se encuentra
anotando ./ y sae la carpeta donde seleccionaremos el archivo, auto anotará la ruta).

En BODY hay Etiquetas contenedoras (La estructura de etiquetas) y Etiquetas de Contenido (texto,
videos, imagenes, todo lo renderizable)

Contenedora <header></header>

· Barra de navegación <nav></nav>

Contenedora del Main Área <main></main>

· Pueden ir secciones adentro <section></section>

· Y artículos que pueden ir adentro de cada sección <article></article>

· Podemos crear también etiquetas para listas:


· <ul></ul> (es una lista desordenada - Unorder list)

· <li>Soy una Manzana</li> (Aparece en un punto, porque no está ordenada)

· <ol></ol> (es una lista ordenada - Order list)

· <li>Soy una Manzana</li> (Aparece numerado, porque es lista ordenada)

Contenedora del pie de página <footer></footer>

Otras etiquetas

Tenemos otra etiquetas como la de párrafo <p>Soy un texto</p>

Etiquetas de encabezado como <h1>Soy un título</h1>

Etiqueta de ancla, que nos ayuda a crear hipervínculos <a href="#">Soy un link</a>

Toda la estructura del etiquetado lo llamamos HTML semántico, hacerlo bien como se enseña (para
decirle al navegador donde estamos y que tipo de contenido vamos a utilizar), no utilizar malas
prácticas con el <div></div> para maquetar la estructura HTML.

Recursos

https://developer.mozilla.org/en-US/docs/Web/HTML/Element Etiquetas y descripción

ANATOMIA DE UNA ETIQUETA HTML

Elemento: Contenido de toda una etiqueta: <a href="http://pagina.cl">Visita mi página</a>

Abertura de Etiqueta: La apertura de una etiqueta ejemplo: <a href="http://pagina.cl">

Atributo: a href="http://pagina.cl"

Nombre de atributo: a href

Valor de atributo: "http://pagina.cl"

También podría gustarte