Apuntes HTML 15-16

Mtro. Carlos Negrete Reyna Mtro.
Rafael Gallegos Toranzo
Instituto Potosino Secundaria

Informática II
Ciclo escolar 15-16
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.
El norteamericano Tim Berners-Lee fue el primero en proponer una descripción de HTML en un

documento que publicó en 1991. Allí describía veintidós componentes que suponen el diseño más básico
y simple del HTML.
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.
La estructura básica de un documento HTML es:

<html>
<head>
<title>
Encabezado
</title>
</head>
<body>
Cuerpo del programa
</body>
</html>
Párrafos y espacio en blanco
 <p> nuevo párrafo dejando una línea en blanco.

 <br> nuevo párrafo sin dejar línea en blanco.
 deja un espacio en blanco, no es una etiqueta sino el carácter de espacio en blanco.
Encabezados
 Son utilizados para resaltar palabras o frases.

 Hay 6 tamaños de encabezados, el más grande es <h1></h1> y el más pequeño es <h6></h6>
 Si quieres alinear el encabezado se utiliza el atributo align con la opción left(izquierda), center (centro)
right (derecha) o justify (justificado).
o <h1> encabezado grande </h1>
o <h1 align=center> encabezado grande alineado al centro </h1>
Título de la página
 Para colocar el título de la ventana se utiliza la etiqueta <title></title>

 La etiqueta debe de escribirse dentro del encabezado <head></head>
2
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
 Los estilos más conocidos son con las siguientes etiquetas

o <b> letra negrita </b>
o <i> letra cursiva o itálica </i>
o <u> letra subrayada </u>
o <s> letra tachada </s>
o <tt> letra tipo mecanografiado, es decir, tipo máquina de escribir </tt>
o <sub> letra tipo subíndice </sub>
o <sup> letra tipo superíndice </sup>
o <blink> letra tipo parpadeo </blink>
Tamaño, color y fuente
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>
Alineación del texto
Para alinear el texto se utiliza la etiqueta <p></p> con el atributo de align.

 <p align=left> texto a la izquierda </p>
 <p align=center> texto al centro </p>
 <center> texto al centro </center>
 <p align=right> texto a la derecha </p>
 <p align=justify> texto justificado </p>
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
body {background:url('SOL.jpg') fixed;}

</style>
Ya completo queda así:
 <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”>
o img src: es el nombre de la imagen con su extensión.

o alt: letrero que aparecerá al pasar el puntero del mouse sobre la imagen.
o align: permite alinear la imagen solo a la izquierda o derecha. Para alinear al centro utilizar etiqueta
<center></center>: <center><img src=”01.jpg”></center>
o border: es un número que determina el ancho del borde alrededor de la imagen.
o width: ancho de la imagen.
o height: alto de la imagen.
4
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:
Enlace a la misma página:

 <a href=#”nombre_marcador” title="comentario">texto o imagen</a>
 <a name=#”nombre_marcador”>texto</a>
enlace a otra página de mi sitio:

 <a href=”nombre_pagina.html” title="comentario">texto_imagen</a>
enlace a otra página de internet:

 <a href=”url” title="comentario">texto_imagen</a>
enlace para un correo:

 <a href=mailto:dirección_correo title="comentario">texto o imagen</a>
enlace para bajar un archivo a tu computadora:

 <a href=”nombre_archivo.ext” title="comentario">texto o imagen</a>
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>.
 <tr>Etiqueta para colocar filas</tr>
 <td>Etiqueta para colocar columnas</td>
 align alineación de la tabla en la página, por defecto es izquierda.
 border tamaño del borde, por defecto es 0.
 cellspacing espacio entre las celdas, por defecto es 2.
 cellpadding espacio entre el borde de la celda y el contenido de esta, por defecto es 1.
 width ancho de la tabla, se puede indicar con # o %, se recomienda utilizar %.
 height alto de la tabla, se puede indicar con # o %, se recomienda utilizar %.
 colspan indica el número de columnas que ocupará la celda actual.
 rowspan Indica el número de filas que ocupará está celda en la misma fila.
Listas
5
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>
<dt>termino 3</dt>
</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
Hay varios atributos utilizados únicamente en listas:
atributo valor Efecto visual

1 Números arábigos (predeterminado)
A Letras mayúsculas
type
a Letras minúsculas
(para listas ordenadas)
I Números romanos (I, II, III, IV ...)
i Números romanos en minúsculas
Disc Viñeta sólida, redonda (predeterminado)
type Circle Viñeta circular
(para listas no ordenadas) Square Viñeta cuadrada

Apuntes HTML 15-16

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apuntes HTML 15-16

Uploaded by

Copyright:

Available Formats

Mtro. Carlos Negrete Reyna Mtro.

Rafael Gallegos Toranzo

Instituto Potosino Secundaria

El norteamericano Tim Berners-Lee fue el primero en proponer una descripción de HTML en un

La estructura básica de un documento HTML es:

Párrafos y espacio en blanco

 <p> nuevo párrafo dejando una línea en blanco.

 Son utilizados para resaltar palabras o frases.

 Para colocar el título de la ventana se utiliza la etiqueta <title></title>

 Los estilos más conocidos son con las siguientes etiquetas

Alineación del texto

Para alinear el texto se utiliza la etiqueta <p></p> con el atributo de align.

body {background:url('SOL.jpg') fixed;}

Ya completo queda así:

o img src: es el nombre de la imagen con su extensión.

Enlace a la misma página:

enlace a otra página de mi sitio:

enlace a otra página de internet:

enlace para un correo:

enlace para bajar un archivo a tu computadora:

 <tr>Etiqueta para colocar filas</tr>

 <td>Etiqueta para colocar columnas</td>

 align alineación de la tabla en la página, por defecto es izquierda.

 border tamaño del borde, por defecto es 0.

 cellspacing espacio entre las celdas, por defecto es 2.

 cellpadding espacio entre el borde de la celda y el contenido de esta, por defecto es 1.

 width ancho de la tabla, se puede indicar con # o %, se recomienda utilizar %.

 height alto de la tabla, se puede indicar con # o %, se recomienda utilizar %.

 colspan indica el número de columnas que ocupará la celda actual.

Hay varios atributos utilizados únicamente en listas:

atributo valor Efecto visual

You might also like