Apunte - HTML

Todo el material fue tomado del “Curso
visual y practico – USERS”

“PROGRAMADOR WEB Full Stack”
Lic. Montenegro, Ramón Antonio Laboratorio de Programación II
NUESTRA PRIMERA LÍNEA DE CÓDIGO
1 Abriremos el editor de
texto de nuestra preferencia 2 Ya dentro del editor de texto, antes
donde escribiremos
de escribir una línea de código,
nuestras primeras líneas de
guardaremos el archivo.
código HTML. Nosotros lo
Para ello, presionamos la opción Archivo >
realizaremos con el clásico
Guardar, y seleccionamos como tipo de
Bloc de Notas de Windows.
archivo: Todos los archivos i*.*. De esta
manera nos aseguramos que el archivo se
3 Ahora sí, a escribir el guarde con la extensión correcta que
código. Primero necesitamos. Luego, en el nombre de
escribiremos el código archivo ingresamos index.html, y por
necesario para que nuestra último presionamos el botón Guardar.
página funcione y luego

veremos, en las páginas 8 y 9,
el significado y uso de cada
bloque. Agregamos en
principio el tag de inicio y
cierre HTML, dejando un
espacio vacío en el medio:
<html>
</html>
4 Agreguemos, entre estos <html>

tags, el código <head>
<title>
correspondiente al tag head, o Programador web
(encabezado, también dejando Fullstack
</title>
un espacio en el medio. Allí, </head>
escribiremos el título que </html>
tendrá
2 | Página Unidad I - HTML

5 Seguidamente, agregaremos
el tag body a la página,
dejando por supuesto un
espacio en el medio. ¡Atención!
Este tag body se ubicará por
afuera de los tags head:
6 Y finalmente, para terminar nuestra primera página, escribiremos,

dentro del tag body, dos líneas más. Una con el tag <hl> y otra con el tag
<p>:
7 Solo nos queda guardar el archivo para asegurarnos que nuestro código queda
escrito. Abrimos la carpeta donde guardamos nuestro archivo HTML, abrimos una
secion o pestaña de nuestro navegador web, y arrastramos el archivo index.html
dentro del navegador web.

¿CÓMO FUNCIONAN LOS TAGS?
1 <HTML> </HTM L>

El tag <html> es el elemento raíz de cada página web. Este se utiliza para indicar al
motor de renderizado donde inicia y termina una página html. El tag <Ihtml> con el
carácter / indica que allí
finaliza el código
correspondiente a una
página html. De la misma
forma, el carácter /
utilizado en otros tags,
determina que dicha
etiqueta finaliza allí.
Si analizamos otras
páginas web respecto a
la nuestra,
encontraremos que algunas de ellas comienzan con <!DOCTYPE html> en lugar de
<html>. Cuando analicemos el código HTML por completo, veremos esta y otras
diferencias, y cuándo y cómo aplicar cada una de ellas.
2 <HEAD><MEAD>
El tag <HEAD> define el inicio del encabezado de cada página. En el interior de este
tag se especifica el título de la página, que solemos visualizar en la pestaña del
navegador web, y también se incluye el llamado a otros archivos que componen la
estructura de una web (archivos CSS, archivos JavaScript, etcétera).
3 <TITLE </TITLE>
El tag <TITLE> especifica el título que tiene la página web. Se trata del título que
aparece en la pestaña o barra de título del navegador. Usualmente el título de las
páginas es estático, aunque veremos situaciones en las que puede variar

dinámicamente (integrando el lenguaje JavaScript y bases de datos, por

ejemplo).
4 <BODY> </BODY>
El tag <BODY> es el tag principal que aloja todo el contenido (dinámico y estático) que
conforma una página web y con el que solemos navegar los sitios e interactuar de
manera gráfica. En este tag se almacenan los títulos, las secciones, los menús,
imágenes, audios, videos, y todo otro material que componga una web.
5 <H1></H1>
El tag <H1> indica el título de nivel superior que queremos darle a una web. Este
tag varía en forma de escala entre Hl y H6, siendo este último el título de menor
jerarquía.
6 <P> </P>
El tag <P> especifica el párrafo de texto que se muestra en una página web. También
para espaciar un párrafo de otro, se suele utilizar este tag como generador de
renglones vacíos, aunque lo más efectivo y políticamente correcto es recurrir al tag
<br>.
¿CÓMO FUNCIONA LA WEB?

Si bien el ejemplo anterior nos permitió crear una página html estática, guardarla en nuestra
computadora, y visualizarla en el navegador web, el concepto de web requiere un
componente esencial que oficia como alojamiento del contenido de una web, y sirve
este contenido de forma remota a través de las direcciones URL (Universal Resource
Locator): el servidor web. Si bien pudimos ver contenido html sin necesidad de un
servidor web, el no tener un servidor web que canalice el contenido de un sitio web a
través de la red nos impide, entre otras cosas:
 Mostrar contenido dinámico, obtenido desde de una base de datos o peticiones a
webservices.
 Ejecutar de código específico realizado en tecnologías PHP, .NET, Python, entre
otras.

 Establecer sistemas de seguridad contra ataques remotos.

 Integrar bases de datos remotas para alojar contenido que alimenta nuestra web.
 Redireccionar el contenido a un dominio como www. mipropiaweb.com.
Servidor web URL

Un servidor web o web server es URL proviene de la sigla Universal
una aplicación que procesa el Resource Locator. Su traducción al
contenido, usualmente páginas español es básicamente literal
web, del lado del servidor. Realiza (Localizador de recursos uniformes),
conexiones uni/bidireccionales de y es la tecnología que se ocupa de
forma sincrónica o asincrónica con enlazar recursos, usualmente a través
la(s) máquina(s) cliente, entregando de la web o intranets, que se mueven
o recibiendo respuestas. a través de direcciones IP o nombres
Comúnmente un servidor web
de dominios. La URL se ocupa de
utiliza el protocolo HTTP para
"volver amigable" a través de una
enviar el contenido html a cada
cliente que lo solicita. Son instalados dirección web, el acceso a un recurso
y utilizados en servidores dedicados específico, como puede ser una
para tal fin, y se interconectan con la página html, un documento PDF, una
red internet, a través de imagen, un video, o una aplicación
redireccionamiento IP. para ser descargada de Internet.
Paginas html
Las páginas html son las que alojan el contenido general que compone cada
texto. Estas páginas están armadas con contenido HTML (como el ejemplo que
vimos anteriormente), contenido CSS, JavaScript, imágenes, videos, etcétera.
Todo este contenido es armado de forma óptima y estática, para que pueda ser
visualizado a través de los navegadores. En los casos donde los contenidos
requieren interacción con base de datos, se denomina a las páginas web como
dinámicas en lugar de páginas estáticas.
MAPA DE TECNOLOGÍAS
La tecnología básica utilizada se mantiene algo limitada respecto a su comienzo a

través del HTML (algo evolucionado), y se apoya en un cúmulo de tecnologías con un fin
específico basado en brindar una mejor experiencia de usuario.
HTML
HTML será el esqueleto o
estructura de casi todos
los desarrollos web

CSS
Son las encargadas de
estructurar y presentar
los documentos creados
con el lenguaje de marcado
HTML, de manera gráfica
y visual.
JavaScript
Como lenguaje de programación
interpretado. Este nos ayudará
a desarrollar gran parte de la
sintaxis propia que complementa
a un sitio web, la que se ejecutara
mayormente del lado del cliente
LENGUAJES DE PROGRAMACIÓN
HTML y CSS son lenguajes de marcado que, si bien son importantes, solo aportan a la
construcción estética de cada sitio web. JavaScript toma el rol de lenguaje de
programación en las webs orientadas a contenido institucional, pero cuando hablamos
de lenguajes de programación orientados verdaderamente a web, ya nos referimos a
una categoría superior de lenguajes, que no solo aportan contenido al frontend de
cada sitio web, sino que también resuelven cientos de cosas desde la perspectiva
backend de todo sitio. Dentro de los lenguajes de programación más utilizados por un
desarrollador full stack, podemos destacar:

PHP
PHP aporta facilidad de manejo de HTML, CSS, JavaScript, al poder embeber estos
dentro de su propia sintaxis, para
que, de esta manera, toda web
sea procesada en el servidor y
se entregue al usuario un
simple documento HTML que
muestre la menor cantidad de datos
posibles que referencien al código y tecnologías utilizadas en un sitio web.
JAVA
Este lenguaje de programación, orientado a objetos, dispone de módulos de

desarrollo que permiten crear páginas web con procesamiento del lado del servidor,
para visualizar contenido propio en los navegadores más populares. Esto se conoce
como Java Server Pages.
Al igual que .NET, la tecnología web de Java se utiliza mucho en el desarrollo de
soluciones corporativas que requieren de estabilidad y seguridad
.NET
.NET (nombrado comúnmente "punto net") no es un lenguaje de programación, sino

una tecnología propia para el desarrollo de un sinfín de soluciones orientadas al
software, que está adaptada para soportar el diseño web, a través de los lenguajes
propietarios de la firma Microsoft (C#, VISUAL BASIC, VISUAL C++, entre otros)..
PYTHON
Si bien su nombre lleva pocos años resonando dentro del mundo del desarrollo
de soluciones de software, Python es un lenguaje de programación creado
hacia fines de la década del 80. Posee una sintaxis orientada a lenguaje de
programación interpretado que favorece principalmente que sea un código
fácilmente legible.

Contiene soporte de programación multiparadigma, gracias a su orientación a

objetos, y combina los estándares de la programación imperativa y funcional.
Por último, se trata de un lenguaje multiplataforma y ofrece un tipado dinámico.
Servidor web Local

Si no disponemos de un sitio web donde alojar nuestro contenido
para pruebas, podemos optar por:
 registrarnos en una web que nos brinde un espacio
gratuito para alojar nuestro contenido de pruebas;
 instalar un servidor web local en nuestra computadora, y
realizar las pruebas sin necesidad de tener que contar con
acceso a internet dedicado
ENTORNO DE BRACKETS

MENÚ ARCHIVO MENÚ EDICIÓN MENÚ BUSCAR

Permite abrir, grabar y Desde aquí accedemos a Permite buscar y
cerrar archivos y todos los comandos para reemplazar contenido a lo
proyectos. También trabajar con el código que largo de los archivos de
permite acceder a escribimos: selección código.
proyectos trabajados múltiple de texto,
recientemente y gestionar desplazamiento por las
extensiones que líneas de código, sangrías,
potencien a Brackets. comentarios, sugerencias
de código, entre otras
opciones
MENÚ VER MENÚ NAVEGACIÓN MENÚDESARROLLO
Contiene funciones que nos Podemos navegar entre Nos permite
permiten ver contenido los distintos documentos manipular el entorno
específico del código o archivos de código con de desarrollo Brackets,
escrito en cada archivo de los que estemos iniciando o reiniciando
nuestros proyectos, trabajando, visualizar la este con los
manejar los tamaños de información de una complementos
fuente, tabular, indentar definición, abrir y cerrar activados o
código y ocultar o archivos de forma rápida, desactivados.
visualizar código, según y acceder a la
nuestras necesidades documentación rápida
del documento escrito
2 3 5
ÁREA DE TRABAJO LINEAS Y

COLUMNAS
Aquí visualizaremos en
Archivo > Vista previa Toda la información
modo jerárquico todo el
dinámica experimental referente a la
contenido relacionado
Permite visualizar en cantidad de líneas y
con nuestro proyecto.
tiempo real en el navegador columnas escritas y
A través del menú
web los cambios que utilizadas, dentro de
contextual podemos
realizamos sobre los cada archivo de
trabajar con archivos y
archivos editados. código que
carpetas, copiando,
Archivo > Vista previa manejemos
clonando, renombrando
dinámica Ejecuta la vista
o visualizando el
previa, en el navegador
contenido en el editor o
predeterminado en nuestro
el navegador web
equipo, del contenido
trabajado.

DIVIDIR EDITOR DE CÓDIGO

4
A través de esta opción podemos alternar entre la visualización
de un archivo en el editor de código. Las opciones son:
visualización simple, visualización múltiple vertical,
visualización múltiple horizontal
8
6 7
NUEVAS VISTA PREVIA

VERSIONES GESTOR DE
DINÁMICA EXTENSIONES
Notificador
Ejecuta Nos permite
integrado que
nuestro gestionar las
nos informa
extensiones
cuando una proyecto
necesarias
nueva versión
en curso disponibles
de Brackets
dentro de la para Brackets,
está
que nos
disponible. vista previa
facilitan el
de desarrollo de
navegador soluciones
web.
web

EDITOR DE CÓDIGO
Aquí desarrollaremos de forma constante los ejemplos. El editor Brackets
soporta por defecto los lenguajes HTML5, CSS y JavaScript.
10
EL LENGUAJE DE MARCADO HTML
HTML es una sigla que proviene de Hyper Text Markup Language y hace referencia al
lenguaje de marcado que nos permite crear páginas web. Está regido por W3C
(World Wide Web Consortium), quien se ocupa de organizar la estandarización
referente a escritura e interpretación de casi toda la tecnología relacionada con
la web.
Funcionamiento
A través de la organización segmentada en tags, el HTML nos permite distinguir cada

componente (títulos, textos, imágenes, videos, audios, etcétera) de una página web,
para que este se visualice de manera óptima y diferenciada del resto. A su vez, cada

componente es segmentado a través de un tag específico, y ubicado en una posición

determinada de la página.
HTML5: la quinta versión independiente
HTML5 era conocido también como Web Applications 1.0, un estándar muy fuerte
hoy usado por la diversidad de dispositivos que utilizan internet como motor de
comunicación o visualización de contenidos.
LOS PRINCIPALES TAGS DE HTML
El lenguaje HTML5, al igual que sus antecesores, segmenta su contenido en

etiquetas o tags. Estos tags manejan una estructura determinada, que permite
que el motor de renderizado interprete y visualice el contenido web de forma
óptima.
<DOCTYPE>
Doctype es una declaración que se incluye al inicio de cada página y sirve para
definir el tipo de documento que está cargando el navegador web. Con esta
sintaxis, cuando el navegador web procesa el documento, le indicamos que el
lenguaje de marcado que constituye esta página es HTML5.
Su uso correcto es:

<TITLE>
Este atributo es utilizado de forma anidada dentro del tag <head>, para
representar el título de cada página web.
Su uso correcto es:
<HEAD>
Es el tag donde se declaran todos los elementos que componen la cabecera de una
página web. La mayoría de estos no serán visibles para el usuario, pero hacen a la
estructura de cada página.
<BODY>
El tag <body> es el que almacena todo el contenido que finalmente se visualiza en la

página web: textos, títulos, imágenes, videos, audios, hipervínculos, etcétera. Todo lo
que este tag contenga dentro se mostrará en el navegador.
<H1>...<H6>
Los tags <hl>, <h2>, <h3>, <h4>, <h5> y <h6> corresponden a títulos.
Estos se despliegan desde la escala de mayor jerarquía <hl> hasta la de menor

jerarquía <h6>.
Estos tags nos permitirán titular de forma estructurada contenido que ocupa
mucho texto en las páginas html.

Por defecto, este tag genera un salto de línea, para que lo que continuemos
escribiendo aparezca por debajo de este.
<P>
Este tag es el utilizado para representar el texto o el párrafo que compone las
páginas web.
<DIV>
El tag <div> se aplica cuando necesitamos agrupar elementos o un bloque de

elementos, que luego serán formateados a través de las hojas de estilo CSS. Dado
que este tag se usa para formatear su contenido, el mismo tipo de sentencias
utilizadas en CSS pueden ser aplicadas directamente sobre el DIV, para así
formatearlo sin necesidad de recurrir a CSS. Veamos a continuación un
pequeño ejemplo del uso de DIV:
Si necesitamos alinear el contenido de este div en el centro de la pantalla,

simplemente debemos agregar dentro del DIV la propiedad margin de CSS,
seguido del estilo de alineación. Esto quedaría de la siguiente manera:


Todo lo que se escriba dentro del tag de apertura  es
interpretado como un comentario dentro del contenido HTML. Los comentarios sirven,
por ejemplo, para referenciar determinada parte de la estructura de la página, y son
utilizados en especial por los diseñadores o desarrolladores.
<BR>
Este tag se utiliza para insertar un salto de línea. Su uso se realiza de la siguiente
manera:
<HR>
Este tag permite trazar una línea horizontal, utilizada para separar segmentos de
una página web. Veamos a continuación un ejemplo de ello:
<hr> y <br>, a diferencia de los otros tags vistos hasta aqui, no requieren un
mismo tag de cierre.

<BLOCKQUOTE>
Este tag sirve para insertar una acotación o una cita, dentro de un párrafo.
Dispone de un atributo denominado <cite>, que permite especificar la fuente
de donde extraemos dicha cita, a través de la inclusión de una URL. Veamos
a continuación su correcto uso:
Insertar una cita con este tag hará que el texto correspondiente se vea tabulado
respecto al resto del contenido de la página.
FORMATEAR EL TEXTO
Hasta ahora hemos visto ejemplos sencillos de cómo establecer texto a lo largo
de una página web. Es hora de que el texto comience a tener un formato algo
más destacado; esto lograra que el contenido de una página comience a tomar
vida.
Veamos a continuación que opciones de formato podemos aplicar
directamente con html a nuestro texto estándar.
<STRONG>
Este tag se utiliza por lo coman para resaltar un texto con un estilo equivalente
a negrita.
Su uso habitual se da dentro de un párrafo, en formato anidado al tag <p>. Veamos
a continuación un ejemplo de ello:

Vemos solamente como la palabra negrita, es destacada con respecto al resto del
texto de este párrafo.
<EM>
El tag <em>, también conocido como Emphasis, permite que un párrafo se vea
de forma levemente inclinada.
Es el equivalente a cursiva, utilizado en los procesadores de texto. Un
ejemplo de ello, a continuación:
<CODE>
Este tag permite establecer parte de un texto en formato código fuente. Es
utilizado por lo común en portales donde se debe representar una porción de
código. El texto resultante se muestra en un formato de fuente tipo consola.
Veamos a continuación un ejemplo de su uso:
<SAMP>
El tag <samp>, al igual que <code> presentan un estilo código fuente, con la
diferencia que <samp> es utilizado para representar el resultado del código obtenido
en una consola o ventana depuración. Utiliza comúnmente una fuente tipo Courier
New, de ancho fijo.

<U>
Este tag se utiliza para subrayar un texto determinado. Puede aplicarse de forma
anidada tanto en un párrafo <p> como también dentro de un tag correspondiente
a titulos. Se implementa de la siguiente manera:
<SUB> y <SUP>
Los tags <sub> y <sup> nos permiten establecer un bloque de texto en formato
subíndice o superíndice. Esto se utiliza por lo común para representar números
o palabras que resalten una parte del párrafo que componen. Veamos a
continuación un ejemplo de ello:
<DEL> e <INS>
Los tags <del> e <ins> permiten establecer un texto tachado e insertado,

respectivamente, dentro de un párrafo. Es muy coman encontrarlos en blogs
donde se representa una opinión personal del autor, como si se estuviese
retractando. Su forma de uso es la siguiente:

CARACTERES ESPECIALES
Hasta ahora hemos desarrollado una serie de ejemplos utilizando nuestro

propio vocabulario español, el cual difiere bastante del inglés, que es el
lenguaje estándar que se utiliza para el desarrollo de cualquier solución de
software.
Pero, si queremos que nuestras páginas en español se vean correctamente en
todos los navegadores web de cualquier parte del mundo, sin importar el
idioma del SO ni del navegador web, debemos reemplazar los caracteres con
tildes, diéresis, ñuflo o caracteres con cedilla (Ç), entre otros, por sus
equivalentes de la tabla de caracteres especiales.
El porqué de los caracteres especiales

Cuando nace la era informática, la agencia ANSI (American National Standards Institute)
crea una tabla de códigos, Ilamada ASCII (American Standard Code for Information
Interchange), para representar todo tipo de caracteres diferentes de las consonantes y
vocales que componen el abecedario estándar occidental. Estos caracteres extendidos
permiten representar de manera uniforme un carácter especial, un símbolo o una tetra
extendida de un idioma específico (occidental u oriental), a través de un código
estandarizado, que se respetaría en todo el mundo. Al expandirse mundialmente el use
de internet, los navegadores web incorporaron la tabla de caracteres y la incluyeron
dentro del desarrollo de los estándares que dieron vida al lenguaje HTML. Así, gracias
a la integración de los caracteres UNICODE de todo el mundo, los navegadores pueden
visualizar contenido de forma homogénea en cualquier navegador, sin importar el idioma
de este ni del sistema operativo que lo ejecuta.

TIPOS DE LISTAS
En muchas ocasiones necesitaremos agrupar determinadas palabras o consignas que
componen el texto de una web, dentro de un conjunto de elementos que les otorguen
un significado determinado.
Para esto, el lenguaje HTML define la necesidad de agrupar textos con un mismo fin,
como listas de elementos.
Dentro de las listas que HTML5 maneja, se destacan las listas ordenadas y las listas
no ordenadas.
Listas no ordenadas
Las listas más comunes en cuanto a use para diseño web son las no ordenadas.
Están compuestas de elementos relacionados entre sí, pero sin un orden o
secuencia específicos.
Para implementarlas, debemos recurrir a la construcción de estas, combinando
dos tags:
 <ul> es el tag estándar para trabajar con listas no ordenadas (abreviatura
de unordered list).
 <li> es el tag que permite enumerar el contenido de dicha lista
(abreviatura de list item).
Listas ordenadas
A diferencia de las no ordenadas, este tipo de listas nos permiten establecer un orden
lógico sobre el conjunto de
ítems que se mostrara. Su
estructura se arma a
través de los tags <ol> y
<li>; el primero de ellos es
la abreviatura de ordered
list.

Listas de definición
Las listas de definición nos permiten armar un árbol jerárquico con varios
niveles. La forma de implementación se compone por un nivel superior, y
elementos jerárquicos internos al primero (términos y definiciones). Los tags
utilizados para armar listas de definición son <dl>, <dt> y <dd>; estas dos
últimas son las que definen el término y la descripción de cada elemento de la
lista.
CREACION DE TABLAS
Las tablas se definen a través del tag <table>, y se complementan con otros tags que
permiten:
 crear sus celdas internas: <tr>;
 los encabezados de las tablas: <th>;
 la inserción de datos en sus celdas: <td>.
Veamos a continuación un rápido ejemplo:
Los encabezados de cada columna aparecen por defecto en negrita y centrados, y
que el contenido de cada celda se encuentra alineado por defecto sobre la izquierda,
sin discriminar si su contenido es texto o números.

Bordes
Otra característica propia de los elementos <table>, <th> y <td> es que, si no

especificamos un borde, estos se mostraran por defecto de manera transparente.
Para que toda la tabla y sus celdas tengan un borde bien marcado, debemos recurrir
a las propiedades CSS, que nos permitirán definir todos sus bordes de una sola vez.
Alinear encabezados
Como vimos antes, los encabezados de las columnas se alinean por defecto en el
centro. Si queremos cambiar su alineaciOn hacia la izquierda, podemos recurrir a la
propiedad text-align, tambien propia de CSS. Modifiquemos nuevamente nuestro
ejemplo, para alinear sobre la izquierda el texto de los encabezados.

Título individual
Si debemos desplegar diferentes tablas en una misma página web, lo más apropiado
para poder identificarlas de forma más rápida es aplicarles un título. Si bien podemos
utilizar un tag propio de HTML, el elemento <table> incluye un título propio
integrado, bajo el tag <caption>.
Este se declara dentro del tag <table>, y se aplicara de forma automática sobre el extremo
superior central de la tabla.
Agrupar contenido de celdas
A través de las diferentes configuraciones que podemos establecer sobre cada

elemento de una tabla, tenemos la posibilidad de agrupar varias celdas, para así
darle un formato más uniforme al contenido que deseamos visualizar. Para realizar
esto, debemos utilizar el atributo rowspan del elemento <th>.
El código de esto debe ser:
En este caso, N corresponde al numero de celdas que vamos a agrupar dentro del
tag table data: <td>. Luego ponemos el titulo correspondiente de la fila, y por
ultimo definimos las N celdas correspondientes, con el contenido que será
agrupado, utilizando el tag tablerow (<tr>) y el tag table data (<td>) para su
contenido. Veamos un
ejemplo completo para
comprender c6mo se
aplica el agrupamiento
de contenido:

Agrupar contenido de columnas
De la misma forma que podemos agrupar contenido en las celdas, también es

posible agrupar el contenido de las
columnas de una tabla. Para esto, en lugar de
usar el atributo rowspan, usaremos el
atributo colspan dentro del tag table head
<th>.

HIPERVÍNCULOS
Los hipervínculos son el corazón de la interactividad de todo un sitio web, para sí

mismo y hacia el resto de internet. Su use nos permite navegar el contenido de una
web, saltando entre las diferentes páginas que la conforman.
El tag <a> solo no cumple ninguna función. En cambio el tag <a href=""> define hacia
donde estamos redirigiendo nuestro hipervínculo. El atributo href proviene del
nombre hyperlink reference, y tal como este lo indica, allí debemos referenciar la
página, apartado o sitio web hacia donde queremos dar el salto.
Atributo de destino
El tag <a> cuenta con una serie de atributos adicionales que nos permitirán dar
el salto dentro de la misma página o marco donde hicimos clic (atributo _self),
hacia una ventana o pestaña nueva (atributo _blank); cargar el link de destino en
un marco especifico (mediante los atributos _top, _parent, framename).
Veamos un ejemplo de esto a continuación, para conocer cómo funcionan los
hipervínculos:

Primer parte Segunda parte
A través de este código, generamos tres tablas. En la primera, establecemos los

diferentes tipos de hipervínculos. En la segunda y la tercera tabla, generamos
contenido para poder navegar a través de esta misma página.

Hipervínculos mailto:
Dentro de los hipervínculos, podemos incluir él envió de un e-mail hacia

determinada dirección de correo electrónico. La ejecución del hipervínculo hacia
un nuevo e-mail se realiza utilizando el tag <a href>, pero en el link de destino,
debemos anteponer el atributo [email protected].
Dependiendo del tipo de navegador web (desktop o mobile), el hipervínculo hacia
un nuevo e-mail se comportara de manera distinta.
Para los navegadores web de escritorio, dependiendo del SO y del tipo de cliente de
correo electrónico que se utiliza habitualmente, el hipervínculo abrirá una u otra
opción.
 Si nuestra página fue cargada en Windows y utilizamos Microsoft
Outlook, abrirá un nuevo mensaje de correo a través de este cliente. Si
tenemos Mozilla Thunderbird instalado, abrirá directamente este.
 En algunos casos particulares, en los que los usuarios no utilizan un cliente
de correo local y usan por defecto Gmail u otro cliente vía web.
Otras URI schemes
Adicional a los hipervínculos de salto hacia otras páginas web y al envió de

correo electrónico, existen otros tipos de links que pueden utilizarse en páginas
web, denominados URI schemes, los que nos permiten realizar una interacción
desde la web misma hacia alguna aplicación instalada en la computadora o
dispositivo móvil.

Existen muchos más URI schemes, pero no son tan específicos para que los
trabajemos desde una web. Por ejemplo, Google y Apple tienen desarrollados
URI schemes propios, que permiten interactuar a las páginas web con diferentes
servicios y aplicaciones específicas de su sistema operativo. También existen URI
schemes específicos para iniciar música en Spotify, postear en Facebook, crear un
tuit en Twitter, abrir la tienda de aplicaciones AppStore o Google Play, entre otros
tantos.
Hipervínculos con imágenes
Las imágenes, grandes protagonistas graficas en el diseño visual de las web,

también aceptan hipervínculos hacia otros destinos. Para lograr esto, debemos
combinar el tag <a href> junto con el tag <img>.

Y reemplazando los tres puntos justo antes del cierre del tag <body>, agregamos el
siguiente código:
Para el hipervínculo dentro de la imagen, iniciamos el código con el tag <a href>,
seguido de la URL hacia donde nos
dirigimos. En el lugar del clásico texto
que acompañaría un hipervínculo
clásico, insertamos el tag <img src>, y
relacionamos la imagen que queremos
visualizar. Por último, agregamos el
atributo title que muestra un tooltip
cuando posicionamos el cursor sobre
la imagen, y el atributo alt, con otro
texto relacionado. Este Ultimo
atributo cumplía originalmente la
función del atributo title.

Apunte - HTML

Cargado por

Copyright:

Formatos disponibles

Apunte - HTML

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

Apunte - HTML

Cargado por

Copyright:

Formatos disponibles

Todo el material fue tomado del “Curso

visual y practico – USERS”

NUESTRA PRIMERA LÍNEA DE CÓDIGO

3 Ahora sí, a escribir el guarde con la extensión correcta que

código. Primero necesitamos. Luego, en el nombre de

escribiremos el código archivo ingresamos index.html, y por

necesario para que nuestra último presionamos el botón Guardar.

página funcione y luego

4 Agreguemos, entre estos <html>

2 | Página Unidad I - HTML

6 Y finalmente, para terminar nuestra primera página, escribiremos,

3 | Página Unidad I - HTML

¿CÓMO FUNCIONAN LOS TAGS?

1 <HTML> </HTM L>

4 | Página Unidad I - HTML

dinámicamente (integrando el lenguaje JavaScript y bases de datos, por

¿CÓMO FUNCIONA LA WEB?

5 | Página Unidad I - HTML

 Establecer sistemas de seguridad contra ataques remotos.

Servidor web URL

La tecnología básica utilizada se mantiene algo limitada respecto a su comienzo a

6 | Página Unidad I - HTML

7 | Página Unidad I - HTML

Este lenguaje de programación, orientado a objetos, dispone de módulos de

.NET (nombrado comúnmente "punto net") no es un lenguaje de programación, sino

8 | Página Unidad I - HTML

Contiene soporte de programación multiparadigma, gracias a su orientación a

Servidor web Local

9 | Página Unidad I - HTML

MENÚ ARCHIVO MENÚ EDICIÓN MENÚ BUSCAR

ÁREA DE TRABAJO LINEAS Y

10 | Página Unidad I - HTML

DIVIDIR EDITOR DE CÓDIGO

NUEVAS VISTA PREVIA

11 | Página Unidad I - HTML

EL LENGUAJE DE MARCADO HTML

A través de la organización segmentada en tags, el HTML nos permite distinguir cada

12 | Página Unidad I - HTML

componente es segmentado a través de un tag específico, y ubicado en una posición

HTML5: la quinta versión independiente

LOS PRINCIPALES TAGS DE HTML

El lenguaje HTML5, al igual que sus antecesores, segmenta su contenido en

Su uso correcto es:

13 | Página Unidad I - HTML

Su uso correcto es:

El tag <body> es el que almacena todo el contenido que finalmente se visualiza en la

Estos se despliegan desde la escala de mayor jerarquía <hl> hasta la de menor

14 | Página Unidad I - HTML

El tag <div> se aplica cuando necesitamos agrupar elementos o un bloque de

Si necesitamos alinear el contenido de este div en el centro de la pantalla,

15 | Página Unidad I - HTML

16 | Página Unidad I - HTML

17 | Página Unidad I - HTML

18 | Página Unidad I - HTML

Los tags <del> e <ins> permiten establecer un texto tachado e insertado,

19 | Página Unidad I - HTML

Hasta ahora hemos desarrollado una serie de ejemplos utilizando nuestro

El porqué de los caracteres especiales

20 | Página Unidad I - HTML