Páginas web
EVALUACIÓN:
Examen práctico /proyecto 20%
Prácticas/Actividades 70%
Desempeño 10%
CONTENIDO:
- Introducción
- Estructura del documento HTML
- Dando forma al texto
- Enlaces
- Imágenes y fondos
- Listas
- Tablas
Manejar los elementos básicos de un lenguaje utilizable en la creación de páginas web (HTML).
|
INTRODUCCIÓN
El número de personas que buscan información y accesan a servicios a través de internet crece cada día. En la actualidad, sabemos la importancia que significa tener una página web, que proporciona información sobre el propietario de la página, la empresa y los servicios o productos que ofrecen. Ella es a menudo la primera impresión e información que obtiene la gente de una persona o empresa y puede ser visualizada desde cualquier parte del mundo las 24 horas del día, los 365 días del año.
La página web es fuente de información adaptada para la World Wide Web (www) y accesible mediante un navegador de internet, Se presenta generalmente en formato HTML y contiene hipervínculos a otras páginas, formando de esta manera la red conectada a la www. Puede ser cargada de una computadora local o remota, llamada servidor web. El servidor puede contener las páginas dentro de una red privada o publicarlas en World Wide Web. Las páginas web son solicitadas y transferidas de los servidores , usando el protocolo de transferencias de Hypertexto (http).
En el entorno actual de negocios existen diversas fuerzas del mercado que están motivando a las empresas a utilizar el internet para optimizar la promoción, ventas y operación del negocio y ofrecer al cliente un mejor servicio, a fin de asegurar su propia supervivencia dentro de un mundo cada vez más globalizado. D aquí la necesidad de aprender a diseñar y crear adecuadamente las páginas web.
HTTP-> en inglés Hypertext Transfer Protocol (Protocolo de transferencia de hipertexto), es el protocolo de comunicación que permiten las tranferencias de información en la www.
HTML--> En inglés Hypertext Markup Languaje (Lenguaje de marcado de hipertextos), la cual es el elemento de construcción más básico de una página web.
_______________________________________________________________________
HTML--> En inglés Hypertext Markup Languaje (Lenguaje de marcado de hipertextos), la cual es el elemento de construcción más básico de una página web.
ACTIVIDAD 1
Ver el siguiente video https://www.youtube.com/watch?v=n218L4m_KuQ.
Y Contestar a las siguientes preguntas
1. ¿Por qué es importante una página web?
2. ¿Cuántos segundos son necesarios para crear una primera impresión de una página web?
3. ¿Qué se recomienda para tener una buena impresión de una pág. Web?
4. ¿Por qué es importante el diseño de una página?
5. ¿Qué información menciona el video sobre los dispositivos móviles?
6. ¿Cuál es la importancia de las herramientas de medición?
Espere a que el profesor revise la actividad terminada.
Espere a que el profesor revise la actividad terminada.
HTML
HTML es el lenguaje donde se escriben los millones de documentos que hoy existen en la World Wide Web. Cuando accedemos a unos de estos documentos, el navegador los interpreta y los despliega.
Crear una buena página tiene dos aspectos; por un lado el conocimiento técnico para crear código HTML correcto, por otro lado el claro diseño para presentar la información.
El objetivo de este bimestre es proporcionar un conocimiento básico acerca de la construcción de páginas web, mediante distintas prácticas.
una página web es un archivo de texto, se puede crear con cualquier editor de texto. El principio esencial del lenguaje HTML es el uso de las etiquetas (tags), las cuales funcionan de la siguiente manera:
<XXX> Este es el inicio de una etiqueta
</XXX> Este es el cierre de una etiqueta.
El documento en sí está dividido en dos partes principales:
1. ESTRUCTURA DE UN DOCUMENTO HTML
una página web es un archivo de texto, se puede crear con cualquier editor de texto. El principio esencial del lenguaje HTML es el uso de las etiquetas (tags), las cuales funcionan de la siguiente manera:<XXX> Este es el inicio de una etiqueta
</XXX> Este es el cierre de una etiqueta.
El documento en sí está dividido en dos partes principales:
- El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>.
- El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezamiento hay información del documento, que no se muestra en la pantalla principal, por ejemplo el título del documento, que se encuentra entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, ya que será lo que vean los demás cuando se añadan nuestra página a su agenda de direcciones.
Dentro del cuerpo estará todo lo que quieres que aparezca en la pantalla (imágenes, vídeos, texto, etc).
Explicado lo anterior, la estructura queda de la siguiente manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
aquí van las etiquetas que se visualizarán en la página.
</BODY>
</HTML>
PRÁCTICA 1
En un bloc de notas (.txt) copia el siguiente texto:
<HTML>
<HEAD>
<TITLE> Mi página web </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Mi primera página </CENTER></H1>
<HR>
<P> Aquí va un segundo párrafo
<HR>
<P> Aquí va un segundo párrafo
</BODY>
</HTML>
Guarda el documento con el nombre de mipag1.html
Comenta con tus compañeros el resultado y espera a que el profesor revise su práctica.
Guarda el documento con el nombre de mipag1.html
Comenta con tus compañeros el resultado y espera a que el profesor revise su práctica.
PRÁCTICA 2
utilizando los elementos vistos en la práctica 1, crea una página web, donde tenga dos encabezados, el primero tenga tu nombre y el segundo diga "¿Quién soy?", seguido de una pequeña descripción de ti (gustos, intereses, aficiones, etc). No olvides colocar separadores (líneas horizontales).
Una vez terminada la práctica espere a que sea revisado por el profesor.
Lee el siguiente texto y realiza la actividad que se encuentra al final de la lectura.
eEn el tema anterior, pudimos trabajar con las etiquetas <HR> <P> Y <CENTER>, donde las primeras dos no existe la correspondiente de cierre (</HR> o </P>) y se utilizan para agregar una linea horizontal y separación entre párrafos (dejando una línea en blanco), respectivamente.
Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos la etiqueta <BR> (break o romper), la cual tampoco tiene etiqueta de cierre.
Para destacar parte del texto se puede usar:
<B> Y </B> para poner algo en negritas <bold>
<I> Y </I> Para poner algo en cursiva (italic)
<PRE> y </PRE> formato tipo máquina de escribir.
<TT> y </TT> Conseguimos que el texto tenga una menos tamaño y la apariencia de los caracteres de una máquina de escribir (typewriter)
<BLOCKQUOTE> Y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro del texto general.
<SUB> Y </SUB> Para subíndices
<SUP> Y </SUP> Para superíndices. Por ejemplo:
m2 se consigue de la siguiente de la siguiente manera : m <sub> 2 </sub>.
La etiqueta <FONT > </FONT> permite darle al texto un color, tipo y tamaño de fuente, utilizando sus atributos face, color y size. Por ejemplo:
<FONT COLOR ="RED" FACE= "ARIAL" SIZE= 10> HOLA, ESTE ES MI TEXTO COLOR ROJO TIPO ARIAL TAMAÑO 10 </FONT>
<body bgcolor="Yellow">
Permite colocar un color de fondo a la página. En este caso, el color es amarillo.
Investigar sobre los atributos align, bgcolor, height y width, scrollamount, scrolldelay, loop, direction, behavior, de la etiqueta <Marquee> </marquee>. (Actividad 2). Anotar en su libreta lo investigado. (Actividad 2)
Una vez leído lo anterior y lo ya visto en clase, anota las siguientes tablas(link) en tu cuaderno y contesta lo que se pide. (Actividad 3).
PRÁCTICA 5
Escribe el código html de tal manera que pueda visualizarse la página web como se muestra en la imagen.
Una vez terminada la práctica espere a que la profesora la revise.
2. DANDO FORMA Y EFECTO AL TEXTO
Lee el siguiente texto y realiza la actividad que se encuentra al final de la lectura.
Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos la etiqueta <BR> (break o romper), la cual tampoco tiene etiqueta de cierre.
Para destacar parte del texto se puede usar:
<B> Y </B> para poner algo en negritas <bold>
<I> Y </I> Para poner algo en cursiva (italic)
<PRE> y </PRE> formato tipo máquina de escribir.
<TT> y </TT> Conseguimos que el texto tenga una menos tamaño y la apariencia de los caracteres de una máquina de escribir (typewriter)
<BLOCKQUOTE> Y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro del texto general.
<SUB> Y </SUB> Para subíndices
<SUP> Y </SUP> Para superíndices. Por ejemplo:
m2 se consigue de la siguiente de la siguiente manera : m <sub> 2 </sub>.
La etiqueta <FONT > </FONT> permite darle al texto un color, tipo y tamaño de fuente, utilizando sus atributos face, color y size. Por ejemplo:
<FONT COLOR ="RED" FACE= "ARIAL" SIZE= 10> HOLA, ESTE ES MI TEXTO COLOR ROJO TIPO ARIAL TAMAÑO 10 </FONT>
<body bgcolor="Yellow">
Permite colocar un color de fondo a la página. En este caso, el color es amarillo.
Etiqueta <MARQUEE> </MARQUEE>
Esta etiqueta nos sirve para dar un efecto diferente al texto de nuestra página web, gracias a ella podemos conseguir texto en movimiento.
Por ejemplo: <Center><marquee align="middle" width="30%" ><h1> MI PÁGINA WEB </H1></marquee></center>.
Escribe la anterior línea de código en la práctica 2, para dar un efecto de movimiento al encabezado (donde se agregó el nombre). Observe lo que hace
Investigar sobre los atributos align, bgcolor, height y width, scrollamount, scrolldelay, loop, direction, behavior, de la etiqueta <Marquee> </marquee>. (Actividad 2). Anotar en su libreta lo investigado. (Actividad 2)
Una vez leído lo anterior y lo ya visto en clase, anota las siguientes tablas(link) en tu cuaderno y contesta lo que se pide. (Actividad 3).
3. LISTAS
Existen tres tipos de listas en HTML, éstas son:Listas ordenadas, listas desordenadas y listas por definición.
Todas estas nos ayudan a dar una mejor visión a la página cuando se requiera presentar las cosas en forma de lista.
- Listas Desordenadas (Unordered List) Sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir predecidas por un número.
<UL>
<LI> Cosa 1
<LI> Cosa 2
....
<LI> etc
</UL>
z
- Listas Ordenadas (Ordered List). Sirven para presentar cosas en un orden determinado. La diferencia a las listas primero mencionadas, éstas irán enumeradas.
- Listas por Definición (Definition List). Son apropiadas para glosarios. Toda lista debe ir englobada entre las etiquetas <DL> y </DL>.
<OL>
<LI> Cosa 1
<LI> Cosa 2
....
<LI> etc
</OL>
1. El nombre de la cosa a definir se consigue con la etiqueta <DT> (definition Term)
2. La definición de dicha cosa, se consigue con la etiqueta <DD> (Definition Definition).
PRÁCTICA 3
Escriba el siguiente código en el bloc de notas y guárdala como .html. No olvides colocar formato de texto.
PRÁCTICA 3
Escriba el siguiente código en el bloc de notas y guárdala como .html. No olvides colocar formato de texto.
PRÁCTICA 4
De la práctica anterior, agregar 8 ejemplos de animales acuáticos, 8 terrestres y 8 aereo-terrestres. Recuerda anidar una lista dentro de otra.
Espere a que la docente revise su página y sea registrada.
PRÁCTICA 5
Escribe el código html de tal manera que pueda visualizarse la página web como se muestra en la imagen.
Una vez terminada la práctica espere a que la profesora la revise.
4. IMÁGENES
Incluir imágenes en una página web es muy sencillo, simplemente debemos tener en cuenta que las imágenes tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen utilizando la etiqueta <img>, que no tiene una etiqueta correspondiente de cierre. Ejemplo:
<IMG SRC= "imagen.jpg">.
La etiqueta IMG dispone de algunos atributos (unos obligatorios y otros opcionales), estos son:
SRC--> Atributo obligatorio, indica el nombre del archivo de la imagen o la URL desde la que se va a obtener la imagen.
ALIGN--> Permite controlar la alineación de una imagen respecto a una línea de texto.
ALT--> Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima.
WIDTH--> Atributo opcional para delimitar el ancho de la imagen.
HEIGHT--> Atributo opcional para delimitar el alto de la imagen.
BORDER--> Permite especificar el ancho del borde que rodea la imagen. Si se indica 0 equivale a “sin borde”.
Del código anterior (ejemplo), agregue una imagen para cada objeto de las listas.
Espere a que la docente revise su página y sea registrada.
Escriba el siguiente código en el bloc de notas, guárdelo como .html y observe lo que hace.
<html>
<head>
<title>mi página de la web </title>
</head>
<body>
<center>
<h1> MIS PÁGINAS FAVORITAS </h1>
<hr>
Estás son mis páginas favoritas:
<ul>
<li><a href="https://www.gob.mx/inin/"> ININ </a>
<li><a href="https://www.youtube.com/user/ElRobotdePlaton"> El robot de Platón </a>
<li><a href="https://selecciones.com.mx/"> Revista Selecciones </a>
</ul>
<P> Te recomiendo ampliamente que los visites.
</body>
</html>
Después agrega 4 sitios web que más te agraden o visites.
Espere a que la docente revise su página y sea registrada.
Crea una carpeta llamada "Práctica 9",Después agregue una documento de texto y Escriba el siguiente código y guárdelo como Intro.html
<html>
<head>
<title>Perú </title>
</head>
<body bgcolor="">
<h1> REPÚBLICA DEL PERÚ </H1>
<hr>
Perú es un país soberano ubicado al oeste de América del sur. Limita con Ecuador, Bolivia, Brasil, Colombia y Chile, así como con el Oceáno pacífico.
<p>
Para conocer sus tradicionales platillos da click en
<a href="comidaperuana.html">Gastronomía </a>
</body>
</html>
Dspués, dentro de la misma carpeta, agregue otro documento de texto y escriba el siguiente código:
<html>
<head>
<title>Perú </title>
</head>
<body bgcolor="">
<h1> REPÚBLICA DEL PERÚ </H1>
<h2><marquee behavior="alternate"> GASTRONOMÍA </marquee></h2>
<hr>
<ul>
<li>Ceviche
<li>Pollo a la Brasa
<li> Causa Rellena
<li> Papa a la Huancaína
<li> Anticuchos
</ul>
</body>
</html>
Guarde el documento como "comidaperuana.html" y observe lo que sucede.
Una vez, realizada la práctica, agregue formato al texto, describa e inserte una imagen de los platillos típicos.
PRÁCTICA 6
Crea una carpeta con el nombre Práctica6,Descarga una imagen de un perro y guárdala dentro de la carpeta que acaba de crear.
Escriba el siguiente código en el bloc de notas y guárdala como .html. No olvides colocar formato de texto. Observa lo que sucede
Escriba el siguiente código en el bloc de notas y guárdala como .html. No olvides colocar formato de texto. Observa lo que sucede
PRÁCTICA 7
Del código anterior (ejemplo), agregue una imagen para cada objeto de las listas.
Espere a que la docente revise su página y sea registrada.
5. ENLACES
Estructura de los enlaces
<A HREF="XXX"> YYYY </A>
donde XXX es el destino del enlace y YYYY es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)
Tipo de enlaces
- Enlaces dentro de la misma página.
- Enlaces con otra página.
- Enlaces con una página fuera de nuestro sistema.
- Enlaces con una dirección Email.
A) Enlaces dentro de la misma página.
Su estructura es:
<A HREF="#marca" > YYYY </A>
y el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME ="marca"></A>.
B) Enlaces con otra página nuestra
<A HREF= "mipag.html"> hola </A>
C) Enlace con una página fuera de nuestro sistema.
<A HREF="http://www.google.com"> página google </A>
D) Enlaces con una dirección de email.
<A HREF="mailto: dirección de email"> texto del enlace </A>
PRÁCTICA 8
Escriba el siguiente código en el bloc de notas, guárdelo como .html y observe lo que hace.
<html>
<head>
<title>mi página de la web </title>
</head>
<body>
<center>
<h1> MIS PÁGINAS FAVORITAS </h1>
<hr>
Estás son mis páginas favoritas:
<ul>
<li><a href="https://www.gob.mx/inin/"> ININ </a>
<li><a href="https://www.youtube.com/user/ElRobotdePlaton"> El robot de Platón </a>
<li><a href="https://selecciones.com.mx/"> Revista Selecciones </a>
</ul>
<P> Te recomiendo ampliamente que los visites.
</body>
</html>
Después agrega 4 sitios web que más te agraden o visites.
Espere a que la docente revise su página y sea registrada.
PRÁCTICA 9
Crea una carpeta llamada "Práctica 9",Después agregue una documento de texto y Escriba el siguiente código y guárdelo como Intro.html
<html>
<head>
<title>Perú </title>
</head>
<body bgcolor="">
<h1> REPÚBLICA DEL PERÚ </H1>
<hr>
Perú es un país soberano ubicado al oeste de América del sur. Limita con Ecuador, Bolivia, Brasil, Colombia y Chile, así como con el Oceáno pacífico.
<p>
Para conocer sus tradicionales platillos da click en
<a href="comidaperuana.html">Gastronomía </a>
</body>
</html>
Dspués, dentro de la misma carpeta, agregue otro documento de texto y escriba el siguiente código:
<html>
<head>
<title>Perú </title>
</head>
<body bgcolor="">
<h1> REPÚBLICA DEL PERÚ </H1>
<h2><marquee behavior="alternate"> GASTRONOMÍA </marquee></h2>
<hr>
<ul>
<li>Ceviche
<li>Pollo a la Brasa
<li> Causa Rellena
<li> Papa a la Huancaína
<li> Anticuchos
</ul>
</body>
</html>
Guarde el documento como "comidaperuana.html" y observe lo que sucede.
Una vez, realizada la práctica, agregue formato al texto, describa e inserte una imagen de los platillos típicos.
ACTIVIDAD 4
Investigue las funciones de los atributos "target" y "title" de la etiqueta <a> (enlaces) así como sus valores. Anote en su libreta.
5. TABLAS
Vamos a ver de manera ordenada las etiquetas necesarias para confeccionar las tablas.
1. La etiqueta general, que engloba a todas las demás es
<TABLE>
{Resto de las etiquetas}
</TABLE>
Para que los datos vayan dentro de cajas formadas por un borde tenemos que añadir el atributo BORDER a la etiqueta, es decir:
<TABLE BORDER>
{Resto de las etiquetas}
</TABLE>
2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, las cuales son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla, es decir:
<TR>
{Etiquetas de las distintas celdas de la primera fila}
</TR>
<TR>
{Etiquetas de las distintas celdas de la segunda fila}
</TR>
3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc). Hay que repetirla tantas veces como celdas que queremos que haya en esa fila.
Ejemplo: Escriba el código en un documento de texto nuevo.
<html>
<head>
<title>TABLAS </title>
</head>
<body bgcolor="">
<h1> EJEMPLO DE TABLA</H1>
<hr>
<TABLE>
<TR>
<TD> fila 1-celda1</TD> <TD> fila 1-celda2</TD> <TD> fila 1-celda3</TD>
</TR>
<TR>
<TD> fila 2-celda1</TD> <TD> fila 2-celda2</TD> <TD> fila 2-celda3</TD>
</TR>
</TABLE>
</body>
</html>
<head>
<title>TABLAS </title>
</head>
<body bgcolor="">
<h1> EJEMPLO DE TABLA</H1>
<hr>
<TABLE>
<TR>
<TD> fila 1-celda1</TD> <TD> fila 1-celda2</TD> <TD> fila 1-celda3</TD>
</TR>
<TR>
<TD> fila 2-celda1</TD> <TD> fila 2-celda2</TD> <TD> fila 2-celda3</TD>
</TR>
</TABLE>
</body>
</html>
Observe lo que resulta.
Genera una página web que muestre una tabla, visualizando el nombre de los siguientes países (México, Canadá,Turquía, Nueva Zelanda, Inglaterra, Corea del norte, Corea del sur, India, Mauritania, Egipto, Ucrania, Colombia, China y Perú), mostrando en una columna el nombre del país, en otra columna su capital y en la siguiente columna la bandera correspondiente. RECUERDE CREAR UNA CARPETA NUEVA Y AHÍ GUARDAR LAS IMAGENES NECESARIAS, ASÍ COMO SU PÁGINA WEB.
Puede iniciar la tabla como se muestra:
<TABLE border>
<TR>
<TD COLSPAN=3 ALIGN="CENTER">PAÍSES DEL MUNDO </TD>
</TR>
<TR>
<TH> PAÍS</TH> <TH> CAPITAL</TH> <TH> BANDERA</TH>
</TR>
<TR>
<TD> México</TD> <TD> Ciudad de México</TD> <TD> <img src="mex.jpg"></TD>
</TR>
<TR>
<TD> Canadá</TD> <TD> Ottawa</TD> <TD> <img src="Can.jpg"></TD>
</TR>
</TABLE>
PRÁCTICA 10
Genera una página web que muestre una tabla, visualizando el nombre de los siguientes países (México, Canadá,Turquía, Nueva Zelanda, Inglaterra, Corea del norte, Corea del sur, India, Mauritania, Egipto, Ucrania, Colombia, China y Perú), mostrando en una columna el nombre del país, en otra columna su capital y en la siguiente columna la bandera correspondiente. RECUERDE CREAR UNA CARPETA NUEVA Y AHÍ GUARDAR LAS IMAGENES NECESARIAS, ASÍ COMO SU PÁGINA WEB.
Puede iniciar la tabla como se muestra:
<TABLE border>
<TR>
<TD COLSPAN=3 ALIGN="CENTER">PAÍSES DEL MUNDO </TD>
</TR>
<TR>
<TH> PAÍS</TH> <TH> CAPITAL</TH> <TH> BANDERA</TH>
</TR>
<TR>
<TD> México</TD> <TD> Ciudad de México</TD> <TD> <img src="mex.jpg"></TD>
</TR>
<TR>
<TD> Canadá</TD> <TD> Ottawa</TD> <TD> <img src="Can.jpg"></TD>
</TR>
{Anexar los países faltantes más}
</TABLE>
NOTA: (anote en su libreta)
<TD COLSPAN=3 ALIGN="CENTER"> Permite combinar el 3 columnas y centrar el texto en la celda.
<TH> PAÍS</TH> <TH> CAPITAL</TH> <TH> BANDERA</TH> Permite crear encabezados a una tabla
PRÁCTICA 11
A la práctica anterior, agrega una nueva columna con encabezado " Moneda" , mostrando el nombre de la moneda de cada país, además agregando un enlace en cada imagen de la bandera para mostrar más información del país.
Nota: El enlace puede ser a una página externa.
RÚBRICA PARA EVALUAR PROYECTO 1° TRIMESTRENota: El enlace puede ser a una página externa.
