lenguaje html
Lenguaje HTML
Explicamos el lenguaje sobre el que se basa la creación web y vemos algún ejemplo para ilustrarlo.
Una página web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero no es así, está compuesta por multitud de diferentes ficheros, como son las imágenes, los posibles vídeos y lo más importante: el código fuente.
El código de las páginas está escrito en un lenguaje llamado HTML, que indica básicamente donde colocar cada texto, cada imagen o cada video y la forma que tendrán estos al ser colocados en la página.
El HTML se creó en un principio con objetivos divulgativos. No se pensó que la web llegara a ser un área de ocio con carácter multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro.
el lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto está en negrita</B>.
Partes de un documento HTML
Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>
Con todo lo que conocemos ya sobre HTML podemos construir una página web que ya tiene bastante sentido. Vemos un ejemplo a continuación.
<html>
<head>
<title>Cocina Para Todos</title>
</head>
<body>
Para que sirve el lenguaje html
HTML, acrónimo de HyperText Markup Language, lenguaje de marcas de hipertexto. En informática, formato estándar de los documentos que circulan en la World Wide Web (WWW); se utiliza desde 1989. Los documentos HTML contienen dos tipos de información: la que se muestra en la pantalla (texto, imágenes...) y los códigos (tags o etiquetas), transparentes al usuario, que indican cómo se debe mostrar esa información. Para crear un documento HTML, basta con disponer de un editor de código ASCII y teclear el texto y las etiquetas que sean precisas. También se pueden utilizar editores específicos que insertan automáticamente las etiquetas correspondientes al formato del texto que se escriba o a las imágenes que se inserten; casi todos los procesadores de texto actuales incluyen esta posibilidad.
El lenguaje HTML es un subconjunto de SGML (acrónimo de Standard Generalized Markup Language, lenguaje estándar de marcado de documentos), que es un estándar de descripción de página independiente del dispositivo, lo que permite adaptar la visión del documento al tamaño de la pantalla en la que se muestra.
En un documento HTML hay etiquetas que indican los atributos del texto (negrita, centrado...). Otras indican al sistema cómo debe responder a eventos que genere el usuario, por ejemplo, que después de que el usuario señale con el mouse un icono que representa una película, se ejecute el programa que reproduce vídeo en formato digital. La etiqueta más importante es la que indica un vínculo (link), que puede contener como destinatario otro lugar del mismo documento o el URL de otro documento; este último puede residir en el mismo lugar de la Web que el documento actual o en cualquier otro ordenador de WWW. El usuario “navega” de documento en documento seleccionando estos vínculos con el mouse.
A medida que se ha ido avanzando, se han estandarizado distintas versiones del lenguaje HTML. Cada una de ellas amplía el número de etiquetas, lo que permite nuevas posibilidades para los documentos; así, se le ha dotado de marcas para rellenar formularios (forms) de manera interactiva, que permiten al usuario enviar la información necesaria para realizar consultas en bases de datos, comprar o solicitar un servicio. Otras marcas permiten mejorar la presentación de los documentos, por ejemplo, añadiendo fondos, tablas de contenido o textos intermitentes. La versión HTML 4.0 se utiliza en combinación con el XML 1.0, otro subconjunto de SGML que permite al desarrollador definir sus propias etiquetas; el resultado es un nuevo formato denominado XHTML, que se espera que constituya un nuevo estándar de formato para páginas Web. Su principal ventaja estriba en que va a permitir desarrollar páginas Web con diferentes conjuntos de datos, que se podrían descargar en dispositivos de mano, con pantallas de tamaño reducido.
El software que permite al usuario consultar documentos en World Wide Web se denomina explorador o navegador; los más conocidos son Netscape Navigator y Microsoft Internet Explorer. Se encarga de interpretar las etiquetas y de mostrar el documento en la pantalla. La evolución de las distintas versiones del lenguaje HTML ha estado determinada por un desarrollo paralelo de los navegadores, que permitiese interpretar las nuevas etiquetas. El avance de unos y otros ha contribuido al crecimiento exponencial que
Etiquetas básicas del lenguaje html
ETIQUETAS BÁSICAS
« Anterior | Inicio | Siguiente »
<HTML>
Primera etiqueta en cada documento. Indica que el contenido del documento se encuentra en lenguaje HTML, todo el texto y etiquetas (comandos) del documento deben de estar dentro de las etiquetas <HTML> inicial y </HTML> final.
Ejemplo:
<HTML>
Documento
</HTML>
<HEAD>
Especifica que el texto contenido dentro del inicio y fin de la etiqueta son el prólogo del documento.
El texto que se escribe dentro de la etiqueta <HEAD> no se muestra en el navegador, por lo que hay que procurar no poner contenido del documento dentro de ella.
Dentro de esta etiqueta colocamos etiquetas como <TITLE>, <ISINDEX>, <BASE>, y <META> que son elementos opcionales. Elementos que contienen información general o meta-información acerca de un documento.
<TITLE>
Dentro de la etiqueta <TITLE> colocamos el título o tema del documento. La etiqueta <TITLE> siempre va dentro de la etiqueta <HEAD>.
Al escribir el título del documento debemos ser claros y no utilizar otras etiquetas, ni títulos muy extensos ya que los navegadores muestran el texto contenido entre esta etiqueta en la barra de título, además de utilizarlo para agregarla a la lista de marcadores favoritos.
El contenido de la etiqueta <TITLE> es utilizado por los buscadores como Yahoo, Infoseek, Altavista, etc. para localizar la página.
Ejemplo:
<HTML>
<HEAD>
<TITLE>
Páginas en Internet
</TITLE>
</HEAD>
</HTML>
<BODY>
Cuerpo del documento, es en donde se incluirá toda la información que en realidad será mostrada dentro de la ventana del navegador.
El cuerpo del documento puede contener una gran variedad de elementos los cuales pueden soportar una gran cantidad de atributos.
La etiqueta <BODY> contiene varios atributos o modificadores, los cuales podemos utilizar y actúan sobre el contenido del cuerpo del documento en forma global.
Ejemplo:
<HTML>
<HEAD>
<TITLE>
Páginas en Internet
</TITLE>
</HEAD>
<BODY>
Esta es mi primera página
</BODY>
</HTML>
Como crear paginas Web con el blog de notas utilizando etiquetas
Ejercicio paso a paso. Crear una página básica |
Objetivo. |
|
Practicar las operaciones que hay que realizar para crear una página básica.
|
Si es la primera vez que realizas el ejercicio, haz clic aquí para descargarte la carpeta de ejercicios, deberás extraer los archivos en la carpeta Mis documentos de tu disco duro, ahí se creará una carpeta ejercicios_html. A lo largo del curso vamos a crear tres sitios web, cada sitio lo guardaremos en una carpeta dentro de ejercicios_html. En esa carpeta tenemos: La carpeta animales, donde guardaremos los archivos de un sitio web de una asociación ficticia de veterinarios que iremos creando a lo largo de los ejercicios paso a paso. La carpeta deportes, donde guardaremos los archivos de un sitio web de una cadena de centros deportivos que iremos creando a lo largo de los ejercicios propuestos. La carpeta flores, donde guardaremos los archivos de un sitio web de una floristería que iremos creando a lo largo de los ejercicios propuestos. Cada carpeta contiene a su vez una carpeta imagenes y una carpeta varios donde iremos guardando las imágenes y ficheros varios respectivamente. Una vez tenemos nuestros sitios organizados, podemos empezar a practicar.
|
1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el primer ejercicio. 2 Escribe el código que aparece a continuación: <html> Con este código estarás creando un documento con el título "Inicio", y con el color de fondo verde (#99CC99). 3 Haz clic sobre el menú Archivo. 4 Haz clic sobre la opción Guardar como. Se abrirá el cuadro de diálogo Guardar como. 5 En el recuadro Tipo: elige Todos los archivos. |
Ejemplos de cómo crear una pagina Web con el lenguaje html
12. Un ejemplo
Capítulo anterior: 11 - Los gráficos
Veamos un ejemplo más largo realizado con lenguaje html.
<HTML>
<HEAD>
<TITLE>Ejemplo mas largo </TITLE>
</HEAD>
<BODY>
<H1>Un ejemplo mas largo </H1>
Este es un documento HTML sencillo. Este es el primer párrafo. <P>
Este es el segundo párrafo, con efectos especiales. Esta es una palabra en <I>cursiva</I>. Esta es una palabra en <B>negrita</B>.
He aquí una imagen GIF:<P>
<IMG SRC="http://www.unav.es/iconos/cabeza.gif">. <P>
Este es el tercer párrafo, que demuestra links. He aqui un hypertext de la palabra <A HREF="http://www.unav.es/un/infounav.html">Acerca de la Universidad de Navarra</A> a un documento llamado:"infounav.html". <P>
<H2>Una cabecera de segundo nivel </H2>
He aquí una sección de texto que se debe mostrar como una fuente de ancho fijo:<P>
<PRE>Con diez cañones por banda,
viento en popa a toda vela
no corta el mar sino vuela
un velero bergantín</PRE>
<HR>
Fin del documento
</BODY>
</HTML>
