Scribd
Cargar
6 vistas5 páginas

Practica 1 Estructura HTML

El documento proporciona una guía sobre la estructura y elementos esenciales de un documento HTML, incluyendo etiquetas, atributos y su uso en la creación de páginas web. Se destaca la importancia de HTML5 y su evolución, así como la función de metadatos y la accesibilidad en el diseño web. Además, se incluyen ejemplos prácticos y explicaciones sobre etiquetas vacías y de autocierre.

Cargado por

marria7219981
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
6 vistas5 páginas

Practica 1 Estructura HTML

El documento proporciona una guía sobre la estructura y elementos esenciales de un documento HTML, incluyendo etiquetas, atributos y su uso en la creación de páginas web. Se destaca la importancia de HTML5 y su evolución, así como la función de metadatos y la accesibilidad en el diseño web. Además, se incluyen ejemplos prácticos y explicaciones sobre etiquetas vacías y de autocierre.

Cargado por

marria7219981
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/ 5

No.

Carrera Asignatura Clave Pract Unidad Tema


ica
Ing. Sistemas
Programación AEB- 2. HTML, XML y 2.2 Estructura global
Computacion 1
Web 1055 CSS de un documento Web.
ales
Ing. S.C. Erika
Nombre del
Facilitador: Muciño Cal:
Alumno:
Mancilla
17/02/2025 Grupo 7S1
Fecha: Observaciones:
:
Objetivo General: Habilidad para buscar, analizar, clasificar y sintetizar información
proveniente de fuentes diversas.

Objetivo Específico: Estructurar un documento Web


Competencias: Conoce y aplica las herramientas para construir páginas web,
considerando la interfaz gráfica de usuario, un lenguaje de marcado y de presentación.

INTRODUCCIÓN
HTML fue desarrollado por Tim Berners-Lee en 1991 como parte del proyecto World
Wide Web en el CERN (Consejo Europeo para la Investigación Nuclear). A lo largo
de los años, HTML ha evolucionado con nuevas versiones y características para adaptarse
a las necesidades cambiantes de la web.
La última versión estable es HTML5, que ofrece mejoras en multimedia, interactividad y
accesibilidad. HTML ha sido fundamental en el crecimiento y la expansión de
Internet, permitiendo la creación de contenido digital accesible a nivel mundial.

Etiquetas Html.
Todas las etiquetas HTML disponen de los símbolos mayor que y menor que ( < > ), y
normalmente se utilizan en parejas. Una al principio (etiqueta de apertura) y otra al final
del texto al que afectan (etiqueta de cierre).

En el siguiente ejemplo se define un párrafo mediante la etiqueta <p>. Observa que la


etiqueta de cierre del final incluye una barra inclinada.

<p>Párrafo</p>

Elementos estructurales
La estructura básica de un documento HTML consta de varios elementos que definen la
estructura y el contenido de una página web.

Element
Descripción Jerarquía
o

<!
Indica que el documento está bajo el estándar de
DOCTYPE Fuera de <html>
HTML5.
html>

Realizo: Ing. S.C. Erika Muciño Mancilla


Element
Descripción Jerarquía
o

Representa la raíz del documento HTML.


Contiene los elementos <head> y <body> . Es
<html> importante añadir el atributo lang para Raíz del documento
especificar el idioma del contenido, lo que
mejora la accesibilidad y optimiza el SEO.

Contiene metadatos sobre el documento, como


enlaces a hojas de estilo, scripts y otras
<head> configuraciones que no son visibles para el Dentro de <html>
usuario, pero que son esenciales para el
navegador.

Define los metadatos del documento, como la


codificación de caracteres ( charset="UTF-8" ), la
<meta> descripción ( name="description" ) o el autor. Dentro de <head>
Esto influye en la forma en que los motores de
búsqueda y navegadores interpretan la página.

Representa el título del documento. Se muestra


<title> Dentro de <head>
en la barra superior del navegador.

Enlaza documentos externos como hojas de


<link> Dentro de <head>
estilo CSS.

<style> Define CSS interno. Dentro de <head>

Define código JavaScript, que puede estar


embebido en el documento o enlazado a un
archivo externo. Puede colocarse Dentro de <head> o al
<script> en <head> para scripts que se cargan antes del
final de <body>
contenido, o al final de <body> para scripts que
se ejecutan después de cargar la página.

Contiene todo el contenido visible para el


<body> usuario. Sólo puede existir un Dentro de <html>
elemento <body> en el documento.
Tabla 1.2. Elementos estructurales

Etiquetas y atributos en HTML


Como se ha explicado en puntos anteriores, una etiqueta es un elemento que define la
estructura y el contenido de una página web. Las etiquetas se utilizan para marcar o
envolver diferentes partes del contenido, como textos, imágenes, enlaces, listas, entre
otros elementos. Por ejemplo, <p> define un párrafo y <img> define una imagen.
Por otro lado, un atributo proporciona información adicional sobre una etiqueta y suele
especificarse dentro de la etiqueta de apertura. Los atributos modifican el
comportamiento o la apariencia de las etiquetas y pueden ser obligatorios u opcionales
dependiendo del contexto.

Realizo: Ing. S.C. Erika Muciño Mancilla


Ejemplos:
1. En la etiqueta <html> , el atributo lang especifica el idioma del documento HTML.

<html lang="es">

2. En la etiqueta <meta> , el atributo charset especifica la codificación de caracteres


del documento HTML. Utilizamos charset="UTF-8" , ya que es la codificación compatible
con la mayoría de los caracteres de diferentes idiomas y nos permite una correcta
visualización del contenido en distintos navegadores. Ver más información
sobre sistemas de codificación.

<meta charset="UTF-8">

3. En la etiqueta <meta> , el atributo name especifica metadatos adicionales del


documento HTML, como el título o la descripción, lo cual es importante para el SEO y la
manera en que los motores de búsqueda indexan una página.

<meta name="title" content="Título de la web">

<meta name="description" content="Descripción de la web">

Comentarios
Los comentarios se escriben entre los caracteres que se muestran en el siguiente
ejemplo:

<!-- Esto es un comentario dentro de un documento HTML -->

<!--

/$$ /$$ /$$$$$$$$ /$$ /$$ /$$

| $$ | $$|__ $$__/| $$$ /$$$| $$

| $$ | $$ | $$ | $$$$ /$$$$| $$

| $$$$$$$$ | $$ | $$ $$/$$ $$| $$

| $$__ $$ | $$ | $$ $$$| $$| $$

| $$ | $$ | $$ | $$\ $ | $$| $$

| $$ | $$ | $$ | $$ \/ | $$| $$$$$$$$

|__/ |__/ |__/ |__/ |__/|________/

-->

Realizo: Ing. S.C. Erika Muciño Mancilla


Ejemplo práctico

Explicación del código:


 <!DOCTYPE html> : Declara que el documento está escrito en HTML5.
 <html lang="es"> : Indica el inicio del documento HTML y establece el idioma del
contenido como español, lo que ayuda con la accesibilidad y el SEO.
 <head> : Contiene metadatos sobre el documento.
 <title>Título de la WEB</title> : Define el título de la página web, que aparece en la
pestaña del navegador.
 <meta charset="UTF-8"> : Especifica la codificación de caracteres. En nuestro caso
usamos UTF-8 porque es una codificación de caracteres que permite representar
prácticamente todos los caracteres de los distintos lenguajes del mundo de manera
universal.
 <meta name="title" content="Título de la WEB"> : Proporciona información sobre el
título del documento.
 <meta name="description" content="Descripción de la WEB"> : Proporciona una
descripción del contenido de la página.
 <link href="estilos.css" rel="stylesheet"> : Enlaza un archivo CSS externo para dar estilo
a la página.
 <style> header {background-color: yellow;} </style> : Incluye un bloque de estilo CSS
que establece el color de fondo del elemento header como amarillo.
 <script src="script.js"></script> : Enlaza un archivo JavaScript externo.
 <script type="text/javascript"> /* Código JS */ </script> : Incluye un bloque de código
JavaScript interno.
 <body> : Contiene el contenido visible de la página web.
 ¡Hola Mundo! : Texto que se mostrará en la página web.
 <!-- Añade tu código HTML aquí --> : Un comentario HTML que no se mostrará en la
página web.

Realizo: Ing. S.C. Erika Muciño Mancilla


Etiquetas vacías o de autocierre en HTML
Las etiquetas vacías o de autocierre en HTML son aquellas que no contienen contenido
entre una etiqueta de apertura y una de cierre. Estas etiquetas se cierran
automáticamente dentro de la etiqueta de apertura. Algunos ejemplos de etiquetas
vacías o de autocierre son:
<br> : Salto de línea o línea de quiebre.
<hr> : Línea horizontal.
<img> : Imagen.
<input> : Campo de entrada de datos.
<meta> : Metadatos del documento.
<link> : Enlace a un recurso externo.
<wbr> : Salto de línea sugerido.

Realizo: Ing. S.C. Erika Muciño Mancilla

También podría gustarte