Este corto tutorial esta pensado para aquellas seres que quieren iniciar an usar CSS desplazandolo hacia el pelo nunca han escrito una hoja sobre clases CSS.
No explica abundante sobre CSS. Se centra en como generar un archivo HTML, un archivo CSS desplazandolo hacia el pelo como realizar que las 2 funcionen juntos. La vez finalizado este tutorial, podreis leer cualquier sobre las otros tutoriales para darle mas garbo a las archivos HTML desplazandolo hacia el pelo CSS. Tambien podreis usar un editor de HTML o http://www.besthookupwebsites.net/es/quickflirt-review CSS, para acrecentar sitios Web mas avanzados.
Al final de el tutorial habras hecho un archivo HTML como este:
El efecto sera la pagina HTML, con colores asi como formato, cualquier desarrollado con CSS.
Ten en cuenta que nunca quiero aseverar que sea bonita O
Las secciones como esta son opcionales. Contienen explicaciones adicionales de el codigo HTML y no ha transpirado CSS de el modelo. El emblema sobre “peligro”, situado al comienzo, indica que se trata sobre un material mas avanzado que el resto.
Paso 1: redactar el codigo HTML
Con el fin de este tutorial, te sugiero que emplees las herramientas mas simples. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran suficiente. Una vez comprendido lo basico, seguramente se deseen usar herramientas mas complicadas, o inclusive programas comerciales igual que Style Master, Dreamweaver o GoLive. Pero para el crecimiento de una primera hoja de estilos, seria preferible no distraerse con caracteristicas avanzadas sobre otras herramientas.
No utilices procesadores de texto igual que Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que las navegadores no podran interpretar. De HTML y CSS, lo unico que necesitamos son archivos en texto plano.
El paso 1 consiste en abrir tu editor de escrito (Notepad, TextEdit, HTML Kit o el que desees), iniciar con la ventana vacia y escribir lo siguiente:
Realmente, no es preciso escribir el codigo: puedes copiarlo desplazandolo hacia el pelo pegarlo sin intermediarios en un editor.
La primera camino que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE obliga DOCument TYPE – en castellano: ARQUETIPO sobre DOCumento). En este caso, se prostitucion sobre la interpretacion 4.01 sobre HTML.
Las terminos que podemos encontrar entre se llaman etiquetas (tags) y, como puedes ver, el documento esta entre las etiquetas y . Dentro de y no ha transpirado existe lugar para distintas clases sobre informacion que nunca apareceran en la monitor. Incluso ahora, el documento solo contiene el titulo pero posteriormente Asimismo se anadira la hoja sobre clases de CSS.
El es donde se situa el texto de el documento. En un fundamentos, cualquier cosa que se Colocar alli sera mostrado, salvo el escrito que este en el interior de las subsiguientes etiquetas , las cuales muestran el contenido situado en ese sitio como un interpretacion de relato Con El Fin De nosotros mismos. El navegador la ignorara.
De las etiquetas de el ej,
-
crea una “lista desordenada”, en otras palabras, una listado en la cual las puntos nunca se encuentran numerados. La etiqueta
indica el principio sobre un “elemento lista”.
Editor mostrando el codigo HTML.
En caso de que te gustaria saber lo que significan las nombres que se encuentran dentro de , un buen lugar para comenzar seria Comenzando con HTML . Realizare algunos comentarios en la organizacion de la pagina HTML que estamos utilizando sobre ej.
- “ul” representa la relacion con un hipervinculo por cada factor. Lo cual mostrara nuestro “menu sobre navegacion de el sitio” con enlaces a diferentes paginas (ficticias) de el sitio Web. Supuestamente, la totalidad de las paginas de el sitio Web deben un menu similar.
- Los puntos “title” asi como “p” componen el unico contenido sobre esta pagina, mientras que la firma al final (“address”) sera la misma Con El Fin De todas las paginas del sitio.
Observa que nunca he cerrado las puntos «li» asi como «p». En HTML (sin embargo nunca en XHTML), se podrian suprimir las etiquetas y no ha transpirado
, que fue lo que hice aqui, precisamente de efectuar el texto mas simple de leer. Pero En Caso De Que se prefiere podrian acontecer anadidas.
Vamos an implicar que va a ser la pagina de un sitio Web que tendran varias paginas similares. Igual que seria frecuente en paginas Web, esta tiene un menu con enlaces a diferentes paginas en el sitio ficticio, un contenido unico y una firma.
Hoy por hoy, selecciona “Guardar como…” de el menu Archivo, ve Incluso un directorio/carpeta donde desees proteger el documento (el escritorio puede ser una opcion) y posee el archivo como “mipagina.html”. Nunca cierres aun el editor, lo necesitaras una diferente ocasion.
Despues, abre el archivo en un navegador sobre la siguiente forma: encuentra el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) desplazandolo hacia el pelo haz clic, o duplo clic, acerca de 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 sobre el novio).
Como puedes ver, la pagina posee un aspecto muy aburrido.
Camino 2: Anadir ciertos colores
Probablemente estes viendo texto sable en un fondo blando, pero esto dependera de como este tu navegador configurado. Para que la pagina tenga alguna cosa mas sobre encanto podriamos anadir algunos colores. (permite el navegador abierto, lo utilizaremos mas tarde).
Comenzaremos con la hoja de Modalidad interna en el archivo HTML. Mas adelante, ex pondremos el HTML asi como el CSS en archivos diversos. La separacion de esos archivos seria recomendable puesto que facilita la aplicacion sobre la misma hoja de estilo para distintas archivos HTML: solo debes escribir la hoja de Modalidad una vez. Aunque en este paso, vamos a dejarlo al completo en el similar archivo.
Necesitamos anadir un aspecto [etc.]
Las lineas que debes anadir estan marcadas en rojo. Durante la reciente camino dice que eso resulta una hoja de garbo desplazandolo hacia el pelo que esta escrita en CSS («text/css»). La segunda camino indica que hemos anadido garbo al factor «body». La tercera linea establece el color de el escrito como morado y no ha transpirado la siguiente camino lo que hace es darle al final la especie de dorado verdoso.
Las hojas de moda en CSS se encuentran compuestas sobre reglas. Cada regla posee 3 partes:
- el selector (en el prototipo es: “body”), el que le dice al navegador la zona de el documento que se vera afectada por la regla;
- la hacienda (en el ej, ‘color’ asi como ‘background-color’ son ambas prestaciones), las cuales especifican que matiz del diseno va a cambiarse;
- asi como el tasacion (‘purple’ y no ha transpirado ‘#d8da3d’), el cual da el precio Con El Fin De la patrimonio.
El prototipo muestra que es probable juntar las reglas. Hemos establecido dos caracteristicas, por lo que podriamos tener dos reglas separadas:
El final de el factor body sera el final Con El Fin De todo el documento. a los otros puntos (p, li, address…) nunca se les ha hexaedro ningun extremo en particular, debido a que de forma predeterminada nunca tendran ningun (o seran transparentes). La hacienda ‘color’ establece el color del escrito que se localiza en el factor body, No obstante los otros componentes que podemos encontrar dentro sobre body heredaran ese color, a no acontecer que se especifique lo opuesto. (Mas adelante anadiremos mas colores).
