Este corto tutorial esta disenado para aquellas gente que desean iniciar an utilizar CSS y Jamas han escrito la hoja de clases CSS.
Nunca explica mucho acerca de CSS. Se centra en como generar un archivo HTML, un archivo CSS y no ha transpirado como realizar que las 2 funcionen juntos. La ocasion finalizado este tutorial, podreis leer cualquier de las otros tutoriales de darle mas garbo a las archivos HTML asi como CSS. Asimismo podreis usar un editor sobre HTML o CSS, de acrecentar sitios Web mas avanzados.
Al final del tutorial habras hecho un archivo HTML igual que este:
El consecuencia sera la pagina HTML, con colores y formato, cualquier desarrollado con CSS.
Ten en cuenta que nunca quiero decir que sea bonita O
Las secciones igual que esta son opcionales. Contienen explicaciones adicionales del codigo HTML y CSS del exponente. El emblema de “peligro”, situado al principio, indica que se intenta de un material mas avanzado que el resto.
Paso 1: redactar el codigo HTML
Para este tutorial, te sugiero que emplees las herramientas mas simples. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran suficiente. Una vez comprendido lo elemental, seguramente se deseen emplear herramientas mas complicadas, o incluso programas comerciales igual que Style Master, Dreamweaver o GoLive. No obstante para el incremento sobre una primera hoja sobre clases, es superior nunca distraerse con caracteristicas avanzadas sobre diferentes herramientas.
Nunca uses procesadores de escrito igual que Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que las navegadores nunca pueden interpretar. Con el fin de HTML desplazandolo hacia el pelo CSS, lo unico que necesitamos son archivos en escrito plano.
El camino 1 consta en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), comenzar con una ventana vacia desplazandolo hacia el pelo escribir lo sub siguiente:
Realmente, no es preciso redactar el codigo: puedes copiarlo y no ha transpirado pegarlo sin intermediarios en un editor.
Durante la reciente linea que aparece en el archivo HTML, le dice al navegador el clase de HTML (DOCTYPE implica DOCument TYPE – en espanol: PROTOTIPO sobre DOCumento). En este caso, se intenta sobre la version 4.01 sobre HTML.
Las terminos que podemos encontrar dentro de se llaman etiquetas (tags) y, como puedes ver, el documento esta dentro de las etiquetas y no ha transpirado . Entre y existe espacio de distintas clases de informacion que nunca apareceran en la pantalla. Incluso ahora, el documento solo contiene el titulo aunque posteriormente ademas se anadira la hoja de clases de CSS.
El es donde se situa el escrito de el documento. En un fundamentos, todo cosa que se Colocar alla sera mostrado, excepto el texto que este dentro de estas siguientes etiquetas , las cuales muestran el contenido situado en ese sitio igual que un comentario de referencia Con El Fin De nosotros mismos. El navegador la ignorara.
De estas etiquetas de el ej,
-
produce una “lista desordenada”, es decir, una relacion en la cual los elementos nunca estan numerados. La epiteto
indica el principio sobre un “elemento lista”.
Editor mostrando el codigo HTML.
En caso de que te gustaria saber lo que significan los nombres que se encuentran dentro de , un buen sitio para comenzar seria Comenzando con HTML . Realizare ciertos comentarios referente a la configuracion sobre la pagina HTML que estamos usando de ej.
- “ul” representa la lista con un hipervinculo por cada factor. Lo cual mostrara nuestro “menu sobre navegacion de el sitio” con enlaces a diferentes paginas (ficticias) del lugar Web. Supuestamente, la totalidad de las paginas de el sitio Web deben un menu similar.
- Los componentes “title” y “p” componen el unico contenido de esta pagina, mientras que la firma al final (“address”) sera la misma de la totalidad de las paginas del sitio.
Observa que nunca he cerrado los componentes “li” y no ha transpirado “p”. En HTML (sin embargo nunca en XHTML), se podrian prescindir las etiquetas asi como
, que fue lo que hice aqui, precisamente de hacer el escrito mas simple de leer. Aunque En Caso De Que se prefiere podran ser anadidas.
Vamos an implicar que va an acontecer la pagina sobre un lugar Web que tendran varias paginas similares. Como es habitual en paginas Web, esta dispone de un menu con enlaces an otras paginas en el sitio ficticio, un contenido unico y una firma.
En seguida, elige “Guardar como…” de el menu Archivo, percibe hasta un directorio/carpeta en donde desees guardar el documento (el escritorio puede ser una posibilidad) desplazandolo hacia el pelo guarda el archivo igual que “mipagina.html”. Nunca cierres todavia el editor, lo necesitaras otra ocasion.
Luego, abre el archivo en un navegador sobre la sub siguiente forma: haya el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) y no ha transpirado haz clic, o duplo clic, sobre el archivo “mipagina.html”. El archivo HTML debe abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador y arrastra el archivo referente a el novio).
Como puedes ver, la pagina goza de un matiz muy aburrido.
Camino 2: Anadir ciertos colores
Probablemente estes viendo texto bruno acerca de un final blando, No obstante lo cual depende sobre como este tu navegador configurado. Para que la pagina tenga una cosa mas sobre encanto podemos anadir ciertos colores. (Deja el navegador abierto, lo utilizaremos mas tarde).
Comenzaremos con la hoja sobre estilo interna en el archivo HTML. Mas delante, pondremos el HTML y el CSS en archivos diversos. La separacion de esos archivos seria aconsejable ya que facilita la utilizacion sobre la misma hoja sobre Modalidad para distintas archivos HTML: solo debes escribir la hoja sobre garbo la vez. Aunque en este transito, vamos a dejarlo cualquier en el identico archivo.
Necesitamos anadir un elemento [etc.]
Las lineas que debes anadir se encuentran marcadas en rojo. La primera camino dice que eso es una hoja sobre estilo desplazandolo hacia el pelo que esta escrita en CSS (“text/css”). La segunda camino indica que hemos anadido Modalidad al factor “body”. La tercera camino establece el color de el escrito como morado y no ha transpirado la sub siguiente camino lo que permite es darle al final una especie sobre dorado verdoso.
Las hojas de garbo en CSS se encuentran compuestas sobre reglas. Cada indicacion goza de tres zonas:
- el selector (en el ej seria: “body”), el cual le dice al navegador la zona del documento que se vera afectada por la regla;
- la casa (en el prototipo, ‘color’ desplazandolo hacia el pelo ‘background-color’ son ambas propiedades), las cuales especifican que apariencia del esquema va a cambiarse;
- y no ha transpirado el valor (‘purple’ y ‘#d8da3d’), el que da el tasacion Con El Fin De la dominio.
El ejemplo muestra que es probable combinar las reglas. Hemos establecido 2 caracteristicas, por lo que podriamos tener 2 reglas separadas:
El fondo del aspecto body sera el fondo para cualquier el documento. a las otros elementos (p, li, address…) nunca se les ha hexaedro el menor fondo en particular, debido a que de maneras predeterminada nunca tendran ninguno (o seran transparentes). La propiedad ‘color’ establece el color de el texto que se encuentra en el elemento body, aunque las otros componentes que podemos encontrar en el interior de body heredaran ese color, a no ser que se especifique lo opuesto. (Mas delante anadiremos mas colores).
