html
TRANSCRIPT
Crea tu primer sitio web
Cómo?En la lección 1 vimos qué se necesita para crear un sitio web: un navegador y el Bloc de notas (o un editor de texto similar). Puesto que estás leyendo esto, lo más probable es que ya tengas abierto el navegador. Lo único que necesitas es abrir otra ventana del navegador de forma que puedas leer este tutorial y veas cómo va quedando tu nuevo sitio web al mismo tiempo.Abre también el Bloc de notas (que se encuentra en el menú de Inicio, Todos los programas, en la sección Accesorios):
Empecemos con algo sencillo. Que te parece una página que diga: "¡Hurra! Esta es mi primera página web." Sigue leyendo y verás qué sencillo es.HTML is sencillo y lógico. El navegador lee el código HTML igual que lo haces tú: de arriba abajo y de izquierda a derecha. Así pues, todo documento HTML empieza con lo que debería aparecer en primer lugar en la página y termina con lo que debería ir en último lugar.Lo primero que tienes que hacer es decirle al navegador que le "hablarás" usando el lenguaje HTML. Esto se consigue con la etiqueta <html> (sin sorpresas, ¿no?). Así que antes de hacer cualquier otra cosa, escribe "<html>" en la primera línea del documento creado con el Bloc de notas.Como recordarás de las lecciones anteriores, <html> es una etiqueta de inicio y tiene que cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escribir el código HTML. Así que para no olvidar la etiqueta de cierre del elemento HTML escribe "</html>" un par de líneas más abajo, y entre ambas etiquetas <html> y </html> escribe el resto del documento.Lo siguiente que necesita el documento es una "cabecera", que proporcionará información relativa a este mismo documento, y un "cuerpo" donde se incluirá el contenido del documento. Puesto que HTML es de lo más lógico, la cabecera (es decir, las etiquetas <head> y </head>) se encuentra encima del cuerpo (o sea, encima de las etiquetas <body> y </body>).El documento debería presentar ahora este aspecto:
Y qué puedo hacer?
<html> <head><title>Practica1</title> </head> <body bgcolor="#FFC0CB"> <h1 bgcolor="#C71585">mi primer ejemplo</h1><img src="imagen.JPG"> </body></html>
<ol> <li>Primer elemento de lista</li> <li>Segundo elemento de lista</li>
</ol>
#RRVVAA COLOR #RRVVAA COLOR
#FFFFFF Blanco #000000 Negro
#FF0000 Rojo #00FF00 Verde
#0000FF Azul #FF00FF
Magente
#00FFFF Cyan #FFFF00
Amarillo
#70DB93 Agua Marino #000080
Azul Marino
#FF7F00 Coral #A62A2A Café
#C0C0C0 Plomo #4F2F4F Violeta
Bgcolor Define el color de fondo de la página
Text Define el color del texto de la página
Link Define el color de los vínculos en la página
Alink Define el color del vínculo actual o activado en la página
Vlink Define el color del vínculo ya visitado
BackgroundBgsoundBgproperties
Define el archivo gráfico que será desplegado como fondoDefine el archivo de audio que se tocará en la página.Define el movimiento vertical del fondo.
DISEÑO DE UNA PÁGINA WEB
Antes de entrar de lleno en lo que será la construcción de la página web, desarrollaremos la metodología para el diseño de las mismas. Es importante ser originales para estructurar sus contenidos, redactar sus textos, agregar imágenes, enlazar las páginas, etc,
1. ELEGIR POSIBLES TEMAS A TRATAR EN LA PÁGINA WEBEmpieza haciéndote esta pregunta ¿De qué puedo hablar en mi página web? ¿Cuál es la temática que voy a trabajar? Para contestar estas preguntas haremos un listado de posibles temáticas que te puedan interesar para realizar la página web. Más adelante iremos eliminando y añadiendo otras según los factores que vamos a tener en cuenta y según cuál sea tu objetivo: ganar muchas visitas, ganar mucho dinero, o cualquiera que sea el fin de tu página web.
2.- Escoge un tema para tu página webEl factor más importante, es, que el tema nos apasione. De modo que de la lista de temas que tengo, voy a ordenarlos Según me gusten. (El tema que quede primero es sobre el que desarrollar4.- Definición de la Información a publicar.Después de que hayas seleccionado el tema de la página web es necesario definir la información que se va a publicar en el sitio Web5.- ¿Qué fuentes de información tengo?Una fuente de información es el lugar del que manan los conceptos, las ideas y los pensamientos que sirven para la creación de nuevo conocimiento en este caso una página web. Por lo tanto, en este apartado necesitamos recolectar las fuentes de información de donde vamos a extraer información del tema de nuestra página web
6.- EscalabilidadLa escalabilidad se define como las visiones a corto y largo plazo acerca de nuestro sitio Web, si a largo tiempo queremos ampliar nuestro sitio Web con nuevas aplicaciones, nuevas páginas, actualizaciones constantes de que va a depender que realicemos esto:}
7.- PlanificaciónEn todo proceso de creación y diseño de páginas Web el primer paso a llevar a cabo será la planificación, que incluye la definición de:OBJETIVOS: Presentar información de la preparatoria que sea atractiva para los jóvenes de nuevo ingreso.a) PÚBLICO: identificar el tipo de personas a la que va dirigida la información, en este caso todo tipo de personas podrán acceder a la página pero el público seleccionado será los estudiantes de secundaria y todos aquellos jóvenes que estén buscando educación del nivel medio superior.b) CONTENIDO: habrá información sobre el plantel y la preparación que otorga a los jóvenes.c) ESTRUCTURA: Estará formada por una página principal que brindara información y ofrecerá enlaces para ir las secciones del sitio web: materias, capacitaciones, Paraescolares, etc. Tendrá otras 3 páginas web más que estarán ligadas a la primera como se muestra en la estructura siguientes:
8.- Definición del diseñoDependiendo del tipo de Web, el tema seleccionado, definida la información y la escalabilidad, estamos preparados para plasmar en papel el diseño de la página Web, incluyendo las páginas, los fondos, tipos de letras, botones, formularios, links, plantillas, aplicaciones.... de tal forma que obtengamos "storyboard" (es un conjunto de ilustraciones mostradas con el objetivo de servir de guía para entender una historia, pre visualizar una animación o seguir la estructura de una página web antes de realizarse) de los elementos y diseño que queremos implementar en nuestro sitio Web.
Manejar los elementos básicos del lenguaje HTML en la creación de páginas webACTIVIDAD 5Antes de empezar a crear la página web es necesario que conozcas los términos básicos que estarás utilizando en el transcurso de este bloque, por lo que es necesario que realices una búsqueda en Internet y definas lo siguiente:Bloc de Notas:__________________________________________Buscador:_______________________________________________________________________________________________________________Compatible: ___________________________________________Estructura de página web:__________________________________________Etiqueta:____________________________________Hipertexto:__________________________________________Lenguaje html:__________________________________________Marcas (tag)__________________________________________Navegador:_________________________________________Página web:__________________________________________Plataforma:___________________________________________Servidor web:___________________________________________Vínculos
ESTRUCTURA BÁSICACada página comienza con: < HTML > .A continuación viene la cabecera, delimitada por < HEAD > < /HEAD >Después, el comando < BODY >, que indica el comienzo del cuerpo de la página.Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >La página acabará con < /HTML >
<body style="background-color:#ff0000;"> fondo de la pagina
<h2 style="background-color:#ff0000;">Mi amistad con HTML</h2> <img src="imagen.JPG"> <embed src="El Perdon.mp3" volume="80" loop=infinite weidth="400" height="40" autostart="true"> <a href="pagina2.html">Haz clic para ir a la página 2</a> <a href="pagina3.html">Haz clic para ir a la página 2</a>
EJEMPLOS: CCLASIFICACIÓNLenguaje HTML Sitio Web profesionalCapacitación de Informática Sitio Web profesional
Mi artista favorito Sitio Web de ocioPortafolio de evidencias de mis materias Sitio web de información
Negocio familiar Sitio Web comercialMi ciudad Sitio web de informaciónMi escuela Sitio web de información
FRAMES El primer paso será crear el documento
de definición de frames. Abrimos nuestro editor y creamos un nuevo archivo. En este caso lo llamaremos index.htm y escribimos en él el siguiente código:
Con esto tendremos una página que dividirá la ventana del navegador en una columna izquierda y otra derecha que ocupan el 20% y el 80% del ancho respectivamente. El contenido de cada una de estas columnas estará en los archivos izquierda.htm y derecha.htm
<HTML> <HEAD> <TITLE> Primera página con frames </TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="izquierdo.html"> <FRAME SRC="derecho.html"> </FRAMESET> </HTML>
FRAMES
Atributos de la etiqueta FRAMESCROLLING: Usando este atributo podemos controlar la aparición o no de barras de desplazamiento. Los valores que puede tomar este atributo son:
SCROLLING="auto": Este es el valor por defecto y provoca que el navegador sólo inserte barras de desplazamiento si el contenido del frame ocupa más del espacio dedicado para él.
SCROLLING="yes": Las barras de desplazamiento aparecerán siempre. SCROLLING="no": Las barras de desplazamiento no aparecerán nunca. Hay
que tener mucho cuidado si usamos esta opción porque si la página ocupa más que el espacio de la ventana dedicado al frame la información que no quepa en un principio no podrá ser vista.
NORESIZE: Por defecto los usuarios pueden mover los bordes de los frames sin más que situar el ratón sobre ellos y arrastrarlos. Si incluimos este atributo en la etiqueta FRAME evitaremos que el borde de ese frame pueda ser movido. Es necesario notar que este atributo no toma ningún valor.
MARGINHEIGHT: Ajusta el margen superior que debe respetar el contenido de ese frame. El tamaño debe ser dado en pixeles.
MARGINWIDTH: Ajusta el margen lateral que debe respetar el contenido del frame. Al igual que antes, el margen debe ser dado en pixeles.
Para terminar vamos a ver un ejemplo del uso de todos ellos:
<FRAMESET COLS="110,*" ROWS="110,*"> <FRAME NAME="Imagen"SRC="cuadrado.gif"MARGINWIDTH="0"MARGINHEIGHT="0"SCROLLING="No"FRAMEBORDER="No" <FRAME SRC="f2.htm" <FRAME SRC="rect.gif" SCROLLING="no"> <FRAME SRC="f4.htm"MARGINWIDTH="100"MARGINHEIGHT="100" </FRAMESET>
FRAMESEjemplo 2
FRAMES
FRAMES
Cambiando el color del borde<FRAME BORDERCOLOR="red"><FRAME BORDERCOLOR="#FF0000">Como quitar el borde <FRAME FRAMEBORDER="0"> <FRAMESET COLS="150,*"> <FRAME SRC="frame1.htm" FRAMEBORDER="0"> <FRAMESET ROWS="100,*"> <FRAME SRC="frame21.htm" FRAMEBORDER="0"> <FRAME SRC="frame22.htm" FRAMEBORDER="0"> </FRAMESET> </FRAMESET>
FRAMES
<FRAMESET COLS="150,*"> <FRAME SRC="frame1.htm"> <FRAMESET ROWS="100,*" BORDER="20"> <FRAME SRC="frame21.htm"> <FRAME SRC="frame22.htm"> </FRAMESET> </FRAMESET>
FRAMES
TABLAS<table border="1"> <tbody> <tr> <th>Cabereca 1</th> <th>Cabereca 2</th> <th>Cabereca 3</th> </tr> <tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td> </tr> <tr> <td>Dato 4</td> <td>Dato 5</td> <td>Dato 6</td> </tr> </tbody></table>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title></head><body><h1>Tablas básicas</h1><table border="1"> <tbody> <tr> <th>Cabereca 1</th> <th>Cabereca 2</th> <th>Cabereca 3</th> </tr> <tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td> </tr> <tr> <td>Dato 4</td> <td>Dato 5</td> <td>Dato 6</td> </tr> </tbody></table><br></body></html>
EJEMPLOVamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño "1" y de largo el 50% del ancho de página. Y le ponemos a una celda fondo rojo con el atributo bgcolor="red" y a otra fondo azul
<table border="1" cellpadding="0" cellspacing="0" width="50%"><tr><td width="50%" bgcolor="red"></td><td width="50%" bgcolor="blue"></td></tr><tr><td width="50%"></td><td width="50%"></td></tr></table>
<font color="red">
<font face="Arial" color="orange" size=1>
width= Acompaña a <table> y especifica el ancho de la tabla, tanto en número de pixeles como en porcentaje respecto al ancho de la pantalla. También puede acompañar a las tags <th> o <td> para especificar el ancho de las columnas.Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que indicará el ancho del borde en pixeles. Border="0" indicaría la ausencia de borde.Cellspacing= Suele acompañar a la tag <table>. Indica el número de pixeles que separan cada celda. El valor predeterminado suele ser 2.Cellpadding= También acompaña a la tag <table>. Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1.
<BODY> <H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2"> <TR> <TD COLSPAN="2" ALIGN="right">Dato 1</TD> <TD>Un texto cualquiera</TD> <TD ROWSPAN="2">Dato 3</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 4</TD> <TD ALIGN="center">Dato 5</TD> </TR> </TABLE>
src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.Align= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé"><HEAD>
<TITLE>Ejemplo 12</TITLE> </HEAD> <BODY> <H1>Imágenes</H1> <IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé" ALIGN="RIGHT"> <IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un bebé" ALIGN="LEFT"> Un texto cualquiera. </BODY>
