Tutorial sobre CSS Comenzando con HTML + CSS

Tutorial sobre CSS Comenzando con HTML + CSS

Este corto tutorial estГЎ diseГ±ado para aquellas seres que quieren empezar an emplear CSS desplazГЎndolo hacia el pelo De ningГєn modo han escrito la hoja de estilos CSS.

No explica mucho en CSS. Se centra en cГіmo fabricar un archivo HTML, un archivo CSS asГ­ como cГіmo hacer que las dos funcionen juntos. Una oportunidad finalizado este tutorial, podrГ©is leer alguno sobre los otros tutoriales para darle mГЎs estilo a los archivos HTML asГ­ como CSS. Igualmente podrГ©is utilizar un editor sobre HTML o CSS, Con El Fin De llevar a cabo sitios Web mГЎs avanzados.

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

El rendimiento serГЎ la pГЎgina HTML, con colores y formato, cualquier desarrollado con CSS.

Ten en cuenta que no quiero decir que sea bonita ☺

Las secciones como ésta son opcionales. Contienen explicaciones adicionales del código HTML y no ha transpirado CSS de el ejemplo. El representación sobre “peligro”, situado al principio, indica que se alcahuetería de un material más avanzado que el resto.

Paso 1: Escribir el cГіdigo HTML

De este tutorial, te sugiero que utilices las herramientas mГЎs sencillas. Como podrГ­a ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn bastante. Una ocasiГіn comprendido lo elemental, probablemente se deseen utilizar herramientas mГЎs complicadas, o tambien programas comerciales como Style Master, Dreamweaver o GoLive. No obstante de el crecimiento sobre la primera hoja de clases, serГ­a preferiblemente nunca distraerse con caracterГ­sticas avanzadas sobre otras herramientas.

No utilices procesadores de texto igual que Microsoft Word u OpenOffice. Con ellos, generalmente se generan archivos que las navegadores nunca pueden entender. De HTML y no ha transpirado CSS, lo Гєnico que necesitamos son archivos en escrito plano.

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

Realmente, nunca es obligatorio redactar el cГіdigo: puedes copiarlo asГ­ como 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 significa DOCument TYPE – en espaГ±ol: ARQUETIPO de DOCumento). En este caso, se alcahueterГ­a sobre la lectura 4.01 de HTML.

Las palabras que podemos encontrar dentro de se llaman etiquetas (tags) y, igual que puedes ver, el documento estГЎ entre las etiquetas asГ­ como . Entre asГ­ como hay espacio Con El Fin De diferentes tipos de referencia que no aparecerГЎn en la pantalla. Inclusive En la actualidad, el documento sГіlo contiene el tГ­tulo No obstante posteriormente Asimismo se aГ±adirГЎ la hoja de clases de CSS.

El serГ­a en quГ© lugar se sitГєa el texto de el documento. En un principio, cualquier cosa que se Colocar allГЎ serГЎ mostrado, excepto el texto que estГ© dentro de estas siguientes etiquetas , las cuales muestran el contenido situado en ese lugar igual que un interpretaciГіn sobre relato para nosotros mismos. El navegador la ignorarГЎ.

De las etiquetas de el ejemplo,

    crea la “lista desordenada”, es decir, la relación en la que los elementos no están numerados. La epíteto
    indica el principio sobre un “elemento lista”.

Editor mostrando el cГіdigo HTML.

En caso de que quieres conocer lo que significan las nombres que estГЎn dentro de , un buen lugar de comendar es Comenzando con HTML . RealizarГ© determinados comentarios sobre la configuraciГіn de la pГЎgina HTML que estamos usando de ej.

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

Observa que no he cerrado las puntos “li” desplazГЎndolo hacia el pelo “p”. En HTML (aunque nunca en XHTML), se podrГ­an omitir las etiquetas desplazГЎndolo hacia el pelo

, que fue lo que hice aquГ­, precisamente para elaborar el escrito mГЎs discreto sobre leer. Aunque En Caso De Que se prefiere podrГ­an acontecer aГ±adidas.

Vamos a suponer que va an acontecer la pГЎgina de un lugar Web que tendrГЎn varias pГЎginas similares. Igual que serГ­a usual en pГЎginas Web, Г©sta tiene un menГє con enlaces an otras pГЎginas en el lugar ficticio, un contenido Гєnico y una firma.

Hoy por hoy, selecciona “Guardar como…” de el menú Archivo, percibe Incluso un directorio/carpeta en donde quieras guardar el documento (el escritorio es una decisión) desplazándolo hacia el pelo posee el archivo como “mipagina.html”. No cierres aún el editor, lo necesitarás otra vez.

Luego, abre el archivo en un navegador sobre la sub siguiente forma: localiza el archivo con tu administrador sobre archivos (Windows Explorer, Finder o Firefox) y 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 así como arrastra el archivo sobre el novio).

Igual que puedes ver, la pГЎgina tiene un semblante muy aburrido.

Paso 2: AГ±adir algunos colores

Posiblemente estГ©s viendo texto oscuro en un final blando, aunque lo cual depende sobre cГіmo estГ© tu navegador configurado. Para que la pГЎgina tenga una cosa mГЎs de encanto podemos aГ±adir ciertos colores. (Deja el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con una hoja sobre estilo interna en el archivo HTML. MГЎs delante, pondremos el HTML asГ­ como el CSS en archivos variados. La separaciГіn de todos estos archivos es conveniente porque favorece la utilizaciГіn sobre la misma hoja de estilo para distintas archivos HTML: sГіlo tienes que redactar la hoja de garbo la vez. Pero en este camino, vamos a dejarlo cualquier en el idГ©ntico archivo.

Necesitamos aГ±adir un elemento etc.

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

Las hojas sobre Modalidad en CSS se encuentran compuestas de reglas. Cada indicaciГіn goza de tres partes:

  1. el selector (en el ejemplo es: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la indicación;
  2. la pertenencia (en el exponente, ‘color’ y no ha transpirado ‘background-color’ son ambas prestaciones), las cuales especifican quГ© semblante del croquis va a cambiarse;
  3. y el valor (‘purple’ asГ­ como ‘#d8da3d’), el que da el tasaciГіn Con El Fin De la patrimonio.

El prototipo muestra que serГ­a posible juntar las reglas. Hemos establecido dos prestaciones, debido a que podrГ­amos tener 2 reglas separadas:

El extremo del elemento body serГЎ el extremo para cualquier el documento. a los otros puntos (p, li, address…) nunca se les ha hexaedro ningГєn extremo en concreto, debido a que de manera predeterminada no tendrГЎn nadie (o serГЎn transparentes). La patrimonio ‘color’ establece el color del texto que se localiza en el elemento body, pero los otros puntos que se encuentran en el interior de body heredarГЎn ese color, a no acontecer que se especifique lo opuesto. (MГЎs delante aГ±adiremos mГЎs colores).


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.