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
El atributo "style"
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"
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 sintaxis de la etiqueta <img> es la siguiente:
<img src="url o enlace de la imagen" alt="Texto descriptivo">
La etiqueta <head>
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.
0 Comentarios