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. | ||||||||||||||||||||||||||
| ||||||||||||||||||||||||||
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: | ||||||||||||||||||||||||||
| ||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||||
| ||||||||||||||||||||||||||
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. | ||||||||||||||
| ||||||||||||||
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. |