Post on 13-Feb-2015
Laboratorio 1Paginas Web y HTML
Universidad de Chile – Bachillerato
Curso: Computación
Cristian WilckensPatricio Bahamondes
Fecha: 26 de Marzo del 2010
Profesor:Profesor Auxiliar:
Curso: Computación
Introducción
¿Que es HTML?HTML es la sigla para
HiperText Markup Language oLenguaje de Marcado de Hipertexto
O sea, es la forma de presentar y crear texto usando marcado (tags)
Universidad de Chile – Bachillerato
Curso: Computación
Estructura básica de un Documento HTML
La estructura básica de un documento HTML es:
Universidad de Chile – Bachillerato
<HTML> <HEAD> …….. </HEAD> <BODY>
…….... …….... …….... ……....
</BODY></HTML>
Curso: Computación
Estructura básica de un Documento HTML
Dentro del HEAD se identifica habitualmente el Título de la Página Web con el tag:
<TITLE>……</TITLE>
Dentro del BODY se pone toda la información (texto) que queramos presentar con el documento HTML
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY>
Esta es mi primera pagina ……....
…….... …….... ……....
</BODY></HTML>
Curso: Computación
Estructura básica de un Documento HTML
Habitualmente, se ocupan los META TAGS para entregar información extra a los navegadores o buscadores.
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> <META NAME=“Generator" CONTENT=“Notepad"> <META NAME="Author" CONTENT=“PB"> <META NAME="Keywords" CONTENT=“Musica"> <META NAME="Description" CONTENT=“bla bla bla"> <META NAME=“Date" CONTENT=“2008/04/21"> </HEAD> <BODY>
Esta es mi primera pagina ……....
…….... </BODY></HTML>
Curso: Computación
Comandos Básicos
•Comando párrafo
<P> ….</P>
Produce separación en párrafos del texto, permite además alinear los párrafos a la derecha, centro, izquierda.
•Comando quiebre de línea
<br />
Genera un salto de línea.
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY> <p>Esta es mi primera pagina</p> así que va a ser <br />corta. <p align="right">pero nunca tanto</p> ……....
…….... </BODY></HTML>
Curso: Computación
Comandos de encabezamiento
Existen básicamente 6 niveles de encabezamientos que sirven para dividir el texto, H1 es el más grande hasta H6 que es el más pequeño de los divisores
<H1>Nivel de encabezado 1</H1><H2>Nivel de encabezado 2</H2><H3>Nivel de encabezado 3</H3><H4>Nivel de encabezado 4</H4><H5>Nivel de encabezado 5</H5><H6>Nivel de encabezado 6</H6>
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY> <h1>Mi primera pagina</h1> <h2>introducción</h2> <p>Esta es mi primera pagina</p> así que va a ser <br />corta. <p align="right">pero nunca tanto</p> .... .... </BODY></HTML>
Curso: Computación
Comandos de apariencia
Estos son los típicos. Se pueden mezclar entre ellos
<B>Negrita (Bold)</B><I>Cursiva (Italic)</I><EM>énfasis (Emphasis)</EM><STRONG>énfasis</STRONG><U>Subrayado (Underline)</U><del>Borrado (Delete)</del>
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY> <h1>Mi primera pagina</h1> <h2>introducción</h2> <p><B>Esta</B> es mi primera <I> pagina </I> </p> así que va a ser <br /><EM>corta.</EM> <p align="right">pero <STRONG>nunca</STRONG> tanto</p> Además la clase esta súper <del>FOME</del> ENTRETENIDA! .... .... </BODY></HTML>
Curso: Computación
Ejemplo Básico
Universidad de Chile – Bachillerato
<HTML> <HEAD>
<TITLE> Ejemplo básico</TITLE> </HEAD> <BODY>
<H1>Ejemplo numero uno</H1><H2>Primera parte</H2><P>Aprendimos a usar el comando párrafo.</P> O a cortar
una línea usando BR.<BR><H1>Segunda parte</H><P>Aprendimos a marcar palabras <B>importantes</B>,
otras <B><I>mas importantes</I></B>, <H2>Nota</H2>
<P>También aprendimos a hacer <del>eliminar</del> el texto.</P>
</BODY></HTML>
Curso: Computación
Listas Numeradas
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY> <h1>Mi primera pagina</h1> <h2>Listas</h2>
<OL><LI>Primer ítem<LI>Segundo ítem<OL>
<LI>Primer subitem<LI>Segundo subitem
</OL><LI>Tercer ítem
</OL> </BODY></HTML>
Curso: Computación
Listas No Numeradas
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY> <h1>Mi primera pagina</h1> <h2>Listas</h2>
<UL><LI>Primer ítem<LI>Segundo ítem<UL>
<LI>Primer subitem<LI>Segundo subitem
</UL><LI>Tercer ítem
</UL> </BODY></HTML>
Curso: Computación
Listas Descriptivas
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY> <h1>Mi primera pagina</h1> <h2>Listas</h2>
<DL> <DT>Primer nombre a describir</DT>
<DD>Descripción del primer nombre <DT>Segundo nombre a describir</DT> <DD>Descripción del segundo nombre</DL>
</BODY></HTML>
Curso: Computación
Comandos de Formato
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY> <CENTER><h1>Mi primera pagina</h1></CENTER> <HR> <h2>Introducción</h2> <!- - empezar a escribir aquí - -></BODY></HTML>
Curso: Computación
Tablas
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY> <CENTER><h1>Mi primera pagina</h1></CENTER> <HR> <h2>Introducción</h2> <!- - empezar a escribir aquí - -> <table width="80%"> <tr> <td>Nombre:</td><td>Patricio Bahamondes</td> </tr> <tr> <td>Edad:</td><td>??</td> </tr> </table></BODY></HTML>
Curso: Computación
Referencias
Hay varios tipos, la más utilizada es referenciar a otro documento, para ello se utiliza el comando
<A href="ubicación"> ... </A>
Ubicación puede ser su URL, o sea,
http://www.uchile.cl/
O una dirección relativa a la estructura del directorio
“../docs/prueba1.html”
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY>
Esta es mi primera pagina y estudio en la <a href=“http://www.uchile.cl”>Universidad de Chile</a> </BODY></HTML>
Curso: Computación
Referencias
Hay enlaces para correo:
<a href=mailto:nombre@servidor.cl> Mail </a>
Existen varios atributos más respecto al comportamiento de los enlaces al utilizar el mouse. Vean los manuales para más detalles.
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY>
Esta es mi primera pagina y estudio en la<a href=“http://www.uchile.cl”>Universidad de Chile</a>,mi dirección de correo es:<a href=“mailto:pbahamondes@gmail.com”>pbahamondes@gmail.com</a> </BODY></HTML>
Curso: Computación
Imágenes
Para agregar una imagen se utiliza el comando:
<IMG SRC=“archivo_imagen“ width=““ height=““>
Si el alto o el ancho no se especifican, la imagen será “escalada” automáticamente; es decir, si mi foto es de 1024x768 y colocamos widht=“800”, el alto será modificado automáticamente a 600 pixeles.
Universidad de Chile – Bachillerato
<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY>
Esta es mi primera pagina <IMG SRC=“mi_foto.jpg“> </BODY></HTML>
Curso: Computación
Actividades Lab. 1 y 2Escribir su biografía en una página Web.
El nombre del archivo a entregar es: Nombrealumno.html Ej: patriciobahamondes.html
Debe contener:
(0,5pts) Titulo en el header(1,0pts) Títulos (H1, H2,…)(1,0pts) Párrafos (al menos 2, uno centrado y otro alineado a la derecha)(0,5pts) Listas Numeradas(0,5pts) Listas No Numeradas(1,5pts) Tabla (3x3 por lo menos)(1,0pts) Imágenes (al menos 2) Color en el fondo de la página
Enviar a: pbahamondes@gmail.com Titulo: [BACHI][LAB1] - AlumnoNotas en: http://curso.portalbw.com
Universidad de Chile – Bachillerato