Scribd
Cargar
31 vistas30 páginas

Clase 02. HTML 2

Este documento presenta una introducción a HTML 2, incluyendo listas, enlaces, rutas absolutas y relativas, y elementos en bloque y en línea. También proporciona información adicional sobre formatos de texto, herramientas para probar código y recursos de aprendizaje.

Cargado por

melani
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
31 vistas30 páginas

Clase 02. HTML 2

Este documento presenta una introducción a HTML 2, incluyendo listas, enlaces, rutas absolutas y relativas, y elementos en bloque y en línea. También proporciona información adicional sobre formatos de texto, herramientas para probar código y recursos de aprendizaje.

Cargado por

melani
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/ 30

FULL STACK JAVA

Clase 2
HTML 2
Continuando con HTML
Les damos la bienvenida
Vamos a comenzar a grabar la clase
Clase 01 Clase 02 Clase 03

HTML 1 - Conceptos básicos de HTML 2 - Continuando con HTML HTML 3 - Multimedia y Tablas
HTML
● Multimedia con HTML:
● Conceptos básicos de la ● Listas y enlaces. imágenes, video, audio,
web ● Rutas absolutas y relativas. iframes.
● Proyecto web: ¿qué es? ● Elementos en bloque y en ● Tablas.
● Concepto Cliente/Servidor línea. ● Herramienta de
● Introducción a HTML. inspección.
Etiquetas básicas y ● Validación de nuestro
atributos. HTML.
Listas
Tipos de listas
Listas
Utilizan las etiquetas <ul>: lista
desordenada (unordered list) u <ol>: lista
ordenada (ordered list).

Cada elemento de la lista se representa


con <li> y su padre siempre tiene que ser
una etiqueta <ol> o <ul>.
Listas dependientes
También podemos crear listas
dependientes, simplemente agregando
más elementos <ul> u <ol> según
corresponda.

Nada impide utilizar una lista dentro de


otra lista. Este concepto se conoce como
“listas anidadas” o listas dependientes y
puede ser útil cuando enumeramos
ítems que contienen sub-items.
Listas de definición
Las listas de definición son otro tipo de listas interesantes:
Enlaces
Enlaces absolutos y relativos
Permiten vincular unas páginas con otras. Para hacer esto utilizamos el elemento <a> con
el atributo href (Hypertext Reference). 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.

(Sigue en la diapositiva siguiente)


Enlaces internos
Enlaces internos (anclas): Se utiliza para indicar un elemento dentro de la misma
página, dirigiéndose a un sector específico. Para utilizarlo necesitamos el enlace
propiamente dicho y el nombre (name) del ancla al cual debemos dirigirlo.

Se pueden vincular a anclas dentro de la página de destino:

Al igual que en los enlaces internos marcamos la sección con un


ancla:
Enlaces (Atributos)
Dentro de los atributos principales de los enlaces podemos encontrar:

Atributo Características

download Especifica cuál es el objetivo que se descargará cuando un usuario haga clic en el hipervínculo.

href Especifica la URL de la página a la que se dirige el enlace.

Especifica dónde abrir el documento vinculado. Algunas de las opciones son:


target _blank: Abre el documento vinculado en una nueva ventana o pestaña
_self: Abre el documento vinculado en el mismo marco en el que se hizo clic (predeterminado).

Especifica información adicional sobre un elemento. La información generalmente se muestra como


title
un texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.

Si aún no tenemos definido a dónde queremos hacer un hipervínculo podemos colocar


dentro del atributo href el valor #.
Enlaces locales
Permiten vincular nuestra página con otra página del mismo Sitio Web.

Para agregar un enlace para regresar podemos colocar lo siguiente:

Link
Enlaces a direcciones de correo y archivos
Permiten vincular nuestra página con el cliente de correo predeterminado en la
computadora:

Se pueden agregar un “asunto”:

Los enlaces también permiten vincular nuestro documento HTML con archivos:
Rutas
Rutas absolutas y relativas
Rutas absolutas y relativas
Cuando hablamos de ruta (o path) nos
referimos a la dirección de destino al
hacer clic en el link. Esta ruta puede ser:

● Absoluta: Nombre de dominio


(externa):
http://www.manualweb.net/img/log
os/html.png
● Relativa: Directorios desde donde
estoy (interna): /img/casa.png
Rutas absolutas y relativas
Mientras desarrollamos el sitio en forma
local (desde nuestra computadora), nos
conviene tener la información dividida en
carpetas.

En general nuestro index.html será la


página principal y las demás páginas
estarán en el directorio raíz, pero para
colocar imágenes, hojas de estilo, archivos
de JavaScript nos conviene ponerlos en
carpetas separadas.
Tipos de elemento
Elementos en bloque y en línea
Elementos block (en bloque) e inline (en línea)
HTML clasifica a todos los elementos en dos grupos: inline y block. De por defecto, 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

<br>, <a>, <img>, <span>, <b>, <div>, <p>, <h1>..<h6>, <ul>, <ol>,
<strong>, <mark>, <sub>, etc. <li>, <table>, <form>, etc.
Elementos block (en bloque) e inline (en línea)
Material extra
Formatos de texto
● Afectan al texto que se muestra en el documento.
● Han sido sustituidos en buena parte por CSS, pero su conocimiento nos permite modificar aspectos
concretos de la fuente (estilo, índices y subíndices) sin tener la necesidad de definir un estilo
específicamente para modificar solo un atributo (ejemplo: texto en negrita).

<b> vs <strong>

● Mismo efecto visual


● <b> indica negrita y <strong> indica que se debe resaltar fuertemente el texto (cada navegador lo resalta
como desea).

El formato lo define el navegador a su criterio, por eso podemos encontrarnos con presentaciones levemente
diferentes entre navegadores

Etiquetas anidadas:
Etiquetas básicas (formatos de texto)
Jsbin y Codepen
Son herramientas para probar HTML, CSS
y JS.

https://jsbin.com/?html,output

https://codepen.io/
w3schools
Es un sitio web para aprender tecnologías
web en línea. Contiene tutoriales de
HTML, CSS, JavaScript, SQL, PHP, XML y
otras tecnologías.

https://www.w3schools.com/
Mozilla Developer Network (MDN)
Si eres desarrollador, encontrarás todo lo que
necesitas en Mozilla Developer Network
(MDN). MDN ofrece documentación, demos y
un foro de preguntas y respuestas donde
puedes hacer preguntas e interactuar con
otros desarrolladores.

https://developer.mozilla.org/en-US/

Estos son algunos de los temas que


encontrarás en MDN:

● HTML
● CSS
● JavaScript
● APIs orientadas a la web
● APIs / DOM
Tarea para el Proyecto:

● Continuar con la formación de los grupos/equipos de 4 personas.


● Los estudiantes deberán armar una única planilla por comisión
para comenzar a anotarse. Luego lo informarán a través de un
formulario de Google.
● Comenzar a diagramar los layouts/estructura de cada página del
sitio web.
No te olvides de dar el presente
Recordá:
● Revisar la Cartelera de Novedades.
● Hacer tus consultas en el Foro.
● Realizar los Ejercicios obligatorios.

Todo en el Aula Virtual.


Muchas gracias por tu atención.
Nos vemos pronto

También podría gustarte