Html

156 visualizaciones

Publicado el

manual html

Publicado en: Educación
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
156
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Html

  1. 1. Crea tu primer sitio web
  2. 2. 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):
  3. 3. 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?
  4. 4. <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>
  5. 5. #RRVVAA COLOR #RRVV AA COLO R #FFFFFF Blanco #00000 0 Negro #FF0000 Rojo #00FF0 0 Verde #0000FF Azul #FF00F F Magen te #00FFFF Cyan #FFFF0 0 Amarill o #70DB93 Agua Marino #00008 0 Azul Marino #FF7F00 Coral #A62A 2A Café #C0C0C0 Plomo #4F2F4 F Violeta
  6. 6. 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 Background Bgsound Bgproperties Define el archivo gráfico que será desplegado como fondo Define el archivo de audio que se tocará en la página. Define el movimiento vertical del fondo.
  7. 7. 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 WEB Empieza 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.
  8. 8. 2.- Escoge un tema para tu página web El 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 desarrollar 4.- 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 Web 5.- ¿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
  9. 9. 6.- Escalabilidad La 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ón En 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:
  10. 10. 8.- Definición del diseño Dependiendo 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.
  11. 11. Manejar los elementos básicos del lenguaje HTML en la creación de páginas web ACTIVIDAD 5 Antes 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
  12. 12. ESTRUCTURA BÁSICA Cada 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>
  13. 13. EJEMPLOS: CCLASIFICACIÓN Lenguaje HTML Sitio Web profesional Capacitación de Informática Sitio Web profesional Mi artista favorito Sitio Web de ocio Portafolio de evidencias de mis materias Sitio web de información Negocio familiar Sitio Web comercial Mi ciudad Sitio web de información Mi escuela Sitio web de información
  14. 14. 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:
  15. 15.  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
  16. 16. Atributos de la etiqueta FRAME SCROLLING: 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:
  17. 17. <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> FRAMES Ejemplo 2
  18. 18. FRAMES
  19. 19. FRAMES
  20. 20.  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
  21. 21. <FRAMESET COLS="150,*"> <FRAME SRC="frame1.htm"> <FRAMESET ROWS="100,*" BORDER="20"> <FRAME SRC="frame21.htm"> <FRAME SRC="frame22.htm"> </FRAMESET> </FRAMESET> FRAMES
  22. 22. 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>
  23. 23. <!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&aacute;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>
  24. 24. EJEMPLO Vamos 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>
  25. 25. 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>
  26. 26. 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&aacute;genes</H1> <IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb&eacute;" ALIGN="RIGHT"> <IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un beb&eacute;" ALIGN="LEFT"> Un texto cualquiera. </BODY>

×