TIC´S II: TEMA 5: DISEÑO WEB 1. CÓDIGO HTML BÁSICO.

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

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

marca inicio de párrafo (por defecto justificado a izquierda)

modificamos alineación con atributo align (left o center)

<CENTER>…</CENTER> centra una linea de texto (no un párrafo con varias lineas)

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:

negrita, necesita marca de fin

cursiva, necesita marca de fin

<BLINK> parpadeante, necesita marca de fin

<TT> tamaño fijo, necesita marca de fin

énfasis, necesita marca de fin

gran énfasis, necesita marca de fin

subrayado, necesita marca de fin

Esta marcas se pueden anidar

Marcas encadenadas ó anidadas:

2.- ATRIBUTOS DE LA FUENTE:

TAMAÑO DE TEXTO:

… n puede valer de 1 a 7, por defecto vale 3

COLOR DE TEXTO:

…

TIPOGRAFÍA:

…

COLOR DE FONDO:

<BODY BGCOLOR=…> no precisa marca de fin

Se pueden modificar varias propiedades o atributos de la fuente a la vez:

… 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.

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.

TIC´S II

miércoles, 20 de febrero de 2019

TEMA 5: DISEÑO WEB 1. CÓDIGO HTML BÁSICO.

No hay comentarios:

Publicar un comentario