Te recomiendo hechar un vistazó
La estructura básica del html:
DOCTYPEhtmlheadmetatitletitleheadbodyBodyhtmlDe esta estructura tan básica es de donde empieza la magia ¡Y tú también puedes crear cosas con tus propias manos!, solo debes proponértelo y realmente no es tan difícil.
Alunos de los mejores cursos recomendados para aprender acerca de la programación web, sin embargo, el esfuerzo por aprender no se lleva a cabo con solo ver cursos y aprender, (la práctica es una de las cosas más importantes para ello.
Sin lugar a dudas, la web es algo muy impresionante, debes saber que la práctica es muy importante, al final tenemos aquí unos cuantos proyectos que podrás descargar fácilmente para hecharle un vistazo al código.
Puedes descargar algunos proyectos más avanzados, aunque dichos proyectos son son "premium" deberías hecharles un vistazo, los precios son económicos además de buenos cursos.
Recordemos que una de las partes más importantes y fundamentales es leer el código, vamos a ver unos cuantos ejercicios que podemos realizar, en caso de que quieras darle un vistazo a algunos proyectos te invitamos que entres a nuestra tienda, en donde encontrarás recursos completamente gratuitos.
BodyBodyUna manera de hacer que los elementos se posicionen uno al lado del otro es:
headtitletitlestyletype =" text/css " body div%pxstyleheadBodydivdivdivdivBodyEs importante que los contenedores div tengan un ancho ya especificado,
de esta manera podrán ponerse uno al lado del otro. También le hemos puesto un color de
fondo para poder ver los contenedores. Si los contenedores abarcaran el 100% de nuestra pantalla no podrían posicionarse uno al lado del otro, por eso
es importante el width.
La siguiente manera para posicionar los elementos uno al lado del otro es la siguiente:
headtitletitlestyletype =" text/css " body divpxstyleheadBodydivdivdivdivdivdivBodyComo en el ejemplo anterior, hemos visto que le pusimos a los elementos div la
propiedad (diplay), con esta propiedad le hemos dado el valor, "o el atributo inline-block",
significa que el elemento div ha adquirido las mismas características de un
elemento en línea, pero conservando las características de un elemento en bloque. Así que
así es como posicionamos los elementos uno al lado del otro, desde luego esta es otra forma de
hacerlo.
Tenemos los elementos que flotan hacia una dirección en específico.
El primer atributo hace que los elementos floten hacia la izquierda.
El segundo atributo hace que los elementos floten hacia la derecha.
El tercer atributo hace que los elementos no floten.
Algunos elementos abarcan todo el ancho de la página web, otros solo abarcan lo que necesitan, y otros poseen las dos propiedades.
El primer atributo hace que el elemento abarque el espacio que su contenido necesita.
El segundo atributo hace que el elemento abarque el 100% del ancho de la página web.
El tercer atributo hace que el contenido del elemento abarque el alto que necesita, pero también ocupa todo el ancho disponible de la página web, haciendo que el elemento se posicione en tipo línea.
Al utilizar las propiedades como float algunos elementos de nuestra página pueden experimentar
una deformidad, esto porque al flotar un elemento los elementos posteriores a él suelen seguirle.
Para evitar este comportamiento es mejor usar dos propiedades que realmente nos salvarán la vida,
overflow y clear.
Para utilizar estas propiedades te presento un ejemplo:
headtitletitlestyletype =" text/css " %pxstyleheadBodysectiondivdivdivdivdivdivfootersmallbbsmallfootersectionBodyHasta aquí todo va bien, sin embargo, el footer se verá obligado a flotar junto con los
demás ementos div. Para solucionar este problema solo debemos darle al elemento
footer una de las siguientes propiedades:
footerLa propiedad clear con su atributo both permite que el contenedor no flote con
los demás elementos los cuales poseen la propiedad float.
Otro forma de hacerlo es dándole la propiedad overflow con su atributo hidden
al elemento padre, de esta forma:
Con esto el (contenedor padre) abarcará a sus elementos hijos por completo, haciendo una distinción
entre ellos y posicionándolos de la manera correcta, cuando utilizamos la propiedad float estamos
alterando de cierta manera la naturaleza de un contenedor, por lo cual, el contenedor padre no puede ver a sus
elementos hijos, pero con la propiedad overflow y su atributo hidden le devolvemos
esa naturaleza a los elementos hijos, conservando así los resultados de la propiedad float con
su atributo left o right.