26-5-2020 Práctica 26 de

mayo
Aplicaciones Web

Juan Pedro Carreón Nieves

TIDSM 3° “B”
Primero abrimos Sublime text y empezamos poniendo el código esencial como se
muestra en la captura de arriba.
En la primera line es referente al tipo de archivo que vamos a crear (en este caso
html), en la segunda línea va el idioma en el que irá la página para que los
navegadores lo puedan detectar. En la tercera line es para que acepte los
caracteres que utilizamos en el español (tales como la tilde, etc.). En la cuarta línea
con las etiquetas “tite” va el nombre que aparecerá en la pestaña del navegador.
Después hay un link, ese link sirve para que la pagina ejecute el framework y como
resultado tendremos una página más limpia a la vista. Y ahora empezamos con el
cuerpo.

Las etiquetas h1 nos sirven para que el texto esté grande y en negritas, como para
el titulo de la página web.
Con las etiquetas p creamos un párrafo en el que podemos poner texto que será
visible dentro de la página web. Dentro de ellas también está la etiqueta strong que
es para que el texto que esta dentro de ellas, se ponga en negritas.

Esa es una captura de como queda una vez duperado con el código anterior.

Después agregué un comentario pequeño con el código anterior que queda de la

siguiente manera.

Con etiquetas hr hice los saltos de campo.

Cree una tabla con el siguiente código, donde thead es lo que irá en la parte superior
de cada columna y tbody el contenido que habrá en la tabla.

Creé una lista ordenada, donde se necesita de las etiquetas de ol y dentro de ellas
las etiquetas li para finalmente poner dentro de ellas lo que será parte de la lista
Creé una tabla desordenada, que básicamente es el mismo código de la ordenada,
a diferencia de que en lugar de escribir ol a las etiquetas, se escribe ul.

Con el anterior código se agregan botón que redirigen a diferentes páginas.

Con la etiqueta se pone le link entre comillas después de href. Le cambiamos de
color a los botones cambiando el texto que se encuentra después de btn btn, lo
colores lo podemos encontrar según el bootsrtip que instalamos.

Para agregar imágenes a la pagina web, se utiliza del siguiente código y lo que está
entre comillas después de scr= es la ubicación en la que tenemos la imagen (en mi
caso yo creé una carpeta en la carpeta de htdcocs de xammp y ahí pegué el video).
Nota: la imagen deberá tener la ubicación correcta, así como su nombre y su
extensión.

Para añadir videos es algo parecido a las imágenes, en el sentido de que tienes que
poner bien la ubicación, el nombre y el tipo de archivo.
También se puede modificar el tamaño que queramos que tenga el video en la
página.
Para agregar un campo de texto, copié y pegué el código de la práctica pasada y
cambié lo que va dentro de las etiquetes label.

El siguiente código nos sirve para agregar campos select.

Creé elementos radio con el código anterior

Hice casillas con el código anterior

Y por último puse un área de texto al final de la página.

Conclusión
Es muy importante que par que vayas aprendiendo que es lo que haces en cada
modificación que haces, lo duperes en el navegador para que verifiques lo que
cambió.