{"id":43,"date":"2018-02-20T17:26:47","date_gmt":"2018-02-20T17:26:47","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/02\/20\/como-crear-mi-primera-pagina-web-html-css\/"},"modified":"2024-03-07T16:40:06","modified_gmt":"2024-03-07T22:40:06","slug":"como-crear-mi-primera-pagina-web-html-css","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-crear-mi-primera-pagina-web-html-css\/","title":{"rendered":"\u00bfC\u00f3mo crear mi primera p\u00e1gina web? CSS y Atributos HTML"},"content":{"rendered":"<p>En HTML, los atributos juegan un papel importante porque permiten definir cierta configuraci\u00f3n o comportamiento a los elementos HTML, permitiendo obtener diferentes resultados.<\/p>\n<p>Esta publicaci\u00f3n es la segunda parte de una serie de publicaciones sobre \u00bfC\u00f3mo puedes crear tu primera p\u00e1gina web?, aqu\u00ed puedes encontrar la <a href=\"https:\/\/pensemosweb.com\/en\/como-crear-primera-pagina-web\/\">primera parte<\/a>.<\/p>\n<p>En la primera parte vimos como tener las etiquetas(tags) b\u00e1sicas para tu p\u00e1gina web, ahora veremos que son los atributos y CSS.<\/p>\n<p>Primera recordemos como es una etiqueta o <strong>tag<\/strong>con la siguiente imagen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-315\" src=\"\/wp-content\/uploads\/2018\/02\/tag.jpg\" alt=\"\" width=\"700\" height=\"241\" \/><\/p>\n<p>Observando la imagen aprendemos la sintaxis para agregar atributos, es la parte de color rojo, en este caso <code>class<\/code>es el atributo, seguido de un signo de <code>=<\/code>y luego entre comillas el valor que queremos asignarle.<\/p>\n<p>Veamos los atributos <strong>start<\/strong>and <strong>reversed<\/strong>para una lista ordenada:<\/p>\n<p><iframe title=\"HTML atributos\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/QQarWK\/?height=265&amp;theme-id=0&amp;default-tab=html,result&amp;embed-version=2#full\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/QQarWK\/\">HTML atributos<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Otros atributos no necesitan alg\u00fan valor, porque su solo presencia es suficiente, uno de ellos es el atributo <strong>reversed<\/strong>and <strong>open<\/strong>.<\/p>\n<p>Ahora debemos tomar en cuenta que no todos los atributos son aplicables a todas las etiquetas, los atributos <em>reversed<\/em>and <em>start<\/em>son atributos espec\u00edficos para listas ordenadas, es decir, la etiqueta <code>&lt;ol&gt;&lt;\/ol&gt;<\/code>y no tienen ning\u00fan efecto en otros elementos.<\/p>\n<p>Con lo anterior en cuenta podemos discernir que existen atributos <strong>Globales<\/strong>and <strong>No globales<\/strong>, los atributos <em>Globales<\/em>tienen efecto sobre todas las etiquetas, mientras los <em>No Globales<\/em>solo a un grupo de etiquetas o a veces solo a una etiqueta en espec\u00edfico.<\/p>\n<p>Entender que atributos son globales es de mucha ayuda, aun as\u00ed no hay prisa en aprenderlos de memoria, siempre que tengas dudas revisa <a href=\"https:\/\/www.w3.org\/wiki\/HTML\/Attributes\/_Global\">la lista de atributos globales aqu\u00ed<\/a>.<\/p>\n<h2 id=\"quescss\">\u00bfQu\u00e9 es CSS?<\/h2>\n<p>Recordemos que&#8230;<\/p>\n<blockquote><p>HTML permite crear el contenido de nuestro p\u00e1gina o aplicaci\u00f3n de manera organizada. <strong>CSS se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el dise\u00f1o, colores, tama\u00f1o de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y dem\u00e1s caracter\u00edsticas de dise\u00f1o<\/strong>. Y finalmente Javascript te permite interactuar dinamicamente con la aplicaci\u00f3n, claro ejemplo del uso de Javascript son las notificaciones de facebook, el chat de este mismo, cuando damos me gusta, creamos una publicaci\u00f3n o escribimos un comentario.<\/p><\/blockquote>\n<p>La sintaxis principal de CSS se llama <strong>regla<\/strong>. Una regla se comforma de 2 partes, <strong>selector<\/strong>and <strong>declaraci\u00f3n<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-317\" src=\"\/wp-content\/uploads\/2018\/02\/reglaCSS-chica.jpg\" alt=\"\" width=\"635\" height=\"297\" \/><\/p>\n<p>Un <strong>selector<\/strong>permite seleccionar uno o m\u00e1s elementos HTML de nuestra p\u00e1gina. CSS es otro lenguaje diferente a HTML, as\u00ed que el selector de ejemplo no llevan los signos <strong><em>mayor<\/em>and <em>menor<\/em>que<\/strong>, el selector NO es as\u00ed <code>&lt;p&gt;<\/code>.<\/p>\n<p>Cada <strong>declaraci\u00f3n<\/strong>puede tener uno o m\u00e1s pares de <code>propiedad: valor;<\/code>, cada par de <code>propiedad: valor;<\/code>realiza un cambio visual en los elementos seleccionados por el <strong>selector<\/strong>.<\/p>\n<p>Los atributos tambi\u00e9n son muy utiles a la ahora de agregar estilos y dise\u00f1o de una p\u00e1gina web, esto se debe a que la sintaxis del <strong>selector<\/strong>tambi\u00e9n hace uso de los atributos para seleccionar uno o m\u00e1s elementos.<\/p>\n<p>Los estilos se pueden agregar usando la etiqueta <code>&lt;style&gt;&lt;\/style&gt;<\/code>, y esta etiqueta puede existir dentro del <code>&lt;body&gt;<\/code>either <code>&lt;head&gt;<\/code>.<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;\n  &lt;title&gt;Mi primera p&aacute;gina web&lt;\/title&gt;\n  &lt;!-- Agrgando estilos dentro de HEAD --&gt;\n  &lt;style&gt;\n    p { font-size: 12px; color: #555555; }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;!-- Agreando estilos dentro de BODY --&gt;\n  &lt;style&gt;\n    p { font-size: 12px; color: #555555; }\n  &lt;\/style&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>Lo m\u00e1s recomendable es poner nuestros estilos en un archivo aparte con extensi\u00f3n <code>.css<\/code>e importarlo desde nuestro c\u00f3digo html dentro del elemento <code>&lt;head&gt;<\/code>usando la etiqueta <code>&lt;link&gt;<\/code>.<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;\n  &lt;title&gt;Mi primera p&aacute;gina web&lt;\/title&gt;\n  &lt;!-- Importando estilos externos --&gt;\n  &lt;link rel=&quot;stylesheets&quot; href=&quot;.\/ruta\/de\/archivo\/nombre.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>Con lo que sabemos de CSS veamos un ejemplo de lo que podemos conseguir:<\/p>\n<p><iframe title=\"HTML atributos y CSS\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/qxpyNX\/?height=265&amp;theme-id=0&amp;default-tab=html,result&amp;embed-version=2#full\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/qxpyNX\/\">HTML atributos y CSS<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>En la primera regla vemos que el selector es <code>html<\/code>, con esto sabemos que al elemento html se le van a aplicar estilos. Tambi\u00e9n sabemos que dentro de <code>html<\/code>existen las demas etiquetas que completan nuestra p\u00e1gina como elementos hijos.<\/p>\n<p>Una de las propiedades m\u00e1s comunes es <code>font-size<\/code>, la cual define el tama\u00f1o de la letra del texto. El valor de esta propiedad se define con un n\u00famero y una unidad, en este ejemplo la unidad es <code>px<\/code>que quiere decir <strong>pixel<\/strong>.<\/p>\n<p>Al elemento <code>html<\/code>se le llama muchas veces <strong>root<\/strong>either <strong>ra\u00edz<\/strong>y en la mayor\u00eda de los navegadores web tiene un <code>font-size: 16px<\/code>por defecto. En este caso el valor por defecto lo estamos disminuyendo 2 pixeles.<\/p>\n<pre><code class=\"language-css\">html {\n  font-size: 14px;\n}\n<\/code><\/pre>\n<p>Existen m\u00e1s unidades, <code>rem<\/code>, <code>em<\/code>, <code>%<\/code>, <code>vh<\/code>and <code>vw<\/code>que veremos a detalle m\u00e1s adelante.<\/p>\n<p>Despu\u00e9s tenemos nuestro selector <code>body<\/code>, en la declaraci\u00f3n se define el tipo de letra o fuente con la propiedad <code>font-family<\/code>y las fuentes se establecen entre comillas, las \u00fanicas fuentes que pueden no llevar comillas porque son un est\u00e1ndar en los navegadores web son <code>serif<\/code>, <code>sans-serif<\/code>, <code>monospace<\/code>, <code>cursiva<\/code>and <code>fantasy<\/code>.<\/p>\n<p>Cada nombre de fuente es separada por una coma(<code>,<\/code>), de esta manera el navegador va tomando de izquierda a derecha el tipo de fuente, si no existe la primera fuente en tu computadora, va por la segunda y as\u00ed sucesivamente hasta encontrar una existente.<\/p>\n<pre><code class=\"language-css\">body {\n  \/*\n   * ESTO ES UN COMENTARIO:\n   * Fuentes estandar disponibles en el navegador:\n   * serif, sans-serif, monospace, cursive, fantasy\n   * Estas no llevan comillas\n   *\/\n  font-family: \"Helvetica\", \"Verdana\", \"Arial\", sans-serif;\n}\n<\/code><\/pre>\n<p>Ya mencionamos que CSS significa Hoja de Estilo en cascada, la parte de <strong>cascada<\/strong>se refieren a la <strong>herencia<\/strong>y la <strong>precedencia<\/strong>de las reglas que definimos, en el caso de <code>font-family<\/code>agregado al elemento <code>body<\/code>, esta propiedad la heredan todos los elementos hijos, por lo que todo nuestra p\u00e1gina tendr\u00e1 el mismo tipo de letra.<\/p>\n<p>Otra propiedad es <code>line-height<\/code>, la cual define el espacio vertical de las l\u00edneas de un texto, podemos notar su funcionamiento en el primer y segundo p\u00e1rrafo, <code>line-height: 1<\/code>and <code>line-height: 2<\/code>respectivamente.<\/p>\n<pre><code class=\"language-css\">p {\n  font-size: 14px;\n  line-height: 1;\n}\n\n#segundo-parrafo {\n  text-align: right;\n  line-height: 2;\n\n  margin-top: 2rem;\n}\n<\/code><\/pre>\n<p>Para seleccionar el segundo p\u00e1rrafo ocupamos el <strong>atributo<\/strong><strong><code>id<\/code><\/strong>, este atributo debe ser \u00fanico por cada elemento, no se debe repetir, este selector siempre selecciona un solo elemento.<\/p>\n<p>Dentro de la declaraci\u00f3n de propiedades tenemos una propiedad llamada <code>margin-top<\/code>esta propiedad define la separaci\u00f3n superior del segundo p\u00e1rrafo con el primero.<\/p>\n<p>Algo interesante es que el valor es <code>2rem<\/code>, la unidad <code>rem<\/code>se refiere al tama\u00f1o de fuente del elemento <strong>ra\u00edz(root)<\/strong>, nuestro elemento ra\u00edz es <code>html<\/code>y como tama\u00f1o de letra le definimos anteriormente con <code>14px<\/code>por lo que <code>margin-top<\/code>seria igual a <code>28px<\/code>. Esta unidad de medida <code>rem<\/code>nos permite definir tama\u00f1os relativos al tama\u00f1o de la fuente ra\u00edz.<\/p>\n<p>Luego en las listas ordenadas tenemos las propiedades <code>padding-top<\/code>, <code>padding-right<\/code>, <code>padding-bottom<\/code>and <code>padding-left<\/code>. Estas propiedades definen el espacio que existe entre los bordes de un elemento y su contenido. Dado que el selector es <code>ol<\/code>nos permite seleccionar todas las listas ordenadas de nuestra p\u00e1gina.<\/p>\n<pre><code class=\"language-css\">ol {\n  font-size: 1.1rem;\n\n  padding-left: 3rem;\n  padding-top: 20px;\n  padding-bottom: 20px;\n}\n<\/code><\/pre>\n<p>Ahora tenemos el selector <code>.contorno<\/code>, donde se define la propiedad <code>border<\/code>, el cual nos permite resaltar el borde de un elemento, su sintaxis es el grosor del borde, el tipo y por \u00faltimo el color. Con esta regla podemos definir un borde verde a todos los elementos que tengan dentro del <strong>atributo<\/strong><code>class<\/code>el valor <code>contorno<\/code>.<\/p>\n<pre><code class=\"language-css\">.contorno {\n    border: 1px solid green;\n}\n<\/code><\/pre>\n<p>Otra propiedad de gran ayuda es <code>list-style-position<\/code>la cual define la posici\u00f3n de la numeraci\u00f3n o vi\u00f1etas de una lista. Dado que el selector es <code>li<\/code>, nos permite seleccionar todas los elementos de listas de nuestra p\u00e1gina.<\/p>\n<pre><code class=\"language-css\">li {\n  list-style-position: inside;\n}\n<\/code><\/pre>\n<p>M\u00e1s abajo tenemos un selector utilizando el <strong>atributo<\/strong><strong><code>id<\/code><\/strong>de la primera lista. En la declaraci\u00f3n de propiedades se define el color de fondo con <code>background-color: lightblue<\/code>.<\/p>\n<pre><code class=\"language-css\">#primera-lista {\n  background-color: lightblue;\n}\n\n.green {\n  background-color: lightgreen;\n}\n<\/code><\/pre>\n<p>Luego tenemos otro selector que usa el <strong>atributo<\/strong><strong><code>class<\/code><\/strong>, pero un valor de <code>class<\/code>si puede ser utilizado en m\u00e1s de un elemento, esto quiere decir, que este selector nos permite seleccionar todos los elementos de nuestra p\u00e1gina web que dentro del atributo <code>class<\/code>tenga el valor <code>green<\/code>.<\/p>\n<p>Es importante mencionar que el atributo <code>class<\/code>puede tener m\u00e1s de un valor separado por un espacio en blanco.<\/p>\n<pre><code class=\"language-html\">&lt;ol class=\"green contorno\"&gt;&lt;\/ol&gt;\n<\/code><\/pre>\n<p>Por \u00faltimo tenemos un elemento <code>details<\/code>con el atributo <code>open<\/code>sin ning\u00fan valor, su sola presencia indica que ese elemento esta <em>desplegado<\/em>either <em>abierto<\/em>y cuando est\u00e1 desplegado su color de fondo cambia a azul claro. La notaci\u00f3n para atributos que no son <code>id<\/code>ni <code>class<\/code>es la de corchetes <code>[nombreAtributo]<\/code>.<\/p>\n<pre><code class=\"language-css\">details[open] {\n  background-color: lightblue;\n}\n<\/code><\/pre>","protected":false},"excerpt":{"rendered":"<p>        CSS se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el dise\u00f1o, colores, tama\u00f1o de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y dem\u00e1s caracter\u00edsticas de dise\u00f1o.<\/p>","protected":false},"author":2,"featured_media":3743,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[25],"tags":[43,53,67],"class_list":["post-43","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-html","tag-basico"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":3835,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/43\/revisions\/3835"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3743"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}