1-HTMLpara certificacion y avance.pptx.pdf

CURSO
FULL STACK DEVELOPER
NIVEL INICIAL
UNIDAD 1
Front-End: Maquetación web con HTML

Full Stack Developer
Inicial
Front-End: Maquetación web con HTML
UNIDAD 1
Front-End:
Maquetación web con HTML

Objetivos del módulo...
● Conocer conceptos básicos del lenguaje HTML,
su sintaxis y etiquetas.
● Diagramar la estructura básica de un documento
HTML.
UNIDAD 1
Front-End:

Lenguajes para el desarrollo web
Existen diferentes lenguajes que
permiten llevar el diseño en papel
(sketch) a una estructura que pueda
interpretar un computador.
UNIDAD 1
Front-End:

Editores de código
UNIDAD 1
Front-End:

Es un lenguaje de marcado de hipertexto,
que permite crear documentos para web:
● Etiqueta
● Atributo
● Estructura
● Elemento
HTML
UNIDAD 1
Front-End:

El CSS (hojas de estilo en cascada) es un
lenguaje de hojas de estilo, que permite
controlar la apariencia de una página web:
● Selectores
● Estilo
● Reglas
● Medidas
CCS
UNIDAD 1
Front-End:

HTML Y CSS se complementan
● HTML (hyper text markup language) da estructura y contenido.
● CSS (cascading style sheets) da estilo al contenido.
.html
(Estructura y contenido)
.css
(estilo, apariencia)
UNIDAD 1
Front-End:

Buena Práctica
● En el archivo con extensión html,
solo habrá HTML.
● En el archivo con extensión css,
solo habrá CSS.
UNIDAD 1
Front-End:

Convenciones para nombrar archivos
● No deben tener espacios, acentos, eñes, ni símbolos. Usar guiones(
“-” ,“_” ) ej: “mi-pagina-web”.
● Tienen que estar escritos en minúsculas.
● Deben tener la extensión “.html”.
UNIDAD 1
Front-End:

Convenciones para nombrar archivos
Atención: al guardar archivos en Windows, veriﬁcar que no se
guarden con la doble extensión de archivos (archivo.html.txt).
UNIDAD 1
Front-End:

Documento predeterminado
UNIDAD 1
Front-End:
Es el archivo que se carga cuando todavía no has hecho click en ningún link.
Debe llamarse index.html, ya que es el nombre estandarizado.

Documento predeterminado
Es el archivo que se carga cuando todavía no has hecho click en ningún
link.
Debe llamarse index.html, ya que es el nombre estandarizado.
UNIDAD 1
Front-End:

Ciclo de Desarrollo
abro index.html
edito y guardo
los cambios
refresco el
navegador
UNIDAD 1
Front-End:

Ciclo de Desarrollo
● Abro el archivo de extensión .html en VSCode
● Doble click en Chrome u otro navegador.
● Edito el archivo en VSCode.
● Guardo los cambios.
● Refresco el navegador.
● Veo los cambios.
UNIDAD 1
Front-End:

Etiquetas HTML
Las etiquetas HTML están delimitadas por un inicio < y
un ﬁnal >.
Por regla general toda etiqueta es un juego de pares:
una abre, otra cierra.
UNIDAD 1
Front-End:

Etiquetas HTML
UNIDAD 1
Front-End:
Un elemento HTML está deﬁnido por la etiqueta de apertura, un contenido
y la etiqueta de cierre. Elemento es “todo desde la etiqueta de apertura a la
de cierre”.
<etiqueta>
Contenido
</etiqueta>

Atributos de las etiquetas
Todas las etiquetas aceptan atributos, esto es, cualquier característica
que pueda ser diferente entre una etiqueta y la otra. El valor irá entre
comillas.
UNIDAD 1
Front-End:

Atributos de las etiquetas
<etiqueta atributo=”valor”>
Contenido
</etiqueta>
Cada una puede tener más de un atributo, separados entre sí por
espacios.
Los mismos sólo van en la etiqueta de de apertura.
UNIDAD 1
Front-End:

Etiquetas cerradas y abiertas
Las primeras encierran un contenido, por lo general texto, mientras que las
abiertas sirven, entre otras cosas, para incluir elementos como imágenes,
líneas, saltos de línea, etc.
UNIDAD 1
Front-End:

Etiquetas cerradas y abiertas
El signo “/” se utiliza para las etiquetas de cierre. En estas últimas se pone a
continuación del signo “<”, mientras que en las abiertas delante del signo “>”.
<p>Este es un párrafo con texto en su interior - Etiqueta Cerrada </p>
<br/> 
<hr/> 
UNIDAD 1
Front-End:

Ya no es una obligación poner el signo “ / ”. Por ejemplo, <img src=””>
funcionará correctamente, y lo mismo sucederá con <br>, <hr>, los meta tag.
Etiquetas abiertas en HTML5
UNIDAD 1
Front-End:

UNIDAD 1
Front-End:
Estructura básica
● <head>: es la parte privada del documento, que se utiliza como un
espacio de comunicación entre el sitio web y el navegador. Envuelve
<title>, etiquetas <meta> y las relacionadas con la importación de
documentos CSS y JS.

UNIDAD 1
Front-End:
Estructura básica
● <body>: encierra el contenido propiamente dicho del sitio.
Ambos deben estar dentro de un elemento principal: la etiqueta <html>.

UNIDAD 1
Front-End:
● <html>: Deﬁne que el documento está bajo el estándar de HTML. Abre y
cierra, por lo tanto es fundamental no olvidar la etiqueta </html> al
ﬁnalizar el documento.
Estructura básica

UNIDAD 1
Front-End:
● <title>: Deﬁne el título de la página, el cual será visualizado en la
solapa del navegador.
Estructura básica

UNIDAD 1
Front-End:
● <meta>: Añade información sobre la página, desde la cual pueden
valerse los buscadores, puede deﬁnir el idioma y la codiﬁcación en la
cual está escrita la página.
Estructura básica

UNIDAD 1
Front-End:
Cuando escribes tu documento HTML, lo primero que debes hacer
es escribir el DOCTYPE, el cual declara el tipo de documento.
DOCTYPE
<!DOCTYPE html>
Tips: https://www.w3.org/QA/Tips/Doctype.html.es

UNIDAD 1
Front-End:
Sirve para indicar que tu documento está escrito siguiendo la estructura
determinada por una DTD (Document Type Deﬁnition) concreta.
DOCTYPE

UNIDAD 1
Front-End:
- Se deﬁnen dentro de: 
- No se muestran en el navegador.
COMENTARIOS

UNIDAD 1
Front-End:
Tipos de etiquetas: Grupo general
Todas las etiquetas que van dentro del <body></body> se dividen en
dos grupos:
● Elementos de bloque
● Elementos de línea

UNIDAD 1
Front-End:
<h1> a <h6> (de bloque): un encabezado es el
texto que encabeza o titula el contenido que
sigue. Se puede tratar de un artículo, un texto o
una sección del documento que estamos
viendo.
<h1>
Elemento de Bloque
</h1>
<h2>
Elemento de Bloque
</h2>

UNIDAD 1
Front-End:
<h1>
Elemento de Bloque
</h1>
<h2>
Elemento de Bloque
</h2>
Existen 6 niveles:
del <h1></h1> al <h6></h6>
Esta jerarquía se debe respetar en cada
documento HTML que forme parte del sitio
web.

UNIDAD 1
Front-End:
● <p></p>
● <br/> (de bloque)
● <em> (de línea)
● <strong> (de línea)
● <div> (de bloque)
● <span> (de línea):
Etiquetas HTML:

UNIDAD 1
Front-End:
Utilizaremos todas
estas etiquetas en
nuestro primer
ejemplo de
estructura web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primer sitio web</title>
</head>
<body>
<h1>Encabezado nivel 1</h1>
<h2>Mi nombre es:</h2> Tu Nombre y Apellido
<h2>Objetivos del curso:</h2> Lorem ipsum
<h3>Mini bio:</h3> Lorem ipsum
</body>
</html>

UNIDAD 1
Front-End:
HTML5
HTML5 incorpora etiquetas semánticas
que no sólo generan estructura, sino que
también indican el tipo de contenido al
desarrollador y al navegador web.

UNIDAD 1
Front-End:
Etiquetas HTML5
● <section>: Define una sección en un documento.
● <nav>: Define un bloque que contiene enlaces de navegación.
● <article>: Define contenido autónomo que podría existir
independientemente del resto del contenido.

UNIDAD 1
Front-End:
Etiquetas HTML5
● <aside>: Deﬁne contenidos relacionados con el resto del
contenido de la página.
● <main>: Deﬁne el contenido importante en el documento.
Solamente existe un elemento <main> en el documento.

UNIDAD 1
Front-End:
Etiquetas HTML5
● <header>: Define la cabecera de una página o sección.
<footer>: Define el pie de una página o sección.
● <form>: Define un formulario

UNIDAD 1
Front-End:
Multimedia en html

UNIDAD 1
Front-End:
<img src="smiley.gif" alt="Carita sonriente" />
El “alt” es un texto que debe representar la foto que se está visualizando.
Debe ser conciso y breve, dejando en claro de qué se trata la imagen.
ALT

UNIDAD 1
Front-End:
<video src="mivideo.mp4" controls>
Tu navegador no implementa el elemento
<code>video</code>.
</video>
Etiqueta video

UNIDAD 1
Front-End:
<audio src="perfect.mp3" preload="auto"
controls></audio>
Etiqueta de audio

UNIDAD 1
Front-End:
● Controls
● Autoplay
● Loop
● Preload
Atributos de la etiqueta <AUDIO>

UNIDAD 1
Front-End:
Atributos de la etiqueta <AUDIO>
● "none"
● "auto"
● "metadata"

UNIDAD 1
Front-End:
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Tu navegador no implementa el elemento <code>video</code>.
</video>
Se pueden especiﬁcar múltiples fuentes de archivos usando el elemento
<source>, para proporcionar vídeo o audio codiﬁcados en formatos
diferentes.

UNIDAD 1
Front-End:
<iframe src="pagina_fuente.html" width=290 height=250>Texto para cuando el navegador no
conoce la etiqueta iframe</iframe>
Etiqueta IFRAME
Es un elemento HTML que permite insertar o incrustar un documento
HTML dentro de un documento HTML principal.

UNIDAD 1
Front-End:
Etiqueta IFRAME

UNIDAD 1
Front-End:
HTML: Listas y formularios

UNIDAD 1
Front-End:
● Comprender la sintaxis de HTML.
● Conocer las diferentes etiquetas y el uso de cada una.
● Dominar el concepto de web semántica, y las etiquetas
HTML5 de estructura.
OBJETIVOS

UNIDAD 1
Front-End:
● HTML: es un "lenguaje" de marcado de etiquetas, que permite crear
documentos para web.
● Doctype: Sirve para indicar que tu documento está escrito
siguiendo la estructura determinada por un DTD concreto.

UNIDAD 1
Front-End:
Listas

UNIDAD 1
Front-End:
TIPOS DE LISTAS
Listas no ordenadas Listas ordenadas Listas de descripción

UNIDAD 1
Front-End:
Tipos de listas
Casos de uso: paso a paso de un procedimiento (como una receta de
cocina); características de un elemento; galería de imágenes; el menú de
una página web, etc.

UNIDAD 1
Front-End:
● Las listas numéricas establecen un orden en la lectura de sus
ítems.
● Las listas de viñetas no representan ningún orden o importancia
entre sus ítems. Son elementos compuestos.
¿Viñetas o números?

UNIDAD 1
Front-End:
● <ol>: define una lista ordenada de artículos (numéricas).
● <ul>: define una lista de artículos sin orden (viñetas).
● <li>: define un artículo de una lista.
¿Viñetas o números?

UNIDAD 1
Front-End:
<ul>
<li>Empresa</li>
<li>Producto</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
Ambas listas se deben insertar mediante la etiqueta <li></li> (list-item).
(empresa con listado/sin orden)
● Empresa
● Producto
● Servicios
● Contacto
Ejemplo

UNIDAD 1
Front-End:
● Computadoras portátiles:
- Procesador I4.
- Procesador I5.
● Computadoras de escritorio:
- Procesador Pentium.
- Procesador Celeron.
Anidar listas

UNIDAD 1
Front-End:
Una lista de descripción es una lista de términos, con una descripción de cada
uno.
La etiqueta <dl> define la lista de descripción; la etiqueta
<dt> define el término, nombre o ítem y la etiqueta <dd>
describe cada término, nombre o ítem.
Listas de descripción

UNIDAD 1
Front-End:
Listas de descripción
<dl>
<dt>Café</dt>
<dd>bebida que proviene
de una planta</dd>
<dt>Leche</dt>
<dd>bebida que se
extrae de un
mamífero</dd>
</dl>

UNIDAD 1
Front-End:
Formularios

UNIDAD 1
Front-End:
El elemento HTML <form> se usa para capturar datos ingresados por el
usuario. Su propósito principal es permitir al usuario seleccionar o
insertar información y enviarla al servidor para ser procesada.
Formularios

UNIDAD 1
Front-End:
Formularios
El formulario es un contenedor de distintos tipos de <input> (text
ﬁelds, checkboxes, radio buttons, submit buttons, etc)

UNIDAD 1
Front-End:
Los formularios requieren de ciertos atributos para determinar cómo
se envía la información al servidor:
● name—Especiﬁca el nombre del formulario.
● method—Determina el método a utilizar para enviar la
información al servidor.
Formularios

UNIDAD 1
Front-End:
Formularios
method:
● GET se usa para enviar una cantidad limitada de información de
forma pública (los datos son incluidos en la URL)
● POST se utiliza para enviar una cantidad ilimitada de información
de forma privada

UNIDAD 1
Front-End:
Formularios
● action—Declara la URL del archivo en el servidor.
● target—Determina dónde se mostrará la respuesta recibida desde
el servidor: _blank (nueva ventana), _self (mismo recuadro), _parent
(recuadro padre), y _top (la ventana que contiene el recuadro). El
valor _self se declara por defecto.

UNIDAD 1
Front-End:
Formularios
● enctype—Este atributo declara la codiﬁcación aplicada a los
datos que envía el formulario. Puede tomar tres valores:
1)application/x-www-form-urlencoded (por defecto),
2)multipart/form-data, 3)text/plain.

UNIDAD 1
Front-End:
Formularios
● accept-charset—Este atributo declara el tipo de codiﬁcación aplicada al
texto del formulario. Los valores más comunes son UTF-8 e ISO-8859-1.
El valor por defecto se asigna al documento con el elemento <meta>,
ubicado en la sección <head>.

UNIDAD 1
Front-End:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Formularios</title>
</head>
<body>
<section>
<form name="formulario" method="get" action="procesar.php">
</form>
</section>
</body>
</html>
Ejemplo

UNIDAD 1
Front-End:
Un formulario puede incluir diferentes herramientas para permitir al
usuario seleccionar o insertar información. HTML incluye múltiples
elementos para crear estas herramientas.
Elementos

UNIDAD 1
Front-End:
● <input>—Este elemento crea un campo de entrada.
● <textarea>—Crea un campo de entrada para insertar múltiples líneas de
texto. El tamaño se puede declarar en números enteros usando los
atributos rows y cols, o en píxeles con estilos CSS.
Elementos más utilizados

UNIDAD 1
Front-End:
● <select>—Este elemento crea una lista de opciones que el
usuario puede elegir. Trabaja junto con el elemento <option>
para deﬁnir cada opción y el elemento <optgroup> para
organizar las opciones en grupos.

UNIDAD 1
Front-End:
● <button>—Crea un botón. Incluye el atributo type para deﬁnir el propósito
del botón. Los valores disponibles son submit para enviar el formulario
(por defecto), reset para reiniciar el formulario, y button para realizar
tareas personalizadas.

UNIDAD 1
Front-End:
● <label>—Crea una etiqueta para identiﬁcar un elemento de formulario.
● <ﬁeldset>— Agrupa otros elementos de formulario para crear secciones
dentro de formularios extensos. Puede contener un elemento <legend>.

UNIDAD 1
Front-End:
Puede adoptar diferentes características y aceptar varios tipos de
valores dependiendo del valor de su atributo type.
Elemento INPUT

UNIDAD 1
Front-End:
● text—Entrada para texto genérico.
● email—Entrada para cuentas de correo.
● search—Entrada para términos de búsqueda.
● tel—Entrada para números de teléfono.
● number—Entrada para insertar números.
Valores más comunes de INPUT

UNIDAD 1
Front-End:
● range—Entrada para un rango de números.
● date—Entrada para insertar una fecha.
● datetime-local—Entrada para insertar fecha y hora.
● week—Entrada para número de la semana.
● month—Entrada para insertar el número del mes.

UNIDAD 1
Front-End:
● time—Entrada para insertar horas y minutos.
● hidden—Oculta el campo de entrada.
● password—Entrada para insertar una clave.
● color—Entrada para insertar un color.

UNIDAD 1
Front-End:
● checkbox—Permite al usuario activar o desactivar una opción.
● radio—Botón de opción.
● ﬁle—Entrada para seleccionar un archivo en la computadora o
dispositivo del usuario.

UNIDAD 1
Front-End:
● button—Este valor genera un botón. El botón trabaja como el
elemento <button> de tipo button. No realiza ninguna acción
por defecto; la acción debe ser deﬁnida desde JavaScript.

UNIDAD 1
Front-End:
● submit—Botón para enviar el formulario.
● reset—Botón para reiniciar el formulario.
● image—Este valor carga una imagen que se usa como botón
para enviar el formulario, debe incluir el atributo src para
especiﬁcar la URL de la imagen.

UNIDAD 1
Front-End:
Para incluir un formulario en nuestro documento, tenemos que
declararlo con el elemento <form>, y luego incorporar en su interior
todos los elementos que el usuario necesitará para insertar la
información y enviarla al servidor.

UNIDAD 1
Front-End:
Si queremos que el usuario inserte su nombre y edad, tenemos
que incluir dos campos de entrada para texto y un tercer elemento
para crear el botón con el que enviar el formulario.
Ejemplo

UNIDAD 1
Front-End:
<form name="formulario" method="get" action="procesar.php">
<input type="text" name="nombre">
<input type="text" name="edad">
<input type="submit">
</form>
Ejemplo

UNIDAD 1
Front-End:
<form>
<input type="submit" value="Enviar formulario"/>
<input type="reset" value="Limpiar formulario"/>
<input type="button" value="Sin acciones"/>
</form>
Representa la etiqueta del botón, la cual es normalmente mostrada
por los navegadores dentro de éste.
Atributo “VALUE”

UNIDAD 1
Front-End:
<form>
<input type="submit" value="Enviar formulario"/>
<input type="reset" value="Limpiar formulario"/>
<input type="button" value="Sin acciones"/>
</form>
● Input de tipo “submit”: envía el formulario.
● Input de tipo “reset”: resetea el formulario.
● Input de tipo “button”: no tiene acciones por defecto.

UNIDAD 1
Front-End:
Controles de selección
En estos casos, el usuario no puede ingresar libremente un texto,
sino que el programador le da una lista predeﬁnida. El dato que
llega al elegir una opción se deﬁne desde el atributo “value”.

UNIDAD 1
Front-End:
Grupos de controles de selección
● Botones de radio: sólo se puede elegir una opción.
● Casillas de chequeo: de toda la lista de opciones, el usuario
puede optar por una, todas o ninguna opción.
● Menú desplegable: sólo es posible seleccionar una opción.

UNIDAD 1
Front-End:
Es el valor que se enviará al enviarse el formulario.
Botones de radio:
<form>
<div>hombre</div>
<input type="radio" name="genero" value="hombre" />
<div>mujer</div>
<input type="radio" name="genero" value="mujer" />
<div>otro</div>
<input type="radio" name="genero" value="otro" />
</form>

UNIDAD 1
Front-End:
Casillas de chequeo:
<form>
<div>Acepta términos y condiciones</div>
<input type="checkbox" name="acepta" value="1" />
</form>

UNIDAD 1
Front-End:
Etiqueta <LABEL>
<form>
<label for="nombre_apellido">Nombre:</label>
<input type="text" name="nombre_apellido" />
</form>
Deﬁne formalmente a cada elemento de un formulario. Ayuda a
generar un formulario accesible.

UNIDAD 1
Front-End:
<form>
<label for="nombre_apellido">Nombre:</label>
<input type="text" name="nombre_apellido" />
</form>
Su principal atributo es “for”, que va a referenciar a “label” con su
elemento del formulario. El valor “for” debe ser igual al valor “id” o
“name” del elemento.
Etiqueta <LABEL>

UNIDAD 1
Front-End:
<form>
<select name="talles">
<option value="L">Large</option>
<option value="M">Medium</option>
<option value="S">Small</option>
</select>
</form>
Es el llamado combo-box, selector o menú. De toda la lista, se puede
elegir una opción (aunque tiene un atributo que permite cambiarlo).
Menú desplegable

UNIDAD 1
Front-End:
Conjunto de campo
Las etiquetas <fieldset> y <legend> se utilizan en conjunto. La primera,
crea grupos de elementos del formulario que posean un mismo
propósito; la segunda, define formalmente el propósito del elemento
fieldset.

UNIDAD 1
Front-End:
Conjunto de campo
<form>
<ﬁeldset>
<legend>Talle de remera</legend>

</ﬁeldset>
</form>
Se estructuran de la siguiente manera:

UNIDAD 1
Front-End:
Atributos globales
HTML deﬁne atributos globales que son exclusivos de
elementos de formulario:
● required.
● disabled.
● readonly.

UNIDAD 1
Front-End:
● placeholder.
● autocomplete.
● novalidate.
● multiple.
● autofocus.
● pattern.
● spellcheck.
Atributos globales

UNIDAD 1
Front-End:
Los atributos disabled y readonly no permiten al usuario interactuar
con el elemento.
● disabled: Mostrar al usuario que el elemento puede estar
disponible en otras condiciones.
Atributos globales

UNIDAD 1
Front-End:
● readonly: Se implementa cuando solo existe un valor posible y no
queremos que el usuario lo cambie.
Atributos globales

UNIDAD 1
Front-End:
ENLACES

UNIDAD 1
Front-End:

UNIDAD 1
Front-End:
Los enlaces, también conocidos como links o anchors, se utilizan
para relacionar partes del mismo documento. Por defecto, se
visualizan azules y subrayados.
Arquitectura de un sitio

UNIDAD 1
Front-End:
<a href="productos.html">Productos</a>
Para crear uno, es necesario utilizar la etiqueta de ancla <a> con el
atributo “href”, que establecerá el destino al que apunta. Por ejemplo:
Arquitectura de un sitio

UNIDAD 1
Front-End:
ENLACES RELATIVOS, ABSOLUTOS E
INTERNOS

UNIDAD 1
Front-End:
Enlaces relativos
<a href="contacto.html">Contacto</a>
Los enlaces relativos son aquellos que apuntan a páginas ubicadas
dentro del mismo proyecto.

UNIDAD 1
Front-End:
<a href="imagenes/mapa.jpg">ver mapa</a>
Enlaces relativos
En caso de que el archivo se encuentre en un directorio especíﬁco, el
mismo deberá ser mencionado.

UNIDAD 1
Front-End:
<a href="http://www. fullstack.com/frontend">Desarrollo Web</a>
Enlaces absolutos
Los enlaces absolutos son aquellos cuyo destino apunta a un
documento que está fuera del sitio, y debe ser especiﬁcado
utilizando la URL completa:

UNIDAD 1
Front-End:
Enlaces internos
<a href="#pie">Ir al pie de página</a>
...
<footer id="pie"></footer>
Los enlaces internos permiten referenciar secciones de tu página, para lo
cual se utiliza el id:

UNIDAD 1
Front-End:
Enlaces internos
También puedes usar como destino una sección especíﬁca que se
encuentre en una página distinta de la actual:
<a href="contacto.html#formulario">Formulario de contacto</a>

1-HTMLpara certificacion y avance.pptx.pdf

Más contenido relacionado

Similar a 1-HTMLpara certificacion y avance.pptx.pdf (20)

Más de AlexBaldeon2 (20)

Último (20)

1-HTMLpara certificacion y avance.pptx.pdf