HTML Contenido
HTML Contenido
HTML Contenido
Hipervínculos/Enlaces
Listas - Listas (ul – lo)
Tablas (table - tr - td - th)
Imágenes (formatos)
Iframe (incrustar Youtube o Google Maps)
Formularios: Form - input (text - email - password - submit -
check - radio - textarea - button - label - Select / option )
Formateando el texto en HTML
Todo esto y mucho más es posible por medio del HTML a partir de
multitud de etiquetas entre las cuales vamos a destacar algunas.
Pero antes de comenzar cabe hacer una reflexión sobre por qué son
interesantes estas etiquetas y se siguen usando, a pesar que están
entrando prácticamente en el terreno de CSS, ya que en la práctica están
directamente formateando el aspecto de las fuentes. Son importantes
porque las etiquetas en si no están para definir un estilo en concreto,
sino una función de ciertas palabras dentro de un contenido. Por
ejemplo, las negritas quieren decir que algo tiene más fuerza o
importancia dentro de un texto y una itálica se puede usar para un texto
que está citado o algún énfasis particular. En cuanto a subíndices y
superíndices todavía es más claro, ya que éstos especifican cosas que
tiene que ver con el contenido y no con la presentación.
Nota: ¿Qué diferencia hay entre B y STRONG? Aunque las dos etiquetas hacen el
mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta B indica
negrita, mientras que la etiqueta STRONG indica que se debe escribir con fuerza.
Itálica
Subíndices y superíndices
Anidar etiquetas
Sintaxis de un enlace
Tipos de enlaces
Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
Para crear este tipo de enlaces, hemos de usar la misma etiqueta A que
ya conocemos, de la siguiente forma:
<a href="./archivo.html">contenido</a>
Por regla general, para una mejor organización, los sitios suelen estar
ordenados por directorios.
Por ejemplo:
<a href="archivo.html#seccion">contenido</a>
<a name="seccion"></a>
Enlaces remotos
Son los enlaces que se dirigen hacia páginas que se encuentran fuera de
nuestro sitio web, es decir, cualquier otro documento que no forma parte
de nuestro sitio. Generalmente nuestro sitio web estará en un dominio
determinado, tipo example.com.
Los enlaces remotos son los que van a páginas que estarían en otro
dominio diferente.
Sólo cabe destacar que todos las direcciones web (URLs) empiezan por
http://, o https:// en el caso que la página de destino se sirva mediante
un servidor seguro. Este tipo de rutas que comienzan por "http" también
se conocen como "rutas absolutas". Cuando enlazas con páginas que
están en otros dominios necesitas usar necesariamente rutas absolutas.
Nota: La parte por la que inician las direcciones de sitios web (http://)
nos indica que el protocolo por el que se accede es HTTP, el utilizado en
la web. No debemos olvidarnos de colocarlas, porque si no lo hacemos,
los enlaces serán tratados como enlaces locales a nuestro sitio.
Otra cosa interesante es que no tenemos que enlazar con una página
web con el protocolo HTTP necesariamente. También podemos acceder
a recursos a través de otros protocolos como el FTP. En tal caso, las
direcciones de los recursos no comenzarán por http:// sino por ftp. En
nuestra unidad de Infraestructura hablaremos más detalladamente de
protocolos y cual es su uso y funcionamiento.
Enlaces a direcciones de correo
<a href="mailto:abc@gmail.com">juan@gmail.com</a>
<a href="malito:juan@gmail.com?subject=Consulta">abc@gmail.com</a>
Podemos colocar otros atributos del mensaje con una sintaxis parecida.
En este caso indicamos también que el correo debe ir con copia a
roberto@gmail.com.
Tipos de archivos
El formato de archivo GIF se usa para las imágenes que tengan dibujos,
mientras que el formato JPG se usa para las fotografías. Los dos
comprimen las imágenes para guardarlas. La forma de comprimir la
imagen que utiliza cada formato es lo que los hace ideales para unos u
otros propósitos.
Formato GIF
Además de ser un archivo ideal para las imágenes que estén dibujadas
tiene muchas otras características que son importantes y útiles.
Transparencia: es una utilidad para definir ciertas partes del dibujo como
transparentes. De este modo podemos colocar las imágenes sobre
distintos fondos sin que se vea el cuadrado donde está inscrito el dibujo,
mostrando la silueta del dibujo en cuestión.
Formato JPG
Compresión:
Cuenta con un algoritmo de compresión casi ideal. Este formato, es ideal
para fotografías. Además, con JPG podemos definir la calidad de la
imagen, con calidad baja el fichero ocupará menos, y viceversa.
Colores:
JPG trabaja siempre con 16 millones de colores, ideal para fotografías.
Optimizar ficheros:
Para que las imágenes ocupen lo menos posible y se transfieran
rápidamente por la Red debemos aprender a optimizar los ficheros
gráficos. Para ello debemos hacer lo siguiente:
<img src="logo.png">
Atributo alt
Pero esto lo veremos más adelante, cuando apliquemos estilos CSS a las
listas.
● Listas desordenadas
● Listas ordenadas
● Listas de definición
Listas desordenadas
Listas ordenadas
Para realizar las listas ordenadas usaremos las etiquetas OL (ordered list)
y su cierre. Cada elemento será igualmente indicado por la etiqueta LI,
que ya vimos en las listas desordenadas.
Pongamos un ejemplo:
Listas de definición
Anidando listas
HTML dispone de una gran variedad de etiquetas para crear tablas, con
sus atributos, de las cuales veremos una introducción en este artículo. En
general, se utilizan para representar información tabulada, en filas y
columnas. Esto es una realidad en los últimos años, desde que las tablas
se han descartado para fines relacionados con la maquetación.
Por ello, en el momento actual las tablas se utilizan mucho menos que en
el pasado y realmente la recomendación es usarlas solo en los casos en
los que necesitemos incluir en una página información tabulada, es decir,
dispuesta en filas y columnas. Todo uso basado en tablas para procurar
colocar elementos en determinadas posiciones de la página sería
incorrecto en las técnicas actuales de diseño de páginas web.
Como veremos, existen diversas etiquetas que se deben utilizar en una
forma determinada para la creación de tablas. Por ello, puede que en un
principio nos resulte un poco complicado trabajar con estas estructuras.
Si deseamos mostrar datos de una manera sencilla de leer, dispuestos en
filas y columnas, tarde o temprano observaremos que las tablas son una
rápida solución y apreciamos las posibilidades nos ofrecen, por otro lado,
las tablas han dejado de utilizarse debido a su falta de correlación con el
desarrollo Responsive, entre otras características.
Para empezar, nada más sencillo que por el principio: las tablas son
definidas por las etiquetas <table></table> y su cierre.
Las tablas son descritas por líneas de arriba a abajo (y luego por
columnas de izquierda a derecha).
Cada una de estas líneas, llamada fila, es definida por otra etiqueta y su
cierre: <tr></tr>
Ejemplo:
A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud
cuando les incorporamos toda una lista de atributos aplicados sobre
cada tipo de etiquetas que las componen.
La forma más útil y actual de dar forma a las celdas es a partir de CSS
que veremos más adelante.
Etiqueta Iframe
Los frames (en inglés = marcos) son herramientas que han pasado a ser
soportada por todos los navegadores y formar parte de las
especificaciones de HTML, para luego retirarse de nuevo del estándar en
HTML5.
Los formularios.
Así pues, en resumen, con HTML podremos construir los formularios, con
diversos tipos de campos, como cajas de texto, botones de radio, cajas
de selección, menús desplegables, etc. Sin embargo, debe quedar claro
que desde HTML no se puede procesar la información, sino que
deberemos contar con las herramientas de programación de Back-End
que también veremos en este curso. Entonces, si deseamos que el
formulario se envíe automáticamente o se procese en el servidor para
generar otro tipo de respuesta, necesitaremos lenguajes de
programación. Por el momento, estamos viendo Front-End por lo que nos
limitaremos a explicar la creación de formularios y estudiaremos
próximamente como procesar esa información.
Elementos de Formularios.
Campos de texto
<textarea><textarea />
Este tipo de campos son prácticos cuando el contenido a enviar no es un
nombre, teléfono, edad o cualquier otro dato breve, sino más bien, un
comentario, opinión, etc. en los que existe la posibilidad que el visitante
desee rellenar varias líneas.
Listas de opciones
Las listas de opciones son ese tipo de menús desplegables que nos
permiten elegir una (o varias) de las múltiples opciones que nos
proponen. Para construirlas emplearemos una etiqueta
<select></select>.
Podemos ver, a partir de estas directivas, la forma más típica y sencilla
de esta etiqueta:
selected: del mismo modo que multiple, este atributo no toma ningún
valor sino que simplemente indica que la opción que lo presenta está
elegida por defecto.
Así, si cambiamos la línea del código anterior:
<option>Otoño</option>
por:
<option selected>Otoño</option>
<option value="1">Primavera</option>
Botones de radio
Cajas de validación
Del mismo modo que para los botones de radio, podemos activar la caja
por medio del atributo checked.
He aquí un ejemplo:
Botones normales