ETIQUETAS BASICAS HTML IMAGEN


Nociones básicas de HTML
El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser el Bloc de Notas de Windows (o Notepad), o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, Text Pad? etc.
Existen además, otros programas para la realización de sitios Web o edición de código HTML, como por ejemplo Microsoft Front Page, el cual tiene un formato básico parecido al resto de los programas de Office. También existe el famoso software de Adobe(quién adquirió la empresa Macromedia) llamado Dreamweaver, siendo uno de los más utilizados en el ámbito de diseño y programación Web. Estos programas se les conoce como editores WYSIWYG o What You See Is What You Get (en español: "lo que ves es lo que obtienes"). Esto significa que son editores los cuales van mostrando el resultado de lo que se esta editando en tiempo real a medida que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web, sino que una forma un tanto más simple ya que estos programas, además de tener la opción de trabajar con la vista preliminar, tiene su propia sección HTML la cual va generando todo el código a medida que se va trabajando. Combinar estos dos métodos resulta muy interesante, ya que de alguna manera se ayudan entre sí. Por ejemplo; si estoy editando todo en HTML y de pronto olvido algún código o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y continuo ahí la edición, o viceversa, ya que hay casos en que sale más rápido y fácil escribir directamente el código de alguna característica que queramos adherirle al sitio, que buscar la opción en el programa mismo.
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determinan la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.
Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales:
Se abren y se cierran, como por ejemplo: <b>negrilla</b> que se vería en su navegador como negrilla.
No pueden abrirse y cerrarse, como <hr> que se vería en su navegador como una línea horizontal.
Otras que pueden abrirse y cerrarse, como por ejemplo <p>.
Las etiquetas básicas o mínimas son:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es"> <head> <title>Ejemplo</title> </head> <body> <p>ejemplo</p> </body> </html>
Algunas etiquetas básicas de HTML
Las etiquetas básicas de HTML, de obligada presencia en todo documento son:
<HTML>: Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuación debe tratarlo como una serie de códigos html.
<HEAD>: Define la cabecera del documento html, esta cabecera suele contener información sobre el documento que no se muestra directamente en el navegador. Como por ejemplo el título de la ventana de su navegador. Dentro de la cabecera <HEAD> podemos encontrar:
<TITLE>: Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana
<LINK>: para definir algunas características avanzadas, como por ejemplo las hojas de estilo usadas para el diseño de la página, ejemplo :<link rel="stylesheet" href="/style.css" type="text/css">
<BODY>: Define el contenido principal o cuerpo del documento, esta es la parte del documento html que se muestra en el navegador, dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <BODY> podemos encontrar numerosísimas etiquetas. A continuación se indican algunas a modo de ejemplo:
<H1>, <H2>,... <H6>: encabezados o títulos del documento en diferentes tamaños de fuente
<P>: párrafo nuevo
<BR>: salto de línea forzado
<TABLE>: comienzo de una tabla (las filas se identifican con <TR> y las celdas dentro de las filas con <TD>)
<A>: indica la existencia de un hipervínculo o enlace, dentro o fuera la página web. Debe definirse el parámetro de pasada por medio del atributo href (ejemplo: <a href="http://www.google.com">Google</a> se representa como Google)
<DIV>: comienzo de un área especial en la página
<IMG>: indica la existencia de una imagen para mostrarse en el navegador
<font color="#xxxxxx">:Para cambiar el color de la letra, donde las x son un número hexadecimal.
<LI><OL><UL>:Es uno de los más utilizados para el manejo de listas.
Cada etiqueta debe cerrarse tal cual se abrió pero con un pequeño cambio: un "/" tal como se muestra en el siguiente ejemplo:
<script> </script>
HTML es el lenguaje por el cual constriumos una página web. Este lenguaje se basa principalmente en etiquetas, con las cuales vamos construyendo los diferentes apartados de nuestra web. Es imprescindible conocer estas etiquetas y su funcionamiento para poder crear o al menos modificar una página web.
Ejemplo de página básica
<html> <head>
<title>Título de la página</title>
</head>
<body>
<h1>Encabezado de la página</h2>
<h3>Encabezado de menor tamaño</h3>
<p>Este es el texto de un párrafo.</p>
<p>Este es el texto de otro párrafo. Dentro de este párrafo,
pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo
que quieras.</p>
<p>También podemos poner listas como la siguiente:</p>
<ul>
<li>Guión número uno.</li>
<li>Guión número dos.</li>
<li>Guión número tres.</li>
</ul>
</body>
</html>
Marcadores o etiquetas HTML obligatorios:
En el caso del marcador body puede ir acompañado, no obligatoriamente, del atributo BGOLOR (Background color) junto con un numero de expresión hexadecimal que determina un color de fondo plano para la pagina web. Esta función, como veremos más adelante con el color de los textos está automatizada en la mayoría de editores de páginas web (incluido Netscape Composer).
Cabecera del documento
Contiene información general sobre el documento HTML. Es obligatorio incluir el marcador y dentro de la sección
* Proporcionar datos al servidor de HTTP para que genere campos de cabecera (como, por ejemplo, la fecha de caducidad de un documento que se actualiza periódicamente). Se emplean atributos del tipo HTTP-EQUIV y para la segunda los del tipo NAME. En ambos casos, el valor se asigna en el campo CONTENT.
* Para que un usuario incluya información adicional sobre el documento, como palabras clave o el nombre del autor. El atributo NAME se refiere a nombres elegidos al azar por el usuario, mientras que HTTP-EQUIV significa que el valor tiene una cabecera equivalente real en el protocolo HTTP.
Etiquetas de caracteres y tipos de letra:
LENGUAJE HTML | RESULTADO en navegador |
texto en negrita | texto en negrita |
texto en cursiva o itálica | texto en cursiva o itálica |
texto subrayado | texto subrayado |
combinando las tres anteriores | combinando las tres anteriores |
fuente tipo de máquina de escribir | fuente tipo de máquina de escribir |
Presentación de textos en color:
Marcador
Marcador : indica que vamos a crear una tabla.
PIXELS | Pixeles en pantalla. |
RELATIVE | Porcentaje de la anchura de página (%) |
Atributo ALIGN en : tipo de alineación
JUSTIFY | Ajustar al ancho de la página. |
LEFT | Izquierda. |
RIGHT | Derecha. |
Marcador : cabecera de la tabla. Aparecen en negrita.
CENTER | Centro. |
LEFT | Izquierda. |
RIGHT | Derecha. |
En definitiva, el código del principio de este apartado sobre creación de tablas tendría este resultado:
Título de la tabla | |
Cabecera columna 1 | Cabecera columna 2 |
Fila 1, columna 1 | Fila 1, columna 2 |
Fila 2, columna 1 | Fila 2, columna 2 |
Adición de imágenes internas:
Son las imágenes que aparecen cuando se visualiza el documento HTML. Los navegadores sólo pueden visualizar dos tipos de imágenes:
El resto de imágenes (tif, bmp, etc.) se tratan como imágenes externas y sólo se pueden visualizar con las aplicaciones auxiliares o los plug-ins de los navegadores
Además de que las imágenes tengan que ser de este tipo, es aconsejable que no tengan un tamaño superior a 20-25K para evitar que tarden mucho en cargarse y la página web sea lo suficientemene "ágil". Para ello, es muy importante que la resolución de estas imágenes no sea superior a 75ppp que es la resolución de la pantalla. Es inútil darles una mayor resolución (que se aplica en la edición en papel) porque sólo van a ocuparnos mayor espacio y no por ello se van a poder ver mejor en el monitor.
MIDDLE | Alineación centro. |
TOP | Alineación superior. |
BOTTOM | Alineación inferior. |
LEFT | Alineación izquierda. |
RIGHT | Alineación derecha. |
Un ejemplo de inclusión de imágen en código html incuyendo todos los atributos mencionados sería:
Esta línea de codigo indica que insertamos una imagen tipo jpg llamada prueba, de 20x40 pixeles, sin marco, alineada a la derecha y con un texto alternativo (el que aparece cuando no se quieren ver imágenes en el navegador o cuando se están cargando).
prueba de color azul | prueba de color azul |
Atributo TEXT: en el marcador establece el color por defecto del texto de todo el documento.
Creación de tablas
Una tabla esta compuesta por filas y columnas de información. No solo permiten tabular la información sino mantener un mayor control sobre lo que se visualizará en la pantalla. La intersección de una fila y una columna genera una celda.
Elaboración de páginas web: Lenguaje HTML
Arquitectura cliente/servidor -Introducción al lenguaje HTML - Principales elementos del lenguaje html - Creación de documentos HTML - Cabecera del documento - Creación de encabezados, estilos y párrafos - Creación de enlaces y vínculos - Creación de listas - Creación de tablas - Añadir imágenes
Arquitectura cliente/servidor
Antes de comenzar a explicar la estructura de las páginas web y el lenguaje html, es importante tener claro en que consiste la arquitectura cliente/servidor en la que se basan tanto las redes locales como la propia Internet
Pensar en una red clásica de pescadores es bastante gráfico para comprender la estructura de la Red. En ella, se pueden
diferenciar a simple vista dos elementos que se repiten: los nudos y los segmentos de malla que unen los distintos nudos.
Al hablar de Internet estamos hablando también de una red y los elementos que componen esa red son los nodos y los enlaces. La estructura de Internet no es tan regular como una red de pescadores, si bien se pretende tener conectividad entre todos los nodos, es decir, lo ideal es tener la posibilidad de encontrar al menos dos rutas o caminos (path en inglés) entre dos nodos cualesquiera. Uno de ellos será el nodo origen de los mensajes mientras que el otro será el nodo destino.
Los nodos no son más que ordenadores dedicados a encaminar los paquetes hacia su destino, eligiendo el enlace más
adecuado en cada momento. Estos nodos reciben el nombre de enrutadores (ROUTERS), y serían algunos de los nudos de
la parte interna/central de la red de pesca. Igualmente, nosotr@s al conectarnos utilizamos un ordenador, que si bien también
es un nodo de la red se le denomina HOST (tu ordenador).
Los enlaces son las conexiones físicas entre nodos y están formados por un conjunto de circuitos de datos en forma de hilos
telefónicos, fibras ópticas, microondas y demás soportes propios de Telecomunicaciones. La información, se divide en trozos
de un número determinado de caracteres. A cada trozo de estos, denominado paquete, se le asocia información de
enrutamiento, y se envía por un enlace. Es decir, cuando se establece una conexión internet, tu equipo queda conectado por un enlace a la red.
Existen una serie de ordenadores que están conectados a la red con el objeto de ofrecer y proporcionar alguna clase de
servicio a todo aquel que se lo pida. Estos ordenadores son también nodos de la red y se denominan servidores
(SERVERS).
Para poder acceder a los recursos que ofrece un servidor se necesita un tipo de programa específico, denominado programa
cliente, que debes ejecutar en tu ordenador y que es el encargado de mantener el diálogo con el programa servidor. Se dice
que estamos en una arquitectura cliente / servidor, en la que el programa servidor corre en el ordenador que ofrece algúnrecurs o (server) y el programa cliente en el ordenador de aquél que lo reclama (host). Los programas navegadores (Netscape, Explorer) son clientes que piden páginas a diversos servidores que existen en la red.
Introducción al HTML
Cuando tu programa navegador (cliente) pide una página web al servidor, éste le envía un fichero de texto (con extensión htm o html) en lenguaje html que tu programa (netscape o explorer) se encarga de "traducir" para que puedas visualizar correctamente en el navegador la página web solicitada incluyendo texto, fondos, gráficos, etc.
El HTML (HipertText Markup Language) ó Lenguaje de enlaces hipertexto es un sistema que se encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.
Como cualquier página web está soportada por un fichero de texto, se pueden elaborar, editar o modificar directamente con el bloc de notas o el wordpad de Windows 95, aunque existen programas editores de páginas web a la venta como HotDog ó Front Page y programas gratuitos de edición básica como Netscape Composer, que permiten editarlas con algunas funciones automatizadas a través de botones y menús.
Elementos del lenguaje HTML
Caracteres :
Marcadores, marcas o etiquetas (tags) :
Nombres de etiquetas:
Atributos:
Comentarios:
Creación de documentos HTML
Aspecto de documentos HTML:
Para incluir un gráfico en un documento HTML se utiliza la directiva . En dicha directiva debe incluirse un parámetro src="URL", con el cual indicamos dónde está el fichero con el gráfico concreto que queremos para nuestro documento. Esto pone a nuestra disposición una gran flexibilidad, ya que podemos complementar el contenido de nuestro documento tanto con gráficos que se encuentren disponibles en nuestro servidor de WWW como con una foto situada en un servidor de la NASA o del Ministerio de Cultura, por ejemplo, sin que el lector final tenga por qué apreciar ninguna diferencia.
Existe alguna limitación respecto a los formatos gráficos que los programas lectores de HTML puede interpretar sin problemas. El formato fundamental es el GIF, que cualquier programa con capacidades gráficas debería poder mostrar directamente en nuestro texto (Mosaic y Netscape pueden hacerlo). Si utilizamos otro formato diferente, lo más probable es que cuando un lector esté accediendo al documento, el programa no comprenda ese formato y se tenga que solicitar la ayuda de otro programa, con lo cual al final el gráfico no se insertará en el lugar estratégico de nuestro documento, sino que aparecerá en otra ventana diferente.
Hay un parámetro optativo de la directiva que sirve para proponer un texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para leer el HTML un programa sin capacidades gráficas (por ejemplo Lynx, que sólo trabaja con texto). Se trata de alt="texto". Conviene utilizarlo cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades gráficas no podrían mostrar los enlaces que nosostros queremos.
Como ocurría antes con los enlaces, por lo general no es necesario escribir el URL completo, sino que basta con dar la mínima información. Por ejemplo, para colocar en este punto del documento un monigote que está en el mismo subdirectorio que este manual, en el fichero monigote.gif, escribiremos:
Durante todo este manual hemos hecho una pequeña trampa a la hora de explicar las directivas y poner ejemplos, para facilitar la comprensión de las ideas fundamentales sobre HTML. Dicha trampa ha consistido en ocultar ciertas exigencias de HTML respecto al uso de caracteres especiales, denominación que, para nuestra desgracia como hispanohablantes, incluye a las vocales acentuadas y a la letra eñe. Existen también ciertas limitaciones relativas al uso de ciertos símbolos que significan algo en HTML, como el de menor que (<) o el signo inglés de and (llamado ampersand: &). Trataremos primero el caso más sencillo. Existe una razón evidente que impide que podamos escribir ciertos símbolos directamente en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en HTML,y es necesario diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en este caso <. Los símbolos afectados por esta limitación, y la forma de escribirlos, se detallan a continuación: Es decir, que para escribir <"> en nuestro texto HTML original debemos poner <">. El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe, por ejemplo. Existen dos formas de hacerlo. La primera, que es a la que obliga el estándar de HTML, consiste en utilizar entidades, es decir, palabrejas como las que antes se presentaron para escribir ciertos símbolos. Las entidades comienzan siempre con el símbolo &, y terminan con un punto y coma (;). Entre medias va un identificador del carácter que queremos que se escriba. Las entidades necesarias en nuestro idioma son: á: á Como puede verse, las vocales acentuadas se identifican añadiendo el sufijo acute a la vocal sin acentuar (puesto que se trata de un acento agudo). Para la u con diéresis y la eñe se usan uml tras una u y tilde detrás una ene, respectivamente. La equivalencia de los signos de abrir interrogación y exclamación es algo más oscura: a falta de una denominación más evidente, tenemos que usar el valor numérico de dichos caracteres en el código estándar latin1 (ISO-8859-1). Esto se puede hacer con cualquier otro carácter del código latin1, que es el código de caracteres básico en HTML, escribiendo &#numero;. La segunda manera, que sin duda es más cómoda, consiste en no preocuparse por esta limitación y escribir literalmente los caracteres afectados. A pesar de que este método suele funcionar en las conexiones WWW directas (porque el protocolo HTTP, que transporta el HTML por los vericuetos de Internet, requiere un canal de 8 bits), no tiene por qué funcionar bien cuando los documentos HTML se envían por correo electrónico, por ejemplo. Por tanto, y a pesar de los inconvenientes, es absolutamente recomendable respetar la norma especificada en HTML. En cualquier caso, no resulta muy complicado escribir un programa que traduzca todas las apariciones de los caracteres especiales por sus correspondientes entidades HTML, o viceversa. Con un programa así, uno puede escribir los documentos sin preocuparse por estos problemas, y luego traducir a HTML correcto. Al final de este manual encontrará un enlace a un programita en C que hace precisamente eso. Volviendo al reconocimiento de culpa que antes de hizo por haber ocultado estos detallitos, debemos decir que muchos de los ejemplos que antes se pusieron no eran totalmente correctos. Por ejemplo, cuando se escribió: Animal de cuatro patas que maúlla y se lleva muy mal con el perro. CARACTERES ESPECIALES