Embed Size (px)
Citation preview
Electivo webPrimer Semestre 2008
TallerTaller
Las siglas HTML corresponden a Hypertext Markup Language (Lenguaje de Marcado de Hipertexto). Se trata de un conjunto de códigos –denominados etiquetas– que se usan para controlar la forma en que se muestra el documento en un navegador de Web
(como Netscape Navigator/Communicator o Microsoft Internet Explorer). Un documento de formato basado en etiquetas de HTML se denomina 'documento HTML‘.
El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Funcionan de la siguiente manera:
<XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta.
Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las
etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML>
Poner texto en negrita
La instrucción para que un texto se ponga en negrita es <b> Teoría del Diseño </b>
La instrucción de cierre tiene que llevar el signo /
Por lo tanto:
A) Ponemos el código de inicio para poner el texto en negrita
<b>
B) A continuación el texto que queremos que aparezca en negrita y
C) Al final el código de cierre </b>
El documento en sí está dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido. Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.) Por tanto, la estructura queda de esta manera:
<HTML> <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <BODY> [Aquí van las etiquetas que visualizan la página] </BODY> </HTML>
Algunas etiquetas básicas de html
<HTML> Es la etiqueta que define el inicio del documento html, le indica al navegadorque todo lo que viene a continuación debe tratarlo como una serie de códigos html.
<HEAD> Define la cabecera del documento html, suele contener información sobre el documento que no se muestra directamente en el navegador, como por ejemplo, el título de la ventana de su navegador.
Dentro de la cabecera encontramos <TITLE> Define el título de la página. Por lo general, el título aparece en la barra encima de la ventana.
<BODY> Define el contenido principal o cuerpo del documento, esta es la parte quese muestra en el navegador, dentro de esta etiqueta pueden definirse propiedadescomunes a toda la página, como color de fono y márgenes.
Dentro del cuerpo encontramos numerosas etiquetas:
<P> párrafo nuevo
<BR> salto de línea forzado
<TABLE> comienzo de una tabla, (las filas se indican con <TR> y las celdas dentro de las filas con <TD>.
<a href=>indica la existencia de un hipervínculo o enlace, dentro o fuera de la página web.
<html><head><title>Clase de Electivo Web</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"><!--.Estilo1 {font-family: Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color: #000066;}body,td,th { color: #996633;}body {background-color: #8FA34E;}.Estilo2 {color: #000066; font-family: Verdana, Arial, Helvetica, sans-serif;}--></style></head><body><p align="justify"><span class="Estilo1"><img src="/electivo/cuadro5.jpg" width="150" height="200" align="right">Esta es una página de prueba elaborada especialmente para Electivo Web, <span class="Estilo2">con el objetivo de explicar cómo funciona el lenguaje HTML.</span><br> <br> </span><span class="Estilo2"><br><span class="Estilo2">Esta es una página de prueba elaborada especialmente para Electivo Web, con el objetivo de explicar cómo funciona el lenguaje HTML.</span></span></p><p> </p></body></html>
EJEMPLO ALINEAR A LA IZQUIERDA
<p align="left">alineamos el texto a la izquierda</p>
alineamos el texto a la izquierda
EJEMPLO ALINEAR A LA DERECHA
<p align="right">alineamos el texto a la derecha</p>
alineamos el texto a la derecha
EJEMPLO DE CENTRAR
<p align="center">centramos el texto</p>
centramos el texto
PASAR A LA SIGUIENTE LINEA
Cuando queremos pasar el texto a otra línea podemos utilizar el "tag" <br>
que no tiene tag de cierre.
Si queremos separar el siguiente texto en varias líneas.
la casa el perro el niño las vacaciones
Pondremos:
la casa<br>
el perro<br>
el niño<br>
las vacaciones<br>
Y en el documento HTML mostrará en el navegador:
la casael perroel niñolas vacaciones
PONER ENLACES
Lo más característico de Internet es ser un medio que no es lineal, sino de hipertexto, es decir, que utiliza enlaces para pasar entre distintos niveles o páginas.
La instrucción para un enlace es de la forma <A HREF="aqui ponemos la dirección a la que queremos que apunte el enlace">el texto que queremos que se vea en el documento</A>
EJEMPLO
Queremos enlazar con la página www.tercera.cl y que el texto que se vea sea “Diario La Tercera“.
<A HREF="http://www.tercera.cl/">Diario La Tercera</A>
Recuerda que los enlaces externos a otras páginas deben llevar la dirección completa de la página.
Ejercicio en clase
Revisa el sitio http://periodismo.usach.cl/grupo01 y encontrarás archivos que van del 01 al 05, ábrelos e interpreta y escribe el código html de cada uno de ellos.
