Tutorial de CSS Comenzando con HTML + CSS

Este breve tutorial estГЎ diseГ±ado para esas gente que quieren empezar an usar CSS y no ha transpirado JamГЎs han texto una hoja sobre estilos CSS.

No explica abundante sobre CSS. Se centra en cГіmo fabricar un archivo HTML, un archivo CSS y no ha transpirado cГіmo realizar que las dos funcionen juntos. La vez finalizado este tutorial, podrГ©is leer cualquier sobre los otros tutoriales para darle mГЎs estilo a las archivos HTML desplazГЎndolo hacia el pelo CSS. Igualmente podrГ©is emplear un editor de HTML o CSS, de prosperar lugares Web mГЎs avanzados.

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

El efecto serГЎ la pГЎgina HTML, con colores asГ­ como formato, al completo desarrollado con CSS.

Ten en cuenta que no quiero aseverar que sea bonita ☺

Las secciones igual que ésta son opcionales. Contienen explicaciones extras de el código HTML así como CSS del prototipo. El representación sobre “peligro”, situado al comienzo, indica que se prostitución sobre un material más avanzado que el resto.

Paso 1: Escribir el cГіdigo HTML

De este tutorial, te sugiero que emplees las herramientas mГЎs sencillas. Como podrГ­a ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn suficiente. Una ocasiГіn comprendido lo elemental, posiblemente se quieran usar herramientas mГЎs complicadas, o inclusive programas comerciales igual que Style Master, Dreamweaver o GoLive. Aunque para el progreso de una primera hoja de clases, serГ­a preferiblemente nunca distraerse con caracterГ­sticas avanzadas de diferentes herramientas.

No utilices procesadores de escrito igual que Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que las navegadores nunca podrГ­an interpretar. Con el fin de HTML asГ­ como CSS, lo Гєnico que necesitamos son archivos en escrito aspecto.

El camino 1 consiste en abrir tu editor sobre escrito (Notepad, TextEdit, HTML Kit o el que desees), comenzar con una ventana vacГ­a desplazГЎndolo hacia el pelo redactar lo siguiente:

En realidad, no es necesario redactar el cГіdigo: puedes copiarlo y no ha transpirado pegarlo directamente en un editor.

La primera lГ­nea que aparece en el archivo HTML, le dice al navegador el modelo sobre HTML (DOCTYPE significa DOCument TYPE – en espaГ±ol: PROTOTIPO de DOCumento). En este caso, se intenta de la lectura 4.01 de HTML.

Las tГ©rminos que se encuentran entre se llaman etiquetas (tags) desplazГЎndolo hacia el pelo, como puedes ver, el documento estГЎ entre las etiquetas asГ­ como . Entre desplazГЎndolo hacia el pelo Tenemos lugar de variados tipos sobre documentaciГіn que nunca aparecerГЎn en la pantalla. Hasta ahora, el documento sГіlo contiene el tГ­tulo sin embargo posteriormente Asimismo se aГ±adirГЎ la hoja sobre estilos sobre CSS.

El serГ­a en quГ© lugar se sitГєa el escrito del documento. En un fundamentos, cualquier cosa que se coloque allГЎ serГЎ mostrado, excepto el texto que estГ© en el interior de estas siguientes etiquetas , las cuales muestran el contenido situado en ese sitio como un comentario sobre referencia Con El Fin De nosotros mismos. El navegador la ignorarГЎ.

De las etiquetas de el modelo,

crea una “lista desordenada”, en otras palabras, la relación en la que las componentes nunca se encuentran numerados. La etiqueta
indica el comienzo sobre un “elemento lista”.

Editor mostrando el cГіdigo HTML.

En caso de que deseas conocer lo que significan los nombres que estГЎn dentro de , un buen sitio para comendar es Comenzando con HTML . RealizarГ© determinados comentarios referente a la configuraciГіn sobre la pГЎgina HTML que estamos utilizando de exponente.

• “ul” representa la lista con un hipervГ­nculo por cada aspecto. Esto mostrarГЎ el “menГє sobre navegaciГіn de el sitio” con enlaces a diferentes pГЎginas (ficticias) del sitio Web. Supuestamente, todas las pГЎginas sobre el lugar Web deben un menГє similar.
• Las componentes “title” asГ­ como “p” componen el Гєnico contenido sobre esta pГЎgina, mientras que la casa al final (“address”) serГЎ la misma Con El Fin De todas las pГЎginas de el sitio.

Observa que no he cerrado las elementos “li” asГ­ como “p”. En HTML (aunque no en XHTML), se podrГЎn callar las etiquetas desplazГЎndolo hacia el pelo

, que fue lo que hice aquГ­, precisamente de efectuar el texto mГЎs fГЎcil sobre leer. No obstante si se prefiere pueden acontecer aГ±adidas.

Vamos an implicar que va a ser una pГЎgina de un sitio Web que tendrГЎn varias pГЎginas similares. Como serГ­a habitual en pГЎginas Web, Г©sta posee un menГє con enlaces an otras pГЎginas en el lugar ficticio, un contenido Гєnico asГ­ como la casa.

En seguida, elige “Guardar como…” de el menú Archivo, percibe Incluso un directorio/carpeta a donde quieras guardar el documento (el escritorio puede ser la decisión) y no ha transpirado guarda el archivo igual que “mipagina.html”. Nunca cierres aún el editor, lo necesitarás otra ocasión.

Después, abre el archivo en un navegador sobre la sub siguiente forma: halla el archivo con tu gerente de archivos (Windows Explorer, Finder o Firefox) desplazándolo hacia el pelo haz clic, o copia clic, en el archivo “mipagina.html”. El archivo HTML debería abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador desplazándolo hacia el pelo arrastra el archivo en él).

Igual que puedes ver, la pГЎgina posee un apariencia harto aburrido.

Paso 2: AГ±adir determinados colores

Seguramente estГ©s viendo escrito negro referente a un final blando, sin embargo esto depende sobre 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 sobre moda interna en el archivo HTML. MГЎs el frente del manillar, ex pondremos el HTML asГ­ como el CSS en archivos diversos. La separaciГіn de estos archivos serГ­a recomendable puesto que favorece la utilizaciГіn de la misma hoja de garbo para distintas archivos HTML: sГіlo tienes que escribir la hoja sobre moda la ocasiГіn. Aunque en este transito, vamos a dejarlo cualquier en el tiempo archivo.

Necesitamos aГ±adir un elemento etc.

Las lГ­neas que debes aГ±adir se encuentran marcadas en colorado. Durante la reciente camino dice que eso resulta una hoja sobre Modalidad desplazГЎndolo hacia el pelo que estГЎ escrita en CSS (“text/css”). La segunda camino indica que hemos aГ±adido garbo al factor “body”. La tercera lГ­nea establece el color de el escrito https://hookupdate.net/es/imeetzu-review/ igual que morado y no ha transpirado la siguiente camino lo que realiza es darle al fondo una especie de dorado verdoso.

Las hojas de moda en CSS se encuentran compuestas de reglas. Cada regla tiene tres zonas:

1. el selector (en el ejemplo sería: “body”), el que le dice al navegador la zona del documento que se verá afectada por la indicación;
2. la patrimonio (en el ej, ‘color’ asГ­ como ‘background-color’ son ambas caracterГ­sticas), las cuales especifican quГ© porte del croquis va a cambiarse;
3. y no ha transpirado el valor (‘purple’ desplazГЎndolo hacia el pelo ‘#d8da3d’), el cual da el precio para la patrimonio.

El ejemplo muestra que serГ­a factible conjugar las reglas. Hemos establecido dos caracterГ­sticas, por lo que podemos tener 2 reglas separadas:

El final de el aspecto body serГЎ el fondo para cualquier el documento. a los otros elementos (p, li, address…) nunca se les ha hexaedro el menor final en particular, debido a que de manera predeterminada no tendrГЎn ninguno (o serГЎn transparentes). La dominio ‘color’ establece el color del texto que se encuentra en el factor body, No obstante las otros componentes que podemos encontrar en el interior de body heredarГЎn ese color, a no acontecer que se especifique lo contrario. (MГЎs el frente del manillar aГ±adiremos mГЎs colores).