Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML 5

    Cargado por

    Leila Cura
    10 vistas76 páginas
    Leccion 1

    Título original

    html 5

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Leccion 1

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    10 vistas76 páginas

    HTML 5

    Cargado por

    Leila Cura
    Leccion 1

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 76

    Sección 4: HTML 5

    Lección 1: Construye
    tu primer sitio web
    Hola y bienvenidos a una sección muy
    emocionante.
    ¿Por qué es emocionante?
    Bueno, finalmente vamos a codificar.
    Vamos a comenzar aprendiendo HTML,
    y finalmente vamos a construir nuestro
    primer sitio web.
    Para poder comenzar, necesitamos
    configurar nuestro entorno de trabajo
    Para hacerlo vamos a abrir Google
    Chrome y vamos a buscar "sublime text
    3".
    Sublime Text 3 es un editor de texto
    que muchos desarrolladores usan en su
    trabajo diario.
    Podemos descargar versiones para
    Windows, Linux y Mac OS. Así que
    vamos a descargar la versión para el
    sistema operativo que estamos usando
    en este momento.
    Una vez descargado, vamos a proceder
    a instalarlo, y luego a abrirlo.
    Aquí tenemos a Sublime Text. Pero,
    ¿qué es un editor de texto? Un editor de
    texto es un programa que nos permite
    escribir código.
    Podemos ver en la parte inferior
    derecha de la ventana de Sublime Text
    que aparece la leyenda "Plain Text"
    (Texto Plano, Texto Sin Formato).
    Podemos tipear todo lo que queramos y
    al parecer no exista ninguna diferencia
    con cualquier editor de texto como el
    Bloc de Notas, pero Sublime Text está
    orientado a la programación.
    Si hacemos click en "Texto Plano",
    tendremos un montón de opciones
    sobre el tipo de código que estamos
    escribiendo. En nuestro caso estamos
    escribiendo un archivo HTML, por lo
    que elegiremos esta opción.
    Luego de hacer click en HTML, vemos
    que nada cambia, excepto la parte
    inferior derecha, donde ahora hace
    referencia a que estamos escribiendo
    un archivo HTML.
    Pero ahora, si escribimos algo, todo se
    sigue viendo igual.
    Pero si comenzamos a escribir HTML,
    Sublime Text lo reconocerá y nos
    ayudará con la sintaxis. Por lo tanto si
    escribimos ahora algo en HTML,
    veremos que tenemos parte del texto
    resaltado en color.
    Por ahora vamos a escribir HTML, pero
    podemos ver que entre las diversas
    opciones también se encuentran CSS y
    Javascript, los cuales aprenderemos
    más adelante.
    Ahora escojamos HTML y escribamos
    nuestra primera página web.
    Para hacer una página web,
    necesitamos escribir HTML (Hypertext
    Markup Language, Lenguaje de
    Marcado de Hipertexto).
    Tengamos un poco de paciencia, esto
    que vamos a ver quizás sea algo nuevo,
    pero tengan en cuenta que es
    exactamente lo que debe tener cada
    archivo HTML. Estas son las reglas que
    todos los archivos HTML deben seguir, y
    se escriben así:
    Definimos un tipo de documento. No se
    preocupen, en la próxima lección
    veremos en detalle lo que significa.
    Luego tenemos una etiqueta HTML de
    apertura: <html>
    También tenemos una etiqueta HTML
    de cierre: </html>
    En la segunda parte tenemos una
    cabecera, o head, de apertura: <head>
    También tenemos una etiqueta de
    cabecera de cierre: </head>
    Podemos ver aquí algunos patrones de
    indentación que usamos. Este espacio
    al inicio de algunas de las líneas nos
    permite mejorar la legibilidad del
    código, ya que podremos identificar
    visualmente y de manera fácil los
    distintos "bloques" de código.
    Tenemos también un cuerpo, o body,
    también de apertura: <body>
    También tenemos una etiqueta body de
    cierre: </body>
    Y finalmente en la cabecera tenemos
    una etiqueta llamada title, o título.
    Tenemos una etiqueta título de
    apertura: <title>
    También tenemos una etiqueta título
    de cierre: </title>
    Bueno, todo este texto aquí es la regla
    que todo archivo HTML debe seguir. Es
    el esqueleto que todo archivo HTML
    debe tener.
    Ahora intentemos algo. Vamos a
    guardar este archivo en el escritorio de
    nuestra computadora y lo vamos a
    llamar "index.html".
    Podemos ver que Sublime Text
    completa automáticamente la
    extensión html por nosotros.
    Guardamos el archivo, y por fin
    tenemos nuestro primer documento
    HTML llamado "index.html".
    Ahora vamos a arrastrar este archivo
    desde nuestro escritorio hacia Google
    Chrome para abrirlo. Vemos que no
    pasa nada. Tenemos una página
    totalmente en blanco.
    Ahora vamos a agregar algo de texto a
    nuestro archivo. Vamos a las etiquetas
    "title", y entre la etiqueta de apertura y
    la de clausura escribamos: "¡Mi primer
    sitio web!".
    Ahora en el cuerpo vamos a escribir:
    "¡Hola Mundo!".
    Guardamos el archivo, yendo al menú
    "Archivo" y escogiendo la opción
    "Guardar".
    Ahora si actualizo la página en Google
    Chrome, por fin veo texto en mi
    primera página web.
    Tenemos "¡Hola Mundo!" en el cuerpo
    de la página, y tenemos "¡Mi primer
    sitio web!" en el título de la pestaña.
    En la barra de direcciones podemos ver
    que el archivo que hemos abierto se
    encuentra en el escritorio de nuestra
    computadora.
    Si recuerdan lo que vimos en lecciones
    anteriores, podemos darnos cuenta que
    acabamos de hacer algo muy similar a
    lo que hace un servidor.
    Cuando ingresamos a www.google.com
    los servidores nos envían un archivo
    HTML. Cuando arrastramos nuestro
    archivo HTML desde nuestro escritorio
    hacia Google Chrome, imitamos a un
    servidor, ya que le estamos enviando
    un archivo a nuestro navegador web
    para que lo cargue.
    Y debido a que los navegadores están
    diseñados para cargar archivos HTML,
    puede leer la sintaxis de un archivo y
    verificar si se trata de un archivo HTML,
    y en caso de que lo sea, verifica si se
    especifica un título en la cabecera, y
    verifica todo lo especificado en el
    cuerpo del archivo.
    Estas con las reglas predeterminadas
    de HTML que verás todo el tiempo. Es
    un poco confuso al principio, pero
    debes recordar todas estas etiquetas:
    html, head, title, body.
    Cada una de estas etiquetas deben
    tener una apertura y un cierre. Existen
    algunas excepciones a esta regla, las
    cuales veremos más adelante.
    Por ahora esto es lo que debemos
    recordar.
    Sublime Text tiene un atajo que
    permite incorporar todo este esqueleto
    para archivos HTML, sin necesidad de
    que lo escribas completamente cada
    vez que crees un nuevo archivo HTML.
    La forma de hacerlo es escribir "html",
    luego presionamos la tecla "Tab", y
    veremos que se carga
    automáticamente todo el esqueleto de
    nuestro archivo HTML.
    Ahora es tu turno de practicar, así que
    manos a la obra y crea tu primer sitio
    web. Puede colocar el título y el cuerpo
    que quieras.
    En la siguiente lección vamos a
    comenzar a extender nuestro primer
    sitio web.
    ¡Nos vemos vemos en la próxima!
    ¡Adios!
    Siguiente lección

    Índice de contenidos

    También podría gustarte