Periodo 3. Diseñar, crear y alojar páginas web a nivel profesional.
Guía #4 CSS
Para comprender mejor esta guía es necesario que la anterior le haya sido completamente clara. Es decir, a este punto debes saber que es un contenedor, que es un identificador, que es una sección y, por tanto, debes saber usar la etiqueta <div>.
Definamos primero que es CSS
El CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado (por ejemplo, HTML).
Así, a los elementos de la página web creados con HTML se les dará la apariencia que se desee utilizando CSS: colores, espacios entre elementos, tipos de letra, ... separando de esta forma la estructura de la presentación.
Esta separación entre la estructura y la presentación es muy importante, ya que permite que sólo cambiando los CSS se modifique completamente el aspecto de una página web. Esto posibilita, entre otras cosas, que los usuarios puedan usar hojas de estilo personalizadas (como hojas de estilo de alto contraste o de accesibilidad).
En resumen, a partir de ahora, en un archivo HTML definiremos la estructura de lo que se quiere mostrar en la página web y desde el lenguaje CSS, definiremos cómo se quiere mostrar (posición, tamaños, colores, bordes, animaciones, etc.). Esta es la razón por la cual en la guía #3 se enfatizó en que, al probar el código del archivo HTML, éste no mostraría la apariencia que se tiene en la imagen porque hace falta definir el cómo se quiere la presentación y esto se hace desde una hoja de estilos o archivo con extensión CSS y el cual se vincula a través de la etiqueta <link>. Es decir, a partir de este momento las páginas web que se creen estarán compuestas por dos archivos: Uno tendrá la estructura de la página y se guardará con la extensión HTML. El otro tendrá la presentación que se quiere dar a la página y se guardará con la extensión CSS.
Para comprenderlo mejor, revisemos la línea #4 del archivo HTML dado en la guía #3.
<link rel="stylesheet" href="guia3.css" type="text/css"/> Aparece entonces la etiqueta <link> que simplemente sirve para establecer una relación de nuestro archivo HTML con un recurso externo y realizar la posterior carga del archivo. El atributo rel especifica que tipo de recurso (para el ejemplo, se vincula una hoja de estilos). El atributo href que ya se ha trabajado anteriormente, indica la ubicación y nombre del archivo a vincular (para el ejemplo, el archivo a vincular se llama guia3.css). El atributo type, indica el tipo de contenido del archivo como una imagen, un texto, etc. (para el ejemplo se indica que es texto o css). Esta línea 4 será una constante y lo único que se debe cambiar es el nombre del archivo CSS definido en el atributo href.
Como la línea 4 ya se ha explicado, debes poner especial atención en el siguiente archivo llamado guia3.css.
Por favor observe la línea 1 #contenedor{ quiere decir que en el archivo html desde el cual se vincula esta hoja de estilos, existe un identificador llamado contenedor (línea 7 del archivo html (<div id ="contenedor">)) al cual se le dará la siguiente apariencia:
Línea 2 background-color:#F4ABF2; Color de fondo y se especifica bajo un código hexadecimal #F4ABF2 que equivale a un purpura claro o sombra de magenta.
Línea 3 border:2px solid #FF0000; Borde de 2 pixeles, sólido de color rojo el cual equivale al código hexadecimal #FF0000.
Para indicar que el estilo se aplicará a un identificador definido en el archivo html mediante el atributo id, en el archivo css, el identificador debe ir precedido por el símbolo #. Todos los estilos que se aplicarán a un mismo identificador, clase o contenedor, las definiciones deben ir encerradas entre llaves {}. Si desea poner un comentario se utiliza /* y */. Ejemplo: /* esto es un comentario en CSS */.
Por favor observe la línea 5 #cabecera{ quiere decir que en el archivo html desde el cual se vincula esta hoja de estilos, existe un identificador llamado cabecera (línea 8 del archivo html (<div id ="cabecera">)) al cual se le dará la siguiente apariencia:
Línea 6 background-color:#E5BC7A; Color de fondo y se especifica bajo un código hexadecimal #E5BC7A que equivale a un color suave (ver código de colores hexadecimal).
Línea 7 height:20%; Altura 20%. La altura para el identificador cabecera será el 20% de lo disponible en el contenedor principal o sea en contenedor. Como a este contenedor no se le definió alto (heigth) ni ancho (width), el tamaño será el de toda la pantalla en la cual se ejecute. Pero si al id contenedor se le hubiese definido un height de 400 pixeles por ejemplo, el id cabecera sólo ocuparía una altura de 80 pixeles que equivale al 20% de 400 que es la altura de su contenedor principal.
Línea 8 border-color: #000000; Color del borde para el identificador cabecera y equivale al color negro en código hexadecimal (ver código de colores hexadecimal).
Por favor observe la línea 15 #izquierda{ quiere decir que en el archivo html desde el cual se vincula esta hoja de estilos, existe un identificador llamado izquierda (línea 14 del archivo html (<div id ="izquierda"> al cual se le dará la siguiente apariencia:
Línea 16 altura 40% del contenedor principal (height:40%;)
Línea 17 color de fondo #BDD2EF (background-color:#BDD2EF;)
Línea 18 float:left; que se desplace o flote lo mas a la izquierda que sea posible.
Línea 19 width:40%; el ancho para esta caja será el 40% del contenedor principal
En la línea 25 correspondiente a la apariencia para el identificador derecha, está la instrucción float:right; indicándole que se desplace o flote lo más a la derecha que sea posible.
En la línea 33 correspondiente a la apariencia para el identificador pie, está la instrucción clear:both; indicándole que ésta caja no admitirá que otras cajas se visualicen bien sea a la izquierda o derecha de donde ella está ubicada (clear: limpiar both:ambos).
Actividad:
1. En el numeral 1 de la guía #3, usted diseñó una página web y creó un dibujo con la apariencia que le daría al terminarla por completo. También en el numeral 2 de la misma guía, usted creó un archivo llamado guia3.html el cual contenía la estructura básica de la página web. De acuerdo a lo explicado en esta guía, debes crear un archivo llamado guia3.css en el cual maquetes la presentación para tu página web (almacenada en el archivo guia3.html).
2. Debes abrir el archivo llamado guia3.html y vincular la hoja de estilos que creaste en el numeral 1.
3. A cada sección debes anexarle un párrafo con información detallada de la misma. Es decir, especificar el nombre del id, las medidas, color de fondo, bordes, etc.).
Finalmente, debes crear tu página web real. Incluye fotos, videos, menús, etc.
F
Notas:
1. Para los que trabajan desde la virtualidad, deben editar o crear los dos archivos: el de la estructura de la página web llamado guia3.html y el de estilos o maquetación para la página web llamado guia3.css. Envía ambos archivos al correo profecanotics@gmail.com.
2. Para los que trabajan desde los módulos deben escribir el código correspondiente al punto 1 (archivo guia3.css). Para el punto 2 y 3, deben escribir el código completo para el archivo guia3.html cumpliendo con las especificaciones dadas en los puntos 2 y 3 de esta guía. Se recomienda usar un cuaderno u hojas. Si es en hojas, es aconsejable que vaya guardando los trabajos en una carpeta porque serán requeridos en actividades posteriores. Deben enviar evidencia de lo trabajado. Por favor, sea muy creativo(a)
Bibliografía:
https://www.hostingatope.com/como-hacer-una-pagina-web-con-html/
https://creatuweb.espaciolatino.com/tutorhtml/tema9.html
http://www.profesordeinformatica.com/html/pruebalo/70
https://sites.google.com/site/glgcreaciondepaginasweb/home/unidad-7
Guía #3 Maquetación
La maquetación es la
distribución de los elementos en nuestra página. Piensa en una página web
cualquiera. Seguro que distingues algunos elementos, como encabezados,
columnas, menús laterales, etc.
Hace unos años, la
maquetación de las páginas web se realizaba utilizando tablas (<table>).
Una vez entendido este proceso podía resultar sencillo, aunque si no se
dominaban las tablas, podía convertirse en algo tedioso. El problema de las
tablas es que generaban una página muy encorsetada, y el código se volvía
complejo de entender. Además, algunos buscadores encontraban problemas al
analizar la estructura de la página.
Actualmente, la maquetación
con tablas ha caído en desuso, y se realiza utilizando capas (<div>),
también llamadas divisiones o contenedores. La colocación de las capas en la
página se realiza a través de CSS. Esto permite, por ejemplo, que
podamos pasar de un diseño con un menú lateral a otro con el menú en la parte
superior, sólo cambiando la hoja de estilos.
En esta guía veremos las
técnicas de maquetación más comunes, aunque hay que decir que existen diversas
formas de conseguir una misma maquetación.
Las capas pueden estar
anidadas unas dentro de otra. Básicamente, lo que haremos será definir cómo se
posiciona en la página, su colocación y su tamaño.
Tamaño
Por lo general, la
maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero
también lo podemos hacer con párrafos, listas, o con el propio “body”. Por
defecto los elementos de bloque ocupan todo el ancho del elemento que lo
contiene, y su alto se ajusta al contenido.
Cualquier elemento HTML de
bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto
(height).
Los valores para estas medidas,
pueden ser expresados en las medidas habituales:
ü Tamaños
absolutos, utilizando px, cm, etc...
ü Tamaños
relativos al elemento que lo contiene, utilizando porcentajes (%).
ü Tamaños
relativos a la fuente, utilizando em.
ü El
valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto,
tienen un ancho del 100% y un alto ajustado al contenido.
Para comprender mejor lo que es la maquetación. Imagina que tienes un negocio y quieres diseñar una página web tal como se muestra en la imagen. Es decir, se requieren: una parte para poner un encabezado el cual se ubicaría en el cuadro que dice CABECERA (por ejemplo, ahí puede mostrarse un slider con las promociones o productos más novedosos que acaban de llegar al negocio), una parte para poner un menú el cual se ubicaría en el cuadro que dice MENU (por ejemplo, ahí puede mostrarse el menú principal con todas las opciones que ofrece el negocio), dos paneles para mostrar información los cuales se ubicarían en los cuadros que dice PANEL IZQUIERDO-PANEL DERECHO (por ejemplo, en el panel izquierdo puede aparecer un video mostrando cómo se atienden los clientes en el negocio y en el panel derecho puede mostrase un slider con las fotos, nombres y cargos de los empleados); finalmente una parte para poner un pie de página el cual se ubicaría en el cuadro que dice PIE DE PAGINA (Por ejemplo, ahí puede mostrarse las direcciones, números de contacto, correos electrónicos, etc.).
Comprendido lo anterior, es
importante saber que a cada parte mencionada anteriormente se le llama sección
las cuales se definen con la etiqueta <div></div>. Cada sección (div) ha de tener un identificador
que es el que permite diferenciarlo de otros div ya que una página
tendrá muchos de éstos. Así, por
ejemplo, para la imagen anterior se definieron 6 secciones. Para mayor comprensión, veamos el archivo
html usado para crear la imagen.
Por favor observe que en la
línea 7 (abre) y 23 (cierra) se utiliza la etiqueta <div> para
crear algo que se llama una sección o contenedor (porque puede albergar cajas,
secciones, otros contenedores, artículos, menús, etc.). Con la instrucción id ="contenedor"
se le indica que ese contenedor se llamará contenedor (ese id
será muy importante en la siguiente guía y puede usarse cualquier nombre válido
como por ejemplo principal, todo, seccionprincipal, primero, etc.). Aparentemente ese contenedor no hace nada,
pero en realidad es el contener principal porque es el que contiene a todas las
cajas o secciones que se explicaron anteriormente. Muy importante resaltar que este
contenedor principal ocupa por defecto todo el tamaño de la pantalla del equipo
donde se ejecute (celular, Tablet, portátil, pc de escritorio, etc.), pero
se puede limitar a un tamaño específico.
Por ejemplo, a una caja de 500 pixeles de alto por 300 pixeles de
ancho. En este caso todas las secciones
que están dentro de este contenedor principal, tendrán que encajar en las
medidas definidas para ese pequeño cuadro.
En línea 8 se definió otro div
el cual tiene el id o identificador “cabecera”. Dentro de esta caja se usó la etiqueta <p>
para mostrar el texto ENCABEZADO y en la línea 10 se cierra. De la misma forma se definieron todos los div
correspondientes a las demás cajas.
Muy importante tener presente el nombre que se le dio a cada uno. Recuerda que ese nombre puede ser cualquiera
y es el que usarás en la guía #4.
Posiblemente te estarás
preguntando por las instrucciones que aparecen en la línea 4, obsérvala, pero
no te preocupes que en la siguiente guía la comprenderás por completo. Finalmente, para los curiosos que prueban el
código sólo verán 5 títulos y no la imagen bonita que se mostró
anteriormente. Calma. En la guía 4 ya lo podrás hacer completo.
Actividad:
1. A través de lo
explicado en esta guía referente a la maquetación de páginas web, debes crear
un diseño para tu página web y luego dibujarlo.
Debes definir cuantas secciones, sus nombres y colores para cada una de
las secciones tal y como se muestra en la imagen de ejemplo.
2. Debes crear un
archivo llamado guia3.html donde se diseñe la página web tal como lo
definió en el punto 1. Recuerda que
inicialmente no se verán los colores, cuadros o distribución programada y sólo
se verá un listado con los párrafos que se pusieron en cada sección.
3. Debes entregar un listado con los nombres de cada id y explicar que información deseas mostrar en cada uno de ellos.
_________________________________________________________________________________
Guía #2 Menús
En HTML5 existen varios métodos para crear un menú. En nuestro caso en particular vamos a utilizar la etiqueta <nav></nav> para crear menús los cuales pueden aparecer en forma horizontal o en forma vertical. En síntesis, un menú es una lista, la cual a su vez puede estar anidada por sublistas. La diferencia básica entre una lista y un menú está en que una lista no apunta a nada o al menos no es necesario que lo haga, pero en un menú, cada uno de sus elementos debe apuntar a algo. Ese algo usualmente está ligado a un hipervínculo que se crea dentro del elemento de la lista.
Es importante tener presente que la etiqueta <nav> se implementa a partir de ahora en la creación de menús. Sin embargo, no se verá ningún efecto visual hasta que no se apliquen estilos CSS a esta etiqueta lo cual se estudiará en temas posteriores.
Por favor observe que en la línea 9 (abre) y 16 (cierra) se utiliza la etiqueta <nav>. Dentro de ésta, se dan las instrucciones para crear las listas con hipervínculos (líneas de la 10 a la 15). La primera opción del menú es Inicio la cual apunta a la dirección web de nuestra institución educativa. Las otras tres opciones (Productos, Contáctenos, Acerca de mi) son hipervínculos que no apuntan a nada. En este caso se dejan así por facilidad de comprensión por parte del estudiante. Aún así, se le recuerda que, en un menú, sus elementos deben apuntar a algo.
Tenga presente que las demás instrucciones ya fueron explicadas completamente en la guía #1.
Actividad:
A través del uso de las etiquetas explicadas hasta la fecha, se solicita crear el menú que aparece más abajo. Todos los elementos del menú deben ser hipervínculos que apunten a #. En Cenas, al dar clic en Comida de Mar debe apuntar a una página web que ofrezca comida de mar. Al dar clic en Comida Vegetariana debe apuntar a una página web que ofrezca comida vegetariana. Al dar clic en Carnes debe apuntar a una página web que ofrezca distintos tipos de carnes.
Notas:
1. Para los que trabajan desde la virtualidad, deben crear el archivo con el nombre de guia2.html y enviarlo a través del correo profecanotics@gmail.com.
2. Para los que trabajan desde los módulos deben escribir el código que debe llevar el archivo. Se recomienda usar un cuaderno u hojas. Si es en hojas, es aconsejable que vaya guardando los trabajos en una carpeta porque serán requeridos en actividades posteriores. Deben enviar evidencia de lo trabajado. Por favor, sea muy creativo(a)
EL LENGUAJE HTML
Qué es el HTML (HyperText Markup Language)
HTML son las siglas de “HyperText Markup Language”, lo que se puede traducir en español a “Lenguaje de marcado de hipertexto (texto con enlaces)”. Eso quiere decir que permite “marcar” el texto mediante unas etiquetas especiales que le añaden semántica. Por ejemplo: <h1>Cómo hacer una página web con HTML</h1>
¿Qué ha pasado aquí? Pues que simplemente añadiendo la etiqueta <h1> le hemos añadido una información semántica muy útil a la frase que indica que esto no es una frase cualquiera sino un título (fíjate en la “h” de “header” en inglés) de nivel 1.
Esto es muy útil porque, por ejemplo, le sirve al navegador web para aplicar ciertas pautas de diseño que faciliten la lectura como diferentes tamaños de letra a los títulos según su nivel jerárquico, de modo que destaquen en la lectura.
Otro ejemplo es el buscador de Google. Si alguien busca, por ejemplo, “cómo hacer una página web”, al ver que son palabras que coinciden con el título principal de la página, esto le indicará a Google que esa página tiene que ver probablemente mucho con lo que el usuario está buscando.
Como ves con estos dos simples ejemplos, el marcado que proporciona HTML permite hacer muchas más cosas con estos contenidos que con un texto normal y corriente sin marcado. Ese es el propósito básico del HTML, aparte de permitir enlazar las páginas entre sí y crear así la “web” de Internet.
Conceptos HTML fundamentales: Etiquetas, elementos y atributos HTML
A lo largo del tiempo se han desarrollado diferentes versiones de HTML siendo la más usada la versión HTML 4.01. Poco a poco está siendo relevada por la versión HTML 5 que introduce nuevas etiquetas que amplían las posibilidades que tenía HTML 4.01.
Pero en este punto, lo mejor es que ya empecemos a meternos de lleno a ver el código HTML de una página web.
Por ejemplo: una versión extremadamente simplificada de este post, tendría un código HTML como el siguiente:
<!DOCTYPE HTML>
<html>
<head>
<title>Cómo hacer una página web con HTML</title>
</head>
<body>
<h1>Cómo hacer una página web con HTML</h1>
<p> En el post de hoy voy a enseñarte <strong>cómo hacer una página web con HTML</strong>, pero antes …</p>
<h2>Conceptos básicos sobre páginas web</h2>
<p>¿Cuál es entonces la diferencia entre una página web y un sitio web?…</p>
<h3>Diferencias entre una página web y un sitio web</h3>
<p>Una <a href="https:www.ieprogresar.edu.co" target="_blank"> página web </a> es un <strong>único documento electrónico</strong> que…</p>
</body>
</html>
El ejemplo empieza con una etiqueta especial que es <!DOCTYPE HTML>, es simplemente una etiqueta especial que tiene que ir al principio de todo fichero HTML e identifica al fichero como un documento en formato HTML.
Lo que sigue son etiquetas anidadas que forman una estructura jerárquica (excepto la línea del DOCTYPE). Fíjate que siempre hay una etiqueta de apertura y una etiqueta de cierre que es la misma etiqueta, pero con una barra invertida delante del nombre de la etiqueta.
Estas etiquetas, junto con el contenido que envuelven, forman lo que se conoce como un elemento HTML.
En el ejemplo podrás observar que hay una estructura básica compuesta por las etiquetas <html>, <head> y <body>. Esto es la estructura básica de cualquier página web.
<html> es el elemento raíz de la página, es simplemente el elemento del que tienen que “colgar” todos los demás, no tiene más función que esa. <head> es la cabecera de la página, una sección con información descriptiva de la página, etc. que no se visualiza como tal en la página, eso le corresponde a la etiqueta <body>. En <body> irán los elementos que vemos realmente dentro del navegador como tales.
Fíjate también en cómo se abren y cierran las etiquetas, por ejemplo, la etiqueta “<title>” (etiqueta de apertura) y “</title>” (etiqueta de cierre). A su vez, estas etiquetas pueden contener a otras etiquetas, como es el caso de <head> que es la que encierra a la etiqueta o elemento “title”.
Si seguimos, verás que varios niveles de títulos con etiquetas <h1> hasta <h3>. Esto sería lo equivalente, por ejemplo, a los estilos de títulos “Título 1”, “Título 2” y “Título 3” en Microsoft Word. En HTML dispones de un total de 6 niveles, de h1 a h6.
Por otra parte, puedes ver varias etiquetas <p>, éstas corresponden a los párrafos que vienen a continuación de los títulos y para las cuales hemos puesto solamente un pequeño extracto de texto como ejemplo.
Fíjate especialmente en las etiquetas tipo <a> que son los enlaces. Ésta es, si cabe, la etiqueta por excelencia del HTML, la que permite crear los hiperenlaces que son lo que hace de la web la web.
Con esto puedo introducir, además, otro concepto fundamental del HTML: los atributos.
Si echas un vistazo con atención, en el caso de la etiqueta <a>, antes del corchete de cierre vienen dos palabras: “href” y “target”. Estas palabras son dos atributos y sirven para especificar parámetros adicionales en una etiqueta. De esta manera le podemos dar mucho más juego a las etiquetas.
En ejemplo concreto el atributo “href” indica la URL de la página enlazada y con el atributo “target” indicamos que, además, queremos que cuando el usuario haga clic en él, la página correspondiente se abra en otra pestaña del navegador.
Guía #1 Listas
Observa las líneas 13 y 21 en la cual se utiliza la etiqueta <ul> </ul> para indicar a HTML que se abre y cierra una lista desordenada (unordered list). Entre las líneas 14 y 19 se utilizan las etiquetas <li></li> para indicar los elementos que llevará esa lista (Item #1, Item #2, etc.). El sexto elemento de esa lista (línea 19) no es un texto cualquiera y en vez de escribir Item #6, se está abriendo la etiqueta <a> para crear un hipervínculo. Con la cláusula href se le dice que apunte a la dirección web https://www.youtube.com/watch?v=3XtXgH4YSrU y luego del símbolo “>” , se escribe el texto que se va a mostrar en la lista, es decir, para el hipervínculo (Video primera guerra mundial), luego se cierra la etiqueta a con </a>. Finalmente se cierra el elemento de esa lista con </li>.
Observa las líneas 24 y 31 en la cual se utiliza la etiqueta <ol> </ol> para indicar a HTML que se abre y cierra una lista ordenada (ordered list). Entre las líneas 25 y 30 se utilizan las etiquetas <li></li> para indicar los elementos que llevará esa lista (Item #3, Item #4, etc.) El primer elemento de esa lista (línea 25) no es un texto cualquiera y en vez de escribir Item #1, se está abriendo la etiqueta <a> para crear un hipervínculo. Con la cláusula href se le dice que apunte a la dirección # (significa que es un hipervínculo que no apunta a un lugar en específico) y luego del símbolo “>”, se escribe el texto que se va a mostrar en la lista, es decir, para el hipervínculo (Item #1), luego se cierra la etiqueta a con </a>. Finalmente se cierra el elemento de esa lista con </li>. La línea 26 es exactamente igual a la línea 19 explicada anteriormente.
Observa las líneas 34 (abre) y 47 (cierra) una lista desordenada que contiene 5 elementos (Desayuno, Almuerzo, Cena, Bebidas y Entradas). En el elemento Cena se abre un submenú o lista desordenada que va desde la línea 38 a la 43. Este submenú contiene 3 elementos que son Comida de mar, Ver video preparación comida vegetariana (que es un hipervínculo) y Carnes. Observe que después de Carnes se cierra el elemento con </li> y el submenú con </ul>
Actividad:
A través del uso de las etiquetas explicadas hasta la fecha, se solicita crear la lista que aparece más abajo. La lista debe funcionar de la siguiente forma: De todos los países que se muestran, elige uno y créale un hipervínculo de tal modo que, al darle clic en él, se muestre una página web que hable acerca de ese país.
Notas:
1. Para los que trabajan desde la virtualidad, deben crear el archivo con el nombre de guia1.html y enviarlo a través del correo profecanotics@gmail.com
2. Para los que trabajan desde los módulos deben escribir el código que debe llevar el archivo. Se recomienda usar un cuaderno u hojas. Si es en hojas, es aconsejable que vaya guardando los trabajos en una carpeta porque serán requeridos en actividades posteriores. Deben enviar evidencia de lo trabajado. Por favor, sea muy creativo(a).