Para empezar, HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el lenguaje de elaboración de páginas para la Web. También es muy importante decir que el concepto que muchos tienen sobre Internet es sólo el de las páginas creadas para el WWW (World Wide Web o Red mundial en español), pero esto sólo es la parte "bonita" de Internet y la que vamos a ver en esta ocasión.
En el pasado también se usaba la extensión htm, pero era por compatibilidad con sistemas operativos (FAT) que no permitían extensiones de más de 3 letras. Al nombrar los archivos recomendamos no usar espacios ni caracteres con acentos, de preferencia siempre en minúsculas.
Estructura básica de HTML
Todo programa de HTML esta formado de etiquetas o "tags" que son algo así como los comandos del lenguaje. La tercera línea es un "comentario" el cual no va a ser tomado en cuenta por el browser y que sirve para que tú no te enredes con tu código. Si bien no se mostrarán los comentarios HTML, si estarán presentes en la página si vemos su código fuente.
Por lo que aumentarán el tamaño del documento. La cuarta línea indica el final de tu código. Si te fijas bien, este tag tiene un "slash" o / después del corchete angular. Por cierto, al browser le da igual si escribes <HTML> ó <html> ó <HtMl>.
La Cabecera <head>
Dentro de la cabeza pueden ir comentarios (de hecho, estos pueden ir donde sea) y el tag <title>, este tag va a poner un título hasta arriba del browser.
Atributos y Estilos CSS
Antes de entrar al contenido de una página, hay que decir que dentro del tag <body> pueden ir parámetros para cambiar el color del fondo, de los enlaces y del texto. Lo que se conoce como atributos.
Esto se conoce como estilos CSS (hojas de estilo en cascada o en inglés Cascading Style Sheets). El CSS es un lenguaje de marcado que se encarga de la apariencia de las páginas web. Este lenguaje de hojas de estilo también te permite añadir efectos o animaciones.
Anteriormente utilizamos lo que se conoce como un estilo inline (misma línea). Lo que nos da la posibilidad de dar estilos a un elemento en específico.
Tipos de Estilos CSS
Usar estilos dentro de la página (etiqueta style) es bueno para hacer pruebas y correcciones rápidas. Usar un CSS externo es recomendable cuando la página ya este completa y disponible públicamente.
Colores en CSS
Aquí es bueno explicar algo acerca de los colores. Si te fijas bien, cada parámetro va seguido de 6 dígitos. Los dos primeros indican la cantidad de rojo que quieres, los 2 siguientes indican la cantidad de verde y los 2 últimos indican cuánto de azul. Esto es porque se está trabajando en RGB (Red, Green, Blue). Para obtener los diferentes colores, hay que mezclar diferentes cantidades en los tres componentes.
Los atributos de color van a tomar valores "hexadecimales", o sea que en vez de ir de 0 a 9 como en base 10 (diez valores posibles), van a ir de O a 15 (16 valores posibles), por lo tanto, lo dígitos hexadecimales son: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, donde A vale 10, B vale 11, C vale 12, etc. Así logras tener un total de 16777216 colores (16.7 millones de colores). Entonces, un Rojo al 100% sería FF (El número 255).
Notar que el color negro #000 usó solamente 3 números. Esto es una ayuda de CSS.
Unidades de Medida en CSS
Existen diversas unidades de medida dependiendo de lo que queramos representar. La cantidad debe estar pegada a la unidad de medida, por ejemplo margin-left: 20px.
Selectores CSS
Hay diversas formas de seleccionar un elemento para otorgarle estilos en CSS.
- El elemento está presente en el documento, por ejemplo el elemento <body> que ya hemos dado estilos.
- El elemento indica que utiliza una o más clases de estilos en su atributo class. En CSS se puede usar una clase con el prefijo de punto. y los elementos de clase .rojo serán de color rojo.
- El elemento utiliza un identificador único y está asociado a solo un elemento en el atributo id.
Un tema especial es la especificidad de los selectores CSS. No entraremos muy en detalle, pero significa la forma en que podemos determinar cuál será el estilo que se está aplicando al elemento.
Manejo de Texto en HTML
Observa bien y fijate como las dos líneas de texto salen juntas, es decir, el browser no respetó el "Enter" que diste. Los acentos y caracteres raros como la ñ los puedes poner usando algo parecido a código ASCII.
Para dar un espacio utilizaremos la etiqueta <p>, la cual quiere decir párrafo.
Elementos de Texto Especiales
- Elemento <span> nos permite agrupar una porción de texto para darle estilos por separado.
- Elemento <sup> nos permite elevar el texto (superíndice).
- Elemento <sub> nos permite bajar el texto (subíndice).
- Elemento <strong> o <b> permiten usar negritas.
- Elemento <em> permite dar énfasis a un texto.
- Elemento <code> permite escribir código fuente.
- Elemento <kbd> permite mostrar pulsaciones de teclado.
- Elemento <var> permite mostrar variables de programas.
- Elemento <cite> permite citar un texto.
- Elemento <dfn> permite marcar un término a definir.
- Elemento <samp> permite mostrar un resultado de un programa como ejemplo.
- Elemento <i> permite utilizar cursivas.
- Elemento <tt> permite usar texto con ancho fijo.
- Elemento <article> información de contenido.
- Elemento <address> información de contacto.
- Elemento <pre> texto que respetará los espacios y párrafos.
Tablas en HTML
Imagínate que organizaste un concurso y necesitas poner a los ganadores en tu página. ¿A poco no se vería mejor tenerlos bien ordenaditos en una tabla?. Las tablas al igual que nuestro documento tienen una estructura de cabeceras <thead> y cuerpo <tbody>. Una tabla se compone de filas y columnas.
Si mostramos nuestra página vemos que los datos quedan ordenaditos, pero falta que se vea bonito. Para esto usaremos la característica de CSS de clases e ids.
Estilos de Borde en Tablas
border-style y border-width nos permiten declarar el estilo del border y su ancho.
tags: #Auto
