JUN.26.2023 ACTIVIDADES CODIGO HTML.

 ACTIVIDADES

PÁGINAS

WEB

PRÁCTICA   1: Plantilla

Diseñar plantilla de documento HTML para iniciar.  


  1.  Comenzar por digitar el código HTML, utilizando un editor de texto cualquiera, por ejemplo bloc de notas, gedit, entre otros

  2.  Como cualquier página HTML, la estructura inicia con la cabecera y el cuerpo del documento, ambas partes situadas entre la etiqueta de apertura <html> y su análoga de cierre </html>. 

  3. La cabecera del documento sería:

<html>

<head>

<title>plantilla</title>

</head>

  1.  El cuerpo del documento quedaría como el siguiente:

<body>

<!--etiquetas que forman el cuerpo--> Esta pagina es la primera que hacemos.

</body>

  1. Por último, terminar con la etiqueta de finalización de un documento html,</html>. 

  2.  Guardaremos el documento con el nombre “Plantilla” y la extensión  .html    “Plantilla.html”

  3.  Por lo tanto el documento completo será:

<html>

   <head>

        <title>plantilla</title>

   </head>

   <body>

        <!--etiquetas que forman el cuerpo-->         Esta pagina es la primera que hacemos.

   </body>


PRÁCTICA  2: Acentos, caracteres especiales y comentarios

   

  1. La cabecera del documento junto con la etiqueta de apertura sería:

             <html>

                <head>

                    <title>Mi primera p&aacute;gina en html</title>

                </head>

  1. El cuerpo del documento quedaría como el siguiente:

  <body> las etiquetas aprendidas  son las que forman la estructura b&aacute;sica de un documento html: &lt;html&gt;, &lt;head&gt;, &lt;title&gt; y &lt;body&gt;. tambi&eacute;n hemos aprendido a comentar nuestras p&aacute;ginas con las etiquetas &lt;!-- y --&gt;. </body>

  1. Por último, incluiremos la etiqueta de finalización de un documento HTML:

 </html>

  1. Guarda el ejercicio con el nombre practica2.html

    PRÁCTICA  3: Tamaños y formatos

    En este ejercicio, crear un documento HTML para iniciar con el tamaño de la fuente utilizado también un encabezado y un efecto de letra un poco peculiar. Procure que el ejercicio quede lo más parecido a la imagen final.

    1. La cabecera del documento junto con la etiqueta de apertura sería:

    <html>

         <head>

             <title>Ejercicio sobre tama&ntilde;os y formatos</title>      </head>

    1. El cuerpo del documento quedaría como el siguiente:

    <body>

    <p style="font-size: 40px;">Esto está a un tamaño de 40px</p>

    <p style="font-size: small;">Esto está a un tamaño small</p>

    <p style="font-size: medium;">Esto está a un tamaño medium</p>

    <p style="font-size: large;">Esto está a un tamaño large</p>

    <p style="font-size: xx-large;">Esto está a un tamaño xx-large</p>

    <p style="font-size: xx-small;">Esto está a un tamaño xx-small</p>

    <p style="font-size: 2%;">Esto está a un tamaño 2%</p>

    <p style="font-size: 20%;">Esto está a un tamaño 20%</p>

    <p style="font-size: 80%;">Esto está a un tamaño 80%</p>

    <p style="font-size: 200%;">Esto está a un tamaño 200%</p>

    <p style="font-size: 300%;">Esto está a un tamaño 300%</p>

    <h2>Pruebas de formatos</h2>

    Esto es normal

    <sub>y esto es subíndice: sub </sub><br>

    Esto es normal <sup>y esto es superíndice: sup </sup><br> <br> 

    </body>

    </html>

    3. Guardar como   practica3.html

    PRÁCTICA  4: Líneas

    Crearemos una página para practicar con líneas horizontales. Esta herramienta, junto con todas sus variedades, es muy útil para dar un aspecto más profesional a nuestras páginas. Procure que el ejercicio quede lo más parecido a la imagen que se observa al final.

    1. La cabecera del documento junto con la etiqueta de apertura sería:

    <html>

         <head>

              <title>Ejemplos de l&iacute;neas horizontales</title>

    </head>

    1. El cuerpo del documento quedaría como el siguiente:

    <body>

    <p>Línea estándar:</p>

    <hr>

    <p>Línea de grosor 5px, que ocupa el 50% de la ventana:</p>

    <hr size="5" width="50%">

    <p>Línea de grosor 25px y 50 px de ancho:</p>

    <hr size="25" width="50">

    <p>Línea de grosor 10px, que ocupa el 75% de la ventana,color azul y alineada a la izquierda:</p>

    <hr style="width: 75%; height: 10px; background-color: rgb(0, 0, 255); marginleft: 0pt;">

    <p>Línea de grosor 50px, que ocupa el 60% de la ventana, color rojo , con borde 10px verde y alineada a la derecha:</p>

    <hr style="border-width: 10px; width: 60%; height: 50px; color: rgb(0, 255, 0); background-color: rgb(255, 0, 0); margin-right: 0pt;"> 

    </body>

    </html>

    3. Guardar como    practica 4.html


Comentarios

Publicar un comentario

Entradas populares de este blog