Scribd Logo
Upload

Welcome to Scribd!

  • Conceptos Básicos de HTML

    Uploaded by

    Tavo Lp
    43 views6 pages

    Original Title

    CONCEPTOS BÁSICOS DE HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    43 views6 pages

    Conceptos Básicos de HTML

    Uploaded by

    Tavo Lp

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    CONCEPTOS BSICOS DE HTML

    1. Introduccin a HTML

    1. Por qu aprender HTML? Cada pgina web que ves est escrita en un lenguaje llamado HTML. Imagina que HTML es el esqueleto que le da estructura a cada pgina web. En este curso, usaremos HTML para aadir prrafos, encabezados, imgenes y enlaces a una pgina web. En el editor de la parte derecha hay una pestaa llamada test.html . Este es el archivo en el cual escribiremos nuestro HTML. Ves el cdigo con los smbolos de <> ? Eso es HTML! Al igual que cualquier otro lenguaje, tiene su propiasintaxis (reglas para la comunicacin) especial. Cuando presionemos Ejecutar, la pestaa de resultados actuar como un navegador de Internet (*p. ej, * Chrome, Firefox, Internet Explorer). La funcin de un navegador es transformar el cdigo que est en test.html en una pgina web reconocible! El navegador sabe cmo distribuir la pgina, siguiendo la sintaxis HTML. 1. A la derecha tenemos un archivo test.html . 2. Cambia el texto en la lnea 3 por lo que quieras! 3. Tambin hay una pestaa de 'Resultados'. Funciona igual que un navegador. 4. Presiona Ejecutar, y vers como el archivo test.html se vera en un navegador. Viste? Las etiquetas <strong></strong> convirtieron nuestro texto en negrilla! <!DOCTYPE html> <strong>Gustavo Adolfo Ledezma Paz.</strong>

    2. HTML y CSS HTML significa HyperText Markup Language (lenguaje de marcado de hipertexto).Hipertexto quiere decir "texto que contiene enlaces." Cada vez que haces clic en una palabra que te lleva a una nueva pgina web, haz hecho clic en un hipertexto! Un lenguaje de marcado es un lenguaje de programacin usado para que el texto haga ms que solamente aparecer en una pgina; puede convertir el texto en imgenes, enlaces, tablas, listas, y mucho ms. El lenguaje de marcado que aprenderemos es HTML. Qu es lo que hace bonita a una pgina web? Eso es CSS**Cascading Style Sheets (hojas de estilo en cascada)**. Imagina que es la piel y el maquillaje que cubre los huesos del HTML. Primero aprenderemos HTML, despus, en cursos posteriores, nos ocuparemos del CSS.

    La primera cosa que debemos hacer es configurar el esqueleto de la pgina. a. Escribe siempre <!DOCTYPE html> en la primera lnea. Esto le dice al navegador cul es el lenguaje que est leyendo (en este caso, HTML). b. Escribe siempre <html> en la segunda lnea. Esto comienza el documento de HTML. c. Escribe siempre </html> en la ltima lnea. Esto finaliza el documento de HTML. 1. Coloca las tres etiquetas que mencionamos arriba en test.html . 2. En medio de la segunda y la ltima lnea (en medio de <html> y </html> ), puedes escribir cualquier mensaje que desees. RESPUESTA: <!DOCTYPE html> <html>Tecnico en Sistemas</html>

    Hide hint En HTML importa el orden en el que pongas las cosas! Pero el formato (*p.ej*, los espacios en blanco) no importan desde un punto de vista tcnico. Sin embargo, vas a notar un patrn en la forma en que usamos espacios en cada lnea del HTML. Esto es para mejorar la legibilidad y ayudarnos a detectar los errores. Hablaremos ms sobre los espacios ms adelante!

    3. Terminologa bsica Para aprender ms HTML, debemos aprender cmo hablar sobre HTML. Ya viste que usamos mucho los smbolos <> . 1. Las cosas adentro de <> se llamanetiquetas. 2. Las etiquetas casi siempre vienen en pares: una etiqueta de inicio y una etiqueta de cierre. 3. Un ejemplo de una etiqueta de inicio: <html> 4. Un ejemplo de una etiqueta de cierre: </html> Imagina que las etiquetas son como parntesis; cuando abres uno, debes cerrarlo. Las etiquetas tambin pueden anidarse, as que debes cerrarlas en el orden correcto: la etiqueta abierta ms recientemente debe ser la primera que se cierre, como en el ejemplo de abajo.
    <primera etiqueta><segunda etiqueta>Algn texto!</segunda etiqueta></primera eti queta>

    El ltimo ejercicio nos ense cmo configurar el archivo HTML. Todo lo que haremos ahora ir en medio de <html> y </html> . La prctica hace al maestro! Una cosa ms: 1. Coloca la etiqueta !DOCTYPE HTML. 2. Coloca las etiquetas html de inicio y de cierre. 3. Escribe lo que quieras en medio de las etiquetas html . 4. Presiona Ejecutar para ver tu trabajo! RESPUESTA: <!DOCTYPE HTML <html>Tecnico en Sistemas</html>

    Hide hint Sintete libre de echarle una mirada a los ejercicios anteriores si olvidaste como se ve exactamente una etiqueta.

    4. Haz la cabecera Todo dentro de nuestro archivo HTML ir en medio de las etiquetas de inicio <html> y de cierre </html> . El archivo siempre consiste de dos partes: la cabecera y el cuerpo. Vamos a concentrarnos en la cabecera. a. Tiene una etiqueta de inicio y una de cierre. b. La cabecera incluye informacin importante, como el ttulo de la pgina web. c. El ttulo son las palabras que vemos en la etiqueta (por ejemplo, el ttulo de esta pgina es "Introduccin a HTML"). 1. Aade una etiqueta de cabecera de inicio y una de cierre. Consulta la Sugerencia para saber ms. 2. En medio de las etiquetas de cabecera, aade etiquetas de inicio y de cierre para el ttulo. 3. En medio de las etiquetas de ttulo, escribe el nombre de tu pgina web como Pgina Web de Malo Hasta Los Huesos S.A. 4. Presiona ejecutar. Observa cmo la pestaa Resultados cambia su nombre!

    Hide hint El editor de Codecademy automticamente te da la etiqueta de cierre. Tambin ubica los espacios por ti. Eso es hacer trampa? Qu pasa si sales de Codecademy y lo quieres hacer en el mundo real? Buenas noticias: los editores que se usan en el desarrollo web por lo general tienen esta funcionalidad. Est integrada para ayudarnos. Recuerda: los espacios tcnicamente NO se requieren para que el computador entienda lo que est pasando. Son para ayudarnos cuando tenemos que editar algo. Las etiquetas de HTML son <html> y </html> . Cules crees que sern las etiquetas de la cabecera y del cuerpo ?

    5. Prrafos en el cuerpo Hemos configurado muchas de las cosas bsicas de tu archivo HTML para ti. Lo hicimos para que no te enfadaras con nosotros por tanta repeticin; aprndelas muy bien! Hemos aprendido acerca de las etiquetas de inicio y de cierre. Cuando colocamos contenido en medio de las etiquetas, el trozo completo de cdigo es llamado un elemento.
    elemento = <etiqueta de inicio> + contenido + <etiqueta de cierre>

    Observa que ahora tenemos las dos etiquetas del ttulo y del cuerpo! El contenido en el cuerpo es lo que ser visible en la pgina real.

    1. Escribe el nombre de tu pgina en medio de las etiquetas del ttulo. Puede ser cualquier cosa! 2. Coloca las etiquetas de cierre y de inicio del cuerpo debajo de la etiqueta de cierre de cabecera. 3. Vamos a crear prrafos dentro del cuerpo! Cada prrafo requiere etiquetas de inicio y de cierre: <p> y </p> . Colocamos el contenido en medio de las etiquetas. 4. En medio de las etiquetas de cuerpo, crea dos prrafos y escribe contenido en cada prrafo. (Para esto se requerirn 2 pares de etiquetas p).

    Debajo de la etiqueta de cierre de cabecera, el cdigo debera verse ms o menos as:


    <body> <p> El contenido del primer prrafo </p> <p> El contenido del segundo prrafo</p> </body>

    Y, por supuesto, la ltima lnea siempre debe terminar con </html> .

    You might also like