Manual Básico de HTML

Manual Básico de HTML

1. Historia

   • Tiene como objetivo mostrar de la manera más sencilla, y basándose en la práctica y aplicación, como construir páginas HTML
     • ¿En qué consiste el manual?
       • guía de instrucciones
       • explica los usos
       • aplicaciones y resultados de varias etiquetas
       • instrucciones de HTML
     • Encabezados
       • <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;o.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de p&aacute;gina WEB :)<br> </body> </html>

2. ¿Qué es HTML?

   • son las iniciales de Hiper Text Markup Language.
     • conjunto o serie de etiquetas
     • definen la estructura de un documento WWW
     • vínculos con otros documentos

3. ¿Por dónde comenzar?

   • donde crear el archivo texto que contendrá las instrucciones HTML (Hipertexto)
     • Microsoft Front Page
     • Hot Dog
     • Microsoft Internet Assistant
     • Microsoft Office 97
     • Utilizar un editor de texto

4. Páginas WEB

   • Hipertexto
     • archivo de texto
       • contiene instrucciones
       • son denominadas Etiquetas
   • Etiquetas
     • <nombre de la etiqueta>
       • Apertura de una etiqueta siempre entre “< >”
     • texto/gráfico/etiquetas
       • A la cual se aplica la etiqueta
     • </nombre de la etiqueta>
       • Cierra de la etiqueta siempre entre “</ >”
   • Estructura básica de una página WEB
     • <html> <head> </head> <body> Bienvenidos al curso de HTML </body> </html>

5. Etiqueta: <title> </title>

   • <html> <head> <title>Curso de HTML</title> </head> <body> Bienvenidos al curso de HTML </body> </html>

6. Etiqueta <body> </body>

   • Bgcolor define el color de fondo de la página • Text define el color del texto de la página • Link define el color de los vínculos en la página • Alink define el color del vínculo actual o activado en la página • Vlink define el color del vínculo ya visitado • Background define el archivo gráfico que será desplegado como fondo • Bgsound define el archivo de audio que se tocará en la página.IE • Bgproperties define el movimiento vertical del fondo.IE

7. ¿Cómo se utilizan los colores en HTML?

   • Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue, green, yellow
   • El color tiene un signo de numeral # antecediendo a los 6 números.
   • Existen dos números para cada color principal: rojo, verde y azul.
   • Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}.
   • <html> <head> <title>Curso de HTML</title> </head> <body bgcolor=”#C0D9D9” text=”#000000”> Bienvenidos al curso de HTML </body> </html>

8. Texto en HTML

   • <html> <head> <title>Curso de HTML</title> </head> <body bgcolor=”#C0D9D9” text=”#000000”> Bienvenidos al curso de HTML Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;o. Este es un ejemplo de p&aacute;gina WEB :) </body> </html>

9. Etiqueta <br>

   • La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento HTML

10. Etiqueta <hr>

    • La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente
      • <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> Bienvenidos al curso de HTML<br> <hr align=center width=50%><br> Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;o.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de p&aacute;gina WEB :)<br> </body> </html>

11. Etiqueta <img>

    • Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre
      • Src identifica la imagen que se desplegará.
      • Height para redimensionamiento de gráfico (en pixeles o en porcentaje)
      • Width para redimensionamiento de gráfico (en pixeles o en porcentaje)
      • Border Definido en pixels
      • ALIGN Alineación, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT
      • ALT Especifica el texto alterno

12. Frames

    • Etiqueta <frameset> </frameset>
      • Define la disposición gráfica de los marcos en la pantalla.
        • Atributos
          • Rows Determina el alto de las filas
          • Cols Determina el ancho de las columnas.
          • Framespacing Espacio entre frames

13. Etiqueta <noframes></noframes>

    • Etiqueta que es usada para desplegar un texto o una página alternativa

14. Etiqueta <address></address>

    • Ofrece una manera de dr formato a un pequeño cuerpo de texto
      • <address>Roberto Rojas<br> POBOX 2282<br> La Paz – Bolivia</address>