FRANKKOKO Nivel 4 - Cabo
Mensajes : 275 Puntos : 658 Reputación : 60 Fecha de inscripción : 03/04/2011
| Tema: Tutorial básico de HTML / CSS. Vie Jun 03, 2011 6:33 pm | |
| Antes de meternos en materia, vamos a repasar brevemente los conceptos más básicos y a establecer los principios por los que me regiré a la hora de redactar el resto de tutoriales. | Lo primero es aclarar que estos tutoriales no van solo de HTML. También trabajaremos con hojas de estilo, las CSS, que serán las encargadas de definir, como su nombre indica, los estilos de las etiquetas de HTML. Por poner un ejemplo, en HTML utilizaremos la etiqueta o tag < p > para escribir dentro un texto que va a ocupar un párrafo en nuestro navegador, y en la hoja de estilo definiremos por ejemplo el color y tamaño de la letra del texto de ese párrafo. | Como a través de los tutoriales definiré elementos tanto de HTML copmo de CSS, para que no haya dudas, todas las definiciones de elementos de HTML irán sobre fondo azul oscuro, y las de CSS sobre fondo negro. | Muchas de las definiciones son extraidas tal cual o simplificadas de la Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), y de la Recomendación del W3C "HTML 4.01 Specification" que están en la Sección HTML/CSS de esta web. | NOTA: Todas las etiquetas o tags que se representan entre los signos de <> han de escribirse sin ningun espacio en su interior, aunque en la representacion aparezcan para que se lean con mayor claridad. | Todo documento HTML tiene una estructura que lo identifica claramente. Son unas cuantas etiquetas de apertura y cierre que lo identifican y lo dividen en partes con funcionalidades diferentes. | | |
< HTML > < / HTML >
| Son las etiquetas primera y última de nuestro código html. Antes de < HTML > no puede ir nada que deseemos que el navegador interprete como codigo HTML, y despues de < / HTML > tampoco. | < HEAD > < / HEAD > | Define el principio y fin de la seccion de cabecera, donde aparecen informaciones sobre el documento, entre ellas el título, autor... | < BODY > < / BODY > | Define el principio y el fin del cuerpo del documento. Todo el código de nuestra web irá entre estas dos etiquetas. | |
| Asi, un brevisimo ejemplo de tu primera web podria ser el fichero ejemplo1.html: | | Donde la linea < p >Hola< /p > especifica que aparezca en pantalla un párrafo con la palabra hola y la linea < title > especifica documentalmente el titulo de nuestra pagina (en la parte superior izquierda de la ventana del navegador aparecerá este título). | NOTA: Tanto el documento HTML como la hoja de estilo, hay que escribirlos sobre un fichero de texto sin formato. Un editor que podria valer es el notepad, por ejemplo. El nombre del documento HTML debe tener extension .htm o .html y el de la hoja de estilo, .css. | Vamos a aprender algunas formas de escribir contenidos en nuestra página, pero antes de meternos de lleno en elementos de HTML voy a definir una distinción importante entre ellos: | |
HTML contiene dos tipos de elementos, los elementos "en bloque" o "de bloque" y los elementos "en linea" o "a nivel de texto". | Elementos "en linea": | Solo pueden contener datos y otros elementos en linea. Se representan de izquierda a derecha, es decir, un elemento en linea se posiciona a la derecha del ultimo elemento en linea mostrado, y asi sucesivamente. | Elementos "en bloque": | Pueden contener otros elementos en bloque y elementos en linea. Se representan de arriba a abajo, es decir, un elemento en bloque se posiciona debajo del ultimo elemento posicionado en la página. Esto es asi porque provocan un salto de linea al principio y al final de su representacion. | NOTA: Tan solo por las dos definiciones, se entiende que el concepto de elemento de bloque implica mayor tamaño que el de elemento en linea. De hecho, utilizaremos los elementos de bloque para que sean contenedores, tanto de otros elementos de bloque como de elementos en linea. | |
| Puede que ahora sea un poco lioso, pero a medida que avancemos todo se verá más facil. Como ejemplo rápido, diremos que el elemento HTML < p > es un elemento en linea que sirve para mostrar un parrafo de texto y que, de contener otros elementos, serán elemento en linea, mientras que < div > es un elemento de bloque que sirve para especificar un contenedor a modo de caja donde introducir otros elementos. | Ahora si que definimos algunos elementos para escribir textos en HTML | |
< P > < / P >: | Es el elemento que sirve para escribir un párrafo de texto. Es un elemento en linea. | < H1 >< / H1 >,< H2 >< / H2 >,< H3 >< / H3 >,< H4 >< / H4 >,< H5 >< / H5 >,< H6 >< / H6 >: | Son los llamados encabezados. Son elementos en linea. Suelen utilizarse para describir las secciones que introducen. Por ejemplo, podriamos escribir el titular de una noticia con un encabezado, y el texto de la noticia con párrafos. | Hay 6 niveles de encabezados, siendo el H1 el más importante y el H6 el menos importante. Visualmente, los navegadores le asignan fuentes mayores a los encabezados mas importantes, y menores a los menos importantes. |
< BR >: | Fuerza un salto de linea. Es importante resaltar que no tiene etiqueta de cierre. | < PRE >< / PRE >: | Este elemento nos dice que todo el texto contenido en él está preformateado, es decir, aparecerá en el navegador tal cual se escribe. | NOTA: En elemento distintos de < PRE >, la acumulacion de espacios en blanco se representan como uno sólo, y un espacio en blanco justo despues de una etiqueta de apertura, o justo antes de una de cierrre, pueden no ser mostrados. | |
| El codigo resultante del documento HTML utilizando estos elementos es: | | El aspecto de la web será este: | | Pulsa en este link ' EJEMPLO ' para verlo. | NOTA: El aspecto visual puede cambiar dependiendo del tamaño de la ventana. Observe el efecto de los distintos tamaños de los encabezados, el resultado de aplicar la etiqueta < BR > entre párrafos (un espacio interlineal mucho más grande) y la desaparición de los múltiples espacios entre palabras excepto en el texto formateado con el tag < PRE >. | ^ Inicio de página Ya sabemos como escribir un texto y algunos encabezados en nuestra web, pero aun no hemos utilizado para nada las hojas de estilos. | Se pueden definir estilos de dos maneras principalmente. Se puede hacer directamente en el mismo documento html o tambien se puede hacer en un documento aparte. Para definir los estilos en el mismo documento, hay que declarar las etiquetas < STYLE > y < / STYLE > dentro de la cabecera del documento (entre el < HEAD > y el < / HEAD >). De momento utilizaremos esta forma. En el siguiente tutorial se explica como hacerlo en un archivo distinto. | Para empezar a usar los estilos, voy a definir una unica propiedad de CSS para que nos sirva de ejemplo, aunque en un tutorial de CSS mas completo volveré a incidir sobre ella. | |
COLOR
| Propiedad que determina el color de la fuente de texto. Puede ser una palabra clave o un valor numerico RGB (Red, Green, Blue). Las palabras clave se corresponden con los valores numericos que se representan, pero se puede seleccionar el código numerico que se desee (Lo normal es utilizar cualquier software de edicion de graficos para elegir visualmente el color que nos guste y luego ver el codigo numerico que le corresponde). |
| La lista de las palabras claves con sus valores son: |
| maroon #800000, red #ff0000, orange #ffA500, yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white #ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua #00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080. | |
| La sintaxis de las CSS consiste en un Selector seguido por un bloque de declaraciones. | Un bloque de declaraciones comienza con una llave izquierda ({) y termina con la llave derecha (}) correspondiente. En medio de ellas debe haber una lista de cero o más declaraciones separadas por punto y coma (. | Podemos usar un atributo, como por ejemplo COLOR, directamente sobre un nombre de elemento HTML. Esto provocará que todos los elementos de este tipo que utilicemos en nuestro documento, se veran afectados por loa atributos que hayamos designado en la hoja de estilos para esa etiqueta. | Por ejemplo, si hacemos un | P {color:blue;} | Estaremos asignando el color azul a cualquier texto que pongamos en nuestra pagina bajo la etiqueta < p >. | Tambien podriamos hacer | .letraazul {color:blue;} | Esto lo que hace es definir la clase letraazul. Esta clase lo que hace es colorear la letra en color azul. Pero ¿que letra colorea? Pues la que queramos. Tan solo tenemos que llamar a esta clase en cualquier elemento del documento HTML y se coloreará su texto de azul. | Para llamar a esta clase haremos, en el documento HTML: | < H5 class="letraazul">texto escrito< / H5 > | Observe que contrariamente al primer ejemplo, ahora puedo escoger colorear la letra de otro encabezado H5 de distinto color, tan solo definiendo otra clase y llamandola desde donde quiera. | El codigo resultante del documento HTML utilizando el estilo del color de la fuente es: | | Pulsa en este link ' EJEMPLO ' para verlo. | NOTA: El aspecto visual puede cambiar dependiendo del tamaño de la ventana. Observe como en las etiquetas H5 no hay que hacer referencia a ninguna clase porque se ha asignado el color azul para todos los elementos H5 de la página. No sucede lo mismo en los otros casos. | Con esto termino este tutorial basico. Cualquier duda, podeis preguntar por email en privado o exponerla en el libro de visitas, para que todos aprendamos juntos. |
| |
|