Tutorial sobre CSS Comenzando con HTML + CSS

Tutorial sobre CSS Comenzando con HTML + CSS

Este breve tutorial esta disenado para esas seres que desean empezar an utilizar CSS asi como Jamas han texto la hoja sobre clases CSS.

No explica bastante sobre CSS. Se centra en como generar un archivo HTML, un archivo CSS desplazandolo hacia el pelo como elaborar que las dos funcionen juntos. La oportunidad finalizado este tutorial, podreis leer cualquier de los otros tutoriales Con El Fin De darle mas Modalidad a las archivos HTML y CSS. Tambien podreis utilizar un editor de HTML o CSS, para desarrollar lugares Web mas avanzados.

Al final de el tutorial habras hecho un archivo HTML igual que este:

El efecto sera la pagina HTML, con colores asi como formato, todo desarrollado con CSS.

Ten en cuenta que no quiero afirmar que sea bonita O

Las secciones como esta son opcionales. Contienen explicaciones extras de el codigo HTML y no ha transpirado CSS del ej. El representacion sobre peligro, situado al principio, indica que se intenta sobre un material mas avanzado que el resto.

Transito 1: Escribir el codigo HTML

kickin it fanfiction jack and kim dating

Con el fin de este tutorial, te sugiero que utilices las herramientas mas simples. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran bastante. La oportunidad comprendido lo elemental, posiblemente se deseen utilizar herramientas mas complicadas, o inclusive programas comerciales como Style Master, Dreamweaver o GoLive. No obstante para el progreso sobre una primera hoja de estilos, seria preferiblemente no distraerse con caracteristicas avanzadas sobre diferentes herramientas.

Nunca emplees procesadores sobre texto como Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que los navegadores no podrian interpretar. Para HTML y CSS, lo unico que necesitamos son archivos en escrito plano.

El camino 1 se fundamenta en abrir tu editor sobre texto (Notepad, TextEdit, HTML Kit o el que desees), empezar con la ventana vacia y redactar lo siguiente:

En realidad, nunca es indispensable escribir el codigo: puedes copiarlo y pegarlo sin intermediarios en un editor.

Durante la reciente camino que aparece en el archivo HTML, le dice al navegador el prototipo sobre HTML (DOCTYPE obliga DOCument TYPE – en espanol: CLASE sobre DOCumento). En este caso, se trata sobre la version 4.01 de HTML.

Las terminos que se encuentran dentro de se llaman etiquetas (tags) y no ha transpirado, igual que puedes ver, el documento esta dentro de las etiquetas y no ha transpirado . Dentro de asi como Existen lugar de diferentes tipos sobre referencia que nunca apareceran en la monitor. Hasta Hoy, el documento solo contiene el titulo aunque posteriormente Ademas se anadira la hoja de clases sobre CSS.

El seria donde se situa el escrito del documento. En un comienzo, cualquier cosa que se Colocar ahi sera mostrado, salvo el texto que este en el interior de estas subsiguientes etiquetas , las cuales muestran el contenido situado en ese sitio igual que un opinion sobre referencia de nosotros mismos. El navegador la ignorara.

De estas etiquetas de el modelo,

    genera una lista desordenada, en otras palabras, una lista en la que las puntos nunca se encuentran numerados. La calificativo
    indica el principio de un elemento lista.

Editor mostrando el codigo HTML.

En caso de que quieres saber lo que significan las nombres que se encuentran dentro de , un buen lugar de empezar seria Comenzando con HTML . Realizare varios comentarios en la organizacion sobre la pagina HTML que estamos utilizando sobre ejemplo.

  • ul representa una listado con un hipervinculo por cada aspecto. Esto mostrara el menu de navegacion de el sitio con enlaces an otras paginas (ficticias) del sitio Web. Supuestamente, todas las paginas de el sitio Web poseen un menu similar.
  • Las puntos title y p componen el unico contenido de esta pagina, entretanto que la firma al final (address) sera la misma para la totalidad de las paginas de el lugar.

Observa que no he cerrado las componentes “li” desplazandolo hacia el pelo “p”. En HTML (No obstante no en XHTML), se podran suprimir las etiquetas asi como

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

Vamos an implicar que va a ser una pagina de un lugar Web que tendran varias paginas similares. Igual que seria habitual en paginas Web, esta goza de un menu con enlaces an otras paginas en el lugar ficticio, un contenido unico y una firma.

Hoy, selecciona Guardar como de el menu Archivo, percibe Incluso un directorio/carpeta donde desees proteger el documento (el escritorio es una opcion) desplazandolo hacia el pelo tiene el archivo igual que mipagina.html. No cierres todavia el editor, lo necesitaras una tagged en pc diferente ocasion.

Luego, abre el archivo en un navegador sobre la siguiente manera: encuentra el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) y haz clic, o copia clic, en el archivo mipagina.html. El archivo HTML debe abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y no ha transpirado arrastra el archivo sobre el).

Igual que puedes ver, la pagina posee un porte harto aburrido.

Paso 2: Anadir algunos colores

Seguramente estes observando texto oscuro en un extremo blando, aunque lo cual depende de como este tu navegador configurado. Con el fin de que la pagina tenga una cosa mas de encanto podriamos anadir ciertos colores. (permite el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con una hoja de garbo interna en el archivo HTML. Mas adelante, pondremos el HTML y el CSS en archivos diferentes. La separacion sobre dichos archivos seria apropiado puesto que favorece la empleo sobre la misma hoja de moda Con El Fin De diferentes archivos HTML: solo debes escribir la hoja de Modalidad la oportunidad. Sin embargo en este camino, vamos a dejarlo cualquier en el mismo archivo.

Necesitamos anadir un aspecto [etc.]

Las lineas que debes anadir se encuentran marcadas en rojo. Durante la reciente linea dice que eso es una hoja sobre estilo y que esta escrita en CSS (“text/css”). La segunda camino indica que hemos anadido estilo al aspecto “body”. La tercera linea establece el color del escrito como morado desplazandolo hacia el pelo la sub siguiente camino lo que permite es darle al fondo la clase sobre amarillento verdoso.

Las hojas sobre Modalidad en CSS estan compuestas de reglas. Cada indicacion posee 3 zonas:

  1. el selector (en el prototipo seria: body), el cual le dice al navegador la zona de el documento que se vera afectada por la indicacion;
  2. la propiedad (en el ejemplo, ‘color’ y ‘background-color’ son ambas prestaciones), las cuales especifican que matiz del diseno va a cambiarse;
  3. y el tasacion (‘purple’ y ‘#d8da3d’), el que da el precio de la hacienda.

El prototipo muestra que seria posible juntar las reglas. Hemos establecido dos caracteristicas, debido a que podemos tener dos reglas separadas:

El final de el aspecto body sera el final Con El Fin De al completo el documento. a las otros componentes (p, li, address) no se les ha poliedro el menor final en concreto, debido a que sobre manera predeterminada no tendran ninguno (o seran transparentes). La patrimonio ‘color’ establece el color de el escrito que se localiza en el elemento body, sin embargo los otros componentes que se encuentran dentro sobre body heredaran ese color, a nunca acontecer que se especifique lo contrario. (Mas delante anadiremos mas colores).

Leave a Reply

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