Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Guia HTML #1

    Hochgeladen von

    Richard Leonardo Jaimes Sanchez
    853 Ansichten27 Seiten
    P POINT CON LOS CONCEPTOS DE HTML INICIALES

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    P POINT CON LOS CONCEPTOS DE HTML INICIALES

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    853 Ansichten27 Seiten

    Guia HTML #1

    Hochgeladen von

    Richard Leonardo Jaimes Sanchez
    P POINT CON LOS CONCEPTOS DE HTML INICIALES

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 27

    INFORMATICA Y

    TECNOLOGIA
    Richard leonardo jaimes Sanches

    EL HTML

    Siglas deHyperText Markup


    Language(lenguaje de marcas de
    hipertexto)
    HTML es el lenguaje que se emplea para
    el desarrollo de pginas de internet.
    Este lenguaje est constituido de
    elementos que el navegador interpreta y
    las despliega en la pantalla de acuerdo a
    su objetivo.
    Para poder crear una pgina HTML se
    requiere un simple editor de texto.

    ESTRUCTURA INTERNA DE UNA PAGINA


    HTML

    Las instrucciones HTML estn encerradas


    entre los caracteres: < y >
    Muchos elementos HTML requieren una
    marca de comienzo y otra de
    finalizacin.
    La estructura bsica de una pgina
    HTML es

    <html>
    <head>
    </head>
    <body>
    Cuerpo de la pgina.
    </body>
    </html>

    Una pgina HTML es un archivo que


    generalmente tiene como extensin los
    caracteres html. Por ejemplo podemos
    llamar a nuestra primer pgina con el
    nombre: pagina1.html
    Toda pgina comienza con la
    marca:<html> y finaliza con la
    marca:</html>
    El lenguaje HTML no es sensible a
    maysculas y minsculas

    SECCIONES

    Una pgina HTML tiene dos secciones


    muy bien definidas:
    la cabecera:
    <head>
    </head>

    Y el cuerpo de la pgina
    <body>
    Cuerpo de la pgina.
    </body>

    Uso del procesador de texto

    Copiamos en el block de notas o en


    wordpad el texto de la pagina en HTML
    Lo guardamos como el nombre que se
    quiera con la extensin

    html

    Luego para ver el resultado damos doble


    clic sobre el archivo y se debe abrir el
    navegador con el resultado

    EJEMPLO 1
    Confeccionar una pgina que muestre los
    nombres de 5 idiomas separados por un guin.
    <html>
    <head>
    </head>
    <body>
    INGLES ESPAOL FRANCES PORTUGUES CHINO
    </body>
    </html>

    Salto de lnea <br>

    un navegador no tiene en cuenta la tecla


    ENTER
    Para indicarle al navegador que
    queremos que contine en la prxima
    lnea debemos hacerlo con el elemento
    HTML <br> Viene de break

    EJEMPLO 2

    Implementemos una pgina que muestre los


    nombres de distintos Idiomas uno por lnea:
    <html>
    <head>
    </head>
    <body>
    INGLES<br>
    ESPAOL<br>
    FRANCES<br>
    PORTUGUES<br>
    CHINO
    </body> </html>

    TITULOS

    Para titulos se manejas 6 tamaos de


    letra
    El codigo de para los titulos es
    <h1>
    texto
    </h1>

    TEORIA DE LOS CODIGOS DE COLOR EN


    HTML

    Tiene algn significado esta extraa combinacin de letras y nmeros? Pues la


    respuesta es S y as es como funciona:)
    Formato de los cdigos HTML:
    Cada cdigo HTML comprende el smbolo # y 6 letras o nmeros. Estos nmeros
    se expresan en el sistema de numeracin hexadecimal. Por ejemplo FF en
    hexadecimal representa el nmero 255 en Decimal.
    Significado de los smbolos:
    Significado de los smbolos: Los dos primeros smbolos del cdigo de color HTML
    representan la intensidad del color rojo. 00 es el menos intenso y FF es el ms
    intenso. El tercer y el cuarto nmero representan la intensidad del verde y el quinto y
    el sexto representan la intensidad del azul. As, con esta combinacin de la
    intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de
    corazn;)

    EJEMPLOS

    #FF0000- Con este cdigo HTML le decimos al navegador que


    muestre la mxima cantidad de rojo y nada de verde ni de azul. El
    resultado es evidentemente el color rojo puro:
    #00FF00- Este cdigo HTML muestra solo el verde y nada de rojo ni
    de azul. El resultado es:
    #0000FF- Este cdigo HTML muestra solo el azul y nada de rojo ni
    de verde. El resultado es:
    #FFFF00- Con la combinacin de color rojo y verde obtenemos el
    amarillo:
    #CCEEFF- Cogemos un poco de rojo, un poco ms de verde y el
    mximo de azul para obtener el color del cielo:

    COMO SE USAN
    Usar los cdigos de colores HTML para el color de fondo del
    sitio web:
    <body style="background:#80BFFF">
    Usar los cdigos de colores HTML para configurar el color de la
    fuente/texto:
    <span style="color:#80BFFF">
    Usar los cdigos de colores HTML para el color de fondo de las
    tablas:
    <table style="background:#80BFFF">
    Usar los cdigos de colores HTML para los colores de los
    enlaces:
    <a style="color:#80BFFF">

    TAREA

    HACER SU HOJA DE VIDA, LA CUAL DEBE


    CONTENER SEPARADO POR TITULOS ASI
    DATOS PERSONALES
    DATOS DE ACUDIENTES
    FORMACION ACADEMICA
    CURSO

    ACTIVIDADES DE REPASO

    Confeccione una pgina con las marcas


    mnimas que debe tener y en el cuerpo
    de la misma coloque su nombre y
    apellido en mayscula y debajo de este
    la lista de sus compaeros de fila. Llame
    este archivo como Pagina 1. html
    A cada nombre le va a colocar un color
    diferente. Llame a este archivo .

    ACTIVIDADES

    Edite una pagina llmela


    ejercicio3.html ,que muestre los
    siguientes conceptos en diferentes
    colores con un fondo de color azul
    claro:
    INFOGRAFIA
    WEARABLE
    ANDROID

    TAREA

    BUSQUE EN INTERNET COMO SE LE


    COLOCAN LOS ATRIBUTOS DE TIPO DE
    LETRA Y TAMAO EN EL CODIGO HTML

    INSERCION DE IMAGENES
    Para insertar una imagen en su pagina
    web local, escrita en cdigo HTML, esta
    imagen debe estar localizada en el mismo
    sitio donde usted guarde la pagina.
    Preferiblemente use archivos jpg, gif, png
    Sintaxis es:
    <IMG SRC="immagine.gif">
    Nombre del archivo

    Algunas caractersticas o
    atributos
    ANCHO Y ALTO de la imagen.
    WIDTH y HEIGHT
    <IMG SRC="immagine.gif"
    WIDTH=178 HEIGHT=180 >

    Ejemplo 4
    Escriba en una pagina web, el concepto de tiburon e incluya
    una imagen al final de la misma.
    <span style="color:#80BFFF">
    TIBURON: Se caracterizan por ser grandes depredadores,
    <BR>
    Los tiburones incluyen desde especies pequeas hasta
    eltiburon ballena <BR>
    De las mas de 375 especies de tiburones encontradas<BR>
    Solo una es responsable de ataques a humanos<br>
    <IMG SRC=tiburon.jpg" WIDTH=178 HEIGHT=180>
    </body>
    </html>

    TIPO DE LETRA Y TAMAO


    Use el cdigo FONT como a continuacin se
    describe para darle estos atributos al texto.
    Junto a FACE el tipo de letra: times new roman,
    arial, courier new, courier, roman
    Junto a SIZE el tamao que va de 0 a 7
    Junto a COLOR el color usando el nombre en
    ingles o un numero en hexadecimal
    <FONT FACE="arial" SIZE=5 COLOR=red>
    <FONT FACE="arial" SIZE=5 COLOR=red>

    ACTIVIDAD

    EDITE UNA PAGINA QUE INCLUYA COLOR DE


    FONDO AZUL OSCURO, COLOR DE TEXTO
    BLANCO, Y UNA IMAGEN Y EL CONCEPTO
    SMARTPHONE. LLAMELA TAREA.HTML
    ESCRIBA DEBAJO LA PALABRA DRONE (7 VECES),
    CON LAS SIGUIENTES CARACTERISTICAS:
    7 TAMAOS DIFERENTES
    DIFERENTE TIPO DE LETRA, INDICANDO QUE
    LETRA ES
    Y CON LOS SIGUIENTES COLORES: AZUL CLARO,
    BLANCO, AMARILLO, GRIS, ROJO, VERDE, NARANJA

    Otros atributos para la


    imagen
    BORDER
    Con este se le puede aplicar borde a la imagen.
    HSPACE y VSPACE
    Se establece la distancia en pxel de la imagen
    a los objetos que se encuentran a los cuatro
    lados de la misma
    ALIGN
    define la posicin de la imagen respecto al
    texto colocado inmediatamente antes o
    despus de la misma

    HAY VARIAS OPCIONES PARA ESTE ATRIBUTO


    ALIGN=top: alinea la primera lnea de texto con la
    parte superior de la imagen
    ALIGN=middle: alinea la primera lnea del texto con el
    centro de la imagen
    ALIGN=bottom: alinea la primera lnea de texto con la
    parte inferior de la imagen.
    ALIGN=left: el texto se coloca a la derecha de la
    imagen empezando desde la parte superior de la misma
    ALIGN=right: el texto se coloca a la izquierda de la
    imagen empezando desde la parte superior de la misma

    EJEMPLO

    <IMG SRC="imagen.jpg"
    WIDTH=178 HEIGHT=180
    BORDER=2 VSPACE=3
    HSPACE=3ALIGN=right>

    EJERCICIOS

    CONSTRUIR UNA PAGINA WEB QUE CONTENGA


    EL CONCEPTO DE DRONE, CON UNA IMAGEN
    QUE APAREZCA DEBAJO DEL MISMO CON UN
    BORDE DE 3 DE GRUESO. BAJO ESTE EL
    CONCEPTO DE RADIO CON IMAGEN A LA
    DERECHA DEL MISMO, BORDE 3.
    ESCOJA 2 CONCEPTOS MAS Y AGREGELOS A LA
    PAGINA USANDO CAMBIANDO LOS DEMAS
    ATRIBUTOS COMO UD QUIERA
    EL ANCHO Y LOS COLORES DE TEXTO Y FONDO
    LO DEFINEN UDS.

    Das könnte Ihnen auch gefallen