Clase 3

HTML Parte 2
 Sitios para alojar nuestro proyecto
Existen varios sitios gratuitos para subir nuestro proyecto:

https://firebase.google.com/docs/hosting/quickstart es un poco mas complicado

https://app.netlify.com/drop , éste último es muy sencillo, registrarse, arrastrar y soltar la

carpeta del proyecto, te brinda un link de tu sitio para que puedas compartir
TP1 - Estructura de Carpetas Proyecto Web

https://profe-pinco-tp1-
sinfmt.netlify.app/index.ht
ml
 TP1 Explicación
sitio de ejemplo: https://profe-pinco-tp1-
sinfmt.netlify.app/

Crear un sitio con la estructura que se muestra en ese proyecto.

Podes elegir la temática que prefieras.
Netify - https://app.netlify.com/
https://app.netlify.com/ EMULADOR de DEPLOYMENT
Es una página web que permite subir nuestros proyectos y
permite compartirlos sin necesidad de instalar ningún servidor.
Nos permite hacer los DEPLOYMENT de los proyectos en
CLOUD.
Nos da un enlace y permite compartir nuestros proyectos con
otros. Ej:
Borrar: SiteSettings, abajo botón Delete this Site
https://profe-pinco-clase2.netlify.app/

Ejemplos de la Clase 2
 Etiquetas básicas
<h1>, <h2>, <h3>….<h6>:
encabezados, numerados del 1 al 6
por orden de relevancia. Es
importante respetar ese orden para
que el navegador entienda la
estructura de la página.
<p>: representa un párrafo.
<!-- comentario --> : se utiliza para
añadir comentarios dentro del código
que el usuario no podrá ver.
Etiquetas de texto
<b>: Texto en negrita o bold
<mark>: Texto marcado
<ins>: Texto insertado
<small>: Texto más pequeño
<i>: Texto en Itálica o cursiva
<del>: - Texto tachado
<sup>: Texto en superíndice
<sub>: Texto del subíndice
 Elementos Inline y Block

HTML clasifica a todos los elementos en dos grupos: inline y block.

De forma predeterminada, los elementos en bloque comienzan en una nueva línea y los
elementos en línea pueden comenzar en cualquier parte de una línea.

INLINE BLOCK

<a>, <img>, <span>, <b>, <div>, <p>, <h1>..<h6>, <ul>,

<strong> <ol>, <li>, <table>, <form>, etc
<mark>, <sub>, etc
 Enlaces o Hipervínculos
• La posibilidad de enlazar unas páginas con otras a través de LINKS
• Utilizamos el elemento “<a>" y con el atributo "href" (Hypertext Reference).
Por ejemplo:
<a href = “https://www.google.com” target = “_blank” > Google </a>
Hay 3 tipos de enlaces:
Absoluto: es un enlace que incluye todas las partes de una URL.
Relativo: hace referencia a un recurso que se encuentra en una posición relativa a
nuestra URL. Ejemplo: <a href="img/imagen1.jpg">enlace a una imagen</a>
Ancla: (o anchor): a diferencia de los dos anteriores, este enlace se utilizar para
indicar un elemento dentro de la misma página que estamos viendo.
 Enlaces para Envios Mail

Para el envío de mail se utiliza etiqueta <a>

y el atributo href=”mailto:info@gmail.com”

<p>Envíame tus sugerencias de recetas a mi correo:

<a href="mailto:ejemplo@mail.com">ejemplo@mail.com</a>
</p>
 Imágenes
Para mostrar una imagen en una página tenemos dos formas de hacerlo, una es
usando el elemento <img/> y otras es mediante CSS (que veremos más adelante).
Esta etiqueta sólo requiere de dos atributos obligatorios que son:
src (de source) y alt (de alternative).

Por ejemplo:
<img src= "https://picsum.photos/200" alt= “Imagen de Picsum“>
<img src= "../img/foto1.jpg" alt= “Imagen de Picsum“>
 Imágenes con Enlace

Para poner una imagen que te lleve a un enlace hay que hacer:
crear un enlace <a>
añadir en su interior una imagen en lugar de texto
Veamos un ejemplo:
<a href= "http://aprenderaprogramar.com" >
<img src= "http://i.imgur.com/SpZyc.png"
alt= "Curso de HTML desde cero">
</a>
 Listas
Ejemplo:
<ul>: UNSORTED LIST <h3>Lista desordenada</h3> Mira el resultado acá:
lista desordenada. <ul> https://jsbin.com/birojac/edit?html,output
<li>Lunes</li>
<ol>: ORDERED LIST <li>Martes</li>
lista ordenada.
<li>Miércoles</li>
</ul>
<li>: LIST ITEM
representa un elemento <h3>Lista ordenada</h3>
de la lista y su padre <ol>
siempre tiene que ser <li>Enero</li>
una etiqueta ol o ul. <li>Febrero</li>
<li>Marzo</li>
</ol>
 Tablas
Para crear tablas se utiliza la etiqueta table y se indican las filas y columnas utilizando tr (table row) y
td (table data).
<table> table: contenedor principal
<tr> tr: representa una fila de la tabla
<th>Día</th> th: representa a una celda de encabezado en una tabla
<th>Mes</th>
</tr>
<tr>
<td>10</td> td: representa a una celda de datos
<td>Agosto</td>
</tr>
<tr>
<td>14</td>
<td>Septiembre</td>
</tr>
</table>
<table>
Tablas - Unir celdas
<tr>
<td rowspan="3">Zona Sur</td>
<td>Avellaneda</td>
<td>Lanús</td>
Las columnas (td) siempre van dentro de las filas (tr).
</tr> Si queremos agrupar celdas de una misma celda o
<tr>
<td colspan="3">Banfield</td> columna hay que agregar los siguientes atributos:
</tr> colspan (column span = número de celdas a abarcar)
<tr>
<td>Quilmes</td> rowspan (row span = número de celdas a abarcar).
<td>Berazategui</td>
</tr>
<tr>
<td rowspan="2">Zona Oeste</td>
<td>Morón</td>
<td>Merlo</td>
</tr>
<tr>
<td>Moreno</td>
<td>Haedo</td>
</tr>
</table>
 <iframe>
Se utiliza para incrustar otro documento HTML en la página actual

Para incrustar un mapa de google map en nuestro sitio

web, se busca la dirección en Google map, se hace click
en Compartir, click Insertar mapa,Click en Copiar HTML y
lo pegan en el archivo HTML
 <iframe>

Asi se veria en el navegador

También podría agregar videos o

publicidades.

https://jsbin.com/gafadudawi/edit?html,output
 <iframe>
Para Agregar video de youTube:

1. Buscar el video en YouTube

2. Posicionarse sobre el video
3. Boton Der y elegir
4. “Copiar código de inserción”
5. Ir al HTML y pegar el texto
copiado.

También podría agregar videos o

publicidades.
Ejemplo:
https://jsbin.com/gafadudawi/edit?html,output
 <audio>
Estas etiquetas nos permiten agregar contenido multimedia.

<audio> acepta como atributos:

controls: muestra los controles estándar para audio en una página web.
autoplay: hace que el audio se reproduzca automáticamente.
loop: hace que el audio se repita automáticamente.
muted: especifica que la salida de audio debe estar silenciada.
preload: es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran
tamaño.
src: puede ser una URL del archivo de audio o la ruta al archivo local.
https://www.w3schools.com/html/html5_audio.asp
 <video>
Estas etiquetas nos permiten agregar contenido multimedia.

<video> acepta como atributos:

controls: permite activar los controles del player.
poster: muestra una imagen a modo de presentación.
autoplay, loop, muted, preload y src con la misma función que en audio
https://www.w3schools.com/html/html5_video.asp
 Iconos
Hay varias formas de
agregar iconos a tu
sitio web, en
,
https://fontawesome.com/
hay iconos gratuitos y
pagos, te registras en el
sitio y te envian un mail
con una etiqueta que
agregaras al <head> de
tu HTML
Luego elijes los iconos a
utilizar y los agregan a https://jsbin.com/wuyeden/edit?html,output
su página
 Iconos
Hay varias formas de
agregar iconos a tu
sitio web, en
,
https://fontawesome.com/
hay iconos gratuitos y
pagos, te registras en el
sitio y te envian un mail
con una etiqueta que
agregaras al <head> de
tu HTML
Luego elijes los iconos a
utilizar y los agregan a
su página
Verificar Errores en .html
Existen sitios para validar la
páginas HTML, Ejemplo:
https://validator.w3.org/#vali
date_by_input
Copian el contenido de la
página, la chequean,
verifican los errores y
corrigen.

Ahí se uso una etiqueta

<h7> que no existe

y aquí marca el error

 Inspeccionar páginas
Se Inspeccionan sitios web e para corregir errores, en el navegador sobre el sitio hacer click
con botón derecho e Inspeccionar
 TP2 Explicación
video: https://youtu.be/Xf1zIQbjxwA

PDF: https://drive.google.com/file/d/1ol7yMh7_ZB5-Vm1uLqrd-XizIEPc39C-
/view?usp=sharing
Fin