Tutorial de CSS Comenzando con HTML + CSS

Este corto tutorial esta pensado para esas seres que quieren comenzar an emplear CSS asi como nunca han texto la hoja sobre clases CSS.

Nunca explica demasiado referente a CSS. Se centra en como fabricar un archivo HTML, un archivo CSS y no ha transpirado como efectuar que las dos funcionen juntos. Una vez finalizado este tutorial, podreis leer cualquiera sobre los otros tutoriales Con El Fin De darle mas Modalidad a los archivos HTML y no ha transpirado CSS. Ademas podreis emplear un editor de HTML o CSS, para desarrollar lugares Web mas avanzados.

Al final del tutorial habras hecho un archivo HTML como este:

El rendimiento sera la pagina HTML, con colores y no ha transpirado formato, todo desarrollado con CSS.

Ten en cuenta que nunca deseo hablar de que sea bonita O

Las secciones igual que esta son opcionales. Contienen explicaciones adicionales del codigo HTML y no ha transpirado CSS de el exponente. El emblema de peligro, situado al fundamentos, indica que se alcahueteria de un material mas avanzado que el resto.

Paso 1: redactar el codigo HTML

Para este tutorial, te sugiero que utilices las herramientas mas simples. Como podria ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran suficiente. La ocasion comprendido lo fundamental, seguramente se quieran emplear herramientas mas complicadas, o hasta programas comerciales como Style Master, Dreamweaver o GoLive. Aunque de el desarrollo sobre una primera hoja de estilos, es conveniente nunca distraerse con caracteristicas avanzadas sobre diferentes herramientas.

Nunca emplees procesadores de escrito como Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que las navegadores nunca podrian interpretar. De HTML y no ha transpirado CSS, lo unico que necesitamos son archivos en escrito aspecto.

El paso 1 radica en abrir tu editor sobre texto (Notepad, TextEdit, HTML Kit o el que desees), iniciar con la ventana vacia asi como escribir lo siguiente:

En realidad, nunca seria preciso redactar el codigo: puedes copiarlo y no ha transpirado pegarlo sin intermediarios en un editor.

La primera linea que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE implica DOCument TYPE – en castellano: ARQUETIPO de DOCumento). En este caso, se intenta sobre la lectura 4.01 sobre HTML.

Las palabras que podemos encontrar entre se llaman etiquetas (tags) y, como puedes ver, el documento esta entre las etiquetas desplazandolo hacia el pelo . Entre y no ha transpirado hay lugar Con El Fin De diferentes clases de referencia que no apareceran en la monitor. Hasta En seguida, el documento solo contiene el titulo aunque posteriormente igualmente se anadira la hoja sobre clases sobre CSS.

El es donde se situa el escrito de el documento. En un fundamentos, todo cosa que se coloque alli sera mostrado, salvo el escrito que este adentro de estas subsiguientes etiquetas , las cuales muestran el contenido situado en ese sitio como un critica de relato de nosotros mismos. El navegador la ignorara.

De las etiquetas del ej,

crea la lista desordenada, es decir, la lista en la cual los componentes nunca se encuentran numerados. La epiteto
indica el comienzo sobre un elemento lista.

Editor mostrando el codigo HTML.

Si deseas saber lo que significan las nombres que estan dentro de , un buen sitio Con El Fin De emprender seria Comenzando con HTML . Realizare algunos comentarios referente a la organizacion sobre la pagina HTML que estamos utilizando de prototipo.

• ul representa la relacion con un hipervinculo por cada elemento. Esto mostrara nuestro menu sobre navegacion de el sitio con enlaces an otras paginas (ficticias) de el lugar Web. Supuestamente, todas las paginas sobre el lugar Web deben un menu similar.
• Las componentes title asi como p componen el unico contenido de esta pagina, entretanto que la firma al final (address) sera la misma Con El Fin De todas las paginas del lugar.

Observa que no he cerrado las componentes “li” y no ha transpirado “p”. En HTML (No obstante nunca en XHTML), se podran suprimir las etiquetas asi como

, que fue lo que hice aca, precisamente para elaborar el escrito mas facil de leer. Aunque En Caso De Que se prefiere podran acontecer anadidas.

Vamos an implicar que va a ser la pagina de un sitio Web que tendran varias paginas similares. Igual que seria habitual en paginas Web, esta goza de un menu con enlaces a diferentes paginas en el sitio ficticio, un contenido unico asi como una firma.

Hoy, elige Guardar como del menu Archivo, percibe Incluso un directorio/carpeta en donde quieras guardar el documento (el escritorio puede ser la decision) y no ha transpirado tiene el archivo como mipagina.html. Nunca cierres aun el editor, lo necesitaras otra oportunidad.

Luego, abre el archivo en un navegador sobre la siguiente manera: haya el archivo con tu gerente sobre archivos (Windows Explorer, Finder o Firefox) y haz clic, o doble clic, sobre el archivo mipagina.html. El archivo HTML deberia abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo en el).

Igual que puedes ver, la pagina tiene un aspecto muy aburrido.

Camino 2: Anadir algunos colores

Posiblemente estes viendo texto negro sobre un extremo blando, aunque lo cual dependera sobre como este tu navegador configurado. Con el fin de que la pagina tenga una cosa mas de encanto podriamos anadir ciertos colores. (permite el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con la hoja sobre estilo interna en el archivo HTML. Mas adelante, pondremos el HTML y no ha transpirado el CSS en archivos diferentes. La separacion de dichos archivos seria recomendable puesto que facilita la utilizacion de la misma hoja de moda Con El Fin De diferentes archivos HTML: solo tienes que redactar la hoja de Modalidad una oportunidad. Sin embargo en este transito, vamos a dejarlo todo en el mismo archivo.

Necesitamos anadir un factor [etc.]

Las lineas como ligar en squirt que debes anadir se encuentran marcadas en rojo. Durante la reciente camino dice que eso es una hoja de moda y no ha transpirado que esta escrita en CSS (“text/css”). La segunda camino indica que hemos anadido estilo al elemento “body”. La tercera camino establece el color de el escrito como morado asi como la sub siguiente linea lo que realiza es darle al final la especie sobre dorado verdoso.

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

1. el selector (en el prototipo es: body), el que le dice al navegador la parte del documento que se vera afectada por la indicacion;
2. la propiedad (en el ej, ‘color’ y no ha transpirado ‘background-color’ son ambas caracteristicas), las cuales especifican que aspecto del bosquejo va a cambiarse;
3. y el tasacion (‘purple’ y ‘#d8da3d’), el que da el precio para la patrimonio.

El prototipo muestra que seria concebible armonizar las reglas. Hemos establecido 2 caracteristicas, por lo que podriamos tener 2 reglas separadas:

El extremo de el aspecto body sera el fondo Con El Fin De todo el documento. a las otros puntos (p, li, address) nunca se les ha hexaedro el menor extremo en concreto, por lo que sobre manera predeterminada nunca tendran ninguno (o seran transparentes). La dominio ‘color’ establece el color del escrito que se haya en el factor body, No obstante los otros componentes que se encuentran en el interior de body heredaran ese color, a nunca ser que se especifique lo contrario. (Mas adelante anadiremos mas colores).