Categories
sign up

Tutorial de CSS Comenzando con HTML + CSS

Tutorial de CSS Comenzando con HTML + CSS

Este corto tutorial estГЎ pensado Con El Fin De aquellas gente que desean iniciar an utilizar CSS asГ­ como nunca han escrito la hoja de clases CSS.

Nunca explica abundante sobre CSS. Se centra en cГіmo producir un archivo HTML, un archivo CSS desplazГЎndolo hacia el pelo cГіmo elaborar que los dos funcionen juntos. Una ocasiГіn finalizado este tutorial, podrГ©is leer cualquiera de los otros tutoriales de darle mГЎs Modalidad a las archivos HTML y no ha transpirado CSS. Igualmente podrГ©is utilizar un editor sobre HTML o CSS, para progresar lugares Web mГЎs avanzados.

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

El producto serГЎ una pГЎgina HTML, con colores y no ha transpirado formato, cualquier 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 prototipo. El símbolo de “peligro”, situado al fundamentos, indica que se prostitución sobre un material más avanzado que el resto.

Camino 1: Escribir el cГіdigo HTML

Para este tutorial, te sugiero que utilices las herramientas mГЎs sencillas. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn bastante. Una ocasiГіn comprendido lo esencial, seguramente se deseen emplear herramientas mГЎs complicadas, o tambien programas comerciales igual que Style Master, Dreamweaver o GoLive. No obstante de el progreso de la primera hoja de clases, es conveniente no distraerse con caracterГ­sticas avanzadas sobre otras herramientas.

No emplees procesadores de texto igual que Microsoft Word u OpenOffice. hookupdate.net/es/xmeeting-review Con ellos, generalmente se generan archivos que los navegadores nunca pueden interpretar. De HTML desplazГЎndolo hacia el pelo CSS, lo Гєnico que necesitamos son archivos en texto aspecto.

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

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

Durante la reciente lГ­nea que Se Muestra en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE quiere decir DOCument TYPE – en espaГ±ol: ARQUETIPO sobre DOCumento). En este caso, se trata de la traducciГіn 4.01 de HTML.

Las tГ©rminos que podemos encontrar dentro de se llaman etiquetas (tags) asГ­ como, como puedes ver, el documento estГЎ entre las etiquetas desplazГЎndolo hacia el pelo . Dentro de asГ­ como Tenemos lugar para diferentes tipos de noticia que no aparecerГЎn en la pantalla. Incluso Hoy, el documento sГіlo contiene el tГ­tulo pero posteriormente igualmente se aГ±adirГЎ la hoja sobre estilos sobre CSS.

El serГ­a dГіnde se sitГєa el escrito de el documento. En un comienzo, cualquier cosa que se coloque allГЎ serГЎ mostrado, salvo el texto que estГ© adentro de las siguientes etiquetas , las cuales muestran el contenido situado en ese sitio igual que un opiniГіn sobre referencia Con El Fin De nosotros mismos. El navegador la ignorarГЎ.

De estas etiquetas del ej,

    crea una “lista desordenada”, en otras palabras, una listado en la que los elementos no están numerados. La calificativo
    indica el comienzo sobre un “elemento lista”.

Editor mostrando el cГіdigo HTML.

En caso de que quieres saber lo que significan las 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 sobre modelo.

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

Observa que no he cerrado las elementos “li” desplazГЎndolo hacia el pelo “p”. En HTML (pero nunca en XHTML), se podrГЎn suprimir las etiquetas y no ha transpirado

, que fue lo que hice acГЎ, precisamente de efectuar el texto mГЎs discreto sobre leer. Sin embargo si se prefiere podrГЎn acontecer aГ±adidas.

Vamos a suponer que va a ser la pГЎgina sobre un lugar Web que tendrГЎn varias pГЎginas similares. Igual que es asiduo en pГЎginas Web, Г©sta goza de un menГє con enlaces an otras pГЎginas en el sitio ficticio, un contenido Гєnico desplazГЎndolo hacia el pelo la casa.

Actualmente, elige “Guardar como…” de el menú Archivo, ve Incluso un directorio/carpeta donde quieras proteger el documento (el escritorio puede ser una elección) desplazándolo hacia el pelo guarda el archivo igual que “mipagina.html”. No cierres todavía el editor, lo necesitarás otra oportunidad.

Después, abre el archivo en un navegador de la sub siguiente manera: haya el archivo con tu gerente de archivos (Windows Explorer, Finder o Firefox) así como haz clic, o doble 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 así como arrastra el archivo sobre él).

Igual que puedes ver, la pГЎgina tiene un matiz bastante aburrido.

Camino 2: AГ±adir determinados colores

Posiblemente estГ©s observando texto negro referente a un extremo blando, pero lo cual dependerГЎ sobre cГіmo estГ© tu navegador configurado. Para que la pГЎgina tenga alguna cosa mГЎs de encanto podemos aГ±adir algunos colores. (Deja el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con la hoja de garbo interna en el archivo HTML. MГЎs adelante, pondremos el HTML y el CSS en archivos variados. La separaciГіn sobre aquellos archivos es conveniente puesto que facilita la uso sobre la misma hoja de moda para diversos archivos HTML: sГіlo debes escribir la hoja sobre moda una ocasiГіn. Aunque en este transito, vamos a dejarlo todo en el igual archivo.

Necesitamos aГ±adir un factor etc.

Las lГ­neas que debes aГ±adir se encuentran marcadas en colorado. Durante la reciente lГ­nea dice que eso resulta una hoja de Modalidad asГ­ como que estГЎ escrita en CSS (“text/css”). La segunda lГ­nea indica que hemos aГ±adido estilo al factor “body”. La tercera lГ­nea establece el color del escrito como morado asГ­ como la siguiente lГ­nea lo que hace serГ­a darle al final la especie sobre amarillo verdoso.

Las hojas sobre moda en CSS se encuentran compuestas sobre reglas. Cada indicaciГіn posee tres partes:

  1. el selector (en el prototipo es: “body”), el que le dice al navegador la parte del documento que se verá afectada por la indicación;
  2. la casa (en el prototipo, ‘color’ desplazГЎndolo hacia el pelo ‘background-color’ son ambas propiedades), las cuales especifican quГ© porte de el esbozo va a cambiarse;
  3. y no ha transpirado el precio (‘purple’ desplazГЎndolo hacia el pelo ‘#d8da3d’), el cual da el precio de la dominio.

El exponente muestra que es concebible armonizar las reglas. Hemos establecido 2 prestaciones, debido a que podrГ­amos tener 2 reglas separadas:

El final de el aspecto body serГЎ el extremo de cualquier el documento. a los otros componentes (p, li, address…) nunca se les ha poliedro ningГєn extremo en particular, debido a que de manera predeterminada no tendrГЎn ningГєn (o serГЎn transparentes). La casa ‘color’ establece el color de el escrito que se localiza en el elemento body, sin embargo las otros puntos que se encuentran dentro de body heredarГЎn ese color, a nunca acontecer que se especifique lo contrario. (MГЎs delante aГ±adiremos mГЎs colores).