22
Apr

Tutorial de CSS Comenzando con HTML + CSS

Tutorial de CSS Comenzando con HTML + CSS

Este corto tutorial estГЎ pensado para aquellas personas que quieren empezar an emplear CSS y De ningГєn modo han escrito la hoja sobre estilos CSS.

No explica demasiado acerca de CSS. Se centra en cГіmo producir un archivo HTML, un archivo CSS y cГіmo elaborar que las dos funcionen juntos. La ocasiГіn finalizado este tutorial, podrГ©is leer alguno de los otros tutoriales de darle mГЎs Modalidad a las archivos HTML desplazГЎndolo hacia el pelo CSS. Igualmente podrГ©is utilizar un editor de HTML o CSS, de progresar sitios Web mГЎs avanzados.

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

El efecto serГЎ la pГЎgina HTML, con colores y no ha transpirado formato, todo desarrollado con CSS.

Ten en cuenta que no deseo decir que sea bonita ☺

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

Camino 1: Escribir el cГіdigo HTML

De este tutorial, te sugiero que utilices las herramientas mГЎs simples. Como podrГ­a ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn bastante. La oportunidad comprendido lo fundamental, seguramente se quieran emplear herramientas mГЎs complicadas, o hasta programas comerciales como Style Master, Dreamweaver o GoLive. Sin embargo de el desarrollo de la primera hoja de clases, serГ­a superior no distraerse con caracterГ­sticas avanzadas sobre otras herramientas.

No uses procesadores sobre texto igual que Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que las navegadores nunca podrГЎn interpretar. Con el fin de HTML y CSS, lo Гєnico que necesitamos son archivos en escrito aspecto.

El transito 1 consiste en abrir tu editor sobre texto (Notepad, TextEdit, HTML Kit o el que desees), iniciar con una ventana vacГ­a y redactar lo siguiente:

En realidad, no serГ­a obligatorio escribir el cГіdigo: puedes copiarlo y pegarlo directamente en un editor.

La primera camino que Se Muestra en el archivo HTML, le dice al navegador el arquetipo de HTML (DOCTYPE implica DOCument TYPE – en espaГ±ol: PROTOTIPO sobre DOCumento). En este caso, se prostituciГіn sobre la interpretaciГіn 4.01 de HTML.

Las palabras que se encuentran dentro de se llaman etiquetas (tags) asГ­ como, como puedes ver, el documento estГЎ dentro de las etiquetas y no ha transpirado . Entre desplazГЎndolo hacia el pelo existe espacio para variados tipos de noticia que no aparecerГЎn en la pantalla. Incluso hoy por hoy, el documento sГіlo contiene el tГ­tulo sin embargo posteriormente Asimismo se aГ±adirГЎ la hoja sobre clases de CSS.

El es en quГ© lugar se sitГєa el escrito del documento. En un comienzo, cualquier cosa que se Colocar allГ­ serГЎ mostrado, excepto el escrito que estГ© dentro de las siguientes etiquetas , las cuales muestran el contenido cupГіn DateHookUp situado en ese sitio como un parecer sobre referencia Con El Fin De nosotros mismos. El navegador la ignorarГЎ.

De las etiquetas del ejemplo,

    crea la “lista desordenada”, es decir, la listado en la cual las componentes no se encuentran numerados. La calificativo
    indica el comienzo de un “elemento lista”.

Editor mostrando el cГіdigo HTML.

Si te gustarГ­a conocer lo que significan los nombres que se encuentran dentro de , un buen lugar para iniciar es Comenzando con HTML . RealizarГ© determinados comentarios sobre la configuraciГіn sobre la pГЎgina HTML que estamos utilizando de modelo.

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

Observa que nunca he cerrado los puntos “li” y no ha transpirado “p”. En HTML (pero nunca en XHTML), se podrГЎn callar las etiquetas y no ha transpirado

, que fue lo que hice acГЎ, precisamente para efectuar el escrito mГЎs simple sobre leer. Pero si se prefiere pueden acontecer aГ±adidas.

Vamos a suponer que va a ser la pГЎgina sobre un lugar Web que tendrГЎn varias pГЎginas similares. Como serГ­a usual en pГЎginas Web, Г©sta tiene un menГє con enlaces an otras pГЎginas en el lugar ficticio, un contenido Гєnico asГ­ como la casa.

Hoy, elige “Guardar como…” de el menú Archivo, ve Incluso un directorio/carpeta a donde desees proteger el documento (el escritorio es una posibilidad) y no ha transpirado guarda el archivo como “mipagina.html”. Nunca cierres todavía el editor, lo necesitarás una diferente ocasión.

Después, abre el archivo en un navegador sobre la siguiente maneras: halla el archivo con tu gerente sobre archivos (Windows Explorer, Finder o Firefox) así como haz clic, o duplo clic, acerca de el archivo “mipagina.html”. El archivo HTML debe abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo sobre él).

Igual que puedes ver, la pГЎgina dispone de un semblante bastante aburrido.

Camino 2: AГ±adir varios colores

Posiblemente estГ©s viendo escrito bruno en un final blando, pero esto depende sobre cГіmo estГ© tu navegador configurado. Para que la pГЎgina tenga una cosa mГЎs sobre encanto podemos aГ±adir varios colores. (permite el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con la hoja sobre garbo interna en el archivo HTML. MГЎs el frente del manillar, pondremos el HTML y el CSS en archivos diversos. La separaciГіn de esos archivos serГ­a apropiado ya que facilita la aplicaciГіn de la misma hoja de estilo de diversos archivos HTML: sГіlo debes redactar la hoja sobre moda la ocasiГіn. Pero en este transito, vamos a dejarlo todo en el igual archivo.

Necesitamos aГ±adir un factor etc.

Las lГ­neas que debes aГ±adir estГЎn marcadas en colorado. La primera lГ­nea dice que eso resulta una hoja de moda desplazГЎndolo hacia el pelo que estГЎ escrita en CSS (“text/css”). La segunda camino indica que hemos aГ±adido moda al factor “body”. La tercera camino establece el color de el texto igual que morado desplazГЎndolo hacia el pelo la siguiente lГ­nea lo que permite es darle al fondo una clase sobre amarillo verdoso.

Las hojas sobre moda en CSS se encuentran compuestas de reglas. Cada norma posee 3 partes:

  1. el selector (en el prototipo es: “body”), el que le dice al navegador la parte de el documento que se verá afectada por la indicación;
  2. la propiedad (en el prototipo, ‘color’ desplazГЎndolo hacia el pelo ‘background-color’ son ambas caracterГ­sticas), las cuales especifican quГ© apariencia del bosquejo va a cambiarse;
  3. asГ­ como el precio (‘purple’ desplazГЎndolo hacia el pelo ‘#d8da3d’), el cual da el valor de la hacienda.

El ej muestra que es viable armonizar las reglas. Hemos establecido dos caracterГ­sticas, debido a que podrГ­amos tener 2 reglas separadas:

El final del elemento body serГЎ el extremo Con El Fin De todo el documento. a los otros elementos (p, li, address…) nunca se les ha cubo el menor final en particular, por lo que sobre manera predeterminada no tendrГЎn ninguno (o serГЎn transparentes). La pertenencia ‘color’ establece el color de el texto que se halla en el factor body, sin embargo las otros componentes que se encuentran dentro de body heredarГЎn ese color, a nunca acontecer que se especifique lo contrario. (MГЎs el frente del manillar aГ±adiremos mГЎs colores).