En
navegardor Firefox ir a "opciones de desarrollador" y clic en "ver
código fuente". Se nos muestra el código HTML que programa la página.
Mejor escribir etiquetas en minúsculas.
ACTIVIDAD 1: COMENZANDO
TEORÍA:
CREACIÓN DE PÁGINA WEB PROGRAMANDO CON CÓDIGO
HTML
Necesitamos un editor de texto, cuanto más simple mejor. Por ejemplo el Bloc de notas de Windows. Hay otros editores de texto más específicos que contienen ayudas para mostrar y gestionar el código HTML y los estilos CSS como por ejemplo Sublime Text.
NOTA:
HECHAR OJO A: https://tic2uribarri.blogspot.com/2016/10/html-5.html
NOTA:
HECHAR OJO A: https://tic2uribarri.blogspot.com/2016/10/html-5.html
Caracter indicador de Marca, etiqueta o
comando
<
indica que el texto a continuación es un comando, una orden
>
indica que se acaba la orden o comando
</
marca de fin, indica que aquí se desactiva el comando
<
>…</ > el texto … será afectado por el comando que vaya entre los
signos mayor y menor que.
Principales etiquetas:
<HTML>
inicio de documento html o página web
… documento
</HTML> fin de documento
<HEAD><TITLE>...</TITLE></HEAD> cabecera con título que se verá en la pestaña del navegador
<BODY>...</BODY> cuerpo de la página o documento
<P>
marca inicio de párrafo (por defecto justificado a izquierda)
<P ALIGN=RIGHT> modificamos alineación con atributo align (left o center)
</P>
<CENTER>…</CENTER>
centra una linea de texto (no un párrafo con varias lineas)
<BR> salto de línea o punto y aparte (no precisa
marca de fin)
<Hn>
aplica estilo de encabezamiento predefinido, hay 6 así que n es un número de 1 a 6, el estilo 1 es el de
mayor tamaño, necesita marca de fin
<HR>
traza líneas horizontales de separación (no precisa marca de fin)
MARCAS PARA ESTILO DE TEXTO:
1.- TIPO DE LETRA:
<B>
negrita, necesita marca de fin
<I>
cursiva, necesita marca de fin
<BLINK>
parpadeante, necesita marca de fin
<TT>
tamaño fijo, necesita marca de fin
<EM>
énfasis, necesita marca de fin
<STRONG>
gran énfasis, necesita marca de fin
<U>
subrayado, necesita marca de fin
Esta
marcas se pueden anidar
Marcas encadenadas ó anidadas:
<MARCA1><MARCA2>…</MARCA2></MARCA1>
2.- ATRIBUTOS DE LA FUENTE:
TAMAÑO
DE TEXTO:
<FONT
SIZE=n> …</FONT> n puede valer
de 1 a 7,
por defecto vale 3
COLOR
DE TEXTO:
<FONT
COLOR=”nombre color en inglés”>…</FONT>
TIPOGRAFÍA:
<FONT
FACE= “Nombre tipografía”>…</FONT>
COLOR
DE FONDO:
<BODY
BGCOLOR=…> no precisa marca de fin
Se pueden modificar varias propiedades o atributos de la fuente a la vez:
<FONT SIZE=5 COLOR=BLUE>…</FONT> size y color son dos atributos de la fuente
3.- LISTAS:
LISTAS ORDENADAS con numeración: <OL>…</OL>
Añadir <LI>…</LI> por cada elemento numerado en
la lista, aunque no
necesita etiqueta de cierre e incluye salto de línea
LISTAS DESORDENADAS sin numeración: <UL>…</UL>
Añadir <LI>…</LI> por cada elemento numerado en
la lista
INSERTAR IMAGEN:
<IMG SRC="IMAGEN.JPG"> (si la imagen dentro de carpeta Imágenes, indicar ruta relativa: "Imágenes/IMAGEN.JPG")
INSERTAR REPRODUCTOR:
<EMBED SRC="CANCIÓN.mp3" VOLUME="80" LOOP="INFINITE" WIDTH="400" HEIGHT="40" AUTOSTART="true">
CREAR ENLACES:
<A HREF="#UNO">...A...</A>
<A NAME="UNO">...B...</A>
Al hacer clic en ...A... te enlaza a ...B...
Igualmente:
<A HREF="Adivina un número.exe">juego</A>
Al hacer clic sobre "juego" se ejecuta (si el archivo*.exe está ubicado en mismo sitio que documento web).
Igualmente:
<A HREF="http://tics2haro.blogspot.com.es/">Nuestro blog</A>
Al hacer clic sobre "Nuestro blog" se abre.
En este link puedes encontrar algún script curioso, par insertarlo copiar código y pegar. Más en esta web. Si buscas "isertar reloj web" encontrarás diferentes web como, por ejemplo, está.
Para saber más: MANUAL DE CÓDIGO HTML DE LA UNIVERSIDAD DE VALENCIA
Declarar idioma (probar para que salga la ñ en navegador):
<html lang="es">
Si no funciona cambiar el juego de caracteres a usar añadiendo un elemento "meta" par agregar metadatos en la cabecera, según este enlace.
https://www.ciudadano2cero.com/como-crear-una-pagina-web-en-html/
En la url anterior se accede a un videotutorial de 30 videos para aprender lo básico de html:
Ytambién se presenta un video sobre el inspector html de Firefox:
ACTIVIDAD 2:
Crear
subcarpeta llamada "Actividad2". Abre el Bloc de notas, guardar como
Actividad2.html y comienza a crear la página web de la imagen. Como
punto de partida puedes copiar contenido de la actividad anterior,
pegarlo y editarlo (ó duplicar carpeta Actividad1 y luego cambiar de
nombre a todos los documentos). Control+G
para guardar cambios. Al mismo tiempo abrir el archivo guardado con el
navegador y pulsar F5 para actualizar e ir comprobando el resultado.
Poner de título de página: MI PRIMERA PÁGINA WEB CREADA PROGRAMANDO CON CÓDIGO HTML
Al terminar añade:
1.-
Una imagen ajustando su tamaño si fuera necesario. Para ello descargarla primero de Internet y guardarla dentro de la carpeta de la
actividad en subcarpeta "Imagenes".
2.-
Un reproductor de audio con una canción. Descargar archivo mp3 de por
ejemplo simp3.com o jamendo.com y guardar dentro en subcarpeta "Musica".
3.- Insertar un video de YouTube (clic en compartir, luego en insertar y copiar código HTML de inserción).
4.-
Insertar un script de código html para proteger con contraseña la
visualización de la web (buscar en primer link de apartado de teoría).
5.- Insertar un reloj en la parte superior.
6.-
Editar código para conseguir: cambiar contraseña, centrar video,
centrar imagen, eliminar propaganda de la web de origen del reloj y
cambiar su tamaño y alineación,...
ACTIVIDAD 3: ENLACES
Crear subcarpeta llamada "Actividad3_Enlaces".
Abrir nuevo documento con sublime llamado "Actividad3.html" y crear contenido equivalente al de la imagen de más abajo. En parte inferior derecha de la ventana de Sublime clic y activar HTML para activar ayuda sintáctica y autocompletado. Escribir etiquetas html en minúsculas para que funcione el autocompletado.
Primero crear la página web con el contenido y al final añadir los enlaces.
Usar estilo H1 (título en rojo) y H2 (todo lo demás que tiene tamaño mayor de lo normal).
El color azul de los items del índice se pone solo al añadir enlaces. Mirar en parte de teoría cómo crear enlaces.
Abrir nuevo documento con sublime llamado "Actividad3.html" y crear contenido equivalente al de la imagen de más abajo. En parte inferior derecha de la ventana de Sublime clic y activar HTML para activar ayuda sintáctica y autocompletado. Escribir etiquetas html en minúsculas para que funcione el autocompletado.
Primero crear la página web con el contenido y al final añadir los enlaces.
Usar estilo H1 (título en rojo) y H2 (todo lo demás que tiene tamaño mayor de lo normal).
El color azul de los items del índice se pone solo al añadir enlaces. Mirar en parte de teoría cómo crear enlaces.
Poner de título de página: "ACTIVIDAD3: ENLACES"
Necesitas para ubicar dentro de la carpeta de la actividad y luego enlazar:
1.- archivo ejecutable del juego que hicimos con Visual Basic.
2.- una imagen de una App de Inventor.
3.- el contenido de la actividad 2, cópialo y llévalo a la 3. Así ya tienes una carpeta Imágenes para colocar dentro la del apartado 2.-
Los enlaces funcionarán como la de muestra proyectada en clase.
PUBLIQUEMOS NUESTRA WEB "SUBIÉNDOLA" A UN ALOJAMIENTO O HOSTING GRATUITO
Necesitamos un espacio de almacenamiento en un servidor de internet para subir nuestra web y hacerla pública. En la web de mejoreshosting valoran los mejores alojamientos gratuitos del año 2019.
Se nos habla de Hostinger.es y de Hostinggratis.com.ve como los mejores. El curso 2016_17 publicamos nuestras web en Hostinger pero al año siguiente ya no es gratis, lo mismo pasa con Hostinggratis, sitios donde el hosting más barato sale por 3 €/mes con regalo de un mes gratis después de dar los datos de la tarjeta de crédito o Paypal. Así funcionan, te lo ponen gratis un tiempo para captar usuarios y después de un año comienzan a cobrar. Es lógico, son empresas que viven de esto.
La tercera opción, 000webhost.com (pertenece a Hostinger), la utilizamos el curso pasado 2017_18 y sigue siendo gratuita. Vamos a registrarnos con nuestro e-mail (o con cuenta de google) y a usar sus servicios limitados de hosting. Como vamos a acceder para crear una cuenta muchos al mismo tiempo y desde la misma IP Pública (la del router del IES) a lo mejor solo nos deja crear unas pocas cuentas por seguridad al sospechar de ataque hacker. Por si alguien no puede crearse la cuenta en clase, que lo termine en casa siguiendo este video:
Luego podremos PUBLICAR LA ACTIVIDAD 3 y estará disponible para todo el mundo en la nube.
Tener en cuenta:
1.- Cambiar el nombre del archivo "Actividad3.html" por "index.html".
2.- Subir archivos desde la opcion de subir web del panel de control (cpanel) de 000webhost, ó utilizando un programa FTP como Filezilla. Si utilizamos Filezilla transfiere información a través del puerto 21 del router que en el IES lo tienen cerrado por seguridad y probablemente no logremos hacerlo funcionar. Si nos dá error de conexión en casa, intentemos solucionarlo:
Esta es mi Actividad 3 publicada en 000webhost.com con url: https://tics2haro.000webhostapp.com/.
NOTA: En un principio puede que te salga algún símbolo raro en el sitio de caracteres como la "ñ" o las vocales con tilde. Para arreglarlo doble clic sobre documento html y se abre un editor donde se indica las líneas de código con algún error y da información para solucionarlo. Con tal de arreglar errores más importantes ya se visualiza bien.
