HTML (5)Tutorial 2

ATRIBUTOS HTML

Los atributos proveen información adicional sobre los elementos HTML

Atributos HTML • Los elementos HTML pueden tener atributos • Los atributos proveen información adicional de un elemento • Los atributos se especifican siempre en el tag inicial • Los atributos van siempre en parejas de nombre/valor como:

name="valor" !Ejemplo de Atributo Los links HTML se definen con el tag <a>. La dirección del link se especifica en el atributo href:

Ejemplo: <a href="http://www.schools.com">This is a link</a> !Pon siempre comillas en el valor de los atributos Los valores de los atributos tienen que ir siempre entre comillas.

Las comillas más comunes son las dobles (“), pero las simples (‘) también están permitidas.

!Consejo: En algunas situaciones, cuando el valor del atributo contenga ya de por sí comillas, es necesario usar las simples: name='John "ShotGun" Nelson'

HTML Attributes Reference Aquí muestro una lista de algunos atributos que se pueden usar para un elemento:

!!!!!!!!Para una lista completa de atributos legales para cada elemento de HTML ve a: HTML Tag Reference.

Para más información sobre atributos puedes consultar: HTML Global Attributes Reference.

Atributo Descripción

class Especifica uno o más nombres de clase para un elemento (se refierae a una clase en un estilo de hoja)

id Especifica una única identificación para un elemento

style Especifica un estilo CSS para un elemento

title Especifica información extra sobre un elemento (se muestra como un texto cuando se pone el ratón encima de esa palabra)

HEADINGS EN HTML

HTML Headings Los headings se definen con los tags del <h1> al <h6>.

<h1> define el heading más importante. <h6> define el menos importante.

Ejemplo <h1>Esto es un heading</h1> <h2>Esto es un heading</h2> !Note: Los exploradores añaden automáticamente un espacio (margen) antes y después de cada heading.

!Los headings son importantes Usa los headings HTML sólo para headings. No los uses para hacer el texto GRANDE o en negrita.

Los motores de búsqueda de internet usan los headings para indexar la estructura y contenido de tu página web.

Ya que los usuarios mirarán tus páginas por sus headings, es importante usar headings para mostrar la estructura del documento.

Los headings H1 deberían usarse como los headings principales, y luego usar los H2, luego los H3, y así sucesivamente.

Líneas HTML Lines El tag <hr> crea una línea horizontal en una página HTML.

El elemento hr se puede usar para separar contenido:

Ejemplo <p>Esto es un párrafo.</p> <hr> <p>Esto es otro párrafo.</p> <hr> <p>Esto es otro párrafo más.</p> !Consejo HTML - Cómo ver el código fuente HTML Si has visto alguna vez una página web y te has preguntado: ¿Cómo han hecho esto?, puedes averiguarlo haciendo click con el botón derecho sobre la página y seleccionando “Ver fuente” en (Internet Explorer) o “Ver Fuente Página” (Firefox), o algo similar para los otros navegadores. Esto abrirá una ventana que contenga el código HTML para esa página.

HEADINGS: EJERCICIOS (PARA ENTREGAR)

Crea en un archivo del Bloc de notas el código para los siguientes ejemplos:

PÁRRAFOS

Los documentos HTML se dividen en párrafos.

!Párrafos HTML Los párrafos se definen con el tag <p>.

Ejemplo <p>Esto es un párrafo</p> <p>Esto es otro párrafo</p> !Nota: Los navegadores añaden automáticamente una línea vacía antes y después de un párrafo.

No te olvides del tag final La mayoría de los navegadores pueden mostrar el HTML correctamente incluso si te olvidas del tag final:

Ejemplo <p>Esto es un párrafo <p>Esto es otro párrafo !El ejemplo de arriba funciona en la mayoría de los navegadores, pero no confíes en ello. Olvidarse del tag final puede traer consigo resultados inesperados o errores.

Nota: Las versiones futuras de HTML NO permitirán no poner el tag final.

Salto de línea en HTML Usa el tag <br> si quieres hacer un salto de línea (o sea, una nueva línea) sin empezar un nuevo párrafo:

Ejemplo <p>Esto es<br>un pá<br>rrafo con saltos de línea </p> !!El elemento <br> es un elemento vacío, ya que no tiene tag final.

!HTML Output - Consejos No puedes estar seguro de cómo se mostrará el HTML. El resultado será diferente en pantallas grandes o pequeñas, o en ventanas con diferentes tamaños.

Con HTML, no puedes cambiar el output (el cómo salga) añadiendo espacios o líneas extra en tu código HTML.

El navegador quitará los espacios extra y las líneas extra cuando se muestre la página. Cualquier número de líneas contará como una línea, y cualquier número de espacios contará como un espacio.

PÁRRAFOS: EJERCICIOS (PARA ENTREGAR)

Consigue hacer el primer ejemplo en HTLM y mándame el código

¿Qué le pasa a este texto cuando lo metes como HTML?

FORMATOFormato de texto HTML

Este texto está en negrita (bold) !Este texto está en cursiva (italic) !Éste es el texto tipo ordenador !Este es el

subíndice y superíndice

!!Tags de formato HTML HTML usa tags como <b> y <i> para conseguir el texto en negrita (bold) o en cursiva (italic).

Estos tags HTML se llaman tags de formato.

!A menudo <strong> es como <b>, y <em> como <i>. !Sin embargo, hay una diferencia en el significado de estos tags: !<b> o <i> definen sólo los textos en negrita o cursiva. !<strong> o <em> significan que quieres que el texto se muestre de una manera que el usuario entienda como “importante”. Hoy, todos los navegadores mayoritarios hacen que strong sea negrita y em cursiva. Sin embargo si algún día un navegador quiere que el strong se muestre como subrayado, lo que esté como <strong> ya no aparecería como negrita (como es habitual) sino como subrayado. Es importante definir bien las cosas.

Tag Descripción

<b> Define texto en negrita

<em> Define texto enfatizado

<i> Define una parte del texto de una forma o modo diferente

<small> Define texto más pequeño

<strong> Define texto importante

<sub> Define texto subindexado

<sup> Define texto superindexado

<ins> Define texto insertado

<del> Define texto borrado

<mark> Define texto remarcado con colores (subrayado)

Tag Descripción

<abbr> Define una abreviatura o acrónimo

<address> Define la información de contacto del autor/propietario de un documento

<bdo> Define la dirección del texto

<blockquote> Define una sección que se cita de otra fuente

<q> Define una cita dentro de una línea

<cite> Define el título de un trabajo

<dfn> Define un término de definición

FORMATO (II)

Tag Descripción

<code> Define el texto tipo código de ordenador

<kbd> Define el texto tipo teclado

<samp> Define el texto tipo código de muestra del ordenador

<var> Define el texto tipo variable

<pre> Define texto preformateado

Escribe el código HTML que da como resultado los siguientes textos:

FORMATO: EJERCICIOS (PARA ENTREGAR)

Escribe el código HTML que da como resultado los siguientes textos:

Manda un pantallazo con lo que te sale al escribir lo siguiente, y explica lo que pasa.

FORMATO: EJERCICIOS (PARA ENTREGAR)