comienzo

Curso rápido de HTML para el mukkero! XD

CHAN CHAN!

Bueno debes saber que un HTML tiene la siguiente estructura :

Una cabecera (header) donde se declaran por ejemplo el titulo de la pagina o variables globales, como son los CSS(archivos que dan estilo a las paginas para que se vean lindas, porque por naturaleza el html tiene CERO gracia XDD, sin css las paginas serian horrendas! ) un Body( que es el cuerpo de la pagina donde uno pone la información importantes) y bueno tambien puede ir un Footer( que es una especie de pie de pagina para poner firmas o creditos pero eso es opcional).

La estructura en árbol es la siguiente :

     
aquí me explayo blablalbalblalbalblallbalallalblalbalb 

Cada etiqueta se debe abrir y cerrar ejemplo

Todo lo que valla aquí antes de llegar a la etiqueta de cierre será considerado parte del header

Entonces en blogger como trabajan con hojas de estilo (CSS) dentro de la etiqueta de header poner las características de la pagina como por ejemplo esto:

--Aquí en Body pondrás las características básicas que quieres que tenga el cuerpo del blogg que en esta caso es TODO lo que contiene a los de mas elementos, es como la capa mas externa, donde Irán los menús y todo los contenidos piensa que es como la caja donde guardaras todo.--

body {

background:#fff url("http://www1.blogblog.com/harbor/rocks_$startSide.jpg") no-repeat;

margin:0;

padding-top: 170px;

width:100%;

Height: 30px;;

overflow: hidden;

}

--Background; es el fondo en esta caso del body. El fondo puede llevar una imagen o puede tener un color, o ambas dos como en este caso.

Los colores en html se poner por valores hexadecimales, por ejemplo: el negro es #000000 ; el blanco es #FFFFFF ; si quieres saber mas equivalencias de color en numero hexadecimal pones en google “Colores Hexadecimales”.

Por otro lado las imágenes siempre tienen esa estructura para ponerlas :

url(“direccion de la imagen”);

y el no-repeat , indica que no quieres que la imagen se repita en el fondo, o sea que te la muestra 1 sola vez no como mosaico.

Margin: el nombre lo dice es para darle margen al elemento, en esta caso no tiene sentido darle ningún tipo de margen al body, mas de los que trae por defecto , pero en otros cosas del sidebar (el sidebar siempre es la barra de menú que va al lado , ya sea derecho o izquierdo)o del main (el main es la sección central donde uno pone aparecen lo que uno postea en el blog) se puede aplicar 4 mergin distintos:

Margin-left: margen izquierdo

Margin.right: margen derecho

Margin-top: margen superior

Margin-Bottom: margen inferior

En HTML siempre se puede trabajar con las unidades de pixeles o con porcentajes, por ejemplo puedo decir :

Margin-left: 500px;

O

Margin –left: 20%;

El primero te dará 500px de margen izquierdo y el segundo te dará 20% de margen de el total que mide tu contenedor (yo siempre prefiero trabajar con pixeles es mucho mas claro que los porcentajes)

*el padding también te saldrá hasta en la sopa XD y aun que en estricto rigor no es lo mismo que el margin, causen el mismo efecto!! Y se usan del mismo modo.

El “;” (punto y coma, el final de cada una de esas líneas es indispensable o simplemente no te tomara esa línea si no la cierras )

width:1200px; -à esto es el ancho que tendra el body en este caso, o cualquier otro elemento

Height: 30px;; -à es el alto que tendrá un elemento, o sea que tan larga o extensa quieres que sea tu pagina cuando uno baja.

overflow: hidden -à esto quiere decir que el body en este caso, tiene una medida que le dimos de alto y ancho y si lo que queremos meter ahí no cabe, el contenido se vera cortado, si no quieres que esto suceda se pone : overflow: scroll; y con eso activas la scroll para que puede correr el texto y caer por muy extensor que sea.

Mira para que entiendas mas o menos como se divide las paginas te dejo el blog de nosotros con las explicaciones de cada sección, aun que cada pagina es distinta según su diseño por lo general los nombre como header, main, sidebar estan como estandarisados para esas secciones seria bueno que miraras esto y te metieras a ver el código de nuestro blog, para que caches los valores que tiene mas o menos.

Consejos: mete mano como malo de la cabeza XDD TODO se puede arreglar así que sin pudor cambia valores y anda probando para que veas como afectan los cambios a la pagina, para que veas que se le da mas width a un sidebar por ejemplo, este se pondrá mas ancho , lo mismo con las margin, tienes que provar primero poniendole valores para que veas como se comportan.

Ahora se me olvido decirte algo, hay una operación matemática simple que siempre debes hacer la haré con el blog de nosotros.

Como te decía el body es como una cajita que contiene todo eso que vez, los sidebar, los menus etc, entonces la suma de los elementos internos no puede ser mayor a la cajita, me explico: si yo le pongo al body : width: 1200px ; la suma los width del sidebar, del header y del sidebar2 no puede ser mayos a 1200px; o pasara automáticamente a ponerse a bajo de tu pagina

Asi que animo mukkero, mete mucha mano no mas, si hay algunas cosas que no sepas que hacen, tienes dos opciones, buscas el nombre el google y te enteras, o me preguntas

El resto de codigo no tiene relevancia para uno, por que son trozos programados de cómo se comporta cuando posteas, y al final es como se forman los elementos y como se llenas, o sea algo que no pasa por ti , así que no tiene sentido ni siquiera mirarlo.

Ahora blogger con su nuevo diseño tiene edición de html y edición de diseño. Todo lo que te explique es para editar solo las características de las sección de la pagina, luego rápidamente puedes editar en diseño e ir agregando lo que necesites! Cajas de texto etc!!, cualquier cosa mira nuestro blog o me preguntas =)!!

No es malo que crees un blog que sea solamente para que experimentes en el =)! Si es que quieres.

Creo que con eso podrías comenzar a tenerte en este mundillo, espero haber sido clara en las explicaciones y que te sirvan!! =), cualquier cosa sha sabes donde estoy!! ;D

Rina