Tutorial sobre CSS Comenzando con HTML + CSS

Tutorial sobre CSS Comenzando con HTML + CSS

Este corto tutorial esta pensado Con El Fin De esas gente que desean comenzar an usar CSS asi como Jamas han escrito la hoja de clases CSS.

No explica mucho sobre CSS. Se centra en como fabricar un archivo HTML, un archivo CSS y no ha transpirado como elaborar que los 2 funcionen juntos. Una ocasion finalizado este tutorial, podreis leer cualquier de los otros tutoriales para darle mas Modalidad a las archivos HTML y no ha transpirado CSS. Ademas podreis utilizar un editor sobre HTML o CSS, de acrecentar sitios Web mas avanzados.

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

El efecto sera la pagina HTML, con colores desplazandolo hacia el pelo formato, al completo desarrollado con CSS.

Ten en cuenta que no quiero aseverar que sea bonita O

Las secciones igual que esta son opcionales. Contienen explicaciones adicionales del codigo HTML asi como CSS de el modelo. El signo sobre peligro, situado al comienzo, indica que se trata sobre un material mas avanzado que el resto.

Paso 1: Escribir el codigo HTML

dating for foodies

Para este tutorial, te sugiero que emplees las herramientas mas simples. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran razonable. La vez comprendido lo basico, seguramente se deseen usar herramientas mas complicadas, o inclusive programas comerciales igual que Style Master, Dreamweaver o GoLive. Aunque para el desarrollo de la primera hoja sobre estilos, es preferiblemente no distraerse con caracteristicas avanzadas sobre otras herramientas.

Nunca utilices procesadores sobre escrito como Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que los navegadores no pueden interpretar. De HTML desplazandolo hacia el pelo CSS, lo unico que necesitamos son archivos en escrito plano.

El transito 1 consta en abrir tu editor de escrito (Notepad, TextEdit, HTML Kit o el que desees), comenzar con una ventana vacia y no ha transpirado redactar lo sub siguiente:

Realmente, nunca es necesario redactar el codigo: puedes copiarlo desplazandolo hacia el pelo pegarlo directamente en un editor.

La primera linea que Se Muestra en el archivo HTML, le dice al navegador el prototipo de HTML (DOCTYPE implica DOCument TYPE – en castellano: ARQUETIPO sobre DOCumento). En este caso, se trata de la interpretacion 4.01 sobre HTML.

Las palabras que se encuentran entre se llaman etiquetas (tags) desplazandolo hacia el pelo, igual que puedes ver, el documento esta entre las etiquetas y no ha transpirado . Dentro de desplazandolo hacia el pelo Existen lugar para distintas tipos sobre noticia que nunca apareceran en la pantalla. Incluso Actualmente, el documento solo contiene el titulo pero posteriormente tambien se anadira la hoja de clases de CSS.

El seria en que lugar se situa el texto de el documento. En un comienzo, cualquier cosa que se Colocar ahi sera mostrado, excepto el escrito que este dentro de estas proximos etiquetas , las cuales muestran el contenido situado en ese lugar igual que un opinion de referencia Con El Fin De nosotros mismos. El navegador la ignorara.

De las etiquetas de el ejemplo,

    crea la lista desordenada, en otras palabras, la listado en la que los puntos no se encuentran numerados. La etiqueta
    indica el comienzo sobre un elemento lista.

Editor mostrando el codigo HTML.

Si deseas conocer lo que significan las nombres que se encuentran dentro de , un buen sitio de comendar seria Comenzando con HTML . Realizare ciertos comentarios en la estructura sobre la pagina HTML que estamos usando sobre ejemplo.

  • ul representa la relacion con un hipervinculo por cada factor. Lo cual mostrara el menu de navegacion del sitio con enlaces a diferentes paginas (ficticias) del sitio Web. Supuestamente, la totalidad de las paginas sobre nuestro sitio Web tienen un menu similar.
  • Los puntos title y p componen el unico contenido de www.datingmentor.org/es/oasis-dating-review esta pagina, entretanto que la casa al final (address) sera la misma Con El Fin De la totalidad de las paginas de el sitio.

Observa que no he cerrado los elementos «li» y «p». En HTML (No obstante nunca en XHTML), se podrian olvidar las etiquetas y

, que fue lo que hice aqui, precisamente Con El Fin De elaborar el texto mas discreto sobre leer. No obstante En Caso De Que se prefiere podran acontecer anadidas.

Vamos a suponer que va a ser una pagina de un sitio Web que tendran varias paginas similares. Como seria asiduo en paginas Web, esta goza de un menu con enlaces an otras paginas en el sitio ficticio, un contenido unico asi como la casa.

Hoy, elige Guardar como del menu Archivo, percibe Incluso un directorio/carpeta a donde quieras guardar el documento (el escritorio es una alternativa) y no ha transpirado guarda el archivo como mipagina.html. Nunca cierres todavia el editor, lo necesitaras una diferente ocasion.

Luego, abre el archivo en un navegador de la sub siguiente forma: halla el archivo con tu gerente de archivos (Windows Explorer, Finder o Firefox) y no ha transpirado haz clic, o doble 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 no ha transpirado arrastra el archivo en el novio).

Como puedes ver, la pagina goza de un aspecto muy aburrido.

Camino 2: Anadir ciertos colores

Probablemente estes viendo escrito sable sobre un final blando, sin embargo esto dependera de como este tu navegador configurado. Con el fin de que la pagina tenga una cosa mas sobre encanto podriamos anadir determinados colores. (Deja el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con una hoja sobre moda interna en el archivo HTML. Mas el frente del manillar, ex pondremos el HTML y el CSS en archivos diferentes. La separacion sobre dichos archivos seria conveniente porque facilita la empleo de la misma hoja de Modalidad para variados archivos HTML: solo debes redactar la hoja de garbo la oportunidad. Aunque en este transito, vamos a dejarlo al completo en el similar archivo.

Necesitamos anadir un aspecto [etc.]

Las lineas que debes anadir se encuentran marcadas en rojo. La primera linea dice que eso resulta una hoja de estilo asi como que esta escrita en CSS («text/css»). La segunda linea indica que hemos anadido estilo al factor «body». La tercera camino establece el color del texto como morado y no ha transpirado la siguiente linea lo que permite es darle al final la especie de amarillo verdoso.

Las hojas sobre garbo en CSS se encuentran compuestas sobre reglas. Cada norma dispone de tres partes:

  1. el selector (en el ej es: body), el cual le dice al navegador la zona de el documento que se vera afectada por la indicacion;
  2. la propiedad (en el ej, ‘color’ asi como ‘background-color’ son ambas caracteristicas), las cuales especifican que semblante del bosquejo va a cambiarse;
  3. y el precio (‘purple’ y no ha transpirado ‘#d8da3d’), el cual da el precio Con El Fin De la casa.

El modelo muestra que es posible combinar las reglas. Hemos establecido 2 propiedades, debido a que podriamos tener 2 reglas separadas:

El extremo de el factor body sera el fondo de todo el documento. a los otros componentes (p, li, address) nunca se les ha dado el menor final en particular, debido a que sobre manera predeterminada nunca tendran ninguno (o seran transparentes). La hacienda ‘color’ establece el color del escrito que se haya en el aspecto body, pero los otros puntos que se encuentran en el interior de body heredaran ese color, a nunca acontecer que se especifique lo contrario. (Mas el frente del manillar anadiremos mas colores).