Aprendiendo lo básico del HTML

Hi a todos! ¿Cómo están? Espero que bien porque les traigo un tutorial sencillito para que empecemos a usar el HTML. Quizás se asusten porque ven muchos códigos, números y palabras que no tienen idea para qué sirven, más, una vez empiezan a familiarizarse con estas cosas, suele resultar más sencillo de lo que se imaginan hacer ediciones en los códigos y crearlos uno mismo. Lo tengo publicado en mi foro, así que si ya lo leyeron ahí, saben que soy yo (?)

Intentaré ir paso a paso para que aquel que empieza con esto del HTML empiece sin problemas y pueda entender más o menos, para qué sirven todos estos códigos. Por supuesto, saben que si no entienden algo o si prefieren que lo explique de una manera más sencilla, pueden pedirmelo que lo haré para que quede lo más claro posible esto.

En éste tuto, además de algunos códigos básicos, aprenderemos a usarlos haciendo una cajita :D ¡Sí! Va a ser bastante sencillito y empezaremos con cosas bastante simples para que pueden hacerlo.

Ahora que hemos pasado todo el versito para hacerlo más llevadero (?) vamos a la teoría :D (?)

Para empezar, el HTML se hace en base a cajas, cada cajita corresponde a un div (seguro que sin han chusmeado códigos, han visto mucho esto del div, pues, ahora sabrán las razones de ello) (?) El div es el comienzo del código, que le permitirá ir agregándole atributos (Los atributos son las modificaciones que pueden ir haciéndole al código, por ejemplo, cambiarle el color, la forma, ponerle una imagen de fondo entre muchas de las otras cosas que se puede hacer con estos).

Todos los comandos que se utilizan en HTML son en inglés. Tengan cuidado de escribirlos bien y poner todo tal cual que un error y el código puede no funcionar.

O sea que tendríamos que empezar con algo así para nuestra cajita:

Así se verá:

Cada vez que abran un < div >, deben cerrarlo para que su código funcione bien y se vayan haciendo las cajas. Como éste es nuestro primer div, dejamos un espacio en medio para ir agregando otras cositas.

¿Y ahora qué hago? Pues, ahora viene la parte en que lo personalizaremos, para eso, vamos a empezar con códigos bastante sencillitos:

○○Height: nos sirve para determinar la altura. Éste se lo coloca en píxeles (px). por ejemplo: Height: 200px

○○Width: nos sirve para determinar el ancho de la caja. Al igual que el anterior, se coloca en px.

Ahora, teniendo esos dos, vamos a agregarle la altura y el ancho a nuestra cajita :D Veamos cómo nos queda el código

Así se verá:

Como verán, le hemos agregado la palabra style y a continuación, el =", esto nos sirve para ir agregándole atributos al código. Recuerden que una vez que abren comillas, deben cerrarlas al final del código tal y como está en la imagen.

Como separador de cada uno de nuestros atributos, usaremos el punto y coma ( ; )

Quiero ponerle color ¿cómo le hago? Es bastante fácil esto, aunque para ello, recomiendo que usen una paleta HTML así sacan los códigos. Les puedo recomendar éste sitio, que no sólo ofrece las paletas sino unas bonitas combinaciones de colores. Sino, pueden hacer lo que yo uso generalmente, y hacer uso de la paleta del photoshop. Eligen el color que más les guste y copian el código.

Así se ven las paletas y el código que deben usar:

○○Background: éste nos sirve para ponerle un color de fondo a nuestra cajita. Se lo utiliza como background: #color;

Así les debería ir quedando el código. Un cuadrado o rectángulo en mi caso:

¿Y qué si quiero una cajita de otro color dentro? Repiten exactamente el mismo paso. Sólo que lo harán a continuación del código (en ése espacio en blanco que les dije que quedaba) Y agregamos color y tamaños que queramos.

Asó se verá:

Seguiremos con otro atributo sencillo: la tipografía o font.

○○Font-family: éste nos sirve para agregar una fuente determinada a nuestro texto en toda la caja o en toda la plantilla. Según donde se la coloque. Los atributos del primer div que hacemos, afectan a todo el conjunto de nuestra trablilla, mientas que las cajas que hacemos dentro de ésta, sólo quedan ahí (por ejemplo, si yo tengo una Times new, en la caja negra que hice, se aplicara a toda la plantilla. Más si tengo una Georgia en la cajita blanca, sólo será en ésa) No sé si fui clara (?) les recomiendo un bonito lugar para usar fonts Google fonts. Ahí pueden elegir el tipo de letras qué usar (y pueden seleccionar para les salga de un tipo, si sólo buscan serif, fantasía y así (?)

El código para usarlo es font-family:georgia;  Así, con éste código, vienen un par más para modificar la letra:

○○Font-size: determina el tamaño de la letra. Se coloca en px también. El código es font-size:tamaño px;

○○Color: éste se usa para darle un color a la letra o por defecto, tomará el color del lugar donde publiquemos y eso hará que nuestro texto no siempre sea visible. El código es color: #color;

Ahora que ya sabemos esto, vamos a ir agregándolo a nuestro código para que vayamos haciéndolo más bonito aun :D

Spoiler:

Y si quieren agregar texto al comienzo, como un título, es el mismo paso, seleccionar la font y agregarla al código.

Así se verá:

Y así, tiene su primera tablilla. Bastante sencillita, pero lo que es para hacerla más estilizada es probar con más atributos. Si se animan, pueden empezar agregando estos :D

○○Border-radius: esto hará que el borde de la tablilla se rodondee. Se usa en px y pueden hacerlo de la siguiente manera:

•border-radius: 40px  ---> así se les redondean todos los bordes iguales

•border-radius: 30px 40px 10px 5px   ---> así se le redondearan sólo algunos bordes o todos de maneras diferentes. Si no quieren que uno se redondee, le ponen 0px y queda cuadrado.

○○Background-image: url()  este nos permite poner un link al fondo de nuestra plantilla. Es el más usado y se hace de la siguiente manera background-image: url (link de la imagen.png);

○○Border: éste les permitirá ponerle un borde a la tablilla. Tienen varias opciones para esto.

•dotted: les aparecerá con pequeños puntitos. Se lo utiliza border: tamañopx dotted  #color
Se le coloca el tamaño en píxeles (2 o 3 para que quede bonito, pueden usar más, pero quedará a criterio suyo) y el color que tendrá el borde.

•solid: este tendrá un borde solido. Se lo utiliza igual que al anterior.

•groove: éste les proporcionará un degradado del color. Se lo utiliza al igual que los anteriores.

○○Tex-align: éste nos sirve para alinear el texto precisamente. Puede ser right, left, center o justify. Se lo utiliza como text-align: justify;

Pues, creo que son bastante por un sólo post. Pronto haré un listado con muchos más atributos y pondré algún otro tutorial para hacer algo un poquitín más complejo :D así sigan prácticando ;D

Si quieren, pueden postear a continuación sus códigos y/o dudas para que se las corrija si tienen algún error o algo no les ha salido bien. También, si no me he dado a entender lo suficientemente bien, pueden decirlo aquí sin problemas que no me enojo. Lo corregiré así le puedan sacar provecho al tutorial. Así mismo, si quieren saber algo en particular sobre los códigos (algún atributo que no haya mencionado) me avisan y los iré agregando.

Creo que es todo por éste post :D Espero que les haya gustado y por sobre todo, que les haya servido :D

Bye!

También, puedes hacer una sola cajita y ponerla de fondo a la imagen con el mismo mecanismo. En vez de background-color, lo sustituyes por background-image y ya queda todo listo. Sólo tendrísa que reducirle los valores de ancho y alto a la firma y quedaría algo así:

Código:

<div style="background-image:url(http://i1097.photobucket.com/albums/g345/Alice-rainsworth/Daenerysfirm_zpsa53ca836.png); width: 400px; height: 150px;border: 6px dotted #D75A6D;"></div>

Puedes usarla de firma que Foroactivo toma los códigos de éste tipo en la firma. En otras plataformas de foros, no sabría decirte a ser sincera, sería cuestión de probar nada más.

Bye!