Sie sind auf Seite 1von 13

COLEGIO INTEGRADO DE CABRERA

TEORA Y EJERCICIOS DE HTML GRADO 10

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web. Es un
lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est
compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.

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.

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 se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios
las pginas web resultantes del cdigo interpretado.

Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar
extensiones de los navegadores para que puedan ser compatibles con esta ltima versin.

Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape
Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las
nuevas funciones incluidas en los borradores.

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.

Un editor es un programa que nos permiten redactar documentos. Para crear pginas web escribiendo
directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. ya que
se trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML.
Escribir en el Bloc de notas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos
tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

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

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor
propio del usuario, o valores HTML predefinidos.

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>

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.

Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio,
Programas, Accesorios, opcin Bloc de notas.

Seguidamente introduce, en el documento en blanco, el texto siguiente:


IDENTIFICADOR DEL TIPO DE DOCUMENTO <HTML>
LA CABECERA DE LA PGINA: se utiliza para agrupar informacin sobre ella, como puede ser el
ttulo.

Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la
etiqueta <html>.

Por ejemplo:

<html>
<head>
... <title> </title>

<meta> </meta>
</head>
...
</html>

Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos ms adelante),

EL ELEMENTO META

Este elemento est definido por la etiqueta <meta> y puede ser usado para identificar propiedades
de un documento (autor, descripcin, palabras claves, etc.)

Sintaxis
<head>
<title>Ttulo del documento</title>
<meta name="author" content="Luz Molina">
<meta name="description" content="esta pgina contiene el ejercicio de crear mi primera pgina en
cdigo html">
</head>

Guarda el documento con la extensin htm o html, con el nombre


miprimerapagina.htm. Puedes guardarlo a travs del men
Archivo, opcin Guardar.

Pulsando dos veces sobre el icono del archivo


miprimerapagina.htm, ste debera abrirse automticamente en el
navegador que tengas instalado en tu ordenador. (Explorer, google
Chrome, Mozilla)

Como podrs ver, la pgina resultante es una pgina que


solamente tiene una lnea de texto.
Ttulo de la pgina <title>
El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando
la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario escribir el texto
deseado entre las etiquetas <title> y </title>.

Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y
</head>.

Por ejemplo:

<html>

<head>
<title>
MI PRIMERA PGINA EN HTML
</title>
</head>
...
</html>

DAR FORMATO A LAS LETRAS


Vamos a poner el texto en negrilla "Soy un fenmeno". La instruccin para negrilla es <b> y
<b/>. Y el texto hay que colocarlo dentro del cuerpo (entre body y body) de la pgina.
Por tanto nos queda
<html>
<head>
<title>Mi primera Pagina</title>
</head>
<body>
Soy el mejor
</body>
</html>

Cambiar los atributos de las letras utilizamos el comando <font> </font> (fuente o tipo de letra).
El color o el tamao son atributos del elemento tipo de letra.
Podemos dar distintos atributos a las letras:

A) TAMAO DEL TEXTO

* Si queremos poner las letras de distinto tamao empleamos el atributo SIZE=" ".
* Dentro de las comillas pondremos "+" para aumentar el tamao y "-" para disminuirlo

EJEMPLO 1
<FONT SIZE="+1">este texto se ve con mayor tamao</FONT>
El resultado:
este texto se ve con mayor tamao

EJEMPLO 2
Si queremos aun mayor tamao ponemos un nmero mayor. Voy a probar con 4
<FONT SIZE="+4">este texto se ve muy grande</FONT>
este texto se ve muy grande
EJEMPLO 3
Para disminuir el tamao ponemos -1
<FONT SIZE="-1">al poner -1 disminuye el tamao</FONT>
Al poner -1 disminuye el tamao

B. PONER EL TEXTO EN NEGRILLA


Para poner el texto en negrilla utilizamos el tag "b" (de bold)
Soy el <b>mejor</b> de la clase
Soy el mejor de la clase

C. PONER EL TEXTO EN CURSIVA


Para ponerlo en cursiva utilizamos i (de italian)
Poner un <i>texto en cursiva</i>
Poner un texto en cursiva

D. PONER EL TEXTO SUBRAYADO


Para subrayado
Ahora toca el <u>subrayado</u> de parte de la frase
Ahora toca el subrayado de parte de la frase

E)La instruccin para poner color a las letras es


<FONT COLOR="entre estas comillas va el nombre o el nmero del color">aqu el texto al
que queremos dar color</FONT>

EJEMPLO 1
Para poner el texto en rojo
<FONT COLOR="RED">este texto se pone rojo</font>
El resultado si lo ponemos dentro de los cdigos del fichero html ser que este texto se pone
rojo

EJEMPLO 2
Para poner el texto en azul
<FONT COLOR="BLUE">este texto se pone en azul</font> este texto se pone en azul

Por tanto vemos que las instrucciones de HTML tienen varias partes.
Las instrucciones de html se componen de tres partes fundamentales:
A) El elemento al que se refiere la instruccin. Es la palabra que va despus del signo <.
Por ejemplo <font es un elemento. En este caso el elemento es el tipo de letra. La instruccin
por tanto se refiere al tipo de letra.
B) El atributo. El tamao o el color son atributos posibles del tipo de letra.
C) El valor que toma el atributo. Por ejemplo rojo o verde.
Por ejemplo, queremos:
A) Al elemento tipo de letra
B) Darle el atributo color
C) Con el valor rojo.

Elemento Atributo Valor El tag de cierre


<FONT COLOR= "RED"> </FONT>
<FONT SIZE= "+1"> </FONT>

Etiquetas Descripcin
<b> Define un texto en negrita

<big> Define un texto grande

<em> Define un texto enfatizado

<i> Define un texto en itlica

<small> Define un texto pequeo

<strong> Define un texto fuerte

<sub> Define un texto subndice

<sup> Define un texto superndice

<ins> Define un texto subrayado

<del> Define un texto tachado

ETIQUETAS PARA DAR FORMA AL TEXTO

ALINEAR EL TEXTO

Para alinear el texto utilizamos la etiqueta <Div>


left para alinear a la izquierda
right para alinear a la derecha
center para centrar el texto
EJEMPLO ALINEAR A LA IZQUIERDA
<Div="left">alineamos el texto a la derecha</Div>
alineamos el texto a la izquierda
EJEMPLO "ALINEAR A LA DERECHA"
<Div="right">alineamos el texto a la derecha</ Div >
alineamos el texto a la derecha
EJEMPLO DE CENTRAR
< Div="center">centramos el texto</ Div >
centramos el texto

LINEAS HORIZONTALES

El elemento para crear una lnea horizontal es HR. Este "tag" no necesita un "tag" de
cierre. A este elemento podemos darle distintos atributos
Width: Para definir el largo de la lnea con un cierto nmero de pixel o un porcentaje
del documento>
Size: Para asignar el ancho de la lnea
Noshade: Para el fondo de la lnea

EJEMPLO
Lnea de 100 pixels
<HR WIDTH=100>
Lnea de 200 pixels
<HR WIDTH=200

Lnea de un 50% del ancho del documento


<HR WIDTH=50%>

Lnea del 100% del ancho del documento


<HR WIDTH=100%>

Lnea con 10 de ancho


<HR SIZE=10>

Podemos combinar varios atributos. Por ejemplo lnea de un 50% de largo y 10 pixel
de ancho
<HR WIDTH=50% SIZE=10>

LOS PARRAFOS Y EL CAMBIO DE LINEA

Para mantener el texto formando un prrafo o bloque de texto utilizamos el "tag"


<p>aqui va el texto</p>
<p>Si utilizamos la instruccin de prrafo nos aseguramos que el texto se mantenga
junto y controlamos cuando queremos que exista una lnea de espacio en blanco</p>
Si utilizamos la instruccin de prrafo nos aseguramos que el texto se mantenga
junto y controlamos cuando queremos que exista una lnea de espacio en blanco

PASAR A LA SIGUIENTE LINEA


Cuando queremos pasar el texto a otra lnea podemos utilizar el "tag" <br> que no
tiene tag de cierre.
Si queremos separar el siguiente texto en varias lneas.
la casa el perro el nio las vacaciones
Pondremos:
la casa<br>
el perro<br>
el nio<br>
las vacaciones<br>
Y en el documento HTML mostrara en el navegador:
la casa
el perro
el nio
las vacaciones
LAS LISTAS
Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura.
Tenemos tres tipos de listas:
Ordenadas.
Desordenadas.
De definicin.
Listas Ordenadas

Son aquellas que ordenan la lista anteponiendo nmeros, letras o signos.


Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la
misma, utilizamos la etiqueta <li>.

Ejemplo
Vamos a crear una lista ordenada
Cdigo Resultado
<ol> 1. Naranjas
<li>Naranjas</li> 2. Manzanas
<li>Manzanas</li> 3. Bananas
<li>Bananas</li>
</ol>

Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.

LISTAS DESORDENADAS

Exponen la lista anteponiendo un punto, cuadrado o tringulo negro.


Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la
misma utilizamos la etiqueta <li>.

Ejemplo
Cdigo Resultado
<ul> Tomates
<li>Tomates</li> Pepinos
<li>Pepinos</li> Cebollas
<li>Cebollas</li>
</ul>

TABLAS EN HTML
Las pginas web necesitan tener los elementos que colocamos ordenados y que se
mantengan ordenados en los distintos navegadores.
Para definir el orden o la estructura de una pgina web se utilizan tablas con bordes ocultos. La
mayora de las pginas importantes se estructuran utilizando tablas ocultas.
Vamos a realizar una tabla con los bordes visibles
A) Las tablas comienzan con <table> y terminan con </table>
B) Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos suelen
tener bordes invisibles para los navegadores y empleamos border="0". Si queremos un borde
visible asignamos otro nmero al atributo borde. Nosotros en el primer ejemplo vamos a utilizar
un borde visible border="1"
C) Definimos el tamao de la tabla. Podemos definirlo como porcentaje del ancho de la pgina
utilizando width WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la
pgina que estamos creando.
Podemos igualmente definir el largo de la tabla en nmero de pixel
WITH="100" ahora al no poner el % sern 100 pixel de larga la tabla y no el 100% del
documento
D) Tenemos que definir las filas que lleva la tabla
<TR> </TR>
E) Y definimos las columnas utilizando
<TD> </TD>

Encabezados de las tablas

Los encabezados de una tabla se definen con la etiqueta <th>.


Estas instrucciones de columna las pondremos dentro de las de fila.

EJEMPLO
Vamos a construir una tabla con el borde visible de tamao el 100 por 100 del ancho del
documento con dos filas y tres columnas.
Por tanto utilizamos al principio el "tag" <table> y al final </table>.
Definimos el borde border="1" y el ancho witdh="100%"
Definimos la primera fila con <tr> y </tr> y dentro las tres columnas <td> </td>
<tr> <td></td><td></td><td></td> </tr>
Y hacemos lo mismo con la segunda fila y sus tres columnas
<tr> <td></td><td></td><td></td> </tr>

Recuerda que da igual que las instrucciones se escriban en maysculas o minsculas. Los
espacios en blanco no afectan al resultado por tanto es lo mismo poner
<tr> <td></td><td></td><td></td> </tr> en una columna como lo ponemos a continuacin.

<table border="1" witdh="100%">


<TR>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
</Table>

FIJAR EL TAMAO DE LAS COLUMNAS

El mismo atributo utilizado para definir el tamao de la tabla se utiliza para definir o fijar el
tamao de las columnas.

Definimos el tamao de la columna con WIDTH

Por ejemplo, queremos que en una tabla de dos columnas, la primera columna ocupe el 20 por
ciento de la tabla y la segunda el 80 por ciento.

Pondremos Width=20% en las celdas de la primera columna y Width=80% en las celdas de la


segunda columna.

EL MARGEN DE LAS CELDAS

Podemos asignar mrgenes a las celdas, de forma que lo que pongamos dentro no quede
pegado a los bordes de la celda.

Para el margen de las celdas utilizamos el atributo cellpadding="aqui ponemos el nmero"

EJEMPLO

Realizaremos una tabla de 2 por 3

A) Una tabla con dos filas y tres columnas, con borde de la tabla 1 y el ancho de la tabla un
75% del ancho de la pgina.

B) Las celdas con un margen de 15 pxeles y el tamao de las celdas un 10% del tamao de
la tabla la primera columna, un 20% del tamao de la tabla la segunda columna y un 70% del
tamao de la tabla la tercera columna.

C) Pondremos dentro de las celdas diferentes palabras como vaca, perro, gato, pollo, cerdo,
pavo. Quedara

<table border="1" cellpadding="15" cellspacing="0" width="75%">


<tr>
<td width="10%">vaca</td>
<td width="20%">perro</td>
<td width="70%">gato</td>

</tr>

<tr>

<td width="10%">pollo</td>
<td width="20%">cerdo</td>
<td width="70%">pavo</td>

</tr>
</table>

Y el resultado

vaca Perro gato

pollo Cerdo pavo

EL COLOR DE LAS TABLAS

Para ponerle color a una celda utilizamos el atributo bgcolor="aqui ponemos el nombre o
nmero del color"

EJEMPLO: Vamos a realizar una tabla de dos filas y dos columnas, con borde de tamao "1" y
de largo el 50% del ancho de pgina. Y le ponemos a una celda fondo rojo con el atributo
bgcolor="red" y a otra fondo azul

<table border="1" cellpadding="15" cellspacing="0" width="50%">

<tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
</tr>

<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
blue
El resultado que veremos: red

COLOR DEL FONDO DE LA TABLA

Para darle color a toda la tabla es suficiente con poner el atributo bgcolor"" dentro de la
instruccin de tabla. Para poner fondo amarillo bgcolor="yellow"

<table border="1" cellpadding="0" cellspacing="0" width="50%" bgcolor="yellow">

EJEMPLO: Una tabla de tres filas y dos columnas con un largo del 75%.
Y fondo amarillo

<table border="1" cellpadding="0" cellspacing="0" width="75%" bgcolor="yellow">

<tr>
<td width="50%"> </td>

El resultado que aparecer es una


tabla de color amarillo
<td width="50%"> </td>
</tr>

<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>

<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>

PONER ENLACES

Lo ms caracterstico de Internet es ser un medio que no es lineal sino hipertexto es decir


que utiliza enlaces para movernos entre distintos niveles o pginas.

La instruccin para un enlace es de la forma <A HREF="aqui ponemos la direccin a la que


queremos que apunte el enlace">el texto que queremos que se vea en el documento</A>

EJEMPLO

Queremos enlazar con la pgina 100mejores.com y que el texto que se vea sea "La mejor
seleccin de enlaces"
<A HREF="http://www.100mejores.com/">La mejor seleccin de enlaces"</A>
La mejor seleccin de enlaces
Recordar que los enlaces externos a otras pginas deben llevar la direccin completa de la
pgina.
EL ATRIBUTO TARGET

Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace.

Ejemplo
Vamos a abrir el documento en una nueva pgina del navegador.
Cdigo
<body>
<a href="http://www.colintegradodecabrera.wordpress.com/" target="_blank">La pgina del
CIC</a>
</body>
Resultado
La pgina del CIC

CREANDO UN ENLACE A UN EMAIL

Se utiliza en caso que queramos que un enlace mande un email.


En el momento que presionamos dicho link se abrir automaticamente el programa de email que
tenemos definido por defecto.
Ejemplo
Cdigo
<body>
<a href="/mailto: luzirenemolina03@gmail.com">Mandar email</a>
</body>
Resultado
Mandar email
mailto: nos indica la direccin email a la que va dirigida, en este
ejemplo: luzirenemolina03@gmail.com">

INSERTAR IMAGENES

Para insertar imgenes utilizamos <img src="aqu ponemos la direccin de la imagen">

Este tag no tiene tag de cierre.


En Internet tenemos numerosas pginas que proporcionan imgenes gratis. Por ejemplo
http://www.gifmania.com/ Nos vamos a gifmania para obtener una imagen de una ejecutiva

Seleccionamos una imagen. En este ejemplo una ejecutiva

Nos situamos sobre la imagen y pulsamos el botn DERECHO

Lo guardamos con el nombre de fichero ejecutiva y guardar como tipo de fichero GIF.
Podemos guardarlo con varios tipos de ficheros, elegimos los gif por ocupar poco espacio y
dar pocos problemas de compatibilidad.

Si lo guardamos en el MISMO directorio que el fichero HTML que estamos creando la


instruccin para insertar la imagen de la ejecutiva nos queda:

<img src="ejecutiva.gif">

Es MUY IMPORTANTE tener cuidado con las direcciones de la imgenes. Si las imgenes
estn en un directorio y el fichero html que estamos creando en otro directorio, la direccin de
la imagen debe indicar la localizacin de la imagen en el otro directorio.

Cuando hemos puesto imgenes en un fichero HTML y al enviarlo al servidor de Internet no


aparecen suele ser por dos motivos:

A) Hemos enviado el fichero HTML a Internet pero no los ficheros


con las imgenes.
B) Al enviarlo al servidor la direccin donde el programa busca la imagen es distinta de donde
realmente est la imagen. Para comprobar si donde est la imagen coincide con la direccin
que tiene la pgina nos colocamos sobre la imagen (o sobre donde debera estar) y pulsando
el botn DERECHO en el men que aparece pulsamos propiedades.

ATRIBUTOS DE LA IMAGEN

Etiquetas Atributos Valor Descripcin

<img> Define una imagen.


alt text Breve descripcin de la imagen.

src URL Direccin URL de la imagen a


mostrar.
Align o div Top, bottom, Alnea la imagen de acuerdo al texto
middle, left, circundante.
right
border pixels Define el borde alrededor de la
imagen.
height Pixels o % Define la altura de la imagen.
width Pixels o % Define el ancho de la imagen.

Das könnte Ihnen auch gefallen