;D

viernes, 26 de marzo de 2010

HTML para principiantes por chepe263

Con el animo de ayudar a mas personas (me gusta ayudar) creo que llego
el tiempo de enseñarles HTML. En este mundo globalizado es importante
saber ingles, nuestra vida se maneja diferente a como nuestros padres
la percibian en sus tiempos. Los mails son importantes, los tweets nos
comunican (y asi y asa). Ya que no les puedo enseñar ingles (llevaria
mas tiempo) me propongo enseñarles HTML y algunos lenguajes web que
conosco y manejo para que ustedes tambien puedan aplicar sus
conocimientos y modificar esas cosas que no actuan de la manera que
ustedes quieren. En mi caso, este blog cuenta con "Etiquetas" y al
parecer tengo varias y la lista era muy extensa, muy alta y lo que le
seguia abajo no se miraba (por decirlo asi), entonces, me anime y
modifique el html del blog y ahora tiene una bonita barra de
desplazamiento. Eso lo logre con un poquito de simple css (Cascada
Style sheet, hoja de estiilos en cascada). Eso lo cubrire mas adelante.




Empezando



HTML significa HypertextMakeupLanguage o lenguaje de marcado de
hipertexto. Esto podriamos decir que no es muy relevante. Lo que si es
relevante es lo que podemos hacer con el. Todas las paginas que ven en
al Internet estan hechas con html. Por lo general combinan otros
lenguajes como javascript, php, asp, etc para que funcionen. Lo mas
importante en un documento html es su estructura.



La esctructura basica de un documento html es



<HTML>

     <head>

     </head>

     <body>

     </body>

</HTML>



Cabe mencionar que html tiene etiquetas (tags) que van encerradas entre
signos de mayor y menor cuando se abren (ej <etiqueta>) y
agregando una barrita cuando se cierran (ej
(</etiqueta>). Tambien hay algunas etiquetas que no
llevan cierre.



Explicando



<HTML>...</HTML>

Es la etiqueta principal, indica al navegador que es un documento html.
Es importante que se coloque, dentro de el van los demas elementos



<head>...</head>

Es la cabecera del documento. En ella se pueden colocar otros elementos
como el titulo. Han visto que en la ventana del navegador dice
"(...)chepeblog by chepe263"? Es por la etiqueta <title>.
Esta se coloca en la cabecera. Lo que coloquen entre
<title> y </title> aparecera en el titulo
de la ventana (por lo general). Puede ser cambiado por lo que ustedes
quieran.



Tambien se pueden incluir varias etiquetas, hay una llamada
<scritp> </script> que sirve para poner
JavaScript en ella, tambien se puede incluir cualquier otro leguaje.
Solo falta que el navegador lo soporte. En esta etiqueta se puede
incluir JavaScript (valga la rebusnancia) que ayudara a que la pagina
sea dinamica. La etiqueta <script> puede colocarse en
cualquier parte del documento pero es recomendable hacerlo en la
cabecera.



(Siguiendo) La etiqueta <body>…</body>
contiene el contenido del documento. Como su nombre lo indica, es el
cuerpo del documento. En el pueden incluir imágenes, texto, videos y
todo lo que quieran. Entre esa etiqueta va el contenido.



En conclusión un documento HTML basico seria asi



<html>

<head>

    <title>Aprendiendo
HTML</title>

    <scritp>

    //codigo javascript, es opcional

    </script>

</head>

<body>

<p>Hola mundo, estoy aprendiendo un poco de
HTML</p>

</body>

</html>



La etiqueta <p>...</p> se utiliza para los
parrafos. En ella pueden poner texto o cualquier otro contenido.



Para insertar imágenes se utiliza la etiqueta <img>, esta
no tiene etiqueta de cierrre. Para poner una imagen se utiliza la
propiedad "src". En src se coloca la ruta o url en donde se encuentra
la imagen. Asi que, si quisieramos poner un lindo mapache, harimos esto


<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Yh8WSEMUwhOqS5F_nHYXu_r35pwU_CkRTj_-QXyXhIWDwT376BsDQz0Y-uADDRuTcn5_gbFae0DlaBrxh1CE-CDkn234am0sdIO7qaHzrOJp4F7PdP0MVD1qGkGM55bNY0rTLXL141xl/s512/kito.PNG">



Con esto doy por concluido la pequeña clase, regresare pronto
explicandoles mas.

3 comentarios:

  1. Que chilero!!! ¿cuánto tendremos la siguiente clase virtual?

    ResponderEliminar
  2. nice !! sigue adlenate ;) para la proxima aporta a subinet XD jeje

    ResponderEliminar
  3. Muy Bueno...

    solo el color ver mmmm no te ayuda mucho

    http://emont01.blogspot.com/2009/02/como-usar-syntaxhighlighter-20-en.html

    ResponderEliminar

Comentada, su opinion es importante/Comment, your opinion is important.