Hola,
Yo desarrollo mis diseños con mis propias manos, y más o menos así esta quedando el próximo que ando haciendo:
![[Imagen: estilo1-370ba63.png]](http://img88.xooimage.com/files/b/7/8/estilo1-370ba63.png)
Como lo hago?
Pues fácil, solo es cuestión de usar lo mas básico del html, dejar de usar etiquetas de tablas, y para que sea html 5 poner hasta el logo metido en el css, dependiendo de la forma del css y si los códigos son avanzados pues podremos lograr que sea la versión 3. Por ejemplo, el diseño que tiene YesildaHosting, comenzó desde lo mas básico, a lo medio luego a lo avanzado, diseño terminado en 35/36 días. Usando bloc de notas para el desarrollo de códigos, y photoshop, claro tenemos que tener conocimientos también. Y todo es cuestión de leer un simple tutorial o hacer un curso en línea que demora 7 días o 14 días. Con eso usted puede ir desarrollando las ideas para formar lo que se hace llamar un diseño, que es algo más original y profesional que estar buscando diseños gratuitos.
Explicación de cada función de etiquetas usadas y el css
Es usado para identificar el formato del diseño, es obligatorio poner la identificación de su diseño al comienzo del mismo por que esto aparte de que identifica el HTML5, por ser avanzado robots como Google toman en cuenta esto (lo se por qué me he dado cuenta). Esta etiqueta es llamada normalmente <html> la etiqueta vieja y sola mas utilizada del mundo, usada en tutoriales para enseñanza, y aun por algunos sitios antiguos, pero no es correcto que al crear un diseño no terminemos de poner la identificación tal como la tecnología de los navegadores hoy lo piden, ponemos el !DOCTYPE tal como en lo citado.
Esta etiqueta no es muy usada, es opcional y no tiene mucha utilidad, pero es recomendable ponerla después de la antes mencionada para que las arañas (robots) como Google entre otros identifiquen mas rápido el idioma de algún sitio web, con esta etiqueta aparece el sitio web de primero en los buscadores en español luego son indexados de segundo en los que tienen otros idiomas. Hablando de primero y segundo no es que se posicionaran alcanzando a otros sitios, hablo de que al buscar tudominio.com por ejemplo aparecerá primeramente en buscadores de idioma español, primero indexa google luego los demás.
Con esta etiqueta iniciamos el encabezado, el encabezado de un sitio web para poner las demás etiquetas como titulo, identificación de los caracteres, las meta etiquetas, y muchas cosas mas, hasta un enlace al css o el mismo css en el encabezado de un sitio web.
Comenzamos por ir reconociendo los caracteres del sitio, y es que al hacer un diseño si queremos usar caracteres especiales, por ejemplo configuración con su carácter especial en la letra; O, tenemos que poner un formato iso o windows, y dependiendo del formato que conozca hay se puede publicar, para esto se habría que buscar una lista en internet de los listados de caracteres existentes, y solo recomiendo UTF-8 para ciertos sitios y el windows que es el que uso, si desean también lo pueden usar, aunque el mas recomendado puede ser el utf8.
Etiquetas titles, son para poner el titulo de la pagina que estamos creando, al menos en el html que estamos trabajando, por que siempre vamos a variar donde dice Demo, por Contacto, Nosotros, Acerca, etcétera según sea el tipo de cada pagina html independiente que vayamos a crear ya que estamos trabajando con html puro, un simple bloc de notas y el pensamiento.
Con esta etiqueta iniciamos el estilo, mayormente se usa otro tipo de etiqueta para poner el estilo en una pagina aparte con formato .css, esto del estilo es lo que le da la forma a la pagina, sin esto tenemos una pagina sin forma, y todo descontrolado, por eso al ir desarrollando una pagina tenemos que ir desarrollando el estilo tambien, de cada cosa terminada, desarrollar lo que la estiliza.
El body {} es lo principal, con esto es que empezaremos, para dar color a nuestro fondo con el background-color, el tamaño al diseño con el width, ubicando con los margin, dando formato a las letras con los font, tamaños con font y size, ajustar con font y style, finalmente cerrar con unos {}. Esto depende de lo que usted tenga de conocimiento, yo por lo menos estilizo algún diseño más o menos como esta en el ejemplo.
Esto es para darle forma a los div, como es html 5 posiblemente la vayas a usar para algún caso.
Con estas etiquetas, es un ejemplo de la forma que le dan al html, sus funciones, colores, y posiciones, dependiendo del nombre que le pongas al class por ejemplo el mio tiene fd por que su significado es forodatos, pero para que estas funcionen tengo que poner un # y formar un #fd y dependiendo de lo que paga le voy poniendo #fd1, #fd2, con sus etiquetas de apertura y cierre {}, y por dentro el contenido a formar en el diseño.
Con esto le damos estilo a los enlaces del sitio web, que si se fijan siempre tienen un; a, apartado en cada inicio de enlaces. En este caso uso esto en el css así de esta forma para quitarle lo subrayado que acostumbradamente tienen por defecto, esto muchas veces hace que se vea feo el estilo. Con una transformación y decoración, poniendo un none logro hacer que el subrayado desaparezca.
Y de esta forma lo hago con las imágenes, siempre tienen un borde como azul más o menos que les cubre, con esto tenemos una imagen limpia. Con el borde y el 0 quitamos el borde totalmente de una imagen, esto hace que el sitio web se vea mucho mejor.
Estos son para terminar de quitar los subrayados, de cuando uno para el mouse por encima de X cosa y demás.
Con esta etiqueta finalizamos el cierre del estilo, para que este comience a hacer su funcionamiento. Sin estas etiquetas no tenemos estilos, y ciertos códigos antes mencionados ningunos en absoluto funcionarían, ya que hace falta de ciertas etiquetas para identificar.
Lo mismo que mencione arriba, sin esta no identifica tampoco la cabeza del sitio web, sin esta etiqueta de head es peor aun por que ni titulo... Digo puede que funcione pero no es debido poner un encabezado sin estas etiquetas ya que fuera un pésimo error de no nos serviría de nada hacerlo.
Aquí saliendo del encabezado, iniciamos la etiqueta body con la que vamos a trabajar con el html del sitio web, contenido y forma de estructura. Sin esta etiqueta el sitio seria no solo un desastre, un desastroso ya que esta etiqueta cuando no tiene estilo por ti mismo el navegador lo pone.
Jugando un poco con los div, etiquetas div son para iniciar una señal de que el estilo debe de hacer alguna función en esa área, no solo para eso, también para darle posición y ubicar, pero como estamos en html 5 siempre usaremos mas los div que otra cosa, menos códigos, menos trabajo, mas cómodo. En este caso si se fijan como lo antes visto esta el fd1, y cuando no es class mayormente usamos un id, y eso hace que el estilo ya escrito comience a funcionar.
Aquí estoy jugando un poco con el menú, con etiquetas <a href="#" y sus cierres de la misma forma en que están hago los enlaces, se le quita el subrayado por la función que hace con el; a, aparte de que este; a, tiene de función el hacer enlaces. Donde están los # van los enlaces y donde dice Nombre pues ponemos el nombre de X enlace, en la forma de la que están en este ejemplo formamos el llamado menú del sitio web.
Aquí estoy iniciando la etiqueta para dar contenido a mi sitio web, y incluyendo etiquetas como br para dar espacio y continuar escribiendo o poniendo cosas en el sitio, también existen los center pero ya esto mayormente se usan por css y demás funciones clásicas de diferentes formas.
En esta parte, dependiendo de como están las etiquetas float en el CSS, hago que al lado del contenido se inicie una barra del sitio.
Aquí dependiendo de los float también voy haciendo el pie de la página para ir finalizando.
Finalmente cierro mi trabajo, arranco mi diseño y nos vamos
Esta es una explicación breve para que tengan una idea más o menos de como hacer un diseño web, primero se hace el html, luego hacemos el css, pero dependiendo de lo que vayamos desarrollando con html vamos también haciendo parte por parte el css. Dependiendo también de lo que deseamos formar, el pensamiento es el que le va a dar forma y estilo al diseño, ya que como es un diseño propio lo que podamos estar desarrollando tendremos ideas, y mas ideas para ir dando forma, y poniendo las cosas a nuestro estilo, una vez acabado si hay de saber usar photoshop pues le puede dar mas estilo con imágenes desde photoshop, haciendo las imágenes, puliendo cada esquina, y adaptándolas con el css, el resultado final es que tenemos lo que queríamos.
Hablando un poco del javascript, son aquellos complementos u etiquetas en la cual implementamos una función movilizada en el sitio, y mas avanzada claro, podemos poner una galería de imágenes moviéndose, efectos, entre otras coas, para saber javascript primero tenemos que entender bien el html y el css. Ya teniendo los conocimientos básicos y sabiendo hacer un diseño algún día puedan desarrollar hasta su propio script.
Concluyendo con el diseño que acabo de hacer, o estoy haciendo aun formamos esto:
Y tenemos nuestro diseño todo en 1, CSS+HTML, y ambos desarrollado al tipo HTML5 y CSS3.
Un saludo, este tutorial ha salido de mi experiencia y cabeza, si hay de copiarlo poner mi nombre en el o sitio web.
Yo desarrollo mis diseños con mis propias manos, y más o menos así esta quedando el próximo que ando haciendo:
Como lo hago?
Pues fácil, solo es cuestión de usar lo mas básico del html, dejar de usar etiquetas de tablas, y para que sea html 5 poner hasta el logo metido en el css, dependiendo de la forma del css y si los códigos son avanzados pues podremos lograr que sea la versión 3. Por ejemplo, el diseño que tiene YesildaHosting, comenzó desde lo mas básico, a lo medio luego a lo avanzado, diseño terminado en 35/36 días. Usando bloc de notas para el desarrollo de códigos, y photoshop, claro tenemos que tener conocimientos también. Y todo es cuestión de leer un simple tutorial o hacer un curso en línea que demora 7 días o 14 días. Con eso usted puede ir desarrollando las ideas para formar lo que se hace llamar un diseño, que es algo más original y profesional que estar buscando diseños gratuitos.
Explicación de cada función de etiquetas usadas y el css
Cita:<!DOCTYPE html>
Es usado para identificar el formato del diseño, es obligatorio poner la identificación de su diseño al comienzo del mismo por que esto aparte de que identifica el HTML5, por ser avanzado robots como Google toman en cuenta esto (lo se por qué me he dado cuenta). Esta etiqueta es llamada normalmente <html> la etiqueta vieja y sola mas utilizada del mundo, usada en tutoriales para enseñanza, y aun por algunos sitios antiguos, pero no es correcto que al crear un diseño no terminemos de poner la identificación tal como la tecnología de los navegadores hoy lo piden, ponemos el !DOCTYPE tal como en lo citado.
Cita:<html lang="es">
Esta etiqueta no es muy usada, es opcional y no tiene mucha utilidad, pero es recomendable ponerla después de la antes mencionada para que las arañas (robots) como Google entre otros identifiquen mas rápido el idioma de algún sitio web, con esta etiqueta aparece el sitio web de primero en los buscadores en español luego son indexados de segundo en los que tienen otros idiomas. Hablando de primero y segundo no es que se posicionaran alcanzando a otros sitios, hablo de que al buscar tudominio.com por ejemplo aparecerá primeramente en buscadores de idioma español, primero indexa google luego los demás.
Cita:<head>
Con esta etiqueta iniciamos el encabezado, el encabezado de un sitio web para poner las demás etiquetas como titulo, identificación de los caracteres, las meta etiquetas, y muchas cosas mas, hasta un enlace al css o el mismo css en el encabezado de un sitio web.
Cita:<meta charset="windows-1252" />
Comenzamos por ir reconociendo los caracteres del sitio, y es que al hacer un diseño si queremos usar caracteres especiales, por ejemplo configuración con su carácter especial en la letra; O, tenemos que poner un formato iso o windows, y dependiendo del formato que conozca hay se puede publicar, para esto se habría que buscar una lista en internet de los listados de caracteres existentes, y solo recomiendo UTF-8 para ciertos sitios y el windows que es el que uso, si desean también lo pueden usar, aunque el mas recomendado puede ser el utf8.
Cita:<title>ForoDatos | Demo</title>
Etiquetas titles, son para poner el titulo de la pagina que estamos creando, al menos en el html que estamos trabajando, por que siempre vamos a variar donde dice Demo, por Contacto, Nosotros, Acerca, etcétera según sea el tipo de cada pagina html independiente que vayamos a crear ya que estamos trabajando con html puro, un simple bloc de notas y el pensamiento.
Cita:<style>
Con esta etiqueta iniciamos el estilo, mayormente se usa otro tipo de etiqueta para poner el estilo en una pagina aparte con formato .css, esto del estilo es lo que le da la forma a la pagina, sin esto tenemos una pagina sin forma, y todo descontrolado, por eso al ir desarrollando una pagina tenemos que ir desarrollando el estilo tambien, de cada cosa terminada, desarrollar lo que la estiliza.
Cita:body {
background-color:#019989;
width:800px;
margin-left:auto;
margin-right:auto;
font-family:Times Roman;
font-size:14px;
font-style:normal;
}
El body {} es lo principal, con esto es que empezaremos, para dar color a nuestro fondo con el background-color, el tamaño al diseño con el width, ubicando con los margin, dando formato a las letras con los font, tamaños con font y size, ajustar con font y style, finalmente cerrar con unos {}. Esto depende de lo que usted tenga de conocimiento, yo por lo menos estilizo algún diseño más o menos como esta en el ejemplo.
Cita:div.center {
text-align:center;
}
Esto es para darle forma a los div, como es html 5 posiblemente la vayas a usar para algún caso.
Cita:#fd1 {
background-color:#FF0;
height:80px;
text-align:center;
font-size:60px;
}
#fd2 {
background-color:#00BFFF;
color:#000;
text-align:center;
}
#fd2 a {
color:#000;
}
#fd3 {
background-color:#FF0;
color:#000;
text-align:center;
width:200px;
height:300px;
float:left;
}
#fd4 {
background-color:#FFF;
color:#000;
text-align:center;
height:300px;
}
#fd5 {
background-color:#00BFFF;
color:#000;
text-align:center;
}
#fd5 a {
color:#000;
}
Con estas etiquetas, es un ejemplo de la forma que le dan al html, sus funciones, colores, y posiciones, dependiendo del nombre que le pongas al class por ejemplo el mio tiene fd por que su significado es forodatos, pero para que estas funcionen tengo que poner un # y formar un #fd y dependiendo de lo que paga le voy poniendo #fd1, #fd2, con sus etiquetas de apertura y cierre {}, y por dentro el contenido a formar en el diseño.
Cita:a {
color:#FFF;
text-decoration:none;
}
Con esto le damos estilo a los enlaces del sitio web, que si se fijan siempre tienen un; a, apartado en cada inicio de enlaces. En este caso uso esto en el css así de esta forma para quitarle lo subrayado que acostumbradamente tienen por defecto, esto muchas veces hace que se vea feo el estilo. Con una transformación y decoración, poniendo un none logro hacer que el subrayado desaparezca.
Cita:a img {
border:0;
}
Y de esta forma lo hago con las imágenes, siempre tienen un borde como azul más o menos que les cubre, con esto tenemos una imagen limpia. Con el borde y el 0 quitamos el borde totalmente de una imagen, esto hace que el sitio web se vea mucho mejor.
Cita:a:hover,a:link,a:visited,a:active {
text-decoration:none;
}
Estos son para terminar de quitar los subrayados, de cuando uno para el mouse por encima de X cosa y demás.
Cita:</style>
Con esta etiqueta finalizamos el cierre del estilo, para que este comience a hacer su funcionamiento. Sin estas etiquetas no tenemos estilos, y ciertos códigos antes mencionados ningunos en absoluto funcionarían, ya que hace falta de ciertas etiquetas para identificar.
Cita:</head>
Lo mismo que mencione arriba, sin esta no identifica tampoco la cabeza del sitio web, sin esta etiqueta de head es peor aun por que ni titulo... Digo puede que funcione pero no es debido poner un encabezado sin estas etiquetas ya que fuera un pésimo error de no nos serviría de nada hacerlo.
Cita:<body>
Aquí saliendo del encabezado, iniciamos la etiqueta body con la que vamos a trabajar con el html del sitio web, contenido y forma de estructura. Sin esta etiqueta el sitio seria no solo un desastre, un desastroso ya que esta etiqueta cuando no tiene estilo por ti mismo el navegador lo pone.
Cita:<div id="fd1">
WWW.FORODATOS.COM
</div>
Jugando un poco con los div, etiquetas div son para iniciar una señal de que el estilo debe de hacer alguna función en esa área, no solo para eso, también para darle posición y ubicar, pero como estamos en html 5 siempre usaremos mas los div que otra cosa, menos códigos, menos trabajo, mas cómodo. En este caso si se fijan como lo antes visto esta el fd1, y cuando no es class mayormente usamos un id, y eso hace que el estilo ya escrito comience a funcionar.
Cita:<div id="fd2">
<a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a>
</div>
Aquí estoy jugando un poco con el menú, con etiquetas <a href="#" y sus cierres de la misma forma en que están hago los enlaces, se le quita el subrayado por la función que hace con el; a, aparte de que este; a, tiene de función el hacer enlaces. Donde están los # van los enlaces y donde dice Nombre pues ponemos el nombre de X enlace, en la forma de la que están en este ejemplo formamos el llamado menú del sitio web.
Cita:<div id="fd3">
<br>
Contenido.
<br>
</div>
Aquí estoy iniciando la etiqueta para dar contenido a mi sitio web, y incluyendo etiquetas como br para dar espacio y continuar escribiendo o poniendo cosas en el sitio, también existen los center pero ya esto mayormente se usan por css y demás funciones clásicas de diferentes formas.
Cita:<div id="fd4">
<br>
Contenido.
<br>
</div>
En esta parte, dependiendo de como están las etiquetas float en el CSS, hago que al lado del contenido se inicie una barra del sitio.
Cita:<div id="fd5">
© 2012 <a href="http://forodatos.com">ForoDatos</a>
</div>
Aquí dependiendo de los float también voy haciendo el pie de la página para ir finalizando.
Cita:</body>
</html>
Finalmente cierro mi trabajo, arranco mi diseño y nos vamos
Esta es una explicación breve para que tengan una idea más o menos de como hacer un diseño web, primero se hace el html, luego hacemos el css, pero dependiendo de lo que vayamos desarrollando con html vamos también haciendo parte por parte el css. Dependiendo también de lo que deseamos formar, el pensamiento es el que le va a dar forma y estilo al diseño, ya que como es un diseño propio lo que podamos estar desarrollando tendremos ideas, y mas ideas para ir dando forma, y poniendo las cosas a nuestro estilo, una vez acabado si hay de saber usar photoshop pues le puede dar mas estilo con imágenes desde photoshop, haciendo las imágenes, puliendo cada esquina, y adaptándolas con el css, el resultado final es que tenemos lo que queríamos.
Hablando un poco del javascript, son aquellos complementos u etiquetas en la cual implementamos una función movilizada en el sitio, y mas avanzada claro, podemos poner una galería de imágenes moviéndose, efectos, entre otras coas, para saber javascript primero tenemos que entender bien el html y el css. Ya teniendo los conocimientos básicos y sabiendo hacer un diseño algún día puedan desarrollar hasta su propio script.
Concluyendo con el diseño que acabo de hacer, o estoy haciendo aun formamos esto:
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="windows-1252" />
<title>ForoDatos | Demo</title>
<style>
body {
background-color:#019989;
width:800px;
margin-left:auto;
margin-right:auto;
font-family:Times Roman;
font-size:14px;
font-style:normal;
}
div.center {
text-align:center;
}
#fd1 {
background-color:#FF0;
height:80px;
text-align:center;
font-size:60px;
}
#fd2 {
background-color:#00BFFF;
color:#000;
text-align:center;
}
#fd2 a {
color:#000;
}
#fd3 {
background-color:#FF0;
color:#000;
text-align:center;
width:200px;
height:300px;
float:left;
}
#fd4 {
background-color:#FFF;
color:#000;
text-align:center;
height:300px;
}
#fd5 {
background-color:#00BFFF;
color:#000;
text-align:center;
}
#fd5 a {
color:#000;
}
a {
color:#FFF;
text-decoration:none;
}
a img {
border:0;
}
a:hover,a:link,a:visited,a:active {
text-decoration:none;
}
</style>
</head>
<body>
<div id="fd1">
WWW.FORODATOS.COM
</div>
<div id="fd2">
<a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a> - <a href="#">Nombre</a>
</div>
<div id="fd3">
<br>
Contenido.
<br>
</div>
<div id="fd4">
<br>
Contenido.
<br>
</div>
<div id="fd5">
© 2012 <a href="http://forodatos.com">ForoDatos</a>
</div>
</body>
</html>Y tenemos nuestro diseño todo en 1, CSS+HTML, y ambos desarrollado al tipo HTML5 y CSS3.
Un saludo, este tutorial ha salido de mi experiencia y cabeza, si hay de copiarlo poner mi nombre en el o sitio web.
Última modificación: 14 Aug, 2012, 5:58 pm por nicods_20055.