Etiquetas, atributos y valores-HTML5 y CSS3


En este segundo post, vamos a empezar a ver las primeras etiquetas, atributos y valores en el desarrollo web con HTML5 y CSS3.. No te agobies, vamos a ir poco a poco pero con paso firme. Y recuerda que siempre puedes preguntar en los comentarios como en el grupo de la comunidad de Facebook.

La finalidad de la etiqueta <p>


La etiqueta <p>, es la encargada de definir un párrafo. El navegador va a considerar que el texto encerrado dentro de esta etiqueta, como un párrafo.
Teniendo en cuenta que no todos los navegadores son iguales, dichos navegadores realizan un ajuste automático al ancho de la pantalla. Este ancho esta definido por el navegador donde se visualice nuestro sitio web.
Debemos tener en cuenta, que los navegadores cuando realizan la representación del lenguaje HTML5, no tienen en cuenta más de un espacio en blanco de separación entre palabras. Es decir, si en Sublime Text dejas mas de un espacio en blanco entre palabras, en el navegador solo se visualizará uno.
Con los saltos de linea nos pasa exactamente igual, si insertamos saltos de linea dentro de un párrafo con Sublime Text, el navegador solo interpretara como saltos de líneas aquellos que sean representados por su etiqueta equivalente

La sintaxis de la etiqueta <p> es la siguente:

<p>Texto del párrafo</p>

El siguiente ejemplo muestra el uso de la etiqueta <p> en un documento html:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum impedit rerum quo esse dolorum quidem, soluta, repudiandae? Ratione, quam voluptas illo debitis sed mollitia. Aspernatur iusto quam, sunt necessitatibus? Hic.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum impedit rerum quo esse dolorum quidem, soluta, repudiandae? Ratione, quam voluptas illo debitis sed mollitia. Aspernatur iusto quam, sunt necessitatibus? Hic.</p>

No os voy a presentar el resultado de como quedaría en el navegador. Esto debéis hacerlo vosotros y así os sirve de practica, a mi repetir y repasar clases siempre me ha ido fenomenal.


Los atributos y valores


Los atributos permiten dar ciertas características a las etiquetas. Por ejemplo, la anchura, la altura, e incluso hay atributos que permiten colocar un nombre a una determinada etiqueta. La sintaxis se escribe de la siguiente forma: <etiqueta atributo="1" atributo="2"...>Hola soy un texto</etiqueta>. Todos los atributos son colocados obligatoriamente en la etiqueta de apertura. A continuación vamos a ver algunos de estos atributos y unos ejemplos de como utilizarlos.


El atributo "style"


El atributo style nos permite aplicar estilos a un elemento o a una etiqueta. A continuación usamos el atributo style y vamos a asignarle el valor red.


Si lo visualizas en el navegador veras que el texto pasa a ser de color rojo. Es importante que todo lo que se explica aquí, lo hagas a modo de ejercicio.

El atributo "id"


Existen atributos que no modifican el comportamiento, pero permiten identificar un elemento. Como el atributo "id". Por ejemplo, asignamos al atributo "id" el valor "principal".


No voy a explicar para que se utiliza el atributo "id", ya que en este momento no viene a cuento y lo vamos a ver mas adelante.Y recuerda esto, podemos crear la cantidad de atributos que queramos para cada etiqueta.

La etiqueta <img>


La etiqueta <img> es la encargada de cargar o mostrar imágenes, es una etiqueta que no lleva cierre. Tiene un atributo "src=""y entre las comillas dobles le proporcionamos la ruta donde esta alojada la imagen. Esta etiqueta soporta los atributos width="" (ancho), heigt="" (altura) y alt="", donde colocaremos una descripción corta de la imagen. Esta descripción es recomendable colocarla siempre, ya que si por algún motivo el navegador no la carga, se visualizara ese texto. También es recomendable que la descripción no sean mas de 2 palabras separadas por un guion, sin acentos ni caracteres especiales.

La sintaxis de la etiqueta <img> es la siguiente:

<img src="url o enlace de la imagen" alt="Texto descriptivo">

La etiqueta <head>


La etiqueta <head> permite la carga de archivos estrenos como archivos CSS,  js o cualquier otra librería que haga que nuestro sitio web funcione correctamente. Esta es una información que el usuario no puede ver en el navegador.
Dentro de la etiqueta <head> nos encontramos con la etiqueta <meta charset="UTF-8"> la cual nos permite definir una codificación para el texto que nosotros escribamos. Nos permite por ejemplo, que se visualice bien la "Ñ" o el símbolo "$".
Nos encontramos también con la etiqueta <title>Document</title> en esta etiqueta pondremos información que si será visible para el usuario. Se visualiza en la barra de titulo del navegador.

La etiqueta <body>


Todo lo que coloquemos dentro de la etiqueta <body>, sera visible dentro del navegador.En la etiqueta <body> colocaremos imágenes, texto, diseño y básicamente todo el contenido visual de la página. No voy a profundizar más sobre esta etiqueta, ya que tanto la clase anterior como esta, son introductorias a HTML5.

Conclusiones de esta clase


hemos aprendido y jugado con las primeras etiquetas y atributos. Con las que seguiremos trabajando en siguientes clases o post, como queráis llamarlo. A mi escribir todo este post, me ha servido de repaso o estudio, por eso os recomiendo, que os pongáis este blog como acceso directo y siempre estará disponible para repaso como si fueran apuntes. Mi objetivo cuando publique este blog era compartir conocimientos y resolver dudas, tanto mías, como si puedo ayudaros en algo. Hasta el próximo post que será en breve, un abrazo.

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©

Publicar un comentario

0 Comentarios