Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML

    Enviado por

    Luis Carranza
    8 visualizações10 páginas
    Guía primeros pasos

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Guía primeros pasos

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    8 visualizações10 páginas

    HTML

    Enviado por

    Luis Carranza
    Guía primeros pasos

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 10

    HTML

    HTML es un código simple que es interpretado por tu navegador web -


    como Chrome, Firefox o Safari - para mostrar una página web al usuario.

    HTML significa HyperText Markup Language - en español, Lenguaje de


    Marcas de HyperTexto. HyperText -hipertexto en español- significa que es
    un tipo de texto que soporta hipervínculos entre páginas. Markup significa
    que hemos tomado un documento y lo hemos marcado con código para
    decirle a algo (en este caso, un navegador) cómo interpretar la página. El
    código HTML está construido con etiquetas, cada una comenzando con < y
    terminando con >. Estas etiquetas representan elementos de marcado.
    Estructura básica

    • Cada página comienza con: < HTML > .


    • A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
    • Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las
    instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.
    • La página acabará con < /HTML > .
    • Es decir:

    <!doctype html> (html5)


    <HTML> (Representa la raíz de un documento HTML )
    <HEAD>
    Definiciones de la cabecera
    </HEAD>
    <BODY>
    Instrucciones HTML
    </BODY>
    </HTML>
    Cabecera
    La cabecera de un documento está delimitada por las etiquetas < HEAD > y </HEAD >
    Sus componentes son opcionales. El más importante es <TITLE> , que permite escribir el
    título del documento. El título no se muestra en la página, sino en la parte superior de la
    ventana del visualizador, como identificador en los bookmarks y en la history list. Se
    utiliza de la siguiente forma:

    <HEAD>
    <TITLE>Título del documento HTML</TITLE>
    </HEAD>
    Cuerpo

    Es la parte delimitada por <BODY> y < /BODY > . Puede llevar los siguientes atributos:
    BACKGROUND="imagen": define el fondo. Más adelante veremos más sobre imágenes.

    • BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o si ésta
    imagen no puede obtenerse.. Más adelante veremos más sobre colores. Por ahora nos basta
    saber que para los colores básicos se puede utilizar su nombre en inglés: white, blue, red,
    green ...
    • TEXT="######": color del texto. Por defecto será negro.
    • LINK="######": color de los links. Por defecto será azul.
    • VLINK="######": color de los links visitados. Por defecto será violeta.
    CREAR LA PIMERA PLANTILLA
    Crear una plantilla significa crear un archivo de plantilla. Todo es un archivo

    1. Crear una carpeta dentro de la Carpeta de Aplicaciones llamada templates, y dentro de esta cree otra carpeta con
    el mismo nombre de la Aplicación (todo esto se lo para más adelante facilitarnos la vida)
    2. Crear un archivo llamado post_list.html, dentro de la carpeta creada y escribir lo siguiente:

    <!doctype html>
    <html>
    <body>
    <p>Holaaa!</p>
    <p>Mi primer programa en HTML!</p>
    </body>
    </html>
    Cabeza y cuerpo

    Cada página HTML también se divide en dos


    elementos: head y body.
    • head es un elemento que contiene
    información sobre el documento que no se <!doctype html>
    <html>
    muestra en la pantalla. <head>
    • body es un elemento que contiene todo lo <title>Mi primera página</title>
    </head>
    que se muestra como parte de la página
    web. <body>
    <p>Holaaa!</p>
    <p>Mi primer programa en HTML!</p>
    Usamos <head> para decirle el navegador </body>
    </html>
    acerca de la configuración de la página y
    <body> para decir lo que realmente está en la
    página.

    Por ejemplo, puedes ponerle un título a la


    página web dentro de la <head>, así:
    Personaliza tu plantilla

    • <h1>Un título</h1> - para tu título más importante


    • <h2>Un subtítulo</h2> - para el título del siguiente nivel
    • <h3>Un subsubtítulo</h3> - ... y así hasta <h6>
    • <p>Un párrafo de texto</p>
    • <em>texto</em> - pone en cursiva tu texto
    • <strong>texto</strong> - pone en negrita tu texto
    • <br> va en otra línea (no puedes poner nada dentro de br y no hay etiqueta de cierre)
    • <a href="https://djangogirls.org">link</a> - crea un vínculo
    • <ul><li>primer elemento</li><li>segundo elemento</li></ul> - crea una lista, ¡igual que esta!
    • <div></div> - define una sección de la página
    <html>
    <head>
    <title>Django Girls blog</title>
    </head>
    <body>
    <div>
    <h1><a href="/">Django Girls Blog</a></h1>
    </div>
    <div>
    <p>published: 14.06.2014, 12:14</p>
    <h2><a href="">My first post</a></h2>
    <p>Escribir un párrafo de 3 lineas</p>
    </div>
    <div>
    <p>published: 14.06.2014, 12:14</p>
    <h2><a href="">My second post</a></h2>
    <p>Escribir otro párrafo de 3 líneas</p>
    </div>
    </body>
    </html>
    Investigar y aplicar Emmet

    Você também pode gostar