0

Tutorial sobre CSS Comenzando con HTML + CSS

Tutorial sobre CSS Comenzando con HTML + CSS

Este corto tutorial estГЎ diseГ±ado de esas personas que desean iniciar an utilizar CSS desplazГЎndolo hacia el pelo De ningГєn modo han escrito la hoja de estilos CSS.

Nunca explica bastante en CSS. Se centra en cГіmo producir un archivo HTML, un archivo CSS asГ­ como cГіmo realizar que los 2 funcionen juntos. Una ocasiГіn finalizado este tutorial, podrГ©is leer cualquiera sobre las otros tutoriales para darle mГЎs moda a las archivos HTML y no ha transpirado CSS. Asimismo podrГ©is usar un editor sobre HTML o CSS, de progresar lugares Web mГЎs avanzados.

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

El efecto serГЎ la pГЎgina HTML, con colores y formato, cualquier 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 y no ha transpirado CSS del ejemplo. El representación de “peligro”, situado al fundamentos, indica que se prostitución de un material más avanzado que el resto.

Paso 1: redactar el cГіdigo HTML

Con el fin de este tutorial, te sugiero que emplees las herramientas mГЎs simples. Como podrГ­a ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn suficiente. Una ocasiГіn comprendido lo fundamental, posiblemente se quieran utilizar herramientas mГЎs complicadas, o tambien programas comerciales igual que Style Master, Dreamweaver o GoLive. Aunque de el incremento de una primera hoja de clases, serГ­a conveniente no distraerse con caracterГ­sticas avanzadas sobre diferentes herramientas.

No uses procesadores sobre texto como Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que los navegadores no podrГЎn interpretar. De HTML asГ­ como CSS, lo Гєnico que necesitamos son archivos en texto plano.

El camino 1 se fundamenta en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), iniciar con la ventana vacГ­a desplazГЎndolo hacia el pelo escribir lo siguiente:

En realidad, nunca serГ­a necesario escribir el cГіdigo: puedes copiarlo y no ha transpirado pegarlo sin intermediarios en un editor.

Durante la reciente camino que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE implica DOCument TYPE – en castellano: TIPO sobre DOCumento). En este caso, se alcahueterГ­a de la interpretaciГіn 4.01 de HTML.

Las palabras que se encuentran entre se llaman etiquetas (tags) desplazГЎndolo hacia el pelo, como puedes ver, el documento estГЎ dentro de las etiquetas desplazГЎndolo hacia el pelo . Dentro de y no ha transpirado existe espacio de distintas tipos de documentaciГіn que no aparecerГЎn en la monitor. Inclusive En la actualidad, el documento sГіlo contiene el tГ­tulo pero posteriormente igualmente se aГ±adirГЎ la hoja sobre estilos de CSS.

El es dГіnde se sitГєa el texto del documento. En un comienzo, todo cosa que se coloque ahГ­ serГЎ mostrado, excepto el texto que estГ© dentro de estas subsiguientes etiquetas , las cuales muestran el contenido situado en ese punto igual que un interpretaciГіn de referencia Con El Fin De nosotros mismos. El navegador la ignorarГЎ.

De las etiquetas del ej,

    genera la “lista desordenada”, en otras palabras, una lista en la cual los elementos nunca están numerados. La etiqueta
    indica el principio sobre un “elemento lista”.

Editor mostrando el cГіdigo HTML.

Si te gustarГ­a conocer lo que significan las nombres que estГЎn dentro de , un buen lugar Con El Fin De comenzar serГ­a Comenzando con HTML . RealizarГ© determinados comentarios referente a la infraestructura de la pГЎgina HTML que estamos usando sobre modelo.

  • “ul” representa una lista con un hipervГ­nculo por cada aspecto. Lo cual mostrarГЎ el “menГє de navegaciГіn del sitio” con enlaces an otras pГЎginas (ficticias) de el sitio Web. Supuestamente, todas las pГЎginas de nuestro lugar Web poseen un menГє similar.
  • Los elementos “title” y “p” componen el Гєnico contenido de esta pГЎgina, entretanto que la firma al final (“address”) serГЎ la misma para todas las pГЎginas de el lugar.

Observa que no he cerrado las componentes “li” desplazГЎndolo hacia el pelo “p”. En HTML (sin embargo nunca en XHTML), se podrГ­an silenciar las etiquetas asГ­ como

, que fue lo que hice acГЎ, precisamente de efectuar el escrito mГЎs discreto de leer. Pero En Caso De Que se prefiere podrГ­an ser aГ±adidas.

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

Ahora, elige “Guardar como…” de el menú Archivo, ve Incluso un directorio/carpeta a donde quieras proteger el documento (el escritorio puede ser la opción) y no ha transpirado posee el archivo como “mipagina.html”. Nunca cierres aún el editor, lo necesitarás otra ocasión.

Luego, abre el archivo en un navegador sobre la siguiente manera: encuentra el archivo con tu gerente sobre archivos (Windows Explorer, Finder o Firefox) y no ha transpirado haz clic, o copia clic, en el archivo “mipagina.html”. El archivo HTML debería abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador y arrastra el archivo en el novio).

Igual que puedes ver, la pГЎgina goza de un matiz harto aburrido.

Camino 2: AГ±adir ciertos colores

Probablemente estГ©s viendo escrito negro sobre un final blando, sin embargo lo cual dependerГЎ sobre cГіmo estГ© tu navegador configurado. Con el fin de que la pГЎgina tenga alguna cosa mГЎs sobre encanto podrГ­amos aГ±adir varios colores. (permite el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con la hoja de garbo 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 sobre dichos archivos serГ­a conveniente porque favorece la empleo sobre la uniform dating misma hoja de Modalidad de diversos archivos HTML: sГіlo debes redactar la hoja sobre estilo la ocasiГіn. No obstante en este transito, vamos a dejarlo todo en el idГ©ntico archivo.

Necesitamos aГ±adir un aspecto etc.

Las lГ­neas que debes aГ±adir se encuentran marcadas en rojo. Durante la reciente lГ­nea dice que eso es una hoja sobre estilo y no ha transpirado que estГЎ escrita en CSS (“text/css”). La segunda camino indica que hemos aГ±adido Modalidad al aspecto “body”. La tercera camino establece el color del texto igual que morado y no ha transpirado la siguiente camino lo que realiza es darle al final una especie de dorado verdoso.

Las hojas de estilo en CSS estГЎn compuestas sobre reglas. Cada indicaciГіn posee tres partes:

  1. el selector (en el modelo es: “body”), el que le dice al navegador la parte del documento que se verá afectada por la regla;
  2. la pertenencia (en el ej, ‘color’ asГ­ como ‘background-color’ son ambas caracterГ­sticas), las cuales especifican quГ© apariencia del bosquejo va a cambiarse;
  3. y no ha transpirado el valor (‘purple’ y no ha transpirado ‘#d8da3d’), el cual da el precio para la casa.

El prototipo muestra que es concebible combinar las reglas. Hemos establecido 2 prestaciones, por lo que podrГ­amos tener 2 reglas separadas:

El final de el elemento body serГЎ el extremo Con El Fin De al completo el documento. a las otros elementos (p, li, address…) no se les ha poliedro el menor extremo en particular, debido a que de maneras predeterminada no tendrГЎn ningГєn (o serГЎn transparentes). La patrimonio ‘color’ establece el color de el escrito que se haya en el elemento body, pero los otros puntos que se encuentran en el interior sobre body heredarГЎn ese color, a nunca acontecer que se especifique lo contrario. (MГЎs el frente del manillar aГ±adiremos mГЎs colores).

Leave a Reply

Your email address will not be published. Required fields are marked *