Kategori
Koko App borrar cuenta

Tutorial de CSS Comenzando con HTML + CSS

Tutorial de CSS Comenzando con HTML + CSS

Este breve tutorial esta pensado para aquellas seres que quieren comenzar an utilizar CSS asi como De ningun modo han escrito la hoja de estilos CSS.

Nunca explica demasiado sobre CSS. Se centra en como crear un archivo HTML, un archivo CSS asi como como elaborar que los dos funcionen juntos. Una ocasion finalizado este tutorial, podreis leer alguno sobre las otros tutoriales para darle mas moda a los archivos HTML y no ha transpirado CSS. Ademas podreis utilizar un editor de HTML o CSS, para ejecutar lugares Web mas avanzados.

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

El resultado sera la pagina HTML, con colores y formato, al completo desarrollado con CSS.

Ten en cuenta que nunca deseo aseverar que sea bonita O

Las secciones como esta son opcionales. Contienen explicaciones adicionales de el codigo HTML asi como CSS del exponente. El emblema sobre “peligro”, situado al principio, indica que se intenta sobre un material mas avanzado que el resto.

Camino 1: redactar el codigo HTML

Para este tutorial, te sugiero que utilices las herramientas mas sencillas. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran suficiente. Una oportunidad comprendido lo elemental, seguramente se quieran utilizar herramientas mas complicadas, o incluso programas comerciales como Style Master, Dreamweaver o GoLive. No obstante para el desarrollo de una primera hoja sobre clases, es preferible nunca distraerse con caracteristicas avanzadas de diferentes herramientas.

No emplees procesadores de texto igual que Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que las navegadores nunca podrian entender. De HTML y no ha transpirado CSS, lo unico que necesitamos son archivos en texto aspecto.

El paso 1 consta en abrir tu editor sobre escrito (Notepad, TextEdit, HTML Kit o el que desees), comenzar con la ventana vacia y escribir lo siguiente:

En realidad, nunca es preciso escribir el codigo: puedes copiarlo y pegarlo directamente en un editor.

Durante la reciente camino que Se Muestra en el archivo HTML, le dice al navegador el tipo sobre HTML (DOCTYPE implica DOCument TYPE – en espanol: PROTOTIPO sobre DOCumento). En este caso, se alcahueteria de la traduccion 4.01 sobre HTML.

Las terminos que podemos encontrar entre se llaman etiquetas (tags) desplazandolo hacia el pelo, como puedes ver, el documento esta dentro de las etiquetas y no ha transpirado . Dentro de asi como existe lugar de diferentes clases de noticia que nunca apareceran en la monitor. Inclusive En la actualidad, el documento solo contiene el titulo pero posteriormente tambien se anadira la hoja de clases de CSS.

El seria en que lugar se situa el texto del documento. En un comienzo, todo cosa que se coloque alla sera mostrado, excepto el texto que este en el interior de las siguientes etiquetas , las cuales muestran el contenido situado en ese lugar igual que un parecer sobre referencia para nosotros mismos. El navegador la ignorara.

De las etiquetas del exponente,

    produce una “lista desordenada”, es decir, la listado en la cual las puntos nunca estan numerados. La calificativo
    indica el principio de un “elemento lista”.

Editor mostrando el codigo HTML.

En caso de que deseas saber lo que significan los nombres que se encuentran entre , un buen lugar Con El Fin De emprender es Comenzando con HTML . Realizare determinados comentarios referente a la infraestructura de la pagina HTML que estamos utilizando de exponente.

  • “ul” representa la listado con un hipervinculo por cada aspecto. Esto mostrara nuestro “menu sobre navegacion de el sitio” con enlaces an otras paginas (ficticias) de el lugar Web. Supuestamente, todas las paginas sobre nuestro sitio Web deben un menu similar.
  • Los componentes “title” desplazandolo hacia el pelo “p” componen el unico contenido de esta pagina, entretanto que la firma al final (“address”) sera la misma Con El Fin De la totalidad de las paginas de el sitio.

Observa que no he cerrado los componentes “li” asi como “p”. En HTML (sin embargo no en XHTML), se podrian silenciar las etiquetas desplazandolo hacia el pelo

, que fue lo que hice aca, precisamente de hacer el texto mas discreto de leer. Sin embargo En Caso De Que se prefiere pueden ser anadidas.

Vamos an implicar que va an acontecer una pagina de un lugar Web que tendran varias paginas similares. Como seria habitual en paginas Web, esta tiene un menu con enlaces a diferentes paginas en el lugar ficticio, un contenido unico y una firma.

En seguida, elige “Guardar como…” de el menu Archivo, ve inclusive un directorio/carpeta donde desees proteger el documento (el escritorio puede ser una decision) desplazandolo hacia el pelo guarda el archivo como “mipagina.html”. No cierres aun el editor, lo necesitaras otra ocasion.

Luego, abre el archivo en un navegador de la sub siguiente manera: halla el archivo con tu administrador sobre archivos (Windows Explorer, Finder o Firefox) asi como haz clic, o duplo clic, sobre el archivo “mipagina.html”. El archivo HTML deberia abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador y arrastra el archivo referente a el novio).

Como puedes ver, la pagina posee un matiz muy aburrido.

Paso 2: Anadir determinados colores

Posiblemente estes observando texto bruno acerca de un extremo blando, pero esto dependera de como este tu navegador configurado. Para que la pagina tenga una cosa mas de encanto podriamos anadir varios colores. (Deja el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con la hoja sobre garbo interna en el archivo HTML. Mas adelante, ex pondremos el HTML y no ha transpirado el CSS en archivos diversos. La separacion de aquellos archivos es recomendable ya que facilita la aplicacion de la misma hoja de estilo de distintas archivos HTML: solo tienes que redactar la hoja sobre estilo la oportunidad. Sin embargo en este camino, vamos a dejarlo al completo en el mismo archivo.

Necesitamos anadir un aspecto [etc.]

Las lineas que debes anadir estan marcadas en colorado. La primera camino dice que eso resulta una hoja de Modalidad y que esta escrita en CSS (“text/css”). La segunda linea indica que hemos anadido garbo al elemento “body”. La tercera camino establece el color del escrito como morado desplazandolo hacia el pelo la sub siguiente camino lo que permite es darle al extremo una clase de amarillento verdoso.

Las hojas sobre garbo en CSS estan compuestas de reglas. Cada regla tiene 3 partes:

  1. el selector (en el ejemplo seria: koko app “body”), el que le dice al navegador la parte del documento que se vera afectada por la indicacion;
  2. la pertenencia (en el modelo, ‘color’ desplazandolo hacia el pelo ‘background-color’ son ambas caracteristicas), las cuales especifican que matiz del bosquejo va a cambiarse;
  3. asi como el precio (‘purple’ asi como ‘#d8da3d’), el que da el precio de la pertenencia.

El ejemplo muestra que es factible conectar las reglas. Hemos establecido 2 propiedades, por lo que podemos tener dos reglas separadas:

El fondo de el factor body sera el extremo de cualquier el documento. a las otros puntos (p, li, address…) nunca se les ha hexaedro el menor extremo en particular, debido a que sobre forma predeterminada no tendran nadie (o seran transparentes). La casa ‘color’ establece el color del escrito que se encuentra en el aspecto body, pero los otros elementos que podemos encontrar dentro sobre body heredaran ese color, a no ser que se especifique lo contrario. (Mas adelante anadiremos mas colores).

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.