Scribd
Cargar
18 vistas21 páginas

1.2.3 HTML5

El documento proporciona una introducción a HTML5, describiendo su estructura, etiquetas y características principales. Se detalla el uso de un editor de texto como Visual Studio Code y se explican las etiquetas más comunes, así como la estructura básica de un documento HTML. Además, se abordan elementos como hipervínculos, imágenes, listas y tablas, esenciales para el diseño de páginas web.

Cargado por

ma.mendezt
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 PPTX, PDF, TXT o lee en línea desde Scribd
18 vistas21 páginas

1.2.3 HTML5

El documento proporciona una introducción a HTML5, describiendo su estructura, etiquetas y características principales. Se detalla el uso de un editor de texto como Visual Studio Code y se explican las etiquetas más comunes, así como la estructura básica de un documento HTML. Además, se abordan elementos como hipervínculos, imágenes, listas y tablas, esenciales para el diseño de páginas web.

Cargado por

ma.mendezt
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 PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 21

CONTENIDOS

• Editor de Texto
• ¿qué es HTML5?
• Estructura de una etiqueta
• Estructura de una página
• Meta datos
• Etiquetas más usadas
• Hipervínculos
• Imágenes
• Listas No ordenadas
• Listas Ordenadas
• Tablas
EDITOR DE TEXTO

Para crear páginas web basta con un simple block de notas, pero este no
tiene las funciones y ventajas de un editor especializado. Para los ejercicios
y proyectos de este curso utilizaremos Visual Studio Code. Para instalarlo en
su notebook o computador de su hogar debe descargarlo (es gratis) desde
el siguiente enlace:

https://code.visualstudio.com/download

Para probar el funcionamiento de pequeños


trozos de código puede usa el editor en línea
desde el siguiente enlace:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editors
¿QUÉ ES HTML5?

HTML5 es el Lenguaje de Marcas de Hipertexto versión 5.

HTML es un lenguaje de marcas de hipertexto, permite crear archivos web


que serán servidos o entregados por un servidor web y enviados a un cliente
(browser o navegador) el cual interpretará las instrucciones del lenguaje y
mostrará el resultado por pantalla u otro medio.
¿QUÉ ES HTML5?

HTML5 implementa un conjunto de mejoras, entre las cuales podemos


mencionar las siguientes:

• Permite describir con mayor precisión cuál es su contenido.

• Permite comunicarse con el servidor de formas nuevas e innovadoras.

• Permite a las páginas web almacenar datos localmente en el lado del


cliente y operar sin conexión de manera más eficiente.

• Nos otorga un excelente soporte para utilizar contenido multimedia


como lo son audio y video nativamente.
¿QUÉ ES HTML5?

• Proporciona una amplia gama de nuevas características que se ocupan


de los gráficos vectoriales escalables (SVG) y la opción de dibujar en
canvas.

• Proporciona una mayor optimización de la velocidad y un mejor uso del


hardware.

• Proporciona APIs para el uso de varios componentes internos de entrada


y salida de nuestro dispositivo.

• Nos ofrece una nueva gran variedad de opciones para hacer diseños más
sofisticados.
ESTRUCTURA DE UNA ETIQUETA

HTML5 está compuesto por un conjunto de etiquetas, marcas o tags. Cada


una de estas marcas tiene un significado que es conocido por el navegador.
Estas etiquetas son interpretadas por el navegador y este realiza una acción
específica sobre un contenido.

Existen etiquetas que permiten dar formato, otras que definen un


comportamiento, otras que son semánticas, es decir le dan sentido al
contenido.
ESTRUCTURA DE UNA ETIQUETA

Las etiquetas son elementos del lenguaje HTML5 que se encuentras


rodeadas de los signos < y >

Normalmente las etiquetas vienen en pares <tag> y </tag> para indicar en


inicio y término de la etiqueta.

Existen etiquetas que sólo tienen apertura y su estructura es <tag />


ESTRUCTURA DE UNA ETIQUETA

La estructura de un tag es la siguiente:

<tag atributo1=“valor” atributo2=“valor”>contenido</tag>

Dónde:
tag y /tag representan a la etiqueta de apertura y de cierre
atributo1=“valor” representan al par ordenado de atributo y valor.
contenido representa al contenido sobre el cual se aplica lo descrito en los
tags y en los atributos.
ESTRUCTURA DE UNA ETIQUETA

La definición del lenguaje permite que las etiquetas estén anidadas, es decir
que una etiqueta contenga a la otra.

Si bien lo anterior se puede hacer existe un conjunto de reglas establecidas


respecto a la estructura y contenido y a la sintaxis de un documento, el cual
está definido en la DTD del documento.

La DTD (Document Type Definition) es el encargado de definir la estructura


de sintaxis del documento de marcas. En HTML 5 se establece mediante:

<!DOCTYPE html>
ESTRUCTURA DE UN
DOCUMENTO HTML
Un documento HTML5 tiene una estructura <!DOCTYPE html>
estándar, esta se muestra en la figura de la <html>
derecha. Esta estructura tiene en su primera <head>
línea un DTD (<!DOCTYPE html>), luego inicia
<!-- cuerpo
con <html> y la última línea cierra con </html>.
-->
Luego hay dos áreas: Head y Body. Ambas se </head>
inician y finalizan. <body>
<!-- cuerpo
Al muy importante es que este documento se -->
debe grabar con la extensión .html </body>
</html>
ESTRUCTURA DE UN
DOCUMENTO HTML

<head>: En esta área realizaremos diversas configuraciones de la página,


por ejemplo: Agregar un título de la página a la etiqueta del navegador,
configurar el set de caracteres, metadatos, etc.

<head>
<title>Formulario de Ingreso</title>
<meta charset="utf-8">
<meta name="author" content=“formulario">
</head>
ESTRUCTURA DE UN
DOCUMENTO HTML

<body>: En esta área realizaremos el diseño de la página mediante el uso


de diferentes tag, por ejemplo:

<body>
<h1>Formulario de Ingreso</h1>
<br>
</body>
META DATOS DEL DOCUMENTO

Tabla con ejemplo de tag a utilizar en el área de HEAD.


ETIQUETAS MAS USADAS

Son muchos los tag usados para el diseño de una página web, a
continuación se muestra una tabla con los mas usados.
ETIQUETA DE HIPERVÍNCULOS

El Elemento HTML Anchor <a> crea un enlace a otras páginas de internet,


archivos o ubicaciones dentro de la misma página, direcciones de correo, o
cualquier otra URL.
ETIQUETA PARA MOSTRAR
IMÁGENES
El elemento de imagen HTML <img> representa una imagen en el
documento.

Algunos atributos usados con <img>:

• Width: El ancho de la imagen en píxeles.

• Height: La altura de la imagen en píxeles.

• Alt: Este atributo define el texto alternativo que describe la imagen,


texto que los usuarios verán si la URL de la imagen es errónea o la
imagen tiene un formato no soportado o si la imagen aún no se ha
descargado.
ETIQUETA PARA MOSTRAR
IMÁGENES
Ver el código del siguiente ejemplo:
LISTAS NO ORDENADAS

El tag <ul> permite mostrar elementos antecedidos por un símbolo, es puede


ser una viñeta, círculo o cuadrado. Ver el siguiente ejemplo:
LISTAS ORDENADAS

El tag <ol> permite mostrar elementos antecedidos por un número


correlativo, letra o, número romano. Ver el siguiente ejemplo:
TABLAS

Las tablas permiten organizar datos en filas y columnas. Toda tabla


comienza con <table> y finaliza con </table>, para las filas se usa el tag <tr>,
para las celdas de encabezados se usa el tag <th> y para las celdas de
datos el tag <td>. Ver el siguiente ejemplo:
PGY3121 Programación Web

También podría gustarte