viernes, 24 de febrero de 2017

Introduccion al estilo en HTML

Tutorial de HTML y principalmente su version 5

Estilos

El atributo style

Dar estilo a un elemento HTML, puede hacerse con el atributo style.

El atributo style emplea la sintaxis siguiente:

<nombredeetiqueta style="propiedad:valor;">

La propiedad es una propiedad CSS. El valor es un valor CSS.

Aprenderás más sobre CSS luego, en esta guía.

Color de fondo

Lo propiedad background-color define el color de fondo para un elemento HTML.

Este ejemplo establece el color de fondo de una pagina como azul pálido:

<body style="background-color:powderblue;">
 <h1>Este es un encabezado</h1>

 <p>Este es un párrafo.</p>
</body>

Color de texto

La propiedad color define el color de texto para un elemento HTML:

<h1 style="color:blue;">Este es un encabezado</h1>

<p style="color:red;">Este es un párrafo.</p>

Tipos de letra

La propiedad font-family define el tipo de letra que se usara para un elemento HTML:

<h1 style="font-family:verdana;">Este es un encabezado</h1>

<p style="font-family:courier;">Este es un párrafo.</p>

Tamaño de texto

La propiedad Font-size define el tamaño de texto para un elemento HTML:

<h1 style="font-size:300%;">Este es un encabezado</h1>

<p style="font-size:160%;">Este es un párrafo.</p>

Alineación de texto

La propiedad text-align define la alineación horizontal del texto para un elemento HTML:

<h1 style="text-align:center;">Encabezado Centrado</h1>

<p style="text-align:center;">Párrafo centrado.</p>

El atributo HTML ' lang '

Tutorial de HTML y principalmente su version 5

El atributo lang

El lenguaje del documento puede ser declarado en la etiqueta <html>.

El lenguaje se declara con el atributo lang.

El declarar un lenguaje es algo importante para las aplicaciones de accesibilidad (los lectores de pantalla) y los motores de búsqueda:

<!DOCTYPE html>
<html lang="en-US">

 <body>

  ...

 </body>

</html>

Las primeras dos letras especifican el lenguaje (en : english_ingles). Si hay diferentes dialectos, se emplean dos letras mas (US : United States_Estados Unidos).



Resumen de lo aprendido

  • Todos los elementos HTML pueden tener atributos
  • El atributo title provee información suplementaria en forma de “descripción emergente”
  • El atributo href provee dirección a los enlaces
  • Los atributos width y height proveen información sobre el tamaño de las imágenes
  • El atributo alt provee texto para los lectores de pantalla

Aprenderás más sobre las etiquetas y los atributos HTML en las siguientes secciones de esta guía.

Etiqueta Descripción
<html> Define la raíz de un documento HTML
<body> Define el cuerpo del documento
<head> Un contenedor para todos los elementos de cabecera (titulo, archivos de procesamiento por lotes, estilos, información extra, y mas)
<h1> a <h6> Definen los encabezados HTML
<hr> Define un cambio temático en el contenido

Etiqueta Descripción
<p> Define un párrafo
<br> Inserta un único salto de linea
<pre> Define un texto preformateado

Líneas horizontales HTML

Tutorial de HTML y principalmente su version 5

Líneas horizontales

La etiqueta <hr> define un cambio temático dentro de una página HTML, y es más frecuentemente mostrado como una línea horizontal.

El elemento <hr> se usa para separar el contenido (o definir un cambio) dentro de una página HTML:

<h1>Este es el encabezado 1</h1>

<p>Esto es un poco de texto.</p>
<hr>
<h2>Este es el encabezado 2</h2>

<p>Esto es un poco de otro texto.</p>
<hr>

Enlaces HTML

Tutorial de HTML y principalmente su version 5

Enlaces

Los enlaces HTML se definen con la etiqueta <a>:

<a href="https://www.digamos.com">
 Este es un enlace
</a>

Aprenderás mas sobre los enlaces y la etiqueta <a> posteriormente en esta guía..


El atributo href

El destino hacia donde nos envía el enlace se especifica con el atributo href.

<a href="https://www.ejemplo.com">
 Este es un enlace
</a>

Imágenes en HTML

Tutorial de HTML y principalmente su version 5

Imágenes

Las imágenes HTML se definen con la etiqueta <img>.

El archivo de origen (src), el texto alternativo (alt), el ancho, el alto se pasan con atributos.

Ejemplo:

<img src="brillantemente.jpg" alt="creativo.com" width="104" height="142">


El atributo src

Especifica la URL de una imagen.

Los atributos para el tamaño

  • El atributo width

    Especifica el ancho de una imagen.

    El tamaño de la imagen se especifica en pixeles: width=“104” significa que la imagen tendrá un ancho de 104 pixeles de pantalla.

  • El atributo height

    Especifica el alto de una imagen.

    El tamaño de la imagen se especifica en pixeles: height=“142” significa que la imagen tendrá un ancho de 142 pixeles de pantalla.

El atributo alt

El atributo alt específica un texto alternativo que se usara cuando una imagen no puede ser mostrada por una u otra razón.

El valor del atributo puede ser leído por los lectores de pantalla. De este modo, alguien que “escuche” la pagina web, es decir una persona ciega, puede “oír” el elemento.

<img src="luna.jpg" alt="imagen de una luna" width="104" height="142">


Aprenderás más sobre imágenes y la etiqueta <img> posteriormente en esta guía.

Los elementos HTML <br> y <pre>

Tutorial de HTML y principalmente su version 5

El elemento <br> y el elemento <pre>


El problema del poema

Este poema:

<p>
  Si tus ojos fueran luceros.

  Si tus labios fueran el mar.

  No habría paisaje más hermoso.

  Yo te quisiera admirar.
</p>

Se mostrara en el navegador como se muestra aca abajo... En una sola línea.

Si tus ojos fueran luceros. Si tus labios fueran el mar. No habría paisaje más hermoso. Yo te quisiera admirar.


El elemento <br>

El elemento <br> define un salto de línea.

Usa <br> si quieres un salto de línea (una nueva línea) que NO empiece un nuevo párrafo:

Ejemplo:

<p>
Si tus ojos fueran luceros.<br>Si tus labios fueran el mar.<br>No habría paisaje más hermoso.<br>Yo te quisiera admirar.
</p>

Se mostrara en el navegador como se muestra aca abajo.

Si tus ojos fueran luceros.
Si tus labios fueran el mar.
No habría paisaje más hermoso.
Yo te quisiera admirar.

La etiqueta <br> es una etiqueta vacia, lo que significa que no tiene etiqueta de final.

El elemento <pre>

El elemento <pre> define texto preformateado.

El texto dentro un elemento <pre> se muestra con un tipo de letra de ancho fijo (tipo de letra monoespaciado, usualmente Courier), y preserva los espacios y los saltos de línea.

Ejemplo:

<pre>
  Si tus ojos fueran luceros.

  Si tus labios fueran el mar.

  No habría paisaje más hermoso.

  Yo te quisiera admirar.
</pre>

Se mostrara en el navegador como se muestra aca abajo.

  Si tus ojos fueran luceros.

  Si tus labios fueran el mar.

  No habría paisaje más hermoso.

  Yo te quisiera admirar.

Párrafos HTML

Tutorial de HTML y principalmente su version 5

Parrafos

El elemento <p> define un párrafo.

Los párrafos HTML se definen con la etiqueta <p>:

<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>

Nota: los navegadores automáticamente añaden algunos espacios en blanco (un margen) antes y después de un párrafo.


Cuando hay que presentar un texto con formato especial, existen dos elementos que, dependendiendo del caso, te seran utiles... Acontinuacion, en la siguiente pagina.


El atributo title

Aca abajo, se le añade un atributo title al elemento <p>. El valor del atributo title se mostrara como una descripción emergente cuando el puntero pasa sobre el párrafo:

<p title="Soy una descripcion emergente">
Este es un parrafo.
</p>