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>
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.
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.
Publicar un comentario
0
Comentarios
APOYAR
Ahora puedes colaborar con el blog en forma de donación. Puedes hacerlo de forma segura utilizando el botón de PayPal.
0 Comentarios