Академический Документы
Профессиональный Документы
Культура Документы
Programación HTML
¿Qué es HTML?
HTML (Hyper Text Markup Language) es un lenguaje de programación sencillo pensado para
presentar información en la red, es decir, crear páginas WEB.
En él se escriben los millones de documentos que hoy existen en la World Wide Web. Cuando
accedemos a uno de estos documentos, el navegador (IE, Chrome, Mozilla, Safari, Opera) los interpreta y
los muestra.
Los documentos HTML son ficheros de texto plano, que pueden ser editados con cualquier editor
de texto ("Bloc de notas" de Windows). También podríamos utilizar cualquier programa procesador de
texto (Word), guardando el documento como "solo texto". El nombre de los ficheros escritos en lenguaje
HTML suelen tener la extensión html o htm.
Breve Historia
Este lenguaje fue desarrollado por la Organización Europea de Investigación Nuclear (CERN) en el
año 1945 con la finalidad de desarrollar un sistema de almacenamiento donde las cosas no se perdieran,
que pudieran ser conectadas a través de hipervínculos.
Las Etiquetas
1
Mtro. Carlos Negrete Reyna Mtro. Rafael Gallegos Toranzo
Las etiquetas son fragmentos de texto que permiten la definición de las distintas instrucciones de
HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje.
Una etiqueta será un texto incluido entre los símbolos menor que<y mayor que>, el texto incluido
dentro de los símbolos será explicativo de la utilidad de la etiqueta. Pueden presentar modificadores que
llamaremos atributos, que permitirán definir diferentes posibilidades de la instrucción HTML, la mayoría de
las etiquetas deben de cerrarse.
Estructura Básica.
</body>
</html>
Encabezados
Título de la página
2
Mtro. Carlos Negrete Reyna Mtro. Rafael Gallegos Toranzo
Líneas
Las líneas son horizontales y pueden tener atributos de color, align(alineación), noshade (no muestra la
sombra), width(ancho) en % o pixeles y size (grosor) en pixeles.
Se utiliza la etiqueta <hr>
o <hr>
Dibuja una línea horizontal de lado a lado de la página.
o <hr color=red align=left width=50% size=20>
Línea en color rojo, alineación a la izquierda, ancho de 50%, grosor de 20 pixeles.
Estilos de letra
La etiqueta que permite modificar la fuente es <font></font> y presenta atributos que nos permiten modificar el color del
texto, face que es la fuente, size que va desde 1 hasta 7, por defecto el tamaño es 3.
<font color=blueface=”arial” size=1> color azul, fuente arial y tamaño 1 </font>
Fondo de la página
Se pueden aplicar dos tipos de fondo, el primero es de un solo color y se escribe en inglés o código hexadecimal, el
segundo es con una imagen, las imágenes soportadas son .jpg y .gif. La imagen debe estar guarda en la misma carpeta.
<bodybgcolor=color>
<body background= “nombredelarchivo.ext”</body>
Si se quiere colocar una imagen de fondo que sea estático, dentro de la etiqueta <head></head> se coloca el siguiente
codigo:
<style type="text/css">
3
Mtro. Carlos Negrete Reyna Mtro. Rafael Gallegos Toranzo
<html>
<head>
<title>FONDO</title>
<style type="text/css">
body {background:url('SOL.jpg') fixed;}
</style>
</head>
<body>
</body>
</html>
INSERCIÓN DE IMAGEN
La inserción de una imagen dentro de la página WEB es mediante la etiqueta <img src…>
<img src=”nombredelarchivo.ext” alt=”nombrealternativo” align=”alineación” border=”#” width=”ancho” height=”alto”>
<img src="02.jpg" alt=”Puente de Francia” align=”right” border=”3” width=”300”>
4
Mtro. Carlos Negrete Reyna Mtro. Rafael Gallegos Toranzo
ENLACES
Los enlaces o hipervínculos son losque nos permiten movernos dentro de la página, ir a otra de nuestras páginas, ir
a una página cualquiera de Internet, mandar un mail o descargar archivos, los enlaces tiene las siguientes formas:
Tablas
Las tablas son cuadriculas que permiten la representación de datos por columnas y filas como por ejemplo un
horario. Las tablas se definen con la etiqueta <table> </table> , además, cuenta con atributos y se utilizan en <table>,
en <rd> o <td>.
rowspan Indica el número de filas que ocupará está celda en la misma fila.
Listas
5
Mtro. Carlos Negrete Reyna Mtro. Rafael Gallegos Toranzo
Una lista es un párrafo estructurado que contiene una serie de elementos. Pueden darse cuatro tipos diferentes de
listas, cada uno con etiquetas distintas aunque con alguna en común.
1. Listas numeradas u ordenadas: Se engloban por las etiquetas <ol>.....</ol> y cada elemento de la lista estará
encabezado por la etiqueta <li> que puede o no llevar la etiqueta de cierre </li> ej:
<ol>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ol>
2. Listas con viñetas o sin orden: Se engloban por las etiquetas <ul>.....</ul> y cada elemento de la lista, también
estará encabezado por la etiqueta <li>, ej:
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
3. Listas de glosario: Cada elemento de la lista está compuesto por un término y definición, cada una de estas
partes tiene su propia etiqueta. Estas listas se engloban con las etiquetas <dl>.....</dl>. Para el término se usa la
etiqueta <dt> y para la definición la etiqueta <dd>.
<dl>
<dt>termino 1</dt>
<dd>definicion 1</dd>
<dt>termino 2</dt>
<dd>definicion 2</dd>
<dt>termino 3</dt>
<dd>definicion 3</dd>
</dl>
4. Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria dependa de la
principal. Las etiqueta de la lista principal englobarán todo el conjunto de las listas y las etiquetas de las listas
secundarías se cerraran antes de volver a la lista principal.
<ul>
<li>uno
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
</li>
<li>dos
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
<li>tres</li>
</ul>
Atributos
6
Mtro. Carlos Negrete Reyna Mtro. Rafael Gallegos Toranzo