USEMOS HTML5 Oscar Luna

(1)

1

USEMOS HTML5

Oscar Luna

(2)

2

ÍNDICE

INFORMACIÓN BÁSICA – PAG 4

BASES

EDITOR DE TEXTO – PAG 6 CREAR UN ARCHIVO – PAG 7 ABRIR EL ARCHIVO – PAG 8 ETIQUETAS HTML – PAG 9 ATRIBUTOS HTML – PAG 10

ESTRUCTURA BÁSICA DE UN DOCUMENTO DE HTML5 – PAG 11

ESTRUCTURA GENERAL DEL CUERPO DE UN DOCUMENTO HTML5 – PAG 13 HTML5 SOPORTE DE LOS NAVEGADORES – PAG 16

ETIQUETAS

ETIQUETAS UTILIZADAS DENTRO DE LA ETIQUETA <HEAD> – PAG 17 ETIQUETAS – TEXTO – PAG 18

ETIQUETAS – IMÁGENES – PAG 21 ETIQUETAS - AUDIO Y VIDEO – PAG 23 ETIQUETAS – HIPERVÍNCULOS – PAG 24

ETIQUETAS - CONTENIDO INTERACTIVO – PAG 25 ETIQUETAS – BLOQUES – PAG 26

(3)

3 ATRIBUTOS

ATRIBUTOS – INTRODUCCIÓN – PAG 27

ATRIBUTOS – ETIQUETAS UTILIZADAS DENTRO DE LA ETIQUETA <HEAD> – PAG 28 ATRIBUTOS – ETIQUETAS DE TEXTO – PAG 31

ATRIBUTOS - ETIQUETAS DE IMÁGENES – PAG 35 ATRIBUTOS - ETIQUETAS DE AUDIO Y VIDEO – PAG 38 ATRIBUTOS - ETIQUETAS DE HIPERVÍNCULOS – PAG 39

ATRIBUTOS - ETIQUETAS DE CONTENIDO INTERACTIVO – PAG 40 ATRIBUTOS – ETIQUETAS DE BLOQUES – PAG 41

ATRIBUTOS – ID Y CLASS – PAG 42 ATRIBUTO – STYLE (CSS) – PAG 43

En esta guía aprenderás las bases del lenguaje HTML en su quinta versión (HTML5) por medio de explicaciones cortas y sencillas que te darán una idea bastante completa.

(4)

4

INFORMACIÓN BÁSICA

INTERNET

Conjunto de redes de telecomunicación conectadas a través de unas reglas establecidas conocidas como Protocolos.

SERVIDOR (COMPUTADORAS DEDICADAS)

Son computadoras en las cuales se almacena información.

SERVIDOR WEB

Es un programa encargado de establecer las conexiones entre un servidor (computadora dedicada) y el internet.

LA WEB

Es un espacio de información compuesto por la unión de servidores web a través del mundo donde hay documentos identificados por URLs (El nombre de una página) que se encuentran interconectados por links.

NAVEGADOR WEB

Es un programa que por medio de una conexión a internet permite acceder a la Web interpretando la información almacenada en esta.

HTML (Hypertext markup language)

Es el lenguaje estandarizado que se utiliza para crear páginas web.

(5)

5 HYPERTEXTO (Hypertext)

Texto que conforma una página web.

EDITOR DE TEXTO (En referencia a HTML)

Es un programa donde podemos escribir el lenguaje HTML para que este sea posteriormente ejecutado o reconocido por un navegador web.

(6)

6

EDITOR DE TEXTO

Como pudimos observar en la guía de información básica es necesario contar con un editor de texto para poder escribir el lenguaje HTML de manera que sea entendido y ejecutado. En esta guía utilizare “Notepad++” ya que lo puedes descargar de manera gratuita, es bastante básico y fácil de trabajar, sin embargo, si posteriormente deseas utilizar otro no hay ningún problema solo que

recomiendo aprendas las bases primero con este editor.

(7)

7

CREAR UN ARCHIVO

Para crear un archivo HTML sigue los siguientes pasos:

• Descarga el editor de texto.

• Abre el editor de texto.

• Ve a la parte de “Archivo” y presiona “Guardar como”.

• Colócale un nombre al archivo (se recomienda nombrarlo “index”) y en la parte que te dice “tipo” selecciona la opción que dice: “Hyper Text Markup Language file”

• El archivo se guardará y tomará el icono del navegador predeterminado.

(8)

8

ABRIR EL ARCHIVO

Cuando desees abrir tu archivo lo puedes hacer de dos maneras:

1. Doble clic:

Cuando das doble clic sobre tu archivo lo que haces es decirle al computador que ejecute el código que se encuentra escrito dentro de él, por lo tanto, veras que tu navegador se abre y como el archivo no tiene código será una página en blanco.

2. Clic derecho – Editar con “Notepad++”

Cuando abres tu archivo de esta manera lo que haces es abrir el editor para poder modificar el código que se encuentra en el mismo.

(9)

9

ETIQUETAS HTML

Te darás cuenta de que en HTML encontraras palabras dentro de estos símbolos: <>, </>. Esto se debe a que en HTML trabajamos con algo llamado etiquetas, las etiquetas son un identificador del tipo de contenido que vamos a utilizar en cada momento.

Estas siguen un patrón donde han de ser abiertas y cerradas.

a. Cuando una palabra esta entre <> significa que se abre la etiqueta.

b. Cuando una palabra esta entre </> significa que se cierra la etiqueta.

Como nota adicional es importante conocer que la gran mayoría de etiquetas se deben abrir y cerrar, sin embargo, ten en cuenta que hay algunas que no siguen esta regla.

Aclaración:

El lenguaje HTML fue desarrollado en inglés, por lo tanto, notaras que todas las etiquetas que utilicemos estarán en inglés.

(10)

10

ATRIBUTOS HTML

Un atributo es una parte especifica de una etiqueta, siendo así que cuando un atributo acompaña una etiqueta este modificara el valor por defecto del atributo indicado.

Notas:

- A los atributos se les pueden definir valores determinados en cada ocasión.

- Siempre han de ser colocados en la apertura de una etiqueta.

- Las etiquetas pueden tener uno o más atributos.

Sintaxis:

Un solo atributo = <etiqueta atributo = “valor”>

Varios atributos = <etiqueta atributo = “valor” atributo = “valor” atributo = “valor” ;>

(11)

11

ESTRUCTURA BÁSICA DE UN DOCUMENTO DE HTML5

Cuando generamos un documento en HTML5 contamos con las siguientes partes básicas:

<!DOCTYPE html>

<html Lang= “es”>

<head>

</head>

<body>

</body>

</html>

Etiqueta <!DOCTYPE html>

Indica que estamos usando HTML5 y no una versión anterior.

Etiqueta <html>

Indica al navegador que es un documento “html”. Es la base de nuestro documento y contiene todos los elementos siguientes de

“html”.

• Lo que puedes observar después de “html” que es “Lang=“es” es un atributo que está cambiando el lenguaje por defecto al español.

• Cuando indico que contiene todos los elementos siguientes de HTML me refiero a que esta etiqueta la cerraremos hasta el final del documento ya que las siguientes han de encontrarse en su interior para que sean reconocidas por el documento.

Además, por razones de practicidad es necesario que las etiquetas tengan una jerarquía visual por esta razón usamos diferentes espacios desde la parte lateral.

(12)

12 Etiqueta <head>

Dentro de esta etiqueta colocamos la información vital de nuestro sitio, cabe decir que estos elementos son invisibles para el usuario ya que se indican para el navegador.

Etiqueta <body>

Esta etiqueta se establece como el cuerpo del documento, es decir, indica toda la parte visible de nuestro sitio web.

Como pudiste observar aparte de la etiqueta <!DOCTYPE html> todas las demás se han abierto y cerrado, esto se debe a que esta etiqueta es de las pocas que con solo abrirla ejecuta su función en el documento.

(13)

13

ESTRUCTURA GENERAL DEL CUERPO DE UN DOCUMENTO HTML5

En HTML5 como en cualquier tipo de documento se sigue un orden para que este sea entendible y fácil de usar, en nuestro caso contamos con los siguientes parámetros:

– Encabezado o cabecera.

– Barra de navegación o menú.

– Barra lateral (información secundaria).

– Información o contenido principal.

– Pie de página.

A razón de seguir esta configuración contamos con las siguientes etiquetas para organizar nuestro documento:

1. <header>

Es utilizada para colocar la cabecera de un sitio web.

2. <nav>

En esta ubicamos la parte de navegación del sitio web, es decir, el menú.

3. <aside>

La utilizamos para ubicar una barra lateral en nuestro sitio. La información plasmada en esta es secundaria teniendo así relación con la principal o complementando esta.

(14)

14 4. <section>

Espacio que utilizamos para ubicar el contenido principal del sitio, puede ser indicada de muchas maneras distintas, lo importante es que la información plasmada en esta sea clara y fácil de ubicar.

5. <article>

Es un espacio en el cual podemos ubicar contenido. Esta se utiliza dentro de la etiqueta <section> y podemos ubicar tantos (articles) como lo consideremos necesario.

6. <footer>

Funciona como el pie de página y en esta ubicamos información como: información de la web, información de la compañía, información del blog, información de como contactarnos, los derechos de la información, la dirección y el tipo de contenido de nuestro sitio web.

Cabe destacar que esta es una guía de cómo debería constituirse un documento HTML5, sin embargo, mientras la información del documento sea clara y este cuente con una navegación fácil y practica podemos cambiar la base como lo consideremos necesario.

Por lo tanto, nuestro documento base se vería de la siguiente manera:

(15)

15

<!DOCTYPE html>

<head>

</head>

<body>

<header>

</header>

<nav>

</nav>

<aside>

</aside>

<section>

<article>

</article>

</section>

<footer>

</footer>

</body>

</html>

(16)

16

HTML5 SOPORTE DE LOS NAVEGADORES

Cuando nos encontramos en el proceso de desarrollo de un sitio web debemos buscar que este funcione y se vea de la misma manera en todos los navegadores.

(Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera, etc.)

Para esto, es importante comprender que ningún navegador soporta todas las características de HTML5 y segundo que las

características que soporta cada uno pueden variar. Por esta razón cuando desarrolles una página web revisa constantemente como se ve en los diferentes navegadores.

(17)

17

ETIQUETAS UTILIZADAS DENTRO DE LA ETIQUETA <HEAD>.

Veamos algunas etiquetas utilizadas dentro de la etiqueta <head>:

<title></title>

Esta etiqueta nos permite definir el nombre que tendrá nuestra página web. Esta información es clave ya que es utilizada en la barra de pestañas del navegador, en el nombre que reconocerán los motores de búsqueda de los navegadores y en el título de nuestra página cuando se encuentre en favoritos. Si no tenemos esta información nuestro documento no será válido.

<meta>

Información específica para el navegador o los buscadores. Esta información no se muestra en el cuerpo de la página, pero puede aparecer en resultados de búsqueda. No hay necesidad de cerrar esta etiqueta.

<link>

La etiqueta link define un enlace entre un documento y un recurso externo. No hay necesidad de cerrar esta etiqueta.

(18)

18

ETIQUETAS - TEXTO

Cuando desees utilizar texto en el cuerpo de tu documento lo puedes hacer mediante las siguientes etiquetas:

<h1> </h1>- <h6></h6>

Son las etiquetas que utilizamos para indicar títulos. El tamaño y la importancia del título disminuye con cada número que subes siendo entonces que <h1> es el título más grande e importante y <h6> es el título más pequeño y menos importante.

<p></p>

Es la etiqueta que utilizamos para escribir párrafos, en ella debemos tener en cuenta que los espacios que escribamos no son tomados en cuenta, es decir, que los siguientes textos aparecerían de igual manera que sería la siguiente: Esto es un texto.

a. Esto es un texto.

b. Esto es un texto.

c.

Esto es un texto.

Si deseas utilizar espacios debemos utilizar otras etiquetas para lograr este efecto.

<br> (No necesita ser cerrada)

Utilizamos esta etiqueta para identificar un salto de línea en un nuestro texto.

<hr> (No necesita ser cerrada)

Usamos esta etiqueta para definir un cambio temático en el contenido, por lo tanto, gráficamente se genera una línea horizontal de lado a lado de la página.

(19)

19

<b></b>

Es utilizada para colocar texto en negrilla sin ninguna importancia semántica. (Se recomienda no usarla)

<i></i>

Es utilizada para colocar texto en cursiva sin ninguna importancia semántica. (Se recomienda no usarla)

<em></em>

Se usa para indicar énfasis en cierta parte de un texto, el texto queda en letra cursiva.

<strong></strong>

Se usa para indicar que cierta parte de un texto es importante, el texto queda en negrilla.

<mark></mark>

Se utiliza para resaltar una parte de un documento.

<address></address>

La usamos para definir la información de contacto del sitio. Generalmente aparece en cursiva.

<small></small>

La utilizamos para marcar la información legal de un texto.

(20)

20 Lista <ol></ol>

Utilizamos esta etiqueta para generar una lista organizada numéricamente, sin embargo, para agregar cada valor de la lista debemos utilizar la etiqueta <li>.

Lista <ul></ul>

Utilizamos esta etiqueta para generar una lista desorganizada, sin embargo, para agregar cada valor de la lista debemos utilizar la etiqueta <li>.

Lista <li></li>

Usamos esta etiqueta para ingresar cada valor particular en una lista ya sea que la lista sea organizada o desorganizada.

<table></table>

Utilizamos esta etiqueta para generar una tabla en nuestro documento, sin embargo, esta debe ser complementada con las siguientes etiquetas: <tr>, <th>, <td>, <caption>.

<tr></tr> - Define una fila.

<th></th> -Define una celda de título en una tabla.

<td></td> - Define una celda.

<caption></caption> - Define el nombre que se le dará a la tabla. Esta etiqueta debe ser colocada después de la etiqueta <table>

para que pueda ser reconocida. Solo es posible asignar un nombre a una tabla.

(21)

21

ETIQUETAS - IMÁGENES

Para conectar imágenes a un documento utilizamos las siguientes etiquetas:

<img>

Es la etiqueta básica para identificar una imagen en un documento

<picture></picture>

Utilizamos esta etiqueta para generar flexibilidad al momento de mostrar una imagen en nuestro documento. Normalmente una imagen que colocamos se adecua al tamaño de la pantalla que la está mostrando, con el uso de esta etiqueta podemos generar una lista de imágenes y nos da la posibilidad de indicar que imagen deseamos mostrar dependiendo del tamaño de la pantalla. Para lograr generar esta lista hacemos uso de la etiqueta <source> y <img>. La etiqueta <img> siempre debe ir luego de las opciones dadas por la etiqueta <source> ya que esta entrara en funcionamiento en caso de que las opciones dadas no cumplan las características necesarias.

<source></source>

Por medio de esta etiqueta identificamos archivos fuente que utilizaremos dependiendo de unos parámetros establecidos.

<map></map>

Esta etiqueta nos permite generar un mapa de navegación sobre una imagen. Se debe usar con la etiqueta <area>.

<area>

Esta etiqueta se utiliza de la mano de la etiqueta <map> y lo que nos permite hacer es generar las áreas interactivas de la imagen, es decir, las partes de la imagen que nos permitirán navegar.

(22)

22

<figure></figure>

Utilizamos esta etiqueta para marcar imágenes como contenido separado del documento de tal manera que el modificar o eliminar este no altera nuestro documento. Se utiliza con la ayuda de las etiquetas <img> y <figcaption>.

<figcaption></figcaption>

Conectada con la etiqueta <figure> esta etiqueta nos permite agregarle un título a nuestra imagen que se encontrara en la parte izquierda baja.

(23)

23

ETIQUETAS - AUDIO Y VIDEO

Si deseamos conectar contenido multimedia a nuestra página web debemos utilizar las siguientes etiquetas:

<video></video>

Esta etiqueta nos ayuda a conectar un archivo de video a nuestra página web. Se usa con la ayuda de la etiqueta <source>.

<source> (utilizada en la etiqueta <video>)

Esta etiqueta nos permite identificar varias fuentes de video, es decir, que podemos colocar un video en diferentes formatos para que el navegador escoja cual es óptimo reproducir en cada caso. Los formatos de video reconocidos son: MP4, WebM y Ogg.

<audio></audio>

Esta etiqueta nos ayuda a conectar un archivo de audio a nuestra página web. Se usa con la ayuda de la etiqueta <source>.

<source> (utilizada en la etiqueta <audio>)

Esta etiqueta nos permite identificar varias fuentes de audio, es decir, que podemos colocar un audio en diferentes formatos para que el navegador escoja cual es óptimo reproducir en cada caso. Los formatos de audio reconocidos son: MP3, WAV y Ogg.

(24)

24

ETIQUETAS – HIPERVÍNCULOS

Si deseamos utilizar un hipervínculo en nuestra página web debemos utilizar la siguiente etiqueta:

<a></a>

Por medio de esta etiqueta identificamos un hipervínculo. Un hipervínculo puede estar sujeto a cualquier tipo de elemento de HTML (textos, imágenes, etc.).

(25)

25

ETIQUETAS - CONTENIDO INTERACTIVO

<button></button>

Esta etiqueta nos permite generar un botón al cual le podemos otorgar todo tipo de función.

(26)

26

ETIQUETAS – BLOQUES

Las etiquetas de bloques son aquellas que nos permiten generar contenedores que agrupan ciertos elementos.

<span></span>

Esta etiqueta es usada en medio de un párrafo para encerrar una palabra a la cual deseemos cambiarle su apariencia predeterminada por medio del uso de estilos (Guía de CSS). Nunca debe estar al comienzo de un párrafo.

<div></div>

Esta etiqueta nos permite generar contenedores que agrupan otros elementos de HTML. Piénsalo como las etiquetas base (header, nav, etc) la única diferencia es que este tipo de contenedores no tienen importancia a nivel de la estructura del documento, solo agrupan elementos.

(27)

27

ATRIBUTOS - INTRODUCCIÓN

Cuando nos referimos a atributos entendemos que estos son parámetros que componen una etiqueta. Tomando esto en cuenta hemos de hacer una aclaración ya que podemos encontrar por decirlo de alguna manera dos tipos de atributos en general en cada etiqueta:

a. El primer tipo de atributos son aquellos que complementan o definen la funcionalidad de nuestra etiqueta.

b. El segundo tipo lo constituye únicamente el atributo (style), este atributo nos permite hacer cambios en la apariencia de una etiqueta, sin embargo, este tipo de cambios no complementan ni definen la funcionalidad de la misma.

Nota:

Las etiquetas utilizadas por fuera de la etiqueta <body> no hacen uso del atributo (style).

Durante esta sección veremos que atributos son necesarios o tenemos disponibles en los elementos mencionados en la parte de etiquetas. Si deseas conocer información sobre el atributo (style) puedes hacerlo en la sección dedicada a este que puedes encontrar al final de esta unidad.

(28)

28

ATRIBUTOS – ETIQUETAS UTILIZADAS DENTRO DE LA ETIQUETA <HEAD>.

<title>

No cuenta con atributos de funcionalidad.

<meta>

Cuenta con los siguientes atributos:

• charset

Identifica el tipo de caracteres que usaremos en el documento. Generalmente utilizamos el valor “utf-8” ya que este equivale a los caracteres del español.

• name

Atributo para identificar el tipo de información global que deseamos definir. Esta cuenta con los siguientes valores:

<meta name="viewport"> - Nos permite ajustar el tamaño de nuestra página web para que este corresponda con el tamaño de diferentes dispositivos móviles.

• content

Atributo para definir la información correspondiente a la información identificada con el atributo (name).

(29)

29

<link>

Cuenta con los siguientes atributos:

• rel

Especifica la relación entre el documento actual y el documento que ha sido enlazado. Algunos de sus valores son:

• type

Especifica el tipo de medio del documento enlazado.

• href

Especifica la locación (URL) del documento enlazado. En HTML podemos tener dos tipos de URL:

a. Una URL absoluta: Se refiere a la URL de un archivo que viene de otra página web.

href = “www.google.com”

b. Una URL relativa: Se refiere al enlace de un archivo que se encuentra en los archivos de la página web que la está mostrando.

href = “archivo.css”

Como nota adicional voy a mencionar como manejamos URLs relativas:

a. Si nuestro archivo se encuentra en la misma carpeta que nuestro archivo HTML solo debemos escribir el nombre del archivo con su extensión: imagen.jpg

(30)

30 b. Si nuestro archivo se encuentra en una carpeta que está dentro de la misma carpeta que nuestro archivo HTML debemos indicar la entrada a esa carpeta y luego el nombre del archivo con su extensión: carpeta interna/imagen.jpg

c. Si nuestro archivo se encuentra en una carpeta que está antes de la carpeta donde se encuentra nuestro archivo HTML debemos indicar la salida de la carpeta actual, la entrada a la carpeta de nuestro archivo y luego el nombre del archivo con su extensión: ../carpeta independiente/imagen.jpg

(31)

31

ATRIBUTOS – ETIQUETAS DE TEXTO

Las etiquetas de texto cuentan con los siguientes atributos:

<h1> </h1>- <h6></h6>

No cuenta con atributos de funcionalidad.

<p></p>

<br>

<hr>

<b></b>

<i></i>

(32)

32

<em></em>

<strong></strong>

<mark></mark>

<address></address>

<small></small>

(33)

33 Lista <ol></ol>

• reversed= “reversed” - Indica que la numeración de la lista debe ir invertida, es decir, de mayor a menor.

• start = “numero” - Especifica el valor inicial de nuestra lista ordenada.

• Type = “valor de orden” – Cuando utilizamos el atributo (type) podemos asignar varios valores diferentes:

1 – Números decimales (1,2,3)

a – Orden alfabético en letra minúscula.

A – Orden alfabético en letra mayúscula.

i – Números romanos en letra minúscula.

I – Números romanos en letra mayúscula.

Lista <ul></ul>

Lista <li></li>

(34)

34

<table></table>

<tr></tr>

<th></th>

<td></td>

<caption></caption>

(35)

35

ATRIBUTOS - ETIQUETAS DE IMÁGENES

<img>

• alt = “texto” – Con este atributo podemos colocar un texto que aparecerá en el espacio de la imagen en caso de que esta no pueda ser visualizada.

• height = “pixeles” – Mediante este atributo podemos especificar la altura en pixeles de una imagen.

• width = “pixeles” - Mediante este atributo podemos especificar el ancho en pixeles de una imagen.

• usemap = “#nombredelmapa” – Le otorga la cualidad a una imagen de poder funcionar como un mapa de navegación, debe usarse con la etiqueta <map> para identificar sus valores de navegación.

• src = “Origen” – Por medio de este atributo podemos identificar la fuente de nuestra imagen, es decir, el lugar de donde la estamos enlazando a nuestra página web. Cuando hacemos esto tenemos 2 tipos de orígenes que son las URLs absolutas y las URLs relativas las cuales fueron explicadas con la etiqueta <link>.

<picture></picture>

<source>

• srcset = “URL de la imagen” – Define una imagen a utilizar.

• media = “parámetro” – Establece el parámetro bajo el cual utilizaremos una imagen distinta a la original. Este parámetro se establece por medio de una (consulta de medios) concepto que se trabajara en la sección de CSS.

(36)

36

<map></map>

Cuenta con el siguiente atributo:

• name = “nombredelmapa” es el nombre que se le había otorgado a la imagen que deseamos usar como mapa por medio del atributo (usemap).

<area>

Cuenta con los siguientes atributos:

• alt = “texto” – Con este atributo podemos colocar un texto que aparecerá en el área determinada en caso de que esta no pueda ser visualizada por el usuario esto con el objetivo de que pueda ser leída por un servicio de asistencia.

• href = “URL” – Especifica la URL que se encuentra disponible en ese espacio.

• shape = “forma” – Especifica la forma del área que se está utilizando para colocar el link de navegación. Esta puede tomar varios valores: default (si no se especifica), rect (rectángulo), circle (circulo).

• target = “forma de abrir el hipervínculo” – Indica donde queremos que se abra el link, puede tomar varios valores:

_blank – Abre el documento en una nueva pestaña o ventana.

_self – Abre el documento en el mismo espacio en el que fue seleccionado.

_parent – Abre el documento en el espacio total de la etiqueta que lo contiene.

_top – Abre el documento en el tamaño completo de la ventana.

• Coords = “coordenadas” – Especifica las coordenadas del espacio de navegación.

Estas coordenadas pueden ser indicadas de varias maneras dependiendo del valor utilizado en el atributo (shape):

a. Si es un rectángulo se utiliza: (a,b,c,d) siendo que (a,b) identifican las coordenadas de la esquina de arriba a la izquierda y (c,d) las coordenadas de la esquina derecha de abajo, esto para formar el rectángulo.

(37)

37 b. Si es un circulo se utiliza: (a,b,c) donde se identifica las coordenadas del centro del circulo (a,b) y el radio del mismo (c).

<figure></figure>

<figcaption></figcaption>

(38)

38

ATRIBUTOS - ETIQUETAS DE AUDIO Y VIDEO

<video></video>

• controls – Atributo que añade controles a nuestro video (botón de reproducir/pausar, volumen, pantalla completa). No cuenta con valores.

• width = “pixeles” – Nos permite ajustar el ancho en pixeles de nuestro video.

• height = “pixeles” – Nos permite ajustar la altura de nuestro video en pixeles.

• autoplay – Elemento que permite que un video se empiece a reproducir automáticamente al cargar la página. No cuenta con valores.

<source> (utilizada en la etiqueta <video>) Cuenta con los siguientes atributos:

• src = “URL del video” – Especifica la fuente de nuestro video, es decir, el lugar del cual lo estamos obteniendo.

• type = “tipo de archivo/extensión” – Nos ayuda a identificar el tipo de archivo que utilizaremos.

<audio></audio>

Cuenta con el siguiente atributo:

• controls – Atributo que añade controles a nuestro video (botón de reproducir/pausar, volumen)

<source> (utilizada en la etiqueta <audio>)

Cuenta con los atributos (src) y (type) de la misma manera que cuando se utiliza con la etiqueta <video>, cabe recalcar que en la etiqueta (src) indicaremos la URL de nuestro audio y en (type) el tipo de archivo ha de ser un formato de audio.

(39)

39

ATRIBUTOS - ETIQUETAS DE HIPERVÍNCULOS

<a></a>

• href = “URL” – Hipervínculo de la página a la cual queremos redirigir al usuario. Este hipervínculo puede ser absoluto o relativo como lo vimos con la etiqueta <link>.

• title = “texto” – Nos permite agregar información sobre el hipervínculo la cual se mostrará cuando el mouse se encuentre encima de este.

• target = “forma de abrir el hipervínculo” – Indica donde queremos que se abra el hipervínculo, puede tomar varios valores:

_blank – Abre el documento en una nueva pestaña o ventana.

_self – Abre el documento en el mismo espacio en el que fue seleccionado.

_parent – Abre el documento en el espacio total de la etiqueta que lo contiene.

_top – Abre el documento en el tamaño completo de la ventana.

Cabe mencionar que por medio de hipervínculos podemos generar saltos de página, es decir, generar un hipervínculo que nos lleve a una parte especifica de nuestro documento. Esto se logra a partir de dos atributos:

1. id – El cual veremos en breve.

2. href.

Todo consiste en asignarle a un elemento un “id” y generar un hipervínculo relacionado sea a una imagen o texto con el siguiente formato en el atributo de fuente (href).

<a href = “#nombre del id”>Texto</a>

(40)

40

ATRIBUTOS - ETIQUETAS DE CONTENIDO INTERACTIVO

<button></button>

(41)

41

ATRIBUTOS – ETIQUETAS DE BLOQUES

<span></span>

<div></div>

(42)

42

ATRIBUTOS - ID Y CLASS

Los atributos (id) y (class) son aquellos que nos permiten otorgarle cierto nombre especifico a un elemento de nuestro documento para que así lo podamos trabajar bajo este nombre.

Id

Nos permite asignar un identificador único y distintivo a un elemento. Con este identificador podemos modificar o configurar el elemento en CSS o javascript.

Reglas:

- No se deben utilizar caracteres especiales.

- Deben ser únicos.

- Utilizar las letras del abecedario y los números enteros.

EJEMPLO: <p id= “blu”>Buuuuu</p> - Como podemos observar le asignamos el (id) “blu” a este párrafo de tal forma que mediante ese id podemos modificar el párrafo más adelante como lo creamos conveniente.

Class

Por medio de este atributo podemos crear un identificador que varios elementos pueden compartir, de esta manera las configuraciones que apliquemos a ese identificador afectaran a todos los elementos que hagan parte de él.

EJEMPLO:

<p class = “ble”>Parrafo</p>

<p class = “ble”>Otro párrafo o.o</p>

De esta manera cuando configuremos la clase “ble” afectara a ambos párrafos así estos se encuentren en partes distintas de nuestro documento.

(43)

43

ATRIBUTO - STYLE (CSS)

FUNCIÓN

Como fue mencionado en la introducción de esta unidad, el atributo (style) únicamente modifica la presentación de los elementos, por lo tanto, no cambia nada en lo referente a la función de estos mismos. La forma de escribirlo es la siguiente:

Veamos un ejemplo:

<p style = “color: white;”> Párrafo</p>

En este caso tenemos la propiedad “color” que modifica el color de un texto y el valor “blanco”, por lo tanto, el color de texto de este párrafo será blanco.

Como podemos observar el color de la letra de nuestro párrafo fue cambiado a blanco, esto no cambia el hecho de que sigue siendo un párrafo y que cumplirá la misma función de siempre la cual es mostrar un texto determinado. De esta manera es que funciona el atributo (style).

(44)

44 PROPIEDADES - VALORES

Ahora, es importante denotar que cualquier etiqueta puede utilizar el atributo (style) y que este atributo cuenta con una gran cantidad de propiedades y valores para esas propiedades, veamos un ejemplo:

<p style= “background-color: black; color: white; font-family: verdana; font-size: 200px; text-align: center;”>Párrafo</p>

Veamos que propiedades utilizamos:

Background-color – Con la cual definimos el color de fondo de nuestra etiqueta.

Color - Con la cual definimos el color de la letra de nuestra etiqueta.

Font-family - Con la cual definimos la fuente de letra que utilizara nuestro elemento.

Font-size – Con la cual definimos el tamaño de la letra.

text-align – Por medio de la cual definimos la posición horizontal que tendrá nuestro texto.

Aunque en este ejemplo solo usamos 5 propiedades podemos denotar la variedad de propiedades y valores que puede tener una etiqueta por medio del atributo (style), además, podemos visualizar el hecho de que cuando escribimos este atributo con sus propiedades y valores la línea de código que utilizamos se vuelve bastante más larga a pesar de que el contenido de la etiqueta es bastante corto.

Para evitar este problema contamos con la siguiente opción:

ATRIBUTO STYLE EN LA ETIQUETA <HEAD>

- Si deseamos cambiar la apariencia de un tipo de elemento de su estado predeterminado, pero no deseamos hacerlo en la misma línea de código que la etiqueta, podemos utilizar el atributo (style) en la etiqueta <head> de nuestro documento y llamar el tipo de elemento que deseamos cambiar.

Veamos un ejemplo:

(45)

45

<! DOCTYPE html>

<head>

<style>

p {

Background-color: black;

color: white;

font-family: verdana;

font-size: 200px;

text-align: center;

}

</style>

</head>

<body>

<p>Párrafo</p>

</body>

</html>

De esta manera nos fue posible evitar que la línea de código de la etiqueta <p> se volviera tan grande y además pudimos organizar las propiedades del atributo (style) para nuestra etiqueta de manera bastante clara.

(46)

46 IDENTIFICADORES Y TAMAÑO DE NUESTRO CÓDIGO

Sin embargo, tenemos 2 problemas con esta forma de organizar la información de nuestro atributo (style) para la etiqueta <p>:

1. Cuando colocamos que para la etiqueta <p> utilizamos estas propiedades, nuestro código lo toma como si lo quisiéramos así para todas las etiquetas <p> que lleguemos a colocar, lo cual no es muy bueno porque puede que deseemos cambiar las propiedades o los valores de estas en otra etiqueta <p>.

2. Como puedes ver, aunque lo cambiamos de posición y se ve un poco más organizado, la información del atributo (style) para nuestra etiqueta sigue ocupando bastante espacio de nuestro código lo cual se puede volver bastante molesto entre más etiquetas agregamos.

Soluciones primer problema

Para solucionar este problema tenemos dos soluciones bastante sencillas:

a. Utilizar el atributo (id) en nuestra etiqueta y por medio del identificador de esta etiqueta identificar las propiedades de estilo que deseamos utilizar.

b. Utilizar el atributo (class) en nuestra etiqueta y por medio del identificador de esta etiqueta identificar las propiedades de estilo que deseamos utilizar. Cabe destacar que en este caso podríamos usar ese mismo identificador de clase en otros elementos para que se les aplique las mismas propiedades.

Notas:

1. Cuando deseamos identificar un (id) en el atributo (style) localizado dentro de la etiqueta <head>, colocamos el símbolo # acompañado del nombre del (id) de la siguiente manera = #nombre del id

2. Cuando deseamos identificar una clase en el atributo (style) localizado dentro de la etiqueta <head>, colocamos un punto acompañado del nombre de la clase de la siguiente manera = .nombre de la clase

(47)

47 Solución a (id)

<head>

<style>

#tex {

color: white;

}

</style>

</head>

<body>

<p id= “tex”>Párrafo</p>

</body>

</html>

(48)

48 Solución b (clase)

<head>

<style>

.tex {

color: white;

}

</style>

</head>

<body>

<p class= “tex”>Párrafo</p>

</body>

</html>

(49)

49 Con las soluciones anteriores evitamos el problema de que la configuración de un estilo sea utilizada en elementos en los que no lo deseamos.

Solución segundo problema

Aunque hayamos solucionado el primer problema todavía tenemos el inconveniente de que el atributo (style) está ocupando una gran cantidad de espacio en nuestro código.

Para solucionar este problema te quiero introducir un lenguaje llamado CSS.

¿Qué es CSS? (Cascading Style Sheets – Hojas de estilo en cascada)

Es el lenguaje utilizado para definir la apariencia de los elementos de HTML, es decir, sus cualidades graficas.

Pero debes estarte preguntando, ¿No es eso lo mismo que el atributo “style”? Y la respuesta es sí, es exactamente lo mismo, lo que pasa es que el atributo “style” es una forma de utilizar el lenguaje CSS en HTML.

Pero bueno, lo que queremos saber es como solucionar nuestro problema, la forma de solucionarlo es muy sencilla. En vez de utilizar el atributo (style) mejor utilizamos el lenguaje CSS para editar las cualidades graficas de nuestros elementos.

Si crees que esto suena complicado no lo es en absoluto, ya que lo que debemos hacer es lo siguiente:

UTILIZANDO CSS

1. Crear un archivo de CSS.

Para hacer esto entra a tu editor de texto (Notepad++ si estas siguiendo mi recomendación) en un nuevo archivo, luego ve a guardar archivo como, colócale un nombre (por lo general se le coloca “style” como nombre), en (tipo) busca la opción que diga (Cascade Style Sheets file .css) y guárdalo en la misma carpeta que tienes tu archivo HTML.

2. Pasar la información del atributo (style) a nuestro archivo de CSS.

Para hacer esto simplemente corta la información que está dentro del atributo (style) y pégala en el archivo CSS, luego borra el atributo (style) de la etiqueta <head>. En nuestro ejemplo seria esta parte:

(50)

50 Con id:

#tex {

color: white;

}

Con clase:

.tex {

color: white;

}

Una vez hayas pegado esta información en tu archivo de CSS guárdalo y vuelve a tu archivo de HTML.

(51)

51 3. Enlazar el archivo HTML con el archivo CSS.

Lo último que debemos hacer es enlazar los archivos para que de esta forma la información en nuestro archivo CSS tenga impacto en los elementos de nuestro archivo de HTML. Para hacer esto vamos a utilizar una etiqueta que mencionamos en la unidad de

etiquetas en el punto de etiquetas utilizadas dentro de la etiqueta <head> la cual es la siguiente:

Para terminar nuestra tarea solo sería colocar esta etiqueta en nuestro documento y habremos terminado.

CONCLUSIÓN

Siguiendo los anteriores pasos pudimos solucionar nuestro problema ya que ahora tenemos 2 archivos: un HTML y un CSS. El problema de la identificación de nuestro elemento lo solucionamos utilizando un id o una clase y el problema del espacio lo solucionamos separando el código de HTML y la configuración gráfica (Lo cual es lo recomendado).

De esta manera este sería nuestro resultado final:

Nota:

Si deseas conocer más propiedades gráficas y sus valores puedes consultar la sección de CSS.

(52)

52 ARCHIVO HTML

<head>

<link rel= “stylesheet” href= “style.css”>

</head>

<body>

<p id= “tex”>Párrafo</p>

</body>

</html>

ARCHIVO CSS

#tex {

color: white;

}