manual para crear pÁginas web con html
DESCRIPTION
Explicamos la estructura básica para la creación de una página web con Html.TRANSCRIPT
MANUAL HTML
INSTITUCIÒN EDUCATIVA COLOMBIA
PROF: JESÚS ELBER VALENCIA PEREA2012
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.
¿Qué es HTMLComenzamos 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.
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
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)
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 archivoImportante: 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.htmNota: 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
PRACTICASAntes 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
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
• <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.
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.
Práctica 3Ya 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>
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
CIBERGRAFIA
• Manual de Html. Leo Juszkiewicz http://www.monografias.com/trabajos30/manual-html/manual-html.shtml#rnlacinternos• Curso de Iniciación en el lenguaje HTML http://platea.pntic.mec.es/rluna/CursoHTML/index.html#indice