Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Ejercicios de Lenguaje HTML

    Cargado por

    Libreria Mana
    14 vistas6 páginas
    Aprende codigos html

    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
    Aprende codigos html

    Copyright:

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

    Ejercicios de Lenguaje HTML

    Cargado por

    Libreria Mana
    Aprende codigos html

    Copyright:

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

    LENGUAJE HTML

    Instrucciones: realizaremos la mayoría de ejercicios juntos, los que queden pendientes por favor
    hacerlos en casa y enviar evidencia de su trabajo.

    Crea una carpeta titulada: Practica 1 HTML. En esta carpeta guardaremos todos los
    ejercicios a realizar hoy.

    Ejercicio 1

    1.- Abre el Bloc de Notas y escribe el siguiente texto:

    <HTML>

    <HEAD>

    <TITLE>tu nombre </TITLE>

    <HEAD>

    <BODY>

    <CENTER><H1>Pagina Web usando Lenguaje HTML</H1></CENTER>

    <HR>

    <P> Primera página de prueba

    </BODY>

    </HTML>

    2.- Guárdalo con el nombre pag01tunombre.html (yo siempre guardo también el .txt en caso de
    necesitar hacer más cambios en el bloc de notas.

    3.- Arranca el navegador y abre el fichero que acabas de crear.


    Ejercicio 2
    1.-Edita el fichero pag01tunombre.html y pon el siguiente cuerpo a la página.

    <H1>TÍTULO 1</H1>
    Guárdalo con el nombre pag02tunombre.html y luego
    ábrelo con el navegador. <H2>TÍTULO 2</H2>

    <H3>TÍTULO 3</H3>

    <H4>TÍTULO 4</H4>

    <H5>TÍTULO 5</H5>

    <H6>TÍTULO 6</H6>
    Ejercicio 3
    1.- Edita el fichero pag01tunombre.html y pon en el cuerpo dos o tres párrafos (de tres o cuatro
    líneas cada párrafo). Separa los párrafos sin poner etiquetas, sólo pulsando Intro una o dos veces.
    Sálvalo, y luego edítalo con tu navegador. Observa que los párrafos se ven juntos.

    2.- Sigue con la edición del fichero, pon las etiquetas <P> a cada párrafo. Guarda el fichero y ábrelo
    con el navegador.

    3.- Aumenta la separación entre párrafos con <BR> y <P>.

    Ejercicio 4:

    Para comprobar cómo se pueden alinear textos.


    Etiquetas Utilidad
    <CENTER> </CENTER> Centrar todo el text del párrafo.
    <DIV ALIGN=x> </DIV> Justificar el texto de los párrafos que abarca a la
    izquierda (ALIGN=LEFT), derecha (RIGHT), al
    centro (CENTER) o a ambos márgenes (JUSTIFY),
    pero no inserta ninguna línea antes de él.
    <P ALIGN=x> ALIGH se puede usar para justificar el texto de ese
    párrafo a la izquierda (ALIGH=LEFT), derecha
    (RIGHT), al centro (CENTER) o a ambos márgenes
    (JUSTIFY)
    <PRE> </PRE> Texto preformateado que debe presentarse tal
    como se escribe.
    <ADDRESS> </ADDRESS> Se usa para escribir direcciones electrónicas y
    firmas de las páginas.
    <BLOCKQUOTE> </BLOCKQUOTE> Para sangrar un texto. Es el estilo para citar un
    texto.

    1.- Edita el fichero pag01tunombre.html y justifica todos los párrafos con <DIV align=justify>.
    Comprueba en el navegador la presentación.
    2.- Ahora centra el párrafo y ajusta a la derecha el segundo. Comprueba el resultado.
    Ejercicio 5:
    Para cambiar el aspecto de la letra

    Etiquetas Utilidad
    <B> </B> Pone el texto en negrita
    <I> </I> Representa el texto en cursida (itálica)
    <U> </U> Para subrayar algo
    <TT> </TT> Tipo teletipo (texto de máquina de escribir)
    <SUP> </SUP> Letra superíndice
    <SUB> </SUB> Letra subíndice
    <BIG> </BIG> Incrementa el tamaño del tipo de letra
    <SMALL> </SMALL> Disminuye el tamaño del tipo de letra
    <FONT size=n> </FONT> Pone el tamaño de las letras, siendo n un número: n=
    1,2,3,4,5,6,7
    También puede ser n= +1, +2, +3, +4. -1, -2 indicando
    entonces tamaño relativo al de n=3.

    1.- Edita el fichero pagina01tunombre.html y pon a las frases del primer párrafo las etiquetas
    adecuadas para que aparezcan en negrita, cursiva y teletipo.

    2.- Usa la etiqueta <FONT> con size = 1,2, etc., para tener las primeras palabras del segundo
    párrafo en tamaño creciente.

    3. Ahora usa la etiqueta <FONT> con size = + 1, - 1, + 2, - 2, etc. para tener las primeras palabras
    del segundo párrafo en tamaño creciente y decreciente.

    Ejercicio 6:

    Para comprobar los parámetros de los colores. Guía de colores

    BLACK NAVY BLUE TEAL AQUA


    SILVER GRAY YELLOW GREEN OLIVE LIME
    RED MAROON WHITE FUCHSIA PURPLE

    1.- Haz un fichero colores01tunombre.html con varias líneas como la siguiente, una para cada uno
    de los colores de la tabla anterior.

    <FONT color=”red”>Rojo</FONT>
    Ejercicio 7:
    1.- Haz un fichero colores02tunombre.html con el siguiente texto:

    <FONT COLOR=”#00FF00”>Verde 100%</FONT>


    <FONT COLOR=”#008F00”>Verde 50%</FONT>
    <FONT COLOR=”#004F00”>Verde 25%</FONT><P>
    <FONT COLOR=”#0000FF”>Azul 100%</FONT>
    <FONT COLOR=”#00008F”>Azul 50%</FONT>
    <FONT COLOR=”#00004F”>Azul 25%</FONT>

    Guárdalo y léelo en tu navegador.


    2.- Cambia los colores RGB anteriores y observa los resultados.
    3.- Experimenta con los códigos para obtener el color amarillo.

    Ejercicio 8:
    Para comprobar cómo hacer hipertexto. Los mecanismos más usados son los siguientes:
    1.- Haz una página llamada interesantesminombre.html donde poner enlaces a sitios interesantes.
    Por ejemplo, puedes empezar con el siguiente texto:

    <HTML>
    <HEAD>
    <meta http-equiv=”Content-Type” content=”text/html; char-set=ISO-8559-1”>
    <TITLE>Sitios de interés</TITLE>
    </HEAD>
    <BODY>
    <CENTER>
    <H1>Mis páginas favoritas</H1>
    </CENTER>
    <HR>
    Estas son mis páginas favoritas:
    <P>Duolingo<a href="https://es.duolingo.com/">Duolingo.com</a>
    <BR> <a href="http://www.google.com">Google</A>
    </BODY>
    </HTML>
    Ejercicio 9:

    Para comprobar cómo se hacen listas.

    Listas desordenadas:
    Código HTML RESULTADO
    <UL>
    <LI> Mamíferos • Mamífero
    <LI> Peces • Peces
    <UL> • Sardina
    <LI> Sardina • Bacalao
    <LI> Bacalao • Aves
    </UL>
    <LI> Aves
    </UL>

    Listas ordenadas:
    Código HTML
    <OL>
    <LI> Primera cosa
    <LI> Segunda cosa
    <LI> Tercera cosa
    </OL>

    Ejercicio 10:
    Haz una lista desordenada con los nombres: Desayuno, almuerzo, Merienda y Cena.

    Convierte en ordenada la lista anterior.

    Ejercicio 11:

    Para incluir gráficos e imágenes en una página utilizaremos la etiqueta <IMG> de esta manera:

    <IMG SRC="fichero_grafico"" ALT="description"

    El parámetro SRC especifica el nombre del fichero que contiene el gráfico. Los formatos de imagen
    deben ser JGP o GIF. El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en
    aquellos navegadores que no lo muestren.

    Con los parámetros HEIGHT y WIDTH se puede indicar siempre: la altura y la anchura del gráfico en
    píxeles.

    <IMG SRC="animales/gato.jpg" ALT="Gato" Width=100 Height=145

    El nombre del fichero imagen debe hacer referencia a la carpeta de origen del mismo. No se pondrá
    si ésta es la misma que la del documento HTML que estamos elaborando.
    Se puede alinear una imagen a la izquierda o a la derecha de la página. Esto se consigue con los
    parámetros ALIGN= RIGHT (imagen a la derecha) y ALIGN=LEFT (la imagen queda a la
    izquierda).

    También se puede poner una imagen como fondo de toda la página. Esto se consigue poniendo el
    parámetro BACKGRONUD="imagen" en la etiqueta <BODY>, siendo imagen el nombre del fichero
    gráfico GIF o JPG.

    <BODY BACKGROUND="animales/gato.gif">

    Apoyándote en la explicación anterior, edita el archivo del ejercicio nº 3 e inserta una imagen
    centrada detrás de cada párrafo.

    Ejercicio 12:

    Edita el archivo No. 6 y coloca como imagen de fondo de la página una paleta de colores que
    captures en Internet.

    Referencias:

    Adaptado de : https://sites.google.com/site/pcraarb/creacion-de-paginas-web-lenguaje-html-
    1/creacion-de-paginas-web-lenguaje-html con fines educativos.

    INDEX: https://sites.google.com/site/pcraarb/creacion-de-paginas-web-lenguaje-html-1

    Colores: http://html-color-codes.info/codigos-de-colores-hexadecimales/

    También podría gustarte