Tutorial sobre CSS Comenzando con HTML + CSS

Este breve tutorial estГЎ diseГ±ado Con El Fin De aquellas personas que desean empezar an utilizar CSS y JamГЎs han texto una hoja de estilos CSS.

Nunca explica mucho referente a CSS. Se centra en cГіmo producir un archivo HTML, un archivo CSS desplazГЎndolo hacia el pelo cГіmo hacer que las dos funcionen juntos. Una vez finalizado este tutorial, podrГ©is leer alguno sobre los otros tutoriales Con El Fin De darle mГЎs moda a las archivos HTML desplazГЎndolo hacia el pelo CSS. AdemГЎs podrГ©is utilizar un editor sobre HTML o CSS, para llevar a cabo lugares Web mГЎs avanzados.

Al final del tutorial habrГЎs hecho un archivo HTML igual que Г©ste:

El efecto serГЎ una pГЎgina HTML, con colores y formato, cualquier desarrollado con CSS.

Ten en cuenta que nunca deseo afirmar que sea bonita ☺

Las secciones igual que ésta son opcionales. Contienen explicaciones adicionales del código HTML así como CSS del modelo. El signo sobre “peligro”, situado al fundamentos, indica que se trata de un material más avanzado que el resto.

Paso 1: redactar el cГіdigo HTML

Con el fin de este tutorial, te sugiero que uses las herramientas mГЎs simples. Como podrГ­a ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn suficiente. La vez comprendido lo fundamental, seguramente se deseen usar herramientas mГЎs complicadas, o hasta programas comerciales igual que Style Master, Dreamweaver o GoLive. Aunque para el desarrollo sobre la primera hoja sobre estilos, es preferiblemente nunca distraerse con caracterГ­sticas avanzadas de diferentes herramientas.

Nunca utilices procesadores de texto igual que Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que las navegadores no podrГЎn interpretar. De HTML y CSS, lo Гєnico que necesitamos son archivos en texto plano.

El camino 1 radica en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), empezar con una ventana vacГ­a y escribir lo sub siguiente:

En realidad, nunca es indispensable redactar el cГіdigo: puedes copiarlo desplazГЎndolo hacia el pelo pegarlo directamente en un editor.

Durante la reciente camino que Se Muestra en el archivo HTML, le dice al navegador el modelo sobre HTML (DOCTYPE quiere decir DOCument TYPE – en espaГ±ol: TIPO sobre DOCumento). En este caso, se alcahueterГ­a de la lectura 4.01 sobre HTML.

Las palabras que se encuentran dentro de se llaman etiquetas (tags) asГ­ como, igual que puedes ver, el documento estГЎ entre las etiquetas desplazГЎndolo hacia el pelo . Dentro de y no ha transpirado existe lugar de variados tipos de documentaciГіn que nunca aparecerГЎn en la monitor. Hasta En la actualidad, el documento sГіlo contiene el tГ­tulo aunque posteriormente igualmente se aГ±adirГЎ la hoja de estilos de CSS.

El serГ­a dГіnde se sitГєa el texto del documento. En un principio, todo cosa que se coloque ahГ­ serГЎ mostrado, excepto el texto que estГ© adentro de estas subsiguientes etiquetas , las cuales muestran el contenido situado en ese punto como un comentario sobre relato Con El Fin De nosotros mismos. El navegador la ignorarГЎ.

De las etiquetas del ej,

produce una “lista desordenada”, en otras palabras, una relación en la cual los elementos nunca están numerados. La epíteto
indica el comienzo de un “elemento lista”.

Editor mostrando el cГіdigo HTML.

En caso de que deseas conocer lo que significan las nombres que estГЎn entre , un buen sitio para comendar es Comenzando con HTML . RealizarГ© determinados comentarios acerca de la estructura sobre la pГЎgina HTML que estamos usando de modelo.

• “ul” representa la relaciГіn con un hipervГ­nculo por cada elemento. Esto mostrarГЎ el “menГє de navegaciГіn del sitio” con enlaces a diferentes pГЎginas (ficticias) del lugar Web. Supuestamente, la totalidad de las pГЎginas de nuestro sitio Web deben un menГє similar.
• Las componentes “title” desplazГЎndolo hacia el pelo “p” componen el Гєnico contenido sobre esta pГЎgina, entretanto que la firma al final (“address”) serГЎ la misma de todas las pГЎginas de el sitio.

Observa que nunca he cerrado las componentes “li” y no ha transpirado “p”. En HTML (sin embargo nunca en XHTML), se podrГЎn silenciar las etiquetas asГ­ como

, que fue lo que hice acГЎ, precisamente Con El Fin De elaborar el escrito mГЎs sencillo de leer. Pero En Caso De Que se prefiere pueden ser aГ±adidas.

Vamos an implicar que va a ser la pГЎgina de un lugar Web que tendrГЎn varias pГЎginas similares. Como es asiduo en pГЎginas Web, Г©sta goza de un menГє con enlaces an otras pГЎginas en el sitio ficticio, un contenido Гєnico y no ha transpirado una casa.

Ahora, elige “Guardar como…” de el menú Archivo, percibe Incluso un directorio/carpeta en donde quieras guardar el documento (el número de teléfono adulthub escritorio es una elección) así como tiene el archivo igual que “mipagina.html”. Nunca cierres aún el editor, lo necesitarás una diferente oportunidad.

Luego, abre el archivo en un navegador sobre la siguiente forma: localiza el archivo con tu gerente de archivos (Windows Explorer, Finder o Firefox) así como haz clic, o copia clic, acerca de el archivo “mipagina.html”. El archivo HTML debe abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador así como arrastra el archivo sobre el novio).

Como puedes ver, la pГЎgina goza de un apariencia bastante aburrido.

Camino 2: AГ±adir ciertos colores

Seguramente estГ©s viendo escrito bruno referente a un extremo blando, sin embargo esto dependerГЎ de cГіmo estГ© tu navegador configurado. Para que la pГЎgina tenga alguna cosa mГЎs de encanto podrГ­amos aГ±adir determinados colores. (permite el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con la hoja de estilo interna en el archivo HTML. MГЎs el frente del manillar, ex pondremos el HTML y no ha transpirado el CSS en archivos diversos. La separaciГіn de aquellos archivos serГ­a aconsejable puesto que favorece la utilizaciГіn de la misma hoja de garbo Con El Fin De variados archivos HTML: sГіlo debes escribir la hoja sobre garbo la ocasiГіn. Sin embargo en este paso, vamos a dejarlo cualquier en el igual archivo.

Necesitamos aГ±adir un elemento etc.

Las lГ­neas que debes aГ±adir estГЎn marcadas en rojo. La primera camino dice que eso es una hoja de estilo asГ­ como que estГЎ escrita en CSS (“text/css”). La segunda lГ­nea indica que hemos aГ±adido Modalidad al factor “body”. La tercera lГ­nea establece el color de el texto como morado y la sub siguiente camino lo que hace serГ­a darle al final la especie de amarillo verdoso.

Las hojas de estilo en CSS se encuentran compuestas sobre reglas. Cada norma goza de tres zonas:

1. el selector (en el exponente sería: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la regla;
2. la propiedad (en el prototipo, ‘color’ desplazГЎndolo hacia el pelo ‘background-color’ son ambas caracterГ­sticas), las cuales especifican quГ© matiz de el esquema va a cambiarse;
3. asГ­ como el tasaciГіn (‘purple’ y no ha transpirado ‘#d8da3d’), el cual da el tasaciГіn de la patrimonio.

El ej muestra que serГ­a viable combinar las reglas. Hemos establecido dos caracterГ­sticas, debido a que podemos tener dos reglas separadas:

El final de el aspecto body serГЎ el fondo Con El Fin De al completo el documento. a las otros componentes (p, li, address…) nunca se les ha cubo ningГєn final en concreto, debido a que sobre forma predeterminada no tendrГЎn nadie (o serГЎn transparentes). La casa ‘color’ establece el color del texto que se localiza en el aspecto body, No obstante las otros puntos que podemos encontrar en el interior de body heredarГЎn ese color, a no ser que se especifique lo contrario. (MГЎs adelante aГ±adiremos mГЎs colores).