2. OBJETIVOS
Los objetivos que se plantean son:
• Que conozcas la estructura básica de un
documento HTML.
• Que aprendas a construir una página HTML
utilizando los recursos elementales.
• Que adquieras las bases necesarias para poder
continuar de forma autónoma el aprendizaje
sobre elementos avanzados de lenguaje
HTML.
3. ¿Qué es HTML
Comenzamos pues comentando que los documentos HTML no son más que documentos de texto con
una serie de etiquetas. Éstas le sirven al navegador para interpretar de que forma tiene que presentar el
texto, las imágenes o los sonidos en la pantalla.
HTML es el lenguaje con el que al escribir etiquetas creas la página web. Las páginas se visualizan por
medio de un navegador (Internet Explorer, Mozilla, opera…)
Con Html puedes crear tablas, colocar imágenes, reproducir audios y/o videos, etc.
El Html no es el único lenguaje que existe, es simplemente el básico, ya que los demás lenguajes como
Php, Asp, javascript… también requieren de algunos códigos de Html para poder funcionar.
Al tratarse de documentos de texto podemos afirmar que nos bastaría con el BLOC DE NOTAS de
Windows para crear nuestras páginas HTML. (para abrir el bloc de nostas: inicio –accesorios –bloc de
notas)
Aunque este procedimiento resultaría bastante incómodo para su uso habitual, ya que nos obligaría a
conocer todas las etiquetas del HTML, puede ser interesante para que comprendamos la estructura de
una página WEB y será el primero que utilicemos.
4. El formato de las etiquetas HTML
Las etiquetas HTML se escriben encerradas entre
ángulos. Normalmente se utilizan dos etiquetas:
una de inicio y otra de final para indicar que ha
terminado el efecto que queríamos presentar. La
única diferencia entre ambas es que la de cierre
lleva una barra inclinada "/" antes del código.
<etiqueta>texto que presentará el
efecto</etiqueta>
Por ejemplo:<B>texto</B> dará como efecto texto
5. La estructura básica de una página
WEB
Para que un navegador reconozca que lo que está viendo es una página WEB se utiliza la siguiente
estructura:
<HTML> (Etiqueta que indica que lo que viene a continuación es un documento HTML)
<HEAD>(Etiqueta de apertura de la cabecera).
Aquí va la información sobre el título de la página, el autor, palabras clave, etc. que no se
presentarán en la ventana del navegador, salvo el título que aparecerá en la barra de título de
la parte superior
<TITLE> Título de la página </TITLE>
</HEAD>(Etiqueta de cierre de la cabecera)
<BODY>(Etiqueta de apertura del cuerpo)
Aquí va el contenido de la página que será lo que se presente en pantalla.
</BODY>(Etiqueta de cierre del cuerpo)
</HTML>(Etiqueta de cierre del documento)
6. Guardar la página web
• Clic en el menu archivo
• Clic en la opción guardar
• Seleccionar la unidad o carpeta
• Escribir el nombre para el archivo
Importante: La página principal de tu sitio, o sea la primer página que
aparece, debemos nombrarla index seguida de un punto y el tipo d
extensión (en este caso .htm o .html),así: index.html o index.htm
Nota: Te recomiendo no usar espacios, mayúsculas o caracteres
especiales (# $ % °) en el nombre de tu archivo, para evitar problemas
de lectura con el navegador.
Podrías utilizar guiones ( - ) o guiones bajos ( _ ) para reemplazar a los
espacios y nombrar a tu archivo algo así: pagina_1.html
7. PRACTICAS
Antes de comenzar los ejercicios prácticos crea una carpeta con el
nombre "Curso HTML" para poder almacenar en ella el resultado de tu
trabajo.
Practica 1
• Abrir el Bloc de notas. (inicio –accesorios –bloc de notas)
• Escribir las etiquetas necesarias para crear el documento HTML.
• Darle contenido al cuerpo escribiendo un renglón y pulsando la
tecla INTRO para saltar al siguiente párrafo.
• Escribir otro renglón y pulsar dos veces la tecla INTRO.
• Escribir un tercer renglón y salvar el fichero en la carpeta Curso
HTML con el nombre ej1.htm manteniendo el tipo como
documento de texto.
• Cargar en el navegador el documento que acabamos de salvar y
comprobar los resultados
8. Vaya desastre!
• Supongo que coincidiremos en que lo que
hemos visto al comprobar cómo había
quedado nuestra primera creación no ha sido
muy alentador.
• La explicación del desaguisado es sencilla: en
HTML hacen falta unas etiquetas especiales
para indicar los saltos de línea y párrafo y no
las habíamos escrito
9. • <BR> es la etiqueta que sirve para
indicarle al navegador que debe hacer un
salto de línea.
• <P> indica un salto de párrafo e
introducirá un doble salto de línea.
10. Práctica 2
• Volvemos a abrir el Bloc de notas si lo habíamos
cerrado.
• Cargamos nuestra anterior creación. (ej1.htm)
• Introducimos la etiqueta <BR> donde habíamos
pulsado una vez la tecla INTRO
• Ponemos <P> donde inicialmente habiamos
pulsado dos veces la tecla INTRO.
• Guardamos el archivo como ej2.htm
• Pasamos al navegador y cargamos esta nueva
página para comprobar el resultado.
11. Práctica 3
Ya tenemos los conceptos para empezar a crear nuestra primer página.
Ahora vamos a crear una página con texto en negritas y con espacio de
una línea. La etiqueta <b> indica texto en negrita, y la etiqueta <p>
indica salto de línea (dejar una línea de separación).
El código es este:
• <html>
<head>
<title>Música</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estas en la mejor página.</p>
<p>La mejor música solo aquí.</p>
</body>
• </html>
12. INVESTIGAR
• Atributos del body
• Formato de texto
• Atributos del texto
• Estilos de párrafo y alineación
• Imágenes
• Marquesinas
• Vínculos, enlaces o links
• Tablas
13. CIBERGRAFIA
• Manual de Html. Leo Juszkiewicz
http://www.monografias.com/trabajos30/manu
al-html/manual-html.shtml#rnlacinternos
• Curso de Iniciación en el lenguaje HTML
http://platea.pntic.mec.es/rluna/CursoHTML/in
dex.html#indice