Scribd
Cargar
8 vistas50 páginas

HTML

El documento es una introducción a HTML, el lenguaje de marcado estándar para crear páginas web, que incluye elementos, etiquetas y su uso. Se explican conceptos básicos como la estructura de un documento HTML, tipos de etiquetas, listas, tablas, formularios y buenas prácticas. Además, se presentan ejemplos de etiquetas y su funcionalidad en la creación de contenido web.

Cargado por

Marcelo Caballero
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
8 vistas50 páginas

HTML

El documento es una introducción a HTML, el lenguaje de marcado estándar para crear páginas web, que incluye elementos, etiquetas y su uso. Se explican conceptos básicos como la estructura de un documento HTML, tipos de etiquetas, listas, tablas, formularios y buenas prácticas. Además, se presentan ejemplos de etiquetas y su funcionalidad en la creación de contenido web.

Cargado por

Marcelo Caballero
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/ 50

Introducción a HTML

Hyper Text Markup Language

Estándar para la creación de


¿Que es HTML? páginas web

Colección de elementos que le


indican al navegador que
mostrar
¿HTML es un lenguaje
de programación?

¿Si? ¿No? ¿Qué


creen¨?
¿Como se relacionan?

HTML JavaScript CSS


Elementos HTML
Ejemplo de
algunas
etiquetas...
Elementos
HTML
anidados
Explicación del ejemplo anterior

<html>Elemento raíz</html>

<body>
Elemento cuerpo de la página
</body>
Nunca se
olviden de
cerrar las
etiquetas...
Tipos de etiquetas
Etiquetas cerradas y abiertas

<p>Etiqueta Cerrada</p>

<hr/>
¿Cómo se
hacen
comentarios
en HTML?
Atributos HTML
¡Tu primer página
HTML!
Elementos básicos de HTML
Etiqueta para titulos

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
Etiqueta para textos o
parrafos

<p>
Etiqueta para textos define
importancia

<strong>
Etiqueta para textos define
énfasis

<em>
Etiqueta para saltos de linea

<br>
Etiqueta utilizada para dibujar una
linea horizontal

<hr>
Etiqueta utilizada para links o
redireccionamiento

<a>
Etiqueta utilizada para mostrar un
imagen

<img>
Etiqueta utilizada para agrupar otros
elementos, es un contenedor generico

<div>
Etiqueta utilizada para agrupar otros
elementos, Define una sección de texto
en línea

<span>
Define el pie de página de un documento
o sección, contiene informacion extra

<footer>
Etiqueta para agrupar un conjunto de
enlaces de navegación dentro de una
página web

<nav>
Listas
Existen 3 tipos de listas
listas ordenadas
listas desordenadas
listas de Definición
Lista ordenada
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>

Se define una lista ordenada encerrando etiquetas <li>


entre etiquetas <ol>, cada etiqueta <li> representa un
elemento de la lista
Lista desordenada
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

Se define una lista desordenada encerrando etiquetas


<li> entre etiquetas <ul>, cada etiqueta <li> representa
un elemento de la lista
Lista de Definición
<dl>
<dt>Término 1</dt>
<dd>Definición del término 1</dd>
<dt>Término 2</dt>
<dd>Definición del término 2</dd>
<dt>Término 3</dt>
<dd>Definición del término 3</dd>
</dl>

Se define una lista de definicion encerrando etiquetas


<dt> y <dd> entre etiquetas <dl>, cada etiqueta <dt>
representa un titulo/termino y cada etiqueta <dd> es la
definicion del titulo/termino
Herramienta inspeccionar
Nos permite ver informacion de la
pagina web, consola, html, peticiones
externas, imagenes
Buenas practicas
Emplear etiquetas que representen correctamente el contenido.
Indentar correctamente.
Utilizar comentarios para clarificar secciones.
Incluir atributos “alt” en imágenes.
Preguntas?
Break 15 min
Mas Etiquetas
Tablas
La etiqueta <table> define una tabla como en la imagen.
se divide en dos partes, encabezado y datos
Iframe
Un iframe es un elemento HTML que permite incrustar otra página
web dentro de una página actual.

Se puede mostrar cualquier contenido web, un video, una página


web completa, un mapa interactivo

El contenido del iframe está aislado del resto de la página principal

Conseguir iframe enVideo de ejemplo


Forms
Un formulario en HTML permite a los usuarios enviar datos a un
servidor o procesarlos dentro de la misma página. Se utiliza la
etiqueta form para agrupar los campos del formulario.
Label
La etiqueta label se utiliza para poner un titulo a un campo y se
puede asociar a otro elemento (input, textarea, select)
Input
La etiqueta input representa una caja para ingresar
texto, su funcionamiento varia con el atributo type (text,
number,password,email)
Textarea
La etiqueta textarea se utiliza para ingresar cadenas de texto
mayores a las del input
Button
La etiqueta button representa un boton generico y si
se le agrega el type submit se configura para el envio
del formulario
Select
La etiqueta select representa un input de opciones, donde
cada etiqueta option representa una de estas opciones
Checkbox y Radio
La etiqueta input tiene dos types especiales que son
“checkbox” y “radio” que trabajan en grupo y se asocian
entre si con el atributo name
Article
Un article es un elemento HTML que representa un
contenido independiente y autocontenido
Aside
Un aside es un elemento HTML que representa un
contenido complementario ubicado al costado de un
contenido principal.
Details
Un details es un elemento interactivo que permite mostrar o ocultar
informacion
Section
Un Section es un elemento HTML que se usa para
separar el contenido por temas
fieldset
Un fieldset es un elemento HTML que se usa para
crear un marco de separacion
Legend
Un legend es un elemento HTML que se usa para
crear un titulo sobre la linea de un fieldset
Preguntas?

También podría gustarte