Como hacer una página web (CSS para Principiantes) Parte 1

Como hacer una página web (CSS para Principiantes) Parte 1


¿Querés crear tu propia página web? Lee mi tuto (= (tal vez sea muy largo. Lo voy a tener que hacer en 2 post, lo voy a ir viendo al transcurso que lo realizo)

css


CSS para principiantes

Para este y tutorial sólo necesitas un navegador y un editor de texto. Si el editor tiene resaltado de sintaxis CSS pues mucho mejor. Si usted está acostumbrado a usar Dreamweaver déjelo un momento aparte pues nada se compara a controlar el código de manera directa.

Cascading Styling Sheets u Hojas de Estilos en Cascada, es uno de los grandes avances en la creación de páginas y programas Web. Uno de los aspectos más importantes de CSS es que no sólo maneja los estilos y tipografía sino también la distribución espacial del contenido de las páginas. Si durante años ha usado HTML y el tag table y siente que no hay necesidad de cambiar debo decirle que está en un error . En cuanto pruebe la potencia y sencillez de CSS se convertirá en un entusiasta. Además, las páginas hechas en CSS son más rápidas y ligeras, y se colocan mejor en los buscadores pues a Google y a Yahoo! les gusta lo hecho con CSS. Además, ahorrará muchas horas de trabajo, su jefe creerá que usted tardo días para cambiar el diseño de un sitio pero en realidad solo fue necesario hacer algunos pases mágicos por la hoja de estilos a la hora de la comida (MUAJAJA ) .

Lo primero en CSS


Lo primero que debe tener en claro es que el tag font está terminantemente prohibido en CSS. Esto es así porque en CSS todo se maneja a través de “clases” o estilos. Existen algunas clases predefinidas por el navegador que usted conoce y ha usado cientos de veces: H1, H2, P, HR, TR, etcétera, estas clases son las que hemos usado siempre. La magia de CSS radica en que podemos crear nuevas clases y modificar las existentes. Los primero es crear la página primer-css.html.

crear


Codigo:

<html><head>

<title> :: Mi primer CSS :: </title>

<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="stylesheet" href="estilos.css" type="text/css" />

</head>

<body>

<p><span class="slogan">Parrafo sin acentos</span></p>

<p><span class="titulo">Otro parrafo sin acentos</span></p>

<p><span class="titulo">Este es un

<span class="slogan">tercer parrafo</span>

sin acentos</span></p>

<h1>Este es el tag h1</h1>

</body>

</html>

completo


Note que después del tag </title> están las indicaciones para que la página HTML “jale” el diseño CSS. A continuación, cree un archivo en blanco y guárdelo en el mismo directorio con el nombre estilos.css.

Comentar la hoja de estilos


Es una buena costumbre que las clases que se crean en los archivos CSS estén comentadas para saber en que y en donde las usamos, los comentarios se colocan entre un /* y un */. Las primeras clases (o estilos) que crearemos serán las clases “slogan” y “titulo”, que se usan para darle diseño al slogan y al titulo de la página, coloque este código en el archivo estilos.css.

pagina web


Codigo:

/* Clase para el slogan */

.slogan {

color: #097a19;

font-size: 14pt;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-align: center;

background-color: #b4b4b4;

}

/* Clase para los titulos */

.titulo {

color: #d3a900;

font-size: 11pt;

font-family: Arial, sans-serif;

text-align: left;

}

/* Mi versión de h1 */

h1 {

color: #dd1010;

font-size: 18pt;

font-family: Arial, sans-serif;

text-align: center;

}

crear pagina web


Las clases que uno crea comienzan con un punto (.) mientras las predefinidas (como h1) no lo tienen. Note además que el código CSS se escribe con minúscula pues así lo exige el estándar.

El tag SPAN sirve para marcar bloques de texto. Un bloque span, como vemos en el tercer párrafo, puede colocarse dentro de otro bloque SPAN

Etapas del diseño web


Estas son algunas etapas que se sugieren para diseñar eficientemente un sitio; es conveniente no comenzar a escribir ninguna línea de código HTML antes de completar las primeras etapas.

Delimitación del tema


Esta es la etapa crucial, se define de qué se va a tratar el Web, que cosas se incluirán y qué no. Tambien es el momento para definir tanto las audiencias (normalmente es más de una) y los objetivos (intentando priorizar entre objetivos primarios y secundarios).

Si no se evalúa adecuadamente la cantidad de tiempo que se dispone contra la cantidad de tiempo requerida para elaborar un sitio de la magnitud deseada, el resultado puede ser desastroso. Muchos proyectos Web fracasan porque comienzan a crecer y crecer sus especificaciones, sin que haya detrás un trabajo ordenado de delimitación de contenidos.

Obsérvese lo siguiente: la mayoría de los sitios que son premiados con distinciones como "Lo mejor de …", "La mejor página de la semana …", "Top 5% del Web", son sitios que se dedican a temas muy especificos. La gente no quiere un montón de sitios que tengan referencias a otros lugares, la gente lo que busca es el contenido.

Recolección de la información


En esta etapa se recolecta la información que se va a poner en el Web, de acuerdo a la especificación hecha en la etapa anterior. Es conveniente asociarse con alguien como un "proveedor de contenido", puesto que como mencioné antes hay mucha gente que si bien le tiene aversión a los computadores y que dispone de valiosísima e interesante información. Las organizaciones en general producen grandes cantidades de informacion, tambien en esta etapa hay que delimitar cuanta de la informacion historica, que ya no es relevante, sera incluida en el sitio web, por ejemplo, se puede definir que la informacion de mas de 3 años de antiguedad no sera incluida, etc.

Agregacion y descripcion


Una vez que tenemos la información que irá en el sitio, comenzamos una clasificación apropiada . Aquí hay que encontrar un adecuado balance entre la linealidad y la jerarquización.

Aplicamos una clasificación de tipo lineal a fragmentos de información que requieren que la persona que los lee vaya avanzando poco a poco en el conocimiento de algo, como en un libro. Usualmente los pondremos en una misma página, usando FRAMES o una técnica similar si se estima apropiado. Aplicamos una clasificación de tipo jerárquica a trozos de información que sean complementarios o que dependan uno de otro, como secciones y subsecciones. Usualmente los pondremos en diferentes páginas.

Es importante aqui no centrarse en una unica forma de clasificar los documentos. Una serie de descriptores tienen que ser definidos. Ademas, un mismo documento puede pertenecer a varios valores de un mismo descriptor. Si nos encontramos en esta etapa discutiendo sobre si un elemento de información va en una u otra parte, es que estamos cometiendo un error: debe ir en todas las partes donde un usuario razonable esperaria encontrarlo.

Estructuración


En este punto se estructura la manera en que se unen las diferentes páginas, de acuerdo a la agregación de contenidos realizada en la etapa anterior. Se provee de ayudas para la navegacion, de enlaces que permitan la jerarquización que diseñamos y de enlaces entre elementos de una misma jerarquía si se desea. Tambien es importante proveer de indices para cada descriptor que haya sido diseñado. Desde este punto en adelante se puede trabajar en la implementación HTML propiamente tal.

Metáfora


Existen muchas páginas que esperamos sean accesadas desde diferentes partes de nuestro servicio (por ejemplo: un glosario o una ayuda). Quizás en alguna parte del documento mencionamos a otra página y sería interesante que el usuario pudiera hacer click en esa referencia para ir a la página que estamos referenciando.

A esta etapa le llamamos "metáfora" pues permite referirse a una misma entidad (en este caso, una página HTML) en diferentes contextos. Estas paginas deben ser diseñadas cuidadosamente puesto que seran importantes para los usuarios al permitirles "saltar" dentro del sitio desde zonas logicamente distantes.

Diseño y estilo gráfico


Un estilo gráfico adecuado puede ser algo importantísimo a la hora de hacer que la persona que nos visita se sienta cómoda, y como una manera de alivianar el contenido y hacerlo más digerible. Un sitio por mas contenido que tenga si no tiene un buen diseño grafico dificilmente lograra un lugar destacado entre otros sitios del mismo tipo.

En cuanto a la cantidad y tamaño de las imágenes, hay que adoptar un equilibrio. Hay sitios que se basan casi por completo en grandes y lentas imágenes GIF , otros que se ven bastante pobres pues son casi sólo texto , con lo que se desaprovechan los métodos multimediales . El esquema que se adoptará, (que se encuentra en algún lugar entre ambos extremos) varía de diseñador a diseñador y es un punto importante a considerar.

Otro punto importante en la etapa de definición de la parte gráfica, es intentar en lo posible mantener una cierta coherencia gráfica, y atreverse a innovar en cuanto a ella. Un color de fondo, un fondo o una distribución interesante de los elementos dentro de una página es algo que no se olvida con facilidad.

Ensamble final


En este punto concretamos el diseño, con los últimos enlaces que sean necesarios e incorporamos el estilo gráfico a las páginas, se ensambla el sitio con una portada que sea capaz de presentar en una sóla página física al menos lo más relevante del sitio, se instalan links hacia la página personal del autor y/o su dirección de correo electrónico.

Testeo


Finalmente, es necesario revisar la coherencia general del sitio, que no hayan links "rotos" que no conduzcan a ninguna parte; revisar la redacción y ortografía de las páginas, hacer los ajustes necesarios para separar las páginas que sean demasiado extensas en páginas más pequeñas.

Para esta etapa, lo mejor es tratar de buscar usuarios que vayan a utilizar el sitio en la practica, y si eso no es posible, ponerse en el lugar de las personas que vean los documentos, y seguir los pasos que suponemos que ellos seguiran.

hacer pagina


Como usar distintos colores en un select menu con CSS


Podemos personalizar nuestros select menu asignádoles clases a las opciones del menú.

Como prueba añadiremos distintos colores de fondo en el desplegable.

Primero: Creamos una página nueva HTML.

Segundo: Dentro de las etiquetas HEAD definimos el CSS.

Como hacer una página web (CSS para Principiantes) Parte 1


Codigo:

<style type="text/css">
body{
background-color:#666666;
color:#FFFFFF;
text-align:center;
}
/*Recuerda: para definir las clases
se coloca un punto delante del nombre*/
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}
</style>

css


Tercero: Dentro del Body, creamos nuestro formulario, asignando a cada option la clase que le corresponda.


crear


Codigo:

<form method="post" action="PAGINA.HTML">
<label for="color">Selecciona tu color favorito:</label>
<p>
<select name="color" id="color">
<option value=" ">Selecciona Uno</option>
<option value="amarillo" class="amarillo">amarillo</option>
<option value="rojo" class="rojo">rojo</option>
<option value="verde" class="verde">verde</option>
<option value="azul" class="azul">azul</option>
</select>
</p>
<p>
<input type="submit" name="submit" id="submit"
value="Enviar!" />
</p>
</form>

completo


Cuarto: Guardar y Probar.

Este mismo procedimiento, es suficiente para añadir imágenes en cada option, sólo modificando las clases CSS, de tal manera de poder dejar muy bien personalizado nuestro menú de selección.


Como crear enlaces hipertexto


Para ser capaces de crear una página Web bastante completa tenemos que aprender a crear enlaces hipertexto. Con ellos se pueden activar frases o palabras de la página para que al pulsar sobre ellas se salte a cualquier otra página de Internet que decidamos. EJ: TARINGA

Estos enlaces hipertexto (en inglés links) no son más que unas zonas (habitualmente palabras o frases) especiales de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. El concepto del hipertexto no es nuevo, la mayoría de los lectores lo habrán usado ya en la ayuda de Windows™ o en otros muchos sistemas, lo realmente novedoso que ofrecen estos enlaces en el WWW es la posibilidad de pulsar y navegar hasta páginas que se encuentren en el otro extremo de la tierra. El navegante puede moverse de España a Japón con una única pulsación sobre el texto adecuado. En seguida se verá lo sencillo que es incluir esta impresionante tecnología en una página web.

Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos:

1. Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web (web site). Todas estas páginas estarán (generalmente) en el mismo servidor WWW, y por tanto estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra. Un ejemplo dirección de un enlace interno es:

pagina web


Codigo:

/hobbies/index.html

crear pagina web


2. Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo:

hacer pagina


Codigo:

http://www.otroservidor.com/hobbies/index.html

Como hacer una página web (CSS para Principiantes) Parte 1


Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una página con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier tipo de fichero. EJ: Imagen de Taringa

La etiqueta <a>… </a>


Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su atributo ‘href‘ permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él. La estructura de un link es:

css


Codigo:


<a href="dirección_URL">Hipertexto</a>

crear


Los navegadores gráficos como Microsoft Internet Explorer resaltan este texto mostrándolo de un color diferente y subrayándolo, además el cursor cambiará al situarlo sobre el texto. Los navegadores que funcionan en modo texto como Lynx resaltan los enlaces hipertexto cambiando el color del texto y de su fondo.

Veamos un ejemplo sencillo del uso de enlaces. Se ha creado un sitio web personal con 2 páginas. La página principal se encuentra en el archivo index.html y se quiere que en ella haya un enlace a otra página donde se han escrito sobre los hobbies del creador del sitio web y que se encuentra en el archivo hobbies.html. El enlace podría ser algo así:

completo


Codigo

Puedes conocer mis <a href="hobbies.html">hobbies</a>

pagina web


Si no funciona un link conviene comprobar la sintaxis del código HTML. Un error común es no cerrar las comillas que tras poner la dirección de la página enlazada. Si se comete este error, además de no funcionar el enlace, es posible que desaparezcan otros elementos de la página al visualizarla.


crear pagina web


Bueno gente, hasta aqui ha llegado mi post ya que tengo mucho mas para dar pero lo tendre que hacer en una "Parte 2". Una de las cosas que voy a explicar en el segundo post es "Como atraer gente a la web" ya que despues de tanto esfuerzo y que no entre nadie jajaj, bueno si recibo comentarios en esta y agradecimiento me daran ganas para realizar la segunda parte un saludo a toda la comunidad T!


hacer pagina


Como hacer una página web (CSS para Principiantes) Parte 1

Fuentes de Información - Como hacer una página web (CSS para Principiantes) Parte 1

Dar puntos
62 Puntos
Votos: 14 - T!score: 4.5/10
  • 2 Seguidores
  • 32.912 Visitas
  • 31 Favoritos

12 comentarios - Como hacer una página web (CSS para Principiantes) Parte 1

@niconake Hace más de 5 años
esta weno
pèro te falto la parte de subrila a internet
los hosting gratuitos
como cambiar y dns y todo eso
@mauro_mb Hace más de 5 años
muy bueno... pero no entendi

/* Clase para el slogan */

.slogan {

color: #097a19;

font-size: 14pt;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-align: center;

background-color: #b4b4b4;

}

/* Clase para los titulos */

.titulo {

color: #d3a900;

font-size: 11pt;

font-family: Arial, sans-serif;

text-align: left;

}

/* Mi versión de h1 */

h1 {

color: #dd1010;

font-size: 18pt;

font-family: Arial, sans-serif;

text-align: center;

}


eso.... porque no estoy seguro, eso sirve para poner por ej &lt; Clase para el slogan &gt;holafsdhafdls&lt;/ Clase para el slogan &gt; y se te aparece con esas confiuraciones?



igual muy buen post!

@mauro_mb Hace más de 5 años
ahhhhh!

ya entendi!!!
lo que esta /* asi /* no se ve en la pagina y el codigo seria

&lt;slogan&gt;holafsdhafdls&lt;/slogan&gt;



ah y donde dice que h1 no iba con un punto adelante

(
/* Mi versión de h1 */

h1 {

color: #dd1010;

font-size: 18pt;

font-family: Arial, sans-serif;

text-align: center;

}
)

(ahi) porque es predefinida,,, despues en la segunda parte podes poner cuales son las predefinidas?
@elpequew5 Hace más de 5 años
no entendi nada
@RetroGlamm2 Hace más de 5 años
yo tampoko

todo re bn pro escribi mejor



@chechedale Hace más de 5 años
Exelente post hermano,muy bien explicado, se ve que le hechaste mucho tiempo, espero la parte 2, lastima que soy novato y no t puedo dar puntos
@nikolatesla1 Hace más de 4 años
mauro_mb dijo:ahhhhh!

ya entendi!!!
lo que esta /* asi /* no se ve en la pagina y el codigo seria

&lt;slogan&gt;holafsdhafdls&lt;/slogan&gt;



ah y donde dice que h1 no iba con un punto adelante

(
/* Mi versión de h1 */

h1 {

color: #dd1010;

font-size: 18pt;

font-family: Arial, sans-serif;

text-align: center;

}
)

(ahi) porque es predefinida,,, despues en la segunda parte podes poner cuales son las predefinidas?



&lt;h1 class=&quot;slogan&quot;&gt;este es el titulo de mi pagina...&lt;/h1&gt;

pasen por aca y van a entender mejor

http://www.taringa.net/posts/ebooks-tutoriales/1931407/Como-hacer-facilmente-una-pagina-web-Parte-I.html
@NachoDLX Hace más de 1 año
Gracias! muy bueno
@ElCuervo95 Hace más de 1 año
Es parecido a HTML !
@victorsolareskem Hace más de 9 meses
para ser la primera vez que uso CSS aprendi bastante
@HackerTutoriales Hace más de 8 meses
Muy bien explicado... Sí pudieses reparar los linck de las imágenes seria mucho mejor para darnos un mejor enfoque