Está en la página 1de 10

Contenido

INTRODUCCIN AL LENGUAJE HTML..............................................4


ELABORACIN DEL PRIMER DOCUMENTO EN HTML....................5
CARACTERSTICAS.............................................................................6
CUATRO NORMAS FUNDAMENTALES..............................................7
LA ESTRUCTURA BSICA DE UNA PGINA EN HTML.....................8
GLOSARIO..........................................................................................11
INTRODUCCIN AL LENGUAJE HTML

HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado
de forma estructurada y agradable, con enlaces que conducen a otros documentos o fuentes
de informacin relacionadas, y con inserciones multimedia, asi como los diferentes efectos
que se quieren dar.
La descripcin se basa en especificar en el texto la estructura lgica del contenido.

HTML es el lenguaje con el que se "escriben" las pginas web. Se puede resumir la filosofia
del HTML con los siguientes puntos:
Es muy sencillo.
No hay variables.
No se compila.
Es un lenguaje interpretado.
A las instrucciones se les llama etiquetas o marcas
Permite escribir hipertexto

El programa que interpreta este lenguaje es el navegador (internet explorer, netscape, firefox,
etc). Este lenguaje es el usado por los navegadores para mostrar las pginas web.

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e
inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece
bastantes ventajas: Seremos capaces de aprovechar todas las caracteristicas de este
lenguaje, incluso las ms nuevas. 5 Introduccin al lenguaje HTML

Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes


para modificar posteriormente el cdigo que ste ha creado. Asi se pueden corregir errores o
incluir etiquetas no soportadas por el editor.

No dependeremos de la disponibilidad de una herramienta concreta para poder crear pginas


web. Con un simple editor de textos ser suficiente.
ELABORACIN DEL PRIMER DOCUMENTO EN HTML

Las pginas html se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye
informacin sobre la propia pgina, como por ejemplo su titulo y su idioma. El cuerpo de la
pgina incluye todos sus contenidos, como prrafos de texto e imgenes.
1. Abrir el editor de textos en: windows 95, abrir block de notas
2. Teclee
<html>

<head>
<title>el primer documento html</title>
</head>

<body>
<p>el lenguaje html es <strong>tan sencillo</strong> que
Prcticamente se entiende sin estudiar el significado
De sus etiquetas principales.</p>
</body>

</html>

3. Grabar este archivo con el nombre ejemplo.html


4. Abra el visualizador. No necesita conectarse a internet para ver estas paginas
5. Elija archivo/abrir pagina en la barra de men del navegador
6. Seleccione el archivo ejmplo1.html que acabe crear.
CARACTERSTICAS
Es un lenguaje muy parecido a cmo trabaja un procesador de textos. Html es un lenguaje
transferible, es decir, se pueden visualizar las pginas con cualquier sistema operativo y, por
supuesto tambin crearlas. El html est formado por tan slo 90 elementos.

Una de las caracteristicas mas importantes del html es el hipertexto. Esto quiere decir que
las pginas no son elementos aislados, sino que estn unidas a otras mediante los links o
enlaces hipertexto.

Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto de una pgina
para navegar hasta otra pgina. Ser cuestin del programador de la pgina inicial decidir
que palabras o frases sern activas y a donde nos conducir pulsar sobre ellas.

El lenguaje html se estructura utilizando marcas o etiquetas comando. Cada elemento de un


documento html consta de una etiqueta de comienzo, un bloque de texto y una etiqueta de fin
(< y >).

Utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final,


mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto,
asi como tambin las imgenes y los dems elementos, en la pantalla del ordenador.

Este lenguaje ser el encargado de convertir un inocente archivo de texto inicial en una
pgina web con diferentes tipos y tamaos de letra, con imgenes impactantes, animaciones
sorprendentes, formularios interactivos, etc.

Puede ser creado y editado con cualquier editor de textos bsico.


CUATRO NORMAS FUNDAMENTALES

Html es simplemente texto


Lo primero es saber que un documento html es un archivo de texto simple, luego, se puede
editar con cualquier editor de texto sencillo, como por ejemplo el block de notas de windows
95/98/xp/nt.

Igualdad de maysculas y minsculas.


Html no distingue entre maysculas y minsculas en la especificacin de marcas y sus
atributos. Sin embargo, por legibilidad, es aconsejable codificar tanto marcas como atributos
en maysculas.

No importan los tabuladores, ni los saltos de linea


Los visualizadores no toman en cuenta las tabulaciones, los saltos de linea ni los espacios
en blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite
obtener resultados uniformes y de buena presentacin de manera bastante fcil.
La principal desventaja es que un documento html, por lo menos se debe usar las marcas
<p>...</p> o <br> para evitar que quede todo el texto en una sola linea.

Caracteres especiales
En html existen algunos caracteres que son especiales porque juegan un papel dentro del
mecanismo del funcionamiento de html, como sucede con los simbolos mayor que (>) y
menor que (<), y otros porque en los primeros tiempos de html, no formaban parte del juego
de caracteres internacionales del alfabeto, como sucede con los acentos.
Sea por los motivos que fuere, el caso es que existen ciertos simbolos que no pueden
escribirse directamente, sino que deben sustituirse por una cadena de caracteres que el
visualizador interpretar de forma correcta. Estas cadenas de caracteres comienzan siempre
por el simbolo (&) seguido de una combinacin de caracteres alfabticos que tienen un
significado especial en html.
Carcter especial Transcripcin html Comentario
Los acentos &<vocal a acentuar> En la actualidad la mayoria
acute; de los browsers los
soportan.
Simbolo menor que (<) &lt:
Simbolo mayor que (>) &gt;
La ee &ntilde; En la actualidad la mayoria
de los browsers la
soportan.
Espacios en blanco &nbsp; (non breaking Html slo reconoce un
space) Espacio en blanco entre
Palabras

LA ESTRUCTURA BSICA DE UNA PGINA EN HTML

Index.html
<html> indica el inicio del documento.
<head> define el inicio de la cabecera.
<title> inicia el titulo del documento.
</title> fin del titulo del documento.
</head> define el fin de la cabecera.
<body> inicio del cuerpo del documento.
</body> fin del cuerpo del documento.
</hmtl> indica el fin del documento.

Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
<meta name="description" content="informacin sobre el centro,las enseanzas que se
pueden cursar, los departamentos didcticos">
<meta name="keywords" content="educacin,enseanza,instituto, profesores, alumnos>

En este caso las etiquetas le indican a los buscadores el contenido de nuestras pginas
(description) y algunas palabras clave (keywords) para su localizacin.
La cabecera es la seccin comprendida entre <head> y </head>. En ella se encuentra
necesariamente el titulo (entre las etiquetas <title> y </title>).

El titulo de la pgina debe describir su contenido por ejemplo:


<title> colegio leones </title>
no valdria en cambio
<title>pgina de inicio</title> ya que esto no dice nada por si solo
Dentro de la cabecera tambin se suele incluir cdigo en javascript, que se reconoce porque
va comprendido entre las etiquetas
<script language="javascript">
<!--
Aqu ira el cdigo
// -->
</script>

El cuerpo del documento html es normalmente lo ms importante. Es aqui donde debemos


colocar el contenido de nuestra pgina: texto, fotos, etc.
El cuerpo est delimitado por las etiquetas <body> y </body> la etiqueta <body> suele
contener algunos atributos, a saber:
Bgcolor parmetro usado para especificar el color de fondo de la pgina. El color se define
como una terna de nmeros (#rrggbb) en base hexadecimal en el orden rojo, verde, azul
(red, green, blue). Tambin se puede usar el nombre en ingls de los colores predefinidos en
los navegadores.
Sintaxis: <body bgcolor=#0000ff> o <body bgcolor=blue>
Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: paleta de
colores
Text, parametro usado para definir el color del texto por omision. Su formato es el mismo que
el de bgcolor. Si no se pone nada es negro.
Link, vlink, alink, parmetros usados para especificar el color por omision de: texto con
enlace, enlace ya visitado y enlace activo.
Los colores por omision son link=blue, vlink=purple y alink=red. El formato es el mismo que
bgcolor.
Background, parmetro usado para especifica la ruta y nombre de archivo (url) de la imagen
que ser usanda como fondo del documento. Esta se ver como mosaico para cubrir toda la
ventana si es pequea (lo habitual).
Sintaxis: <body background=ruta/archivo.gif>

Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el
directorio completo donde estn nuestras pginas, desde c:\ a c:\webs por ejemplo, la ruta
especificada debe seguir siendo vlida.
Por ejemplo si la pgina desde la que hacemos el enlace se

Encuentra en el directorio aprendiendo html y queremos poner como fondo la imagen


fondo.gif, que se encuentra en gifs, se debe poner:
<body background="gifs/fondo.gif">

si la pgina estuviese en ejemplos se pondria:


<body background="../gifs/fondo.gif">
Fijate en ../ pues es lo que indica al navegador que debe acudir al directorio superior
GLOSARIO
Comandos bsicos:
Es una instruccin u orden que el usuario proporciona a un sistema informtico, desde la
linea de comandos o desde una llamada de programacin. Puede ser interno o externo

Enlaces:
Conexin o atadura que puede existir entre dos o ms cosas, es decir, se refiere a la accin
de enlazar algunos objetos

Frames o marcos:
Se usan para dividir la pantalla en varias zonas independientes, cada una con su propia
barra de desplazamiento. Un uso muy comn es en esos sitios que tienen un menu fijo en la
parte izquierda de la pgina, y los textos aparecen en la parte derecha.

Tablas:
Modelado o recopilacin de datos por parte de una aplicacin de un programa que permite
operar con los mismos organizndolos y ponindolos en relacin de diversas maneras.

Formularios:
Documento, ya sea fisico o digital, diseado para que el usuario introduzca datos
estructurados en las zonas correspondientes, para ser almacenados y procesados
posteriormente.

Hojas de estilo:
Conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los
archivos de texto y se ocupan de los aspectos de formato y de presentacin de los
contenidos: tipo, fuente y tamao de letras, alineacin y posicionamiento del texto, colores y
fondos, etc.

Editores:
1. Programa que nos permiten redactar documentos.
2. Programa informtico para crear, modificar e imprimir documentos
Hoy en dia existen un gran nmero de editores que permiten crear pginas web sin la
necesidad de escribir ni una sola linea de cdigo HTML

Conversores:
Proceso de transformacin de datos informticos de una representacin concreta a otra,
cambiando los bits de un formato a otro, normalmente para lograr la interoperabilidad de
aplicaciones o sistemas diferentes. Al nivel ms simple, la conversin de datos puede
ejemplificarse por la conversin de un archivo de texto desde una codificacin de caracteres
a otra.

También podría gustarte