Tema 01 creando tu primer documento en html
•
0 recomendaciones•195 vistas
Este documento presenta una introducción al lenguaje HTML y cómo crear una página web básica. Explica que HTML define la estructura y formato de un documento pero no es un lenguaje de programación. Detalla las etiquetas y atributos básicos de HTML como <html>, <head>, <body>, <p>, <img>, así como cómo crear y guardar correctamente un archivo HTML.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Similar a Tema 01 creando tu primer documento en html
Similar a Tema 01 creando tu primer documento en html (20)
Más de Salomon Aquino
Más de Salomon Aquino (20)
Último
Último (20)
Tema 01 creando tu primer documento en html
- 1. Modulo: Herramientas Tecnológicas de Programación Asignatura: Introducción a la Programación HTML Tema 01: Creando tu primer documento en HTML Lic. Salomón Aquino / salomonaquino77@gmail.com • Crear y dar estructura a documentos en lenguaje HTML. Objetivo de aprendizaje:
- 2. HTML: ¿Qué es? Es un Lenguaje que da formato Define la sintáxis y ubicación de imágenes, instrucciones y objetos al navegador Posibilidad de conectar un documento con otros, o con otros recursos en Internet a través de hipertexto
- 3. HTML: ¿Qué no es? No es un procesador de palabra No es una herramienta de escritorio para diagramación No es un lenguaje de programación propiamente dicho No es multimedia
- 5. ¿Qué Vamos a necesitar? • 1) Un navegador web • 2) Un editor de texto Para crear un sitio web se necesitan dos cosas: Bloc de notas Notepad Navegadores más utilizados: Editores Web más utilizados:
- 6. ¿Que son las etiquetas HTML? • Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML. • Las etiquetas o tags son la forma de escribir código HTML. Definición:
- 7. ¿Que son las etiquetas HTML? En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la siguiente forma: <etiqueta> </etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta> es la etiqueta de cierre indicada por la diagonal (plica). HTML tiene definidas gran variedad de etiquetas para distintos usos.
- 8. Etiquetas con etiqueta de cierre Apertura Cierre Uso <HTML> </HTML> Indica el inicio y fin de un documento HTML <HEAD> </HEAD> Indica el inicio y fin de la sección de encabezado del documento HTML <BODY> </BODY> Indica el inicio y fin de la sección del cuerpo del documento HTML <P> </P> Indica el inicio y fin de un párrafo. La etiqueta de apertura y la de cierre son las mismas con la única diferencia de la diagonal "/" , es necesario la etiqueta de cierre para limitar el campo de acción de la etiqueta, por ejemplo a etiqueta <p> nos indica el inicio de un párrafo de texto y una vez que se escribe la etiqueta de apertura el navegador tomará como párrafo todo el texto que se encuentre después de dicha etiqueta hasta toparse con la etiqueta de cierre </p>
- 9. Etiquetas sin etiqueta de cierre Etiqueta Uso <BR> Indica un salto de línea, como un ENTER <IMG> Se usa para insertar una imagen en el documento HTML <HR> Se usa para insertar una línea horizontal para dividir el texto del documento HTML Este segundo grupo de etiquetas no requieren de una etiqueta de cierre debido a que su campo de acción está limitado al lugar en donde se incluye la etiqueta. Si queremos mas de un salto de linea simplemente escribimos varios <br> seguidos, la segunda etiqueta <img> sirve para insertar una imagen en la página tampoco necesita etiqueta de cierre, ya que la etiqueta se debe ubicar en el lugar en donde queramos insertar la imagen, pero hace falta algo mas para completar la etiqueta ya que un simple "img" no nos dice nada acerca de la imagen, para ello existen los atributos.
- 10. Atributos de etiquetas: • Las etiquetas tienen atributos que nos sirven para especificar ciertos detalles de esa etiqueta, por ejemplo, especificar un color de texto o de fondo, el ancho y alto de algún elemento, su alineación, la ubicación de un documento o imagen, etc. • El segundo caso del ejemplo anterior vimos que <img> sirve para insertar una imagen, pero para que la etiqueta funcione necesita de sus atributos, por medio de estos le daremos uso a la etiqueta. Ahora volviendo al ejemplo de la etiqueta <img> es necesario indicar en forma de un atributo la dirección y el nombre de la imagen que queremos que se muestre, esto de la siguiente manera: <img src="carpeta/mi_imagen.jpg"> Los atributos se escriben dentro de la etiqueta de la siguiente forma: <etiqueta atributo1="algo" atributo2="algo">
- 11. Crear un documento HTML Definición de documento HTML: • Un documento HTML es un archivo de texto que tienen la extensión .html o .htm, este tipo de archivo se puede abrir con un editor de textos para editar el código o con un navegador de Internet para visualizar la página resultado del código HTML escrito. • Para desarrollar una página web en HTML es necesario crear un documento HTML. • Al texto escrito en el documento HTML se le llama código HTML. • Un documento HTML se puede generar con cualquier editor de textos simple como el bloc de notas de Windows o Gedit de Linux.
- 12. Estructura básica de una página Web: La estructura básica de una pagina Web necesita las siguientes etiquetas en el orden que sigue: <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML> • Entre las etiquetas <HTML> y </HTML> estará comprendido el código HTML de la página. • las etiquetas <head> y </head> forman la cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. • Las etiquetas <body> y </body> conforman el cuerpo del documento y contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc.
- 13. Escribiendo tu primera página Web • Abre el programa bloc de notas y escribe el siguiente código HTML:
- 14. Como grabar correctamente la pagina Web: 1. Posiciona tu ratón(mouse) en la Opción Archivo (File) y da clic con el botón derecho. 2. Selecciona Guardar como… (Save As…), y crea una carpeta con tu nombre en el Escritorio 3. En la opción Guardar como tipo (save as type) asegurate que aparezca todos los archivos (*.*)o (all files *.*), escribe el nombre del archivo (pagina1.html) y luego presiona Enter.
- 15. Para ver la página Web en tu navegador sigue las siguientes instrucciones: • Abre la carpeta en la cual guardaste el archivo pagina1.html y haz clic derecho en el nombre de tu página luego selecciona la opción “Abrir con“
- 16. La clase ha terminado, gracias por su asistencia. SalomonAquino77@gmail.com