Laboratorio 1 Paginas Web y HTML Universidad de Chile – Bachillerato Laboratorio 1 Paginas Web y HTML Profesor: Profesor Auxiliar: Cristian Wilckens Patricio Bahamondes Fecha: 26 de Marzo del 2010 Curso: Computación
Introducción ¿Que es HTML? HTML es la sigla para Universidad de Chile – Bachillerato Introducción ¿Que es HTML? HTML es la sigla para HiperText Markup Language o Lenguaje 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 Universidad de Chile – Bachillerato 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
Estructura básica de un Documento HTML Universidad de Chile – Bachillerato 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 <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 Universidad de Chile – Bachillerato Estructura básica de un Documento HTML 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
<P> ….</P> Universidad de Chile – Bachillerato 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 Universidad de Chile – Bachillerato 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 Universidad de Chile – Bachillerato 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 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 <LI>Primer subitem <LI>Segundo subitem </OL> <LI>Tercer ítem </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 <LI>Primer subitem <LI>Segundo subitem </UL> <LI>Tercer ítem </BODY> </HTML> Curso: Computación
Listas Descriptivas <DD>Descripción del primer nombre Universidad de Chile – Bachillerato Listas Descriptivas <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> <td>Edad:</td><td>??</td> </table> </BODY> </HTML> Curso: Computación
Universidad de Chile – Bachillerato 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” <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: Universidad de Chile – Bachillerato 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. <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: Universidad de Chile – Bachillerato 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. <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 2 Escribir su biografía en una página Web. Universidad de Chile – Bachillerato Actividades Lab. 1 y 2 Escribir 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] - Alumno Notas en: http://curso.portalbw.com Curso: Computación