Está en la página 1de 38

Instituto Tcnico Jess Obrero 5to Ao.

Docente: Sara Bermdez

Qu es HTML?
y El HTML (Hyper Text Markup Language) es el lenguaje

con el que se escriben las pginas web.


y Es un lenguaje de hipertexto, es decir, un lenguaje que

permite escribir texto de forma estructurada.


y Est compuesto por etiquetas encerradas en corchetes

angulares <>, que marcan el inicio y el fin de cada elemento del documento.

Caractersticas
y Un documento hipertexto no slo se compone de texto,

puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
y Los

documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web).

Los navegadores. Compatibilidad


y Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado. y A veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. y Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina.

Editores
y Un editor es un programa que nos permiten redactar documentos. y Hoy en da existen un gran nmero de editores que permiten crear

pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML.

y Estos

editores disponen de un entorno visual, y generan automticamente el cdigo HTML de las pginas.

y Estos editores visuales pueden generar en ocasiones cdigo basura, es

decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas.

Editores
y Algunos de los editores visuales con los que se podr crear

pginas web son:


y Macromedia Dreamweaver, y Microsoft Frontpage, y Adobe Pagemill, y NetObjects Fusion, y CutePage, y HotDog Proffesional, y Netscape Composer y y Arachnophilia

Etiquetas
y Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. y Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. y La etiqueta de caracteres < y >.

comienzo

est

delimitada

por

los

y Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. y Su sintaxis es: <identificador atributo1 atributo2 ...>

Etiquetas
y La

etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>

y Cada uno de los elementos de la pgina se encontrar

entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre.
y Tambin es posible anidar etiquetas, es decir, insertar

etiquetas entre otras etiquetas de comienzo y de cierre.

Etiquetas
y A continuacin tenemos un ejemplo en el que tenemos la

etiqueta <font..> anidada dentro de la etiqueta <p..>.:


<p align="center"> <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif"> Texto escrito para la page </font> </p> Este cdigo dara como resultado el siguiente texto: Texto escrito para la page

Creando documentos HTML


y Todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML> y El documento en s est dividido en dos zonas principales yEl encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> yEl cuerpo, comprendido entre las etiquetas <BODY> y </BODY>

Creando documentos HTML


y Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.) y Por tanto, la estructura queda de esta manera:

<HTML> <HEAD> <TITLE> Ttulo de la pgina </TITLE> </HEAD> <BODY> [Aqu van las etiquetas que visualizan la pgina] </BODY> </HTML>

Meta Tags
y Dentro del encabezado (head), se incluyen los llamados "Meta Tags", que cumplen, en su mayora, una funcin meramente informativa. y Dentro de esa informacin se incluyen datos como: autor, fecha de expiracin, descripcin de la pgina y algunas palabras clave. y Antes de realizar la subida a los buscadores ms famosos, debemos tomarnos el trabajo de modificar el cdigo HTML para definir los meta tags.

Meta Tags
y Principales Meta Tags:
y Autor de la pgina: y y y y y y

<meta http-equiv="Author" content="Nombre del autor"> Descripcin de la pgina: <meta http-equiv="Description" content="Descripcin del Sitio"> Palabras clave: <meta http-equiv="Keywords" content="Palabra1,Palabra2,Palabra3,Palabra4"> Ttulo de la pgina: <meta http-equiv="Title" content="Ttulo de la Pgina"> Categora del Sitio: <meta http-equiv="Category" content="Categora del Sitio"> Nivel de distribucin: <meta http-equiv="Distribution" content="global"> Fecha de expiracin en el cach del navegante: <meta httpequiv="Expires" content="Mon, 30 Jul 2012 01:00:00 GMT">

Ejemplo
<html> <head> <title>My first Page pasito tun tun</title> </head> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5"> Hola, estoy haciendo pruebas.</font> </body> </html> En lugar de color de fondo se puede establecer un aimagen de fondo con el atributo background. Sintaxis: <body background="fondo.gif">

Ejemplo
y A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a travs del atributo text. y Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir:

... <body text="#FF0000"> ... </body> </html>

Ejemplo
y Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos:

... <body leftmargin="20" topmargin= 0" marginwidth="20" marginheight="0" > ... </body> </html>

Caracteres especiales
y A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:

Espacios en blanco
y Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos slamente se mostrar uno en el navegador. y Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por &nbsp;.

Comentarios en HTML Saltos de lnea (Enter)


Se utiliza la etiqueta <br> <!-- aqu el comentario a escribir//-->

Separadores <hr>
La regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal:

Formateado de texto <font>


Las propiedades del texto pueden modificarse a travs de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

Resaltado de Texto <b>


Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas

Bloques de texto
El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las etiquetas <p> y </p>. Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado). Tambin es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado.

Encabezados
Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina.

Para todas estas etiquetas es posible especificar el valor del atributo align.

Maquesinas <marquee>
Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea. A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).

Hiperenlances
Un hiperenlace, hipervnculo, o vnculo (link), no es ms que un enlace, que al ser pulsado lleva a una pgina o archivo. Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a> <a href="http://www.gedecom.com.ve"> Visita GEDECOM </a>

Tipos de referencia de los enlaces


Referencia absoluta: Conduce a una ubicacin externa al sitio en el que se encuentra el documento. Si la ubicacin es en Internet, en este caso hay que empezar la referencia por http:// . Referencia relativa: Conduce a un documento situado dentro del mismo sitio que el documento actual, hay que fijarse en la ruta de los directorios y archivos para definir el enlace. <a href="t_4_1.htm >Hiperenlaces</a> <a href="tema4/t_4_1.htm >Hiperenlace 2 </a>

Destino del enlace


El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica a travs del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador.

Colores de los vnculos


Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la etiqueta <body>. link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
<body link="#FF0000" vlink="#FF0099" alink="#FF9900"> ... <a href="http://www.aulaclic.com" target ="_blank">www.gedecom.com.ve</a>

Imagenes
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual.
<img src= imagenes/logo_animales.gif alt="Imagen gato border="4 width = 200 height= 80 >

Hipervnculo en una imagen


<a href="http://www.gedecom.com.ve" target ="_blank"> <img src="imagenes/logo_animales.gif" border="4" ></a>

Tablas
Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la interseccin entre una fila y una columna.

Para crear una tabla hay que insertar las etiquetas <table>y</table>. Entre dichas etiquetas habr que especificar las filas y columnas que formarn la tabla.

Tablas
Filas <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Columna o celda <td> Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Entre las etiquetas <td> y </td> se podr especificar el contenido de cada una de las celdas.

Tablas
Por ejemplo, para insertar la siguiente tabla:

<table border="1"> <tr> <td>Sabado</td> <td>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>

Formato de la Tabla
Es posible modificar los siguientes atributos de una tabla:

Formato de las celdas


Es posible modificar los siguientes atributos de una celda:

Formato de las celdas


Si escribimos el siguiente cdigo:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC"> <td> Sabado</td> <td bgcolor="#66CC99">Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>

Combinar Celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A travs del atributo colspan se especifica el nmero de columnas por las que se extender la celda, y a travs del atributo rowspan se especifica el nmero de filas por las que se extender la celda.

Habra que escribir el siguiente cdigo html

Ejercicio
Hacer en HTML el formato del boletn del colegio Hacer en HTML su curriculum Ambos deben incluir la foto del estudiante