Vídeos sobre HTML
Crear una página web es una cosa sencilla, ya que las páginas
web son ficheros de texto que se pueden crear fácilmente. Para crearla, en el
ordenador se crea un nuevo directorio al que se le puede llamar HTML. Dentro de
esa dirección se crea un nuevo documento el cual es una página web,
visualizándola después en un navegador, ya puede ser Google Chrome, Firefox,
Opera, Safari…, pero es necesario instalarlos en el ordenador. Una vez que
están instalados, se crea un nuevo documento de texto, describiendo el fichero
de texto HTML. Windows normalmente oculta las extensiones de fichero, no
dejando ver el formato del que se compone. Para ello, se pincha en Herramientas
y seguidamente a Opciones de carpeta. Dentro de Opciones de carpeta, se hace click
a Ver y se desmarca la opción Ocultar extensiones, definiendo el fichero de la
extensión. Al hacer esto, el icono de documento de Word que había antes se sustituye
por el de Google Chrome y, por consiguiente, estando disponible en Internet.
El siguiente paso es escribir un
documento de texto en la página de inicio de la página web. Para ello, se hace
doble click en el fichero y se elige la opción Bloc de notas. En el caso de que
la opción Bloc de notas no aparezca, se pinchará en la opción Elegir Programa
determinado y dentro de ella la opción Bloc de notas. Dentro de la página web
es necesario escribir en lenguaje HTML, el cual va marcado con tags, los cuales
están definidos en un estándar (html, xml…). Existen tutoriales para saber
definir los tags y también una página web como www.w3c.org. El primer tag que se debe escribir
en la página web es el de <html>. Otro tipo es el <body>, el cual
es de apertura y cierre, componiendo el cuerpo de la página web. Dentro de este
tag, se escribe una leyenda y consecutivamente aparece en la página web. Otro
es el tag <head>, permitiendo también la leyenda de un título. Otros tags
son el <p>, el cual define un párrafo, el <h1>, definiendo el
título principal o el <BR>, pudiendo escribir texto en líneas aparte.
Dentro de la página web, existe una consola de depuración que nos permite
modificar el texto que hemos creado, mostrando los distintos ficheros de texto
y sus características para modificarlas, los distintos tipos de letra que se
pueden establecer para el texto, etc… aunque los cambios hechos desaparezcan
cuando se recargue la página web. Para evitar esto, se pueden escribir todos
los cambios mediante el Bloc de notas con el tag <style>. La desventaja
de modificar en el Bloc de notas es la escritura en código, siendo más difícil
de escribir. Se puede cambiar la letra, el color, el tamaño, poner la letra en
negrita, etc… mediante distintos tags de modificación de texto, escribiéndolos
dentro del Bloc de notas.
Uno de los problemas que pueden
surgir al visualizar todo lo que se ha escrito en el Bloc de notas es el poco
entendimiento de todo lo que se ha escrito en el bloc. Para ello, existen
programas de edición de páginas web que aclaran las palabras de una forma
automática. Para ello se descarga un editor, por ejemplo, el de sublime text.
Este editor colorea los distintos tags y los separa de las palabras, separa los
distintos tags, etc… haciendo que sea más fácil entender el texto escrito en el
bloc.
Para crear una segunda página en el
blog, se debe crear una nueva pestaña en el editor de texto. Para ello se crea
un nuevo fichero y se crea exactamente igual que la página de inicio, al igual
que se modifica de la misma forma. Tal y como se hizo en esa página, también se
guarda, pero esta vez el fichero con codificación en UF8. Esta página se debe
enlazar con la de inicio, utilizando el tag <a>. Se escribe entre el
tabulador “enlace a la página 2” y te aparece en la página web. Al igual que se
puede enlazar a la página 2, también se puede enlazar a la página inicial.
Mediante distintos tags y distintos tabuladores se pueden crear listas
ordenadas, desordenadas y mixtas, dentro de las cuales se expondrán los
contenidos que se deseen.
Para tratar imágenes y vídeo se
tiene que abrir otra página web. Se hace exactamente igual que el formato de
texto, guardándolo como una página nueva.
Para diferenciarlo, se escribe como página de vídeo. Se pone un enlace a
la página de inicio y a la página de listas que sea redirigido desde esta nueva
página. Se incluyen nuevos tags para que enlacen las distintas páginas y se
escriben títulos para mostrar imágenes y vídeos. Mediante el tag <img> se
insertan imágenes con los distintos ficheros (jpeg, png…). Se elige una imagen
y se guarda en la misma carpeta donde están guardados los ficheros. En el tag
se escribe el nombre de la imagen y el formato de imagen. Para que a una imagen
se le dé un determinado tamaño, se escribe en el programa editor ancho o alto
con el número de píxeles que se le quiera dar. También se puede establecer el
tamaño en porcentaje de la pantalla del navegador y cargarse el fichero de la
imagen desde Internet metiendo la dirección URL desde el navegador.
Para insertar vídeos, se escribe el
enlace del vídeo en el editor junto con el tag <h> acompañado de un
número determinado. Para insertar el vídeo dentro de la página web, se copia el
vídeo dentro del editor con el enlace y con el tag <iframe>, para que lo
reenvíe a la página web. Al igual que se pueden subir vídeos de Youtube, se
pueden utilizar otros servidores, como por ejemplo Vimeo. El enlace se copia en
la página con el tag <h> acompañado de un número y de la descripción del
vídeo y para subirlo a la página web, se hace de la misma forma que
anteriormente, con la diferencia de que son de distintas páginas web.
BOOTSTRAP
Bootstrap es una biblioteca que
posee un montón de tipografías de texto con sus distintos tags. Para ello, se
mete en la página web de Bootstrap y aparecen las distintas tipografías con sus
distintos tabuladores y tags. Para hacerse con todos estos tabuladores, es
necesario descargarse Bootstrap. Para ello, se hace doble click en el botón de
Get Started y se le vuelve a clicar al botón de descargar. En Archivos se
encuentra el fichero de Bootstrap, el cual es necesario que sea descomprimido
para utilizarlo. Una vez que está descomprimido se reenvía a otro directorio
con distintos ficheros como img, jpg… con las distintas hojas de estilo de
Bootstrap, que contienen las distintas características de estilo de formateo de
texto. También aparecen programas de lenguaje de Java Script, los cuales se
pueden ver en Componentes en la página de Bootstrap. A continuación, se reenvía
el directorio con el nombre Bootstrap a la página web. En la tipografía html,
se copia el enlace a la hoja de estilos y del programa de Java Script en la
página web que contiene los vídeos, siendo el primer caso en la cabecera y el
segundo caso al final. Al hacer esto, la letra de la página web cambiará a otra
nueva. Una vez cargado Bootstrap en la página web, se puede jugar con el tipo
de letra. Se juega con los distintos tipos de letra escribiendo tabuladores de
una forma correcta en el editor de texto. Aparte de la letra, se pueden meter
también tablas mediante los tags <button> y <a>. Con las distintas
opciones dentro de la página web, ya sean regreso, información, etc… existen
distintas clases de botones, por lo que se inserta la clase con el botón de
Bootstrap en el editor de texto y aparece el botón que se ha pegado en la página
web. Esta operación es la misma tanto en la página de inicio como en las otras
páginas.
Otro paso a tener en cuenta es el
diseño que se quiere tener de la página web. En la opción Get Started de
Bootstrap, aparecen distintas plantillas que se pueden usar para diseñar la
página web. Pinchando en una de ellas, aparecen las distintas cabeceras que se
pueden utilizar. Para ello se pincha con el botón derecho y se hace doble click
a la opción de Ver código fuente. Se copia todo el código fuente que aparezca
en otra página, se pega y se guarda. En esta página se copian enlaces que unan
las distintas páginas como se ha hecho anteriormente. Para guardar las hojas de
estilo, se incorpora el nombre Bootstrap en el enlace. El siguiente paso será
modificar en la barra de navegación de la página lo que se desee poner. Para
ello, en la barra de navegación en el editor, donde se encuentra la leyenda
home, se sustituye por el nombre página de inicio. Al igual que se ha hecho
antes con la página de inicio, se sustituyen todas las páginas por las que se
quiera tener. En este caso, las opciones de la barra de herramientas se están
sustituyendo por las páginas que se han creado en el editor de texto. Todo esto
hecho anteriormente se hace mediante cambios en el editor de texto. El
siguiente paso es poner una imagen principal a la página de inicio. Para ello,
se busca una imagen en Google (si es necesario se busca con la búsqueda
avanzada), se elige una y se guarda la imagen en el directorio html. En el
editor de texto, se escribe en el tag <img> de la página de inicio el
nombre de la imagen que se ha puesto e inmediatamente aparece la imagen. Si
encima de la imagen aparece un texto que se quiere cambiar, en la clase
referente al texto que aparece en el editor se elimina el texto que aparece en
la imagen y se escribe el que se desee. Si también aparece un botón justo
debajo del texto, se hace lo mismo, cambiando la clase referente del botón. En
el caso del vídeo, en la página web aparecen imágenes que se rotan
automáticamente, lo que se le denomina carrousel, y se hacen los mismos pasos
que se han hecho anteriormente para cambiar el texto encima de la imagen y del
botón. Más abajo se encuentran distintas secciones en las cuales se pueden
introducir texto e imágenes. En el editor de texto se encontrarán los
tabuladores <class> con la palabra <span>. Cada tabulador
corresponde a una sección, donde se podrá modificar como se quiera en el editor
de texto dentro de su tag correspondiente referido a imágenes, vídeos o texto.
También se puede modificar el tamaño y la forma de la imagen. Si se quieren
añadir más secciones, se copia todo el código fuente referido a una sola
sección y se pega aparte. Si aparecen secciones más abajo, se hace la misma
operación pero dentro del tag referido a las secciones de más abajo. En la
parte de debajo de la página web se encuentra el botón “back to the top” y la
aceptación de los términos de condiciones de uso y privacidad. Si se quiere
eliminar, basta con borrar todo el texto que se encuentra dentro del tag de los
términos de condiciones de uso y privacidad, se recarga la página y se elimina.
Y un último detalle es la modificación del título de la página web. Para
modificarlo, basta con modificar el título que aparece en el tag <title>,
cambiarlo por otro y recargar la página de nuevo, y ya está lista la página
web.
Realizado por Fátima Fernández Angulo.
BIBLIOGRAFÍA
Anónimo.
(2013). Tutorial de HTML básico. Disponible en: https://uah.blackboard.com/bbcswebdav/pid-565710-dt-content-rid-1702481_1/courses/641008-2016-17/HTMLBasicoTMA.mp4 [Consultado: 19 de mayo de 2017].
Anónimo.
(2013). Tutorial de HTML y Bootstrap. Disponible en: https://uah.blackboard.com/bbcswebdav/pid-565710-dt-content-rid-1702482_1/courses/641008-2016-17/HTMLBootstrapTMA.mp4 [Consultado: 19 de mayo de 2017].
Comentarios
Publicar un comentario