Clase 3 - Tecnologias Web-HTML5

DISEÑO WEB
SESIÓN N°03
ING. GINA MIRANDA ANAMPA

Front End vs Back End
¿Qué aprenderemos hoy?
Conoceremos y aprenderemos las
diferencias entre las tecnologías
Front End y Back End, además del
Lenguaje HTML.
Front End VS Back End
Hyper Text Markup Language, es el lenguaje con el
que se escriben las páginas web. Es un lenguaje de
hipertexto, es decir, un lenguaje que permite escribir
texto de forma estructurada, y que está compuesto
por etiquetas, que marcan el inicio y el fin de cada
elemento del documento.
Herramientas para Desarrollo Web
Editores Web
Visual Studio Code.- Es un editor de código fuente desarrollado por
Microsoft. Es software libre y multiplataforma, está disponible para
Windows, GNU/Linux y macOS. VS Code tiene una buena integración
con Git, cuenta con soporte para depuración de código, y dispone de
un sinnúmero de extensiones, que básicamente te da la posibilidad de
escribir y ejecutar código en cualquier lenguaje de programación.
Herramientas para Desarrollo Web
Editores Web
Top 10 según encuesta realizada por Stack Overflow a más de 80,000 desarrolladores en
mayo del 2021, Visual Studio Code es el entorno de desarrollo más usado y con mucha
diferencia, un 71.06%.
Estructura de una Página Web
Todo el documento HTML debe estar entre las etiquetas <html> y
</html>
El documento está dividido en 2

zonas principales:
▪ El encabezamiento,
comprendido entre las
etiquetas <head> y </head>.
▪ El cuerpo comprendido entre
las etiquetas <body> y </body>.
Dentro del cuerpo está todo lo
que queremos que aparezca
en la pantalla principal (texto,
imágenes, etc.)
Etiquetas Semánticas HTML5
Existen más de 30 nuevas etiquetas semánticas que pueden ser
utilizadas en nuestras páginas estáticas. Estas nuevas etiquetas se
podrían clasificar en dos grupos:
✓ Etiquetas que extienden a las actuales,

como <video>, <audio> o <canvas>, y que además añaden nuevas
funcionalidades a los documentos HTML, que podemos controlar
desde JavaScript y Css.
✓ Etiquetas que componen la web semántica, es decir, que no
proponen nuevas funcionalidades pero sirven para estructurar
sitios web, y añadir un significado concreto, más allá de las
etiquetas generales como <div>.
<header> Representa el encabezado de la
página. Por lo general contiene el título
principal y la barra de navegación (nav).
<nav> Alberga el menú principal de
navegación del sitio.
<section> Tiene la tarea de agrupar las piezas
de contenido de la página. Cada página
debería tener un <section> y varias piezas de
contenido <article>.
<article>Podría utilizarse en los artículos de
los foros, una revista o el artículo de
periódico, un comentario escrito por un
usuario o cualquier otro artículo
independiente de contenido.
<aside> Se usa para colocar información
adicional a la página. Suele usarse a los
lados de la página. Puede utilizarse para
efectos tipográficos, barras laterales,
elementos publicitarios, u otro contenido que
se considere separado del contenido
principal de la página.
<footer> Indica el pie de la pagina y contiene
información del autor, enlaces, copyright,
redes sociales,
términos y condiciones, etc.
Comentarios en HTML
Comentarios.- En HTML se utiliza una etiqueta de apertura y
otra de cierre () todo lo que se encuentre entre estas
dos será interpretado por el navegador como un comentario.
Etiquetas HTML
La parte esencial de una etiqueta HTML es lo que se denomina
la etiqueta de apertura. Se trata de escribir el nombre de la
etiqueta en cuestión, colocándola entre los caracteres < y >
En HTML5 no se puede colocar cualquier palabra como
etiqueta, sino que existen una serie específica de etiquetas,
cada una con una misión y objetivo diferente.
La mayoría de las etiquetas requieren que se especifique
un cierre de etiqueta para saber dónde termina de actuar. Se
caracteriza en que se escribe igual que la etiqueta de
apertura, pero con la barra / inmediatamente después del <.
Por ejemplo, la etiqueta <h1>:
Sintaxis Básica de Etiquetas HTML
Antes de empezar a ver etiquetas, es necesario conocer la
estructura básica, que se compone de 2 elementos
fundamentales:
❑ Contenido: Todo lo que aparece entre etiquetas de apertura y cierre.

❑ Apertura y cierre: Las etiquetas tienen un principio y un final. Y se
expresan así <ejemplo>al inicio y</ejemplo> para cerrar el contenido.
Atributos HTML
Los atributos añaden información adicional a un elemento. Normalmente
se componen de dos partes, el nombre del atributo y el valor de dicho
atributo. Este par atributo-valor se escribe después del nombre de la
etiqueta, separándola por espacio y antes del carácter > de la etiqueta
de apertura.
Principales Etiquetas HTML
Enlaces.- Los enlaces o hipervínculos, también llamados
hipertextos son los textos o los objetos sobre los que
podemos hacer clic para que nos lleven a otra parte del
documento, a otra página web en el mismo sitio o a otra
página de Internet, entre otras funciones.
El problema del enlace anterior es que no apunta a ningún

sitio. Para convertirlo en un enlace que funcione debe aportar
la URL de la página de destino mediante el tributo href (que
significa referencia de hipervínculo).
<a href=“otrapagina.html”> Enlace a otra pagina </a>

Estructura de los enlaces
<a href=“xxx”>yyy</a>
Donde:
xxx es el destino del enlace.
yyy es el texto indicativo del enlace (sobre el cual debemos dar clic).
Tipos de Enlaces
• Enlaces internos: los que se dirigen a otras partes dentro de la misma página.
• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
• Enlaces remotos: los dirigidos hacia páginas de otros sitios web.
• Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a
una dirección.
Enlaces internos
Son los enlaces que apuntan a un lugar diferente dentro de la misma
página. Son esencialmente utilizados en páginas donde el acceso a los
contenidos puede verse dificultado debido al gran tamaño de la misma.
Crearemos un enlace que apunte al final de la página, colocaremos
nuestro enlace origen. Ejemplo:
El contenido del enlace es el texto "Síntomas de la infección" y el destino,

Síntomas, es un punto de la misma página que todavía no hemos definido,
el símbolo # es el quien especifica al navegador que el enlace apunta a
una sección en particular.
Luego hay que generar un enlace en el destino mediante <a name="Síntomas"></a>
Enlaces locales
Permiten relacionar los distintos documentos HTML que componen
nuestro sitio web.
Supongamos que queremos enlazar con la página a la que hemos
llamado Ultnoticias.html, en este caso simplemente sustituimos lo que
hemos llamado xxx por el nombre del fichero. Ejemplo:
Enlaces remotos
Para enlazar con una página que esté en un servidor distinto es
necesario conocer su dirección URL o dirección de la página con la que
queremos enlazar. Ejemplo:
Enlaces con direcciones de correo
Los enlaces a direcciones de correo son aquellos que al pincharlos nos
abre un nuevo mensaje de correo electrónico dirigido a una dirección de
mail determinada.
Para colocar un enlace dirigido hacia una dirección de correo colocamos

mailto: en el atributo href del enlace, seguido de la dirección de correo a
la que se debe dirigir el enlace. Ejemplo:
El atributo Target en los enlaces
El atributo TARGET especifica el contexto de navegación o marco de
destino del recurso.
TARGET _BLANK permite en los navegadores modernos, abrir el enlace

en una nueva pestaña del navegador.
El objetivo de emplearlo es lograr que el lector no abandone la página

donde está situado y por lo tanto ganar tiempo de estadía, parámetro
muy apreciado para el posicionamiento.
GRACIAS….

Clase 3 - Tecnologias Web-HTML5

Cargado por

Copyright:

Formatos disponibles

Clase 3 - Tecnologias Web-HTML5

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase 3 - Tecnologias Web-HTML5

Cargado por

Copyright:

Formatos disponibles

DISEÑO WEB

ING. GINA MIRANDA ANAMPA

El documento está dividido en 2

✓ Etiquetas que extienden a las actuales,

❑ Contenido: Todo lo que aparece entre etiquetas de apertura y cierre.

El problema del enlace anterior es que no apunta a ningún

<a href=“otrapagina.html”> Enlace a otra pagina </a>

El contenido del enlace es el texto "Síntomas de la infección" y el destino,

Para colocar un enlace dirigido hacia una dirección de correo colocamos

TARGET _BLANK permite en los navegadores modernos, abrir el enlace

El objetivo de emplearlo es lograr que el lector no abandone la página

También podría gustarte