Beruflich Dokumente
Kultur Dokumente
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.
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>
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>
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:
* 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
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.
Etiquetas Descripcin
<b> Define un texto en negrita
ALINEAR 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
Podemos combinar varios atributos. Por ejemplo lnea de un 50% de largo y 10 pixel
de ancho
<HR WIDTH=50% SIZE=10>
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
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>
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.
El mismo atributo utilizado para definir el tamao de la tabla se utiliza para definir o fijar el
tamao de las columnas.
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.
Podemos asignar mrgenes a las celdas, de forma que lo que pongamos dentro no quede
pegado a los bordes de la celda.
EJEMPLO
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
</tr>
<tr>
<td width="10%">pollo</td>
<td width="20%">cerdo</td>
<td width="70%">pavo</td>
</tr>
</table>
Y el resultado
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
<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
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"
EJEMPLO: Una tabla de tres filas y dos columnas con un largo del 75%.
Y fondo amarillo
<tr>
<td width="50%"> </td>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>
PONER ENLACES
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
INSERTAR IMAGENES
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.
<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.
ATRIBUTOS DE LA IMAGEN