VOL. 10 | OCTOBER 2020
CÓDIGOS Y ETIQUETAS JOHNNY CEDEÑO MORA
CONTENIDO pg. 3
pg.7
HTML
FONDOS Y COLORES DE TEXTO
pg. 4
pg.8
LAS ETIQUETAS
TÍTULO <HN>
pg.5
pg.9
LA CABECERA
TAMAÑO DE LA LETRA Y COLOR <FONT>
pg.6
pg.10
CUERPO DEL DOCUMENTO
LA MARCA <IMG>
HTML HTML es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es su poca sofisticación, puesto que no es otra cosa que el viejo formato ASCII (y con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros caracteres especiales). Por tanto, para que un documento HTML sea algo más que simples caracteres básicos, debe contener, además de dicho texto, una serie de instrucciones para el browser que lo va a reproducir: estas intrucciones se denominan etiquetas o tags y se distinguen del texto porque van entre guiones (< >). Estas etiquetas contienen todo el resto de la información de la página web. Si un documento HTML no es más que texto ASCII (parte sin guiones y parte entre guiones: las etiquetas), cualquier documento web, hasta el más sofisticado, puede escribirse directamente desde un sencillo programa básico de texto, como el Cuaderno de Notas (Notepad) de Windows, por ejemplo.
Sin embargo, escribir un documento complejo de esta manera exige un conocimiento exhaustivo de las numerosísimas etiquetas existentes y sus normas de utilización; para evitar esta dificultad, hay una serie de programas denominados comúnmente editores de HTML (desde el Composer al Dreamweaver, pasando por tantos otros), que permiten al usuario componer una página (es decir, generar etiquetas HTML) desde un interfaz más o menos parecido al de un procesador de textos. A la hora de crear una página web, y aunque utilicemos un editor de HTML, es casi imprescindible entender la disposición del etiquetado de un documento y manejar siquiera las etiquetas más elementales
LAS ETIQUETAS El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación. Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta.
REISE | PAGE 4
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.
LA CABECERA
<HTML></HTML> Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión está construido con dicho lenguaje. La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la acción y </...> indica el fin de dicha acción. Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>.
<HEAD></HEAD> La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
<TITLE></TITLE> Una etiqueta a la que a veces no se le presta mucha atención es la que define el título de una página web individual <title></title> El navegador lee el title (título) de cada página y lo muestra en la parte superior, en el borde de la pantalla, junto con el icono del programa (Firefox, Explorer, etc. Esto es importante de cara al usuario.
CUERPO DEL DOCUMENTO
<BODY></BODY> El cuerpo de un documento HTML es la parte central de una página web, este se define por medio de la etiqueta BODY. En este artículo nos centraremos a hablar de esta etiqueta, sus atributos y propiedades. De las dos partes en que se divide un documento HTML (HEAD y BODY), BODY es la segunda. BODY es la etiqueta usada para indicar el cuerpo de un documento HTML, es la parte donde se describe el contenido de la página (su estructura, su forma, sus colores, texto, y todo lo visual), su inicio lo indica la etiqueta <body> y su final con la etiqueta </body>, se escribe así: <html> <head> </head> <body> Todo lo que esté aquí pertenece al BODY Aquí va el diseño de la página y su contenido </body> </html>
La variedad de etiquetas HTML que el BODY puede contener son mucho mas que las que existen para el HEAD, cosa bastante obvia pues la parte de mayor peso es el BODY. Dentro de la etiqueta <body> se pueden agregar atributos para indicar un color y/o imagen de fondo de la página, color del texto, color de los links, pero en HTML5 se ha desaprobado el uso de estos atributos y esto se tiene que indicar con CSS, este hecho no significa que no funcionen, de hecho se pueden usar y funciona pero siempre es recomendable ajustarse a los estándares, por cuestiones de compatibilidad y cosas por el estilo. Aquí les dejo la lista de los atributos que pueden ir dentro de la etiqueta <body> y que anteriormente eran muy usados, pero mi recomendación es aprender CSS y seguir los nuevos estándares de la W3C.
FONDOS Y COLORES DE TEXTO
BGCOLOR A través de este parámetro podremos definir el color de fondo que queramos que tenga nuestra página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede con un fondo rojo deberemos escribir: <body bgcolor=”#FF0000 ″ ></body>
TEXT Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es decir, tendremos que decirle al navegador de qué color queremos que sea nuestro texto. Esto lo definiremos con el parámetro “text”. Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente: <body text= “#000000”></body>
BACKGROUND Puede que no quieres que tu página tenga un color sólo de fondo, sino que quieras que tu página tenga una imagen. En ese caso deberás indicarlo con la etiqueta “background”. La etiqueta quedaría de la siguiente manera: <body background=”URL”> </body>
LINK, ALINK Y VLINK En body también podemos definir el color de los vínculos de nuestra páginas, definir el color con el que se mostraran los links. Aquí debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con la etiqueta “link”), el color del link activo (con la etiqueta “alink”) y el color del link ya visitado (con la etiqueta “vlink”).
TÍTULO <HN> Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados disponemos de las etiquetas <h>. Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño. A continuación mostramos un código ejemplo de los seis diferentes encabezados: <!DOCTYPE html> <html> <head> <title>Ejemplo del uso de encabezados - aprenderaprogramar.com</title> </head> <body> <h1>Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeño</h5> <h6>Texto muy pequeño</h6> </body> </html>
TAMAÑO DE LA LETRA Y COLOR <FONT> Esta etiqueta permite controlar tres atributos del texto que se encuentra encerrado entre ellas: su tamaño (SIZE), su color (COLOR) y el tipo de fuente (FACE). Por ejemplo, las siguientes líneas escritas dentro del cuerpo de un nuevo archivo, mostrarán texto con cuatro tamaños de fuente diferentes.
Texto con fuente tamaño normal. <font size = "+1">Texto con fuente tamaño + 1</font> <font size = "+2">Texto con fuente tamaño + 2</font> <font size = "-1">Texto con fuente tamaño - 1</font> <font size = "-2">Texto con fuente tamaño - 2</font>
El atributo color puede ser un valor hexadecimal o el nombre en inglés de un color específico. Aunque en teoría se pueden mostrar millones de colores, existen 16 de ellos que componen la denominada “Paleta Segura”. El uso de cualquiera de esos colores, garantiza que las páginas podrán ser vistas tal como fueron diseñadas, aun cuando se utilice para su visualización un monitor con la configuración más pobre. La tabla siguiente muestra los valores hexadecimales (códigos) y nombres de los 16 colores mencionados.
LA MARCA <IMG> El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre.
ALIGN Align= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea.
Hay muchas maneras de alinear una imagen dentro de la página. Horizontalmente, está predeterminada la alineación a la izquierda para una imagen y cualquier otro tipo de objeto solitario. Mientras que la alineación horizontal se hace con los valores de left y right, la alineación más empleada, también puedes usar el atributo align para alinear una imagen verticalmente. Como estándar, los navegadores soportan estos tres valores: -top Este coloca la imagen en la parte más superior de la línea de texto (valor por defecto) -middle La imagen ahora estará alineada con el centro de la línea de texto -bottom Con este valor, la imagen será alineada con la parte inferior de la línea de texto
JOHNNY CEDEÃ&#x2018;O MORA