Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MANUAL PARA CREAR PÁGINAS WEB CON HTML

20,573 views

Published on

Explicamos la estructura básica para la creación de una página web con Html.

Published in: Education
  • Login to see the comments

MANUAL PARA CREAR PÁGINAS WEB CON HTML

  1. 1. MANUAL HTML INSTITUCIÒN EDUCATIVA COLOMBIAPROF: JESÚS ELBER VALENCIA PEREA 2012
  2. 2. OBJETIVOSLos 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. 3. ¿Qué es HTMLComenzamos pues comentando que los documentos HTML no son más que documentos de texto conuna serie de etiquetas. Éstas le sirven al navegador para interpretar de que forma tiene que presentar eltexto, 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 pormedio 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 comoPhp, 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 deWindows para crear nuestras páginas HTML. (para abrir el bloc de nostas: inicio –accesorios –bloc denotas)Aunque este procedimiento resultaría bastante incómodo para su uso habitual, ya que nos obligaría aconocer todas las etiquetas del HTML, puede ser interesante para que comprendamos la estructura deuna página WEB y será el primero que utilicemos.
  4. 4. El formato de las etiquetas HTMLLas etiquetas HTML se escriben encerradas entreángulos. Normalmente se utilizan dos etiquetas:una de inicio y otra de final para indicar que haterminado el efecto que queríamos presentar. Laúnica diferencia entre ambas es que la de cierrelleva una barra inclinada "/" antes del código.<etiqueta>texto que presentará elefecto</etiqueta>Por ejemplo:<B>texto</B> dará como efecto texto
  5. 5. La estructura básica de una página WEBPara que un navegador reconozca que lo que está viendo es una página WEB se utiliza la siguienteestructura:<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 sepresentarán en la ventana del navegador, salvo el título que aparecerá en la barra de título dela 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. 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 archivoImportante: La página principal de tu sitio, o sea la primer página queaparece, debemos nombrarla index seguida de un punto y el tipo dextensión (en este caso .htm o .html),así: index.html o index.htmNota: Te recomiendo no usar espacios, mayúsculas o caracteresespeciales (# $ % °) en el nombre de tu archivo, para evitar problemasde lectura con el navegador.Podrías utilizar guiones ( - ) o guiones bajos ( _ ) para reemplazar a losespacios y nombrar a tu archivo algo así: pagina_1.html
  7. 7. PRACTICASAntes de comenzar los ejercicios prácticos crea una carpeta con elnombre "Curso HTML" para poder almacenar en ella el resultado de tutrabajo.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. 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. 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. 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. 11. 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 deuna 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. 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. 13. CIBERGRAFIA• Manual de Html. Leo Juszkiewiczhttp://www.monografias.com/trabajos30/manual-html/manual-html.shtml#rnlacinternos• Curso de Iniciación en el lenguaje HTMLhttp://platea.pntic.mec.es/rluna/CursoHTML/index.html#indice

×