Laboratorio 1 Paginas Web y HTML Universidad de Chile – Bachillerato Curso: Computación Cristian Wilckens Patricio Bahamondes Fecha: 26 de Marzo del 2010

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)


Curso: Computación

Estructura básica de un Documento HTML

La estructura básica de un documento HTML es:


<HTML> <HEAD> …….. </HEAD> <BODY>

…….... …….... …….... ……....

</BODY></HTML>

Curso: Computación


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


<HTML> <HEAD> <TITLE>Mi Pagina</TITLE> </HEAD> <BODY>

Esta es mi primera pagina ……....

…….... …….... ……....

</BODY></HTML>

Curso: Computación


Habitualmente, se ocupan los META TAGS para entregar información extra a los navegadores o buscadores.


<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.


<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>


<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>


<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


<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


<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



<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



<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


<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


<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”



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:[email protected]> Mail </a>

Existen varios atributos más respecto al comportamiento de los enlaces al utilizar el mouse. Vean los manuales para más detalles.



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:[email protected]”>[email protected]</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.



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: [email protected] Titulo: [BACHI][LAB1] - AlumnoNotas en: http://curso.portalbw.com


Documents

Laboratorio 1 Paginas Web y HTML Universidad de Chile – Bachillerato Curso: Computación Cristian Wilckens Patricio Bahamondes Fecha: 26 de Marzo del 2010