Taller de Programación de CSS y HTML

[xLaming]

Introducción:
http://i.imgur.com/jM4TdOG.png http://i.imgur.com/tqEV8Un.png

¿Qué es CSS?
-- * Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

¿Qué es HTML?
-- * HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web.

¿Para que sirve?
-- * Con CSS/HTML se pueden hacer cosas sin limitaciones en un website, fanpage o cualquier otra página. Usted tiene posibilidades de personalización en cualquier página que tiene que tiene acceso, desde un simple texto a grande efectos en imágenes o en la estructura de una página / website.

¿Cómo puedo aprender?
-- * Es muy simple de aprender, se explica completamente en los próximos lecciones sobre CSS/HTML, con estas lecciones usted puede hacer su propio CSS/HTML para xatspace.

¿Es gratis?
-- * Sí, es totalmente gratuito y libre a todo mundo, pero no se puede romper los términos de xat (http://xat.com/terms) y ni los términos de uso de CSS (http://util.xat.com/wiki/index.php?title=CSS_Guidelines/es)

Wikipedia CSS: https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada
Wikipedia HTML: https://es.wikipedia.org/wiki/HTML

¿Quieres ser parte de este taller? inscrebete acá!

[perroloco]

Buen aporte laming te felicito y gracias por darnos me incluyo , la oportunidad de aprender sobre css y html aunque sea lo principal :p

[Cami]

Yo también quiero participar del taller :D


Gracias <3

[xSary]

Saludos Laming! (:
Gracias por es nuevo aporte que nos traes a la comunidad sin duda es un buena oportunidad tener que aprender sobre la programación de CSS.
Yo tambien me uno a participar en este taller.

[Cami]

Cuántos alumnos puede tener el taller?
Cuándo comienza?

Saludos cordiales.

[xLaming]

Cuántos alumnos puede tener el taller?
Cuándo comienza?

Saludos cordiales.
No tiene limite para alumnos, y ire empezar 9/2/2016 las 13:00 UTC -2

[Kotufa]

Excelente Taller Laming.
Participare en el taller, tengo algunos conocimientos pero siempre es bueno aprender más.(clap)

[xLaming]

Buenas!
¿Qué tal una lección sobre algo simple en el principio? No ensenaré algo muy avanzado y listo. Voy a empezar con algo básico y con ultilidade y luego algo mas avanzado...


Paragraph <p> </p>:
Esto es una cosa muy importante saber para mantener siempre la organización en su texto, mejor vista. Es una forma muy simple de utilizar y es muy importante saber!
Ejemplo:
<p>Hola Mundo!</p>

Size/Tamaño <h1><h2><h3>...:
La forma más sencilla de manejar el tamaño de los textos
Ejemplo:
<h1>Hola Mundo!</h1>
<h2>Hola Mundo!</h2>
<h3>Hola Mundo!</h3>
<h4>Hola Mundo!</h4>
<h5>Hola Mundo!</h5>
<h6>Hola Mundo!</h6>
http://i.imgur.com/yxpFxha.png

Imagenes:
Una manera de agregar las imágenes es muy simple pero es muy útil
Ejemplo:
<img src="http://site.com/imagen.png" />

Embed / Objetos:
Una forma de agregar objetos como flash, vídeos, canciones, etc...
Ejemplo:
<embed src="http://site.com/objeto.swf" />
http://i.imgur.com/oqlfheF.png

Imagenes y Embed / Objetos se pueden cambiar lo tamaño con un codigo simple " width="TAMAÑOpx" height="TAMAÑOpx" "
Ejemplo:

<embed src="http://site.com/objeto.swf" width="400px" height="400px" />

[Wiki]

Interesante iniciativa Laming (clap)

Se ve que será de mucha utilidad, estaré revisando para aprender junto a los demás!

Gracias.

[Santeo]

Felicidades por el post , verdaderamente es un buen aporte
para la comunidad y de una manera desinteresada .

Muy buena información y bien explicado.

Un Saludo

[Cami]

Hola a Todos.

Felicidades por tu primera lección Paulo, está interesante y espero que a medida que pasen los días valla incrementando para que podamos aprender más.

Gracias por compartir tus conocimientos con nosotros. :D

Saludos Cordiales.

[xLaming]

Gracias a todos, siempre ire añadir mas lecciones!

[Kotufa]

Muy buena su primera clase. Lo felicito (clap)
Estare atenta para la proxima.

[DonGato-Jezzuzz]

Bien lam gracias por abrir asi aprendo mas hacer css y trabajar con los codigos html
muchisimas gracias (y)

[xLaming]

La primera introducción fue acerca de HTML, ya ahora este será acerca de CSS.

Lo siento por el retraso, yo estaba un poco ocupado.


h1{ codigo; }, span{ codigo; }...
Puede hacer modificaciones en las fuentes, fondo, tamaño, efectos, y mas con el CSS.

Ejemplo:

<style>
/* Pagina */
body {background-color: brown} /* Ejemplo de fondo color sin HEX */

/* Ejemplo con H1 */
h1 {color: #444444} /* Color en la fuente */
h1 {text-shadow: 2px 1px #000000} /* Sombras en el texto */
h1 {font-size: 50px} /* Tamaño de fuente */

/* Ejemplo con DIV Attribute */
div[name='test'] {background-color: #999999} /* Ejemplo de fondo en HEX */
div[name='test'] {border-radius: 20px} /* Redondeo de los bordes */
div[name='test'] {text-align: center} /* Dejar letras en centro */
div[name='test'] {box-shadow: 3px 3px #555555} /* Sombras en la caja */
div[name='test'] {width: 500px} /* Tamaño de la caja */
div[name='test'] {height: 58px} /* Tamaño de la caja */
</style>

<div name="test">
<h1>Hola Mundo!</h1>
</div>

¿Como funciona?
* - body {background-color: brown}:
* --- Body: Se utiliza en casi todos los casos de páginas, incluyendo xat
* --- Background-color: Se utiliza para asignar una color en el fondo [SIN HEX]
* --- Brown: Es la siguiente color que se asignará

* - h1 {color: #444444}:
* --- H1: Es un atributo para dejar la fuente grande, pero puede ser modificado
* --- Color: Se utiliza para asignar una color en la fuente
* --- #444444: Es la siguiente color que se asignará

* - h1 {text-shadow: 2px 1px #000000}:
* --- H1: Es un atributo para dejar la fuente grande, pero puede ser modificado
* --- Text-shadow: Se utiliza para añadir sombra en la fuente
* --- 2px 1px: Tamaño de la sombra
* --- #000000: Es la siguiente color que se asignará

* - h1 {font-size: 50px}:
* --- H1: Es un atributo para dejar la fuente grande, pero puede ser modificado
* --- Font-size: Se utiliza para cambiar tamaño de la fuente
* --- 50px: Tamaño de la fuente

* - div[name='test'] {background-color: #999999}:
* --- Div[name='test']: Es una div, se puede cambiar todo via name='test'
* --- Background-color: Se utiliza para asignar una color en el fondo [CON HEX]
* --- #999999: Es la siguiente color que se asignará

* - div[name='test'] {border-radius: 20px}:
* --- Div[name='test']: Es una div, se puede cambiar todo via name='test'
* --- Border-radius: Se utiliza para bordes redondos
* --- 20px: La cantidad que desea redondear

* - div[name='test'] {text-align: center}:
* --- Div[name='test']: Es una div, se puede cambiar todo via name='test'
* --- Text-align: Se utiliza para alinear el texto
* --- center: Donde quieres alinear: left, center, right

* - div[name='test'] {box-shadow: 3px 3px #555555}:
* --- Div[name='test']: Es una div, se puede cambiar todo via name='test'
* --- Box-shadow: Se utiliza para añadir sombra en algo
* --- 3px 3px: Tamaño de la sombra en caja
* --- #555555: Es la siguiente color que se asignará

* - div[name='test'] {width: 500px}:
* --- Div[name='test']: Es una div, se puede cambiar todo via name='test'
* --- Width: Se utiliza para cambiar el ancho de la caja
* --- 500px: Tamaño de la caja

* - div[name='test'] {height: 58px}:
* --- Div[name='test']: Es una div, se puede cambiar todo via name='test'
* --- Height: Se utiliza para cambiar la altura de la caja
* --- 58px: Tamaño de la caja


Imagen:
http://i.imgur.com/kmEt724.png

[Cami]

Ya esperaba esta clase, gracias por el tiempo y dedicación.

- Querido profesor dejo mi tarea (:

http://i.imgur.com/T1iB3uO.png

Saludos Cordiales.

[Wiki]

Hola Laming.. seguimos aprendiendo.

Tengo unas preguntas.. porque empieza con <style> y si empieza el codigo también acaba con </style>?

2. Cuando hablas de SIN HEX es sin códigos hexadecimales (http://www.mundoxat.com/colores/)?

Gracias.

[xLaming]

@Cami de nada!

@Wiki, porque asi puede hacer pruebas en http://scratchpad.io con los codigos, y si SIN HEX es sin códigos hexadecimales

[Wiki]

Aquí dejo mi tarea...

http://i.imgur.com/OpA1kd9.png

[Kotufa]

Muy bien explicado todo.
Tengo una pregunta: ¿Cualquier estilo de fuente puede ser utilizada en un codigo de CSS?

Clase:

http://i.imgur.com/xlgdoOp.png

[xLaming]

¿Porque <style> y </style?
* -- Siempre será abierto con <style> y cerrará con </style> porque ahí es donde está la hoja de estilo, y casi como todos los tipos de programación, es para que el navegador puede identificar dónde empieza y donde termina el código.

Es importante?
* -- Sí, es muy importante porque si no se utiliza, no funcionará y sólo se mostrará el código.

[Brian7]

hola xLaming, es muy interesante tu taller.

Mirando el código css me surgió una duda sobre el redondeado de los bordes. Es posible que sólo uno de los lados tenga un borde redondeado y el otro no?.

Es que quiero hacer dos botones juntos uno al lado del otro, así que sólo los extremos deben ser redondos y donde se juntan debe ser recto.

Muchas gracias. Saludos.

[Estrellita100]

gracias por tu aporte así aprendemos más & tú ganas más popularidad, buenas clases que das sigue así. ;) Felicidades!
Saludos!

[Brian7]

Hola de nuevo, me puse a investigar lo que dije y ya encontré cómo hacerlo.

Con las propiedades border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius se puede establecer la curvatura de cada esquina.

Acá les dejo una captura:

http://i.imgur.com/IKxGdSD.png


Saludos.

[DonGato-Jezzuzz]

Aqui dejo mi tarea Gracias xlaming

http://i.imgur.com/gpKRnlJ.png

Aver como voy le quite la sombra nose como ponerlo pero poco a poco :$

[xSary]

http://i.imgur.com/ondvhxh.png

Gracias Laming por la oportunidad que nos das sobre el aprendizaje CSS, dejo mi tarea apesar de que se me a dificultado bastante :S

[xLaming]

@Sary esta bueno su trabajo, pero se olvidó de hacer el botón (con la parte del DIV) xD


Todos fueran buenos en tareas y sin errores!
Brian se esforzo mucho para hacer los botones yo creo... Felicitaciones, y felicitaciones a los demás también que hiceran todo correcto!

Es bueno ver que todos ustedes están esforzando con las lecciones!



Mañana 14:00 (UTC -2) nueva leccion.

[perroloco]

jeje aunque no habia hecho mi tarea aqui la dejo disculpen la demora jeje

http://i.imgur.com/zlmbKgK.png

[xLaming]

Alinear Texto y añadir Estilos:


Código:

<div style="width:500px; background-color:#999999; padding:10; color:#0000ff;">
<div align="center">CENTRO</div>
<div align="right">DERECHA</div>
<div align="left">IZQUIERDA</div>
</div>

Demo:
http://i.imgur.com/o7BOCSu.png


Alinear Texto/Div:
-- Para alinear el Texto o Div tu debe saber en primer lugar donde quiere alinear:

ALINEACIÓN:
* -- Left <-> Izquierda
* -- Right <-> Derecha
* -- Center <-> Centro

Código:
<div align="LEFT, RIGHT, O CENTER">PALABRAS BLA BLA 321 123</div>


Añadir Estilos:
-- Puede agregar un estilo o código CSS en un atributo como <span>, <font>, <div>, etc...

Código:
<div style="width:500px; background-color:#999999; padding:10; color:#0000ff;">

* -- El texto rojo es donde se puede poner un código CSS que funcionará asi como el que ya esta.



Todavía es fácil, pero será más difícil, y perdon por el retraso, yo estabas con algunos problemas de conexión.

[iForever17]

Llegué un poco tarde xD Pero llegue!

Aquí dejo lo de la semana pasada:
http://i.imgur.com/uzwt0ax.png

Aquí esta lo 2do que enseñaste, pero lo que hice fue poner ambas cosas juntas y resulto esto:

http://i.imgur.com/7NE3sWR.png

[Kotufa]

Excelente explicación.

Clase de está semana:

http://i.imgur.com/AQN4izy.png

[perroloco]

jejeje me gusto esto asi k le deje tambien mi nick abajo jejeje


http://i.imgur.com/i2Bg9Wa.png

[Cami]

Mi tarea :)

http://i.imgur.com/bMyrJKq.png

[Wiki]

Gracias laming...

Dejo mi tarea:

http://i.imgur.com/SLxy5pj.png

[DonGato-Jezzuzz]

Aqui dejo mi trabajo

http://i.imgur.com/I4Bl7b0.png


Gracias xlaming Nueva mente ya estoy agarrando el ilo xD = aprendiendo (hehe)

[alibaba y los 40 ladrones]

Me a gustado mucho el tema este del html y css aquí posteo algo espero que este a la altura, gracias xlaming por enseñarnos algo que está muy de moda :D

http://i65.tinypic.com/30jtvn9.jpg

[DonGato-Jezzuzz]

Aqui dejo mi trabajo

http://i.imgur.com/NRMWqvH.png


Gracias xlaming Nueva mente ya estoy agarrando el ilo xD = aprendiendo (hehe)

[xLaming]

Hola, tenemos una nueva clase!
Ya que tiene esta nueva onda de "Gradient", ¿por que no algunas lecciones al respecto?

Effecto Gradient:
- Puede añadir este efecto en los fondos y casi todas las tags HTML.


<style>
.color1 {
background: linear-gradient(red, blue);
width: 150px;
height: 80px;
}
.color2 {
background: linear-gradient(#000000, #ffffff);
width: 150px;
height: 80px;
}
.color3 {
background: linear-gradient(to bottom right, red, blue, #000000, #ffffff);
width: 150px;
height: 80px;
}
.color4 {
background: radial-gradient(red 10%, yellow 20%, green 80%);
width: 150px;
height: 80px;
}
</style>

Color 1:
<div class="color1"></div>
<br />
Color 2:
<div class="color2"></div>
<br />
Color 3:
<div class="color3"></div>
<br />
Color 4:
<div class="color4"></div>

* Imagen:
http://i.imgur.com/CXJOkQD.png

* Colores simple:
-- Algunos colores son: blue, red, yellow, purple, violet, etc...(colores en inglés)
* -- background: linear-gradient(red, blue);

* Colores hex:
-- Algunas colores son: #ffffff, #000000, #f0f0f0, #ffff00, #00ffff, etc...
* -- background: linear-gradient(#000000, #ffffff);

* Con alineación + Colores simple y hex:
* -- background: linear-gradient(to bottom right, red, blue, #000000, #ffffff);
* --- Donde esta rojo son las alineaciones:

to top
to right
to bottom right
ro left
to bottom left

* Imagen:
http://i.imgur.com/wqn1UiO.png

* Con porcentaje:
* -- background: radial-gradient(red 10%, yellow 20%, green 80%);
* --- Donde esta rojo son los porcentajes 1-100.
* --- Donde esta negrita es el código de color hexadecimal/simple.

[Kotufa]

Hola Laming
Me gusto está clase en particular

Tarea:

http://i.imgur.com/ARXsGp0.png

[edu2016]

Esta muy Interesante el tema Les sirven a muchos lo que utilizan los codigos de ''CSS'' Exelente, SALUDOS CORDIALES LAMING.(clap)

[perroloco]

Buena tarea jeje jugue bastante con los colores gracias por enseñarnos jejeje


http://i.imgur.com/J0SVbOr.png

[alibaba y los 40 ladrones]

bueno aquí dejo mi trabajo:p

http://i67.tinypic.com/29atjsx.png

[Cute]

Gracias por este post , es una excelente idea ya que nos proporciona el conocimiento a entender lo de CSS Y HTML

[PonchoGuapo]

Quisiera participar en el taller.

[PonchoGuapo]

Me interesa aprender, cómo me doy cuenta cuando sea el taller y la hora? No le sé mucho a todo esto

[Cami]

Me interesa aprender, cómo me doy cuenta cuando sea el taller y la hora? No le sé mucho a todo esto


Hola PonchoGuapo, ¡BIENVENIDO!.

- De momento el taller no está activo, pero puedes ir practicando con las lecciones anteriores. Sin duda cuando el taller se retome se informará a la comunidad, sigue atento...

Para que puedas ver las clases de sus inicios, da clic en 'Primer'.


http://i65.tinypic.com/j5dyxw.png


Saludos Cordiales.

[xLaming]

¡Hola a todos!
He estado ocupado durante un tiempo con algunos proyectos anteriores... pero no dejé de enseñar las clases, volveré con nuevo contenido hoy, estén atentos!

[Abraham]

Gracias por informarnos nuevamente laming

Estaremos atento y con paciencia para aprender.

Saludos

[PinoBass]

asi es gracias por la info. :P

[Wiki]

Pendiente de la clase.... (eyes) para seguir aprendiendo...

(clap)

[Zyron Ryon]

Buen aporte y contenido, me gustaría participar a las clases y aprender cada día más de css y poder editar mi xatspace como quiero que luzga :D ;)

[Tutorialesnatalia]

Te felicito parece que ya existe entonces el foro donde enseñan a sobre html, css, javascript, jquery, msyql supongo