PDA

Ver la versión completa : Taller de Programación de CSS y HTML



xLaming
05/02/2016, 09:06
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
05/02/2016, 09:30
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
05/02/2016, 09:38
Yo también quiero participar del taller :D


Gracias <3

xSary
05/02/2016, 09:45
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
05/02/2016, 16:20
Cuántos alumnos puede tener el taller?
Cuándo comienza?

Saludos cordiales.

xLaming
05/02/2016, 16:27
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
06/02/2016, 09:43
Excelente Taller Laming.
Participare en el taller, tengo algunos conocimientos pero siempre es bueno aprender más.(clap)

xLaming
09/02/2016, 10:46
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
09/02/2016, 11:01
Interesante iniciativa Laming (clap)

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

Gracias.

Santeo
10/02/2016, 06:00
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
10/02/2016, 06:52
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
10/02/2016, 12:23
Gracias a todos, siempre ire añadir mas lecciones!

Kotufa
10/02/2016, 19:02
Muy buena su primera clase. Lo felicito (clap)
Estare atenta para la proxima.

DonGato-Jezzuzz
13/02/2016, 17:42
Bien lam gracias por abrir asi aprendo mas hacer css y trabajar con los codigos html
muchisimas gracias (y)

xLaming
17/02/2016, 10:14
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
17/02/2016, 10:41
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
17/02/2016, 10:44
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
17/02/2016, 10:52
@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
17/02/2016, 11:19
Aquí dejo mi tarea...

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

Kotufa
17/02/2016, 12:13
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
17/02/2016, 13:32
¿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
17/02/2016, 18:10
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
18/02/2016, 00:45
gracias por tu aporte así aprendemos más & tú ganas más popularidad, buenas clases que das sigue así. ;) Felicidades!
Saludos!

Brian7
18/02/2016, 07:39
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
22/02/2016, 19:43
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
23/02/2016, 08:06
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
24/02/2016, 07:45
@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
25/02/2016, 09:50
jeje aunque no habia hecho mi tarea aqui la dejo disculpen la demora jeje

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

xLaming
25/02/2016, 12:50
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
27/02/2016, 17:50
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
28/02/2016, 15:40
Excelente explicación.

Clase de está semana:

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

perroloco
28/02/2016, 20:57
jejeje me gusto esto asi k le deje tambien mi nick abajo jejeje


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

Cami
29/02/2016, 04:42
Mi tarea :)

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

Wiki
29/02/2016, 11:36
Gracias laming...

Dejo mi tarea:

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

DonGato-Jezzuzz
29/02/2016, 20:10
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
01/03/2016, 06:22
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
01/03/2016, 12:24
Aqui dejo mi trabajo

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


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

xLaming
07/04/2016, 11:57
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
08/04/2016, 08:49
Hola Laming
Me gusto está clase en particular

Tarea:

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

edu2016
08/04/2016, 14:33
Esta muy Interesante el tema Les sirven a muchos lo que utilizan los codigos de ''CSS'' Exelente, SALUDOS CORDIALES LAMING.(clap)

perroloco
08/04/2016, 15:07
Buena tarea jeje jugue bastante con los colores gracias por enseñarnos jejeje


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

alibaba y los 40 ladrones
09/04/2016, 05:21
bueno aquí dejo mi trabajo:p

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

Cute
09/04/2016, 17:14
Gracias por este post , es una excelente idea ya que nos proporciona el conocimiento a entender lo de CSS Y HTML

PonchoGuapo
23/08/2016, 21:09
Quisiera participar en el taller.

PonchoGuapo
23/08/2016, 21:15
Me interesa aprender, cómo me doy cuenta cuando sea el taller y la hora? No le sé mucho a todo esto

Cami
24/08/2016, 05:49
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
24/08/2016, 09:06
¡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
24/08/2016, 09:07
Gracias por informarnos nuevamente laming

Estaremos atento y con paciencia para aprender.

Saludos

PinoBass
24/08/2016, 10:47
asi es gracias por la info. :P

Wiki
24/08/2016, 14:56
Pendiente de la clase.... (eyes) para seguir aprendiendo...

(clap)

Zyron Ryon
02/09/2016, 12:51
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
10/11/2017, 14:39
Te felicito parece que ya existe entonces el foro donde enseñan a sobre html, css, javascript, jquery, msyql supongo