Want to create interactive content? It’s easy in Genially!

Get started free

Estructura básica de la web

Mafer Licea

Created on March 21, 2023

Start designing with a free template

Discover more than 1500 professional designs like these:

Smart Presentation

Practical Presentation

Essential Presentation

Akihabara Presentation

Pastel Color Presentation

Visual Presentation

Relaxing Presentation

Transcript

Estructura básica de la web (HTML, head y body)

Las páginas web se pueden clasificar por su forma, tecnología y funcionalidad. Se crean en formato HTML y se utilizan en blogs, foros, instituciones, medios de comunicación, buscadores, webs corporativas, tiendas online, entre muchas más opciones.

¿Qué es una página web en HTML?

Una página HyperText Markup Language o HTML es un documento de texto con marcas. Forma parte del lenguaje utilizado para la elaboración de sitios web y hace referencia a los enlaces que conectan páginas web entre sí, dentro de un único sitio o varios.

Las marcas utilizadas en HTML sirven para etiquetar diferentes elementos dentro de un página web: imágenes, texto, videos, entre otros. Se calcula que hay alrededor de 142 etiquetas HTML; sin embargo, muchas de ellas ya han caído en desuso.

CONCEPTOS BÁSICOS DE LAS PÁGINAS HTML

La primera indica el comienzo de la página; la segunda es la cabecera y contiene información descriptiva del sitio; y la tercera es la que abarca todos los elementos visibles dentro de la página.

La estructura básica de una página web se compone por las etiquetas <html>, <head> y <body>.

CONCEPTOS BÁSICOS DE LAS PÁGINAS HTML

<!DOCTYPE html>Tipo de documento que se va a leer (XHTML o HTML ). <html></html> Encierra todo el contenido de la página entera. <title></title> Establece el título de tu página, que es el título que aparece en la pestaña o en la barra de título del navegador

CONCEPTOS BÁSICOS DE LAS PÁGINAS HTML

<body></body>Encierra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, sonidos, etc. <h1></h1> Permiten especificar que ciertas partes del contenido son encabezados, o subencabezados del contenido. (h1-h6) <p></p> Encerrar párrafos de texto.

ANATOMÍA DE UN ELEMENTO HTML

ANATOMÍA DE UN ELEMENTO HTML

PARTES PRINCIPALES:1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. 2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta.

ANATOMÍA DE UN ELEMENTO HTML

PARTES PRINCIPALES:3. El contenido: En este caso es solo texto. 4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.

ANATOMÍA DE UN ELEMENTO HTML

Los elementos pueden también tener atributos, que se ven así.

ANATOMÍA DE UN ELEMENTO HTML

Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el contenido real del elemento. Aquí class es el nombre del atributo y editor-note el valor del atributo.

Un atributo debe tener siempre: Un espacio entre este y el nombre del elemento El nombre del atributo, seguido por un signo de igual (=). Comillas de apertura y de cierre.

ANATOMÍA DE UN ELEMENTO HTML

ANIDAR ELEMENTOSPuedes también colocar elementos dentro de otros elementos —esto se llama anidamiento—. Si, por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»), podemos encerrarla en un elemento <strong>, que significa que dicha palabra se debe enfatizar:

ANATOMÍA DE UN ELEMENTO HTML

<p>Mi gato es <strong>muy</strong> gruñon.</p> <p>Mi gato es <strong>muy gruñon.</p></strong>