Curso de HTML Por Ing Jhon Jairo Torres Rios - Mayo 01 2019

CURSO DIDACTICO Y PEDAGOGICO DE HTML
POR: Ing JHON JAIRO TORRES RIOS
HTML= (Hyper Text Markup Language): Significa Lenguaje de hipertexto de marcas. En

noviembre de 1995 se aprobó el estándar HTML 2.0, para la creación de páginas web. El
comité encargado de establecer los estándares dentro de Internet, comenzó a trabajar
en el borrador de una nueva versión de HTML, el borrador de HTML 3.0. Pero este
borrador resultó demasiado extenso, al intentar incluir numerosos nuevos atributos para
etiquetas ya existentes, y la creación de otras muchas etiquetas nuevas. Por ello, no fue
bien aceptado por el mercado y varias compañías se unieron para formar un nuevo
comité encargado de establecer los estándares del HTML. Este comité pasó a llamarse
W3C. Este comité W3C, nuevas etiquetas, 3.2, 4.0 y 4.1, en navegadores como internet
explorer y Netscape navigator. En 1.997 version 4.0, Año 2.001 4.01
Editores: Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects
Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, wordpad,
Block de notas (grabar con html o htm).
Etiqueta: De comienzo y de final, por los caracteres < y >. Se pueden anidar etiquetas
dentro de otras de comienzo y cierre, llamadas Tags.
Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas,

por ejemplo HotDog™ (Win), HomeSite™(Win),HTML Editor™ (Mac), Quanta™ (Linux,
KDE) o Bluefish™, (Linux, GNOME).
Conversores: son programas con otra función que la de la programación Web pero que
permiten convertir a HTML. Son ejemplos de conversores Microsoft Word ™,Quark
XPress™ y PageMaker™.
Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos
editores permiten crear páginas web sin escribir código HTML como si se tratase de un
programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son
Macromedia Dreamweaver™, HotMetal™ o Microsoft Frontpage™.
La verdadera fuerza de Internet estriba en la posibilidad de navegar con una sola

pulsación por información que se encuentre en cualquier lugar del mundo, y eso se debe a
la existencia de páginas web, construidas entre otros HTML
Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el
mismo significado y nos indican que se trata de un archivo HTML).
EL hipertexto significa que las páginas no son elementos aislados, sino que están unidas a
otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de
internet puede pulsar sobre un texto de una página para navegar hasta otra página. Una
1
de las características de este lenguaje más importantes para el programador es que no es
necesario ningún programa especial para crear una página Web. Gracias a ello se ha
conseguido que se puedan crear páginas con cualquier pc, portátil y sistema operativo.
Estas páginas se caracterizan por contener texto, imágenes, animaciones e incluso sonido
y video.
Cada uno de los 93 elementos estándar produce un resultado específico cuando el

documento es representado (por ejemplo, el elemento HTML strong provee de mayor
importancia a su contenido, el cual es usualmente representado en negrita) permitiendo a
los autores dar formato y/o insertar información en documentos. Todo elemento puede
tener atributos y eventos que deben ser declarados dentro del tag de apertura separado
del nombre y de otros atributos o eventos por un espacio.
<NOMBRE_ETIQUETA> TEXTO </cierra ETIQUETA>
La primera estructura está formada por una única instrucción y la segunda por dos: una
que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas.
Su contenido es ubicado entre el tag de apertura y el de cierre.
1. ESTRUCTURA BASICA
La estructura básica de una página es:
<html>
<head> TAGS
O
<TITLE> ETIQUETAS
</TITLE>
</head>
<body>
...
</body>
</html>
2
2. DISPOSICIÓN DE UNA PÁGINA ESTÁNDARD
Este es un pequeño ejemplo de cómo diseñar una página estándar. A cada sección se le
puede agregar un color distinto o gráfica que le de vida a la página.
Acá ubicamos el logo o un banner
Menú Acá va el contenido

Vínculo 1
Vínculo 2
Vínculo 3
Con el siguiente código puedes crear este tipo de estructura básica de una
página web
<title> PROGRAMACIÓN DE
PÁGINAS WEB CON HTML Y
JAVASCRIPT</title>
<Body>
<table width="100%"
height="250px"
cellspacing="1px"
border="1px">
<tr height="50px">
<td colspan="2px">
<table title="Banner"
border="0">
<tr>
<td>Acá ubicamos
el logo o un banner</td>
</tr>
</table>
</td>
</tr>
<tr height="200px">
<td>
<table title="Menu"
border="0" width="100px">
<tr><td>Menú</td></tr>
<tr><td>Vínculo
1</td></tr>
3
<tr><td>Vínculo
2</td></tr>
<tr><td>Vínculo
3</td></tr>
</table>
</td>
<td>
<table
title="Contenido" border="0"
width="400px">
<tr>
<td>Acá va el
contenido</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</head>
</html>
EXPLICACIÓN DEL EJEMPLO
La primera etiqueta <table> define el tamaño general de la página.

La segunda etiqueta <table> define la sección superior de la página, donde se coloca
generalmente el logo o un banner.
La tercera sección está definida por la etiqueta <table> y en el ejemplo colocamos el
menú. La última etiqueta <table> nos define el sector que lleva todo el contenido de la
página.
Nota: por supuesto que cada una de las secciones se puede seguir subdividiendo cuantas
veces sea necesario.
El capítulo de tablas lo veremos al final de estas lecciones.
Lección No 1: Uso de la etiqueta <title> Texto </title>: Permite escribir el nombre de la

página web
Ejemplo1.Nombre del archivo: uso de title.html
4
<html>
<head>
<title> Mi primera página
WEB</title>
</head>
<body>
</body>
</html>
Lección No 2: Uso de <body>:CUERPO: El cuerpo del documento contiene la información

propia del documento, es decir lo que queremos que se visualice, el texto de la página, las
imágenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las
etiquetas <body> y </body>, que van justo debajo de la cabecera.
<BODY BGCOLOR
="#FF00AB">
<h1> <FONT
SIZE="+5"color
="BLUE"
Face="Helvetica">
COMPUELECTRONICA
S </FONT></h1>
</BODY>
Ejemplo: nombre del archivo: Uso de Fondo Verde.html
<BODY
bgCOLOR="GREEN"
ESTE FONDO VIENE
VERDE>
<H1> ESTAMOS
PROBANDO EL
FONDO DE LA
PAGINA </H1>
</body>
5
Otro ejemplo: nombre del archivo: Uso del bg color.html
<BODY BGCOLOR
="#FFCCAB"> < --
Estoy definiendo el
fondo
<h1> <FONT
SIZE="+5"color
="BLUE"
Face="Helvetica">
COMPUELECTRONIC
AS </FONT></h1>
</BODY>
Uso del background: Permite definir el fondo de la pantalla, con una fotografía con
extensión.jpeg o gif. Las imágenes que insertemos como fondo de la página serán
mostradas en mosaico, es decir, se replicará la imagen tanto horizontal como
verticalmente hasta ocupar todo el área de la página. Por esta razón no todas las
imágenes quedan bien como fondo de una página Web. De hecho se recomienda que sólo
se usen dos tipos de imágenes:
1) Imágenes con pocos colores que muestran un logo sobre un relleno sólido y que
interfiere poco con el contenido de la página. En la Web la figura no se aprecian los
bordes de la imagen al ser de un solo fondo (gris) el fondo es de un solo color sólido (gris
oscuro en este caso).
2) Imágenes especiales cuyos bordes encajan perfectamente y parece que todo del fondo
es una única imagen. La imagen de tamaño 90x90 pixeles. Es difícil apreciar que los
bordes encajarán cuando se creen las réplicas, de hecho ese efecto debe ser hecho con
programas especiales
<BODY
background="PracticaBomberil.
JPG">
<h1> <FONT SIZE="+5"color

="BLUE" Face="Helvetica">
COMPUELECTRONICAS
</FONT></h1>
</BODY>
Nota: Por lo general la creación de fondos requiere programas especiales, bastante

cuidado para asegurarnos que no sobrecarguen demasiado la página, por lo que un gran
número de programadores de Webs optan por usar fondos de los cliparts gratuitos que
podemos encontrar en Internet, por ejemplo en las direcciones:
6
• www.specialweb.com
• www.dewa.com
• www.teleportcom
La creación de imágenes de fondo es complicada y delicada. En general suelen ser más

apropiadas las imágenes con tonos claros sobre los que se puede leer sin problemas texto
negro. Pero antes de incluir la imagen deberemos volver a hacernos unas preguntas ¿Es
realmente necesaria? ¿Mejora realmente el aspecto gráfico? que con frecuencia nos hacen
ver las cosas más claras. Una vez hemos probado la imagen debemos tener mucho
cuidado y hacer pruebas con otras personas para comprobar que el texto de la página se
lea bien. Piense que por muy espectacular que sea la página, si no conseguimos que lea lo
que tenemos que decir el objetivo no estará cumplido, además por el grafico la página
queda demasiado pesada para ser vista por el ejecutor de la misma
<BODY background="angel_gemma.gif">
<h1> <FONT SIZE="+5"color ="BLUE"
Face="Helvetica"> COMPUELECTRONICAS
</FONT></h1>
</BODY>
Lección No 3: Uso del <FONT SIZE="2"> </font>: La etiqueta etiqueta <font..>:

Permite definir el tipo de letra que ha de usar la página web. Para poder controlar en
mayor medida aún la apariencia del texto se creó la etiqueta FONT. El tamaño absoluto de
1 a 7. Correspondiendo 7 al tamaño mayor y 1 al menor. El tamaño por defecto del texto
es el equivalente al número 3.
Ejemplo2
<html>
<body>
<FONT SIZE="3"> Este es Tamaño
3 </FONT><br>
4 </FONT><br>
5 </FONT><br>
6 </FONT><br>
7 </FONT><br>
<FONT SIZE="+40" Este es Tamaño
40 </FONT><br>
</body>
</html>
7
PARÁMETROS:
Uso de <base FONT SIZE="2" > COMPUELECTRONICAS </FONT>
Permite definir el tipo de letra para toda la página web, cuando se utiliza el signo más (+),
hace que una vez definido el tamaño, con la ayuda de este signo, se suma a la anterior
definición
Ejemplo 3.1
<body>
<base FONT SIZE="2">
COMPUELECTRONICAS
</FONT> <br>
<FONT SIZE="+5"> Este es
Tamaño 7 </FONT><br>
<FONT SIZE="7"> Este es
</body>
PARÁMETROS: COLOR Y FACE: El primero permite definir el color de la letra y el segundo,

define el tipo de letra
Ejemplo 3.2: <font color="#993BFC" size="2" face="ALGERIAN"> BINVENIDOS A LA
INSTITUCION EDUCATIVA TECNICOLA AGRICOLA SUAREZ IETAS</font>
<body>
<font color="#993BFC"
size="2" face="ALGERIAN">
BINVENIDOS A LA
INSTITUCION EDUCATIVA
TECNICOLA AGRICOLA
SUAREZ IETAS </font>
<FONT color="blue" size="3"
face="scrip"> Este es Tamaño
3 </FONT><br>
<FONT color="red" size="4"
face="Tahoma"> Este es
<FONT color="brown" size="5"
face="Arial"> Este es Tamaño 5
</FONT><br>
<FONT color="fucshia" size="6"
face="bodoni mt black"> Este es
<FONT color="black" size="7"
face="Bernat mt condensed">
Este es Tamaño 7
</FONT><br>
<FONT color="#9933F6"
size="5" face="ALGERIAN">
Este es Tamaño 5
</FONT><br>
</body>
8
3.3 USO DE BASEFONT o <BASEFONT SIZE="n">: Donde n es un número del 1 al 7 (por
defecto vale 3) y las comillas son obligatorias. También es posible definir una fuente para
todo el documento. Para ello, hay que insertar la etiqueta <basefont>.
No necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que
la etiqueta, pero si coloca no queda mal </font>.
Nota: Este código haría que la fuente del documento fuera por defecto de color azul, de
tamaño 4 y Algerian. Si después de indicar la etiqueta <basefont> o <font>, el
navegador encuentra otra etiqueta <font>, la que prevalece es siempre la última que se
encuentra.
Ejemplo 3.3
<Body>
<basefont size="6"
face="ALGERIAN">
Te miré y no te
reconoci<br>
pero tu silueta en mi
mente,<br>
hizo mella en mi
corazón<br>
hasta sentir, esto que hoy
<br>
ambos llamamos amor <br>
Tu me quieres <br>
Yo te amo <br>
Tu me amas, yo te adoro
<br>
</body>
2.4 Parámetro: uso del "+3"> Esto es texto de tamaño 3 : <FONT SIZE="+3"> esto es
de tamaño 6 </FONT>
Ejemplo:2.4
<body>
<BASEFONT SIZE="3">Esto
es texto de tamaño 3
</FONT> <br>
<FONT SIZE="+3"> esto es
de tamaño 6 </FONT> <br>
<FONT SIZE="+4"> y esto
es de tamaño 7
</FONT><br>
</body>
9
Lección No 3:Uso De La Etiqueta: <strong>Texto con énfasis fuerte</strong>: El nombre
de esta etiqueta significa fuerte o grueso, y sirve para indicar que el texto que modifique
es un texto de mayor importancia que el que le rodea y es necesario resaltarlo de algún
modo. Los navegadores gráficos en general muestran el texto afectado por esta etiqueta
en negrita, por lo que puede usarse en sustitución de la etiqueta B.
Ejemplo3:
<body>
<strong>
El nombre de esta etiqueta
significa fuerte o grueso, y sirve
para indicar que el
texto que modifique es un texto
de mayor importancia que el
que le rodea y es necesario
resaltarlo de algún
modo. </strong>
</body>
Lección No 4: <EM>...< /EM>: Esta etiqueta proviene de la palabra inglesa EMphasize,

que significa enfatizar. El texto sobre el que actúa esta etiqueta suele estar mostrado en
cursiva, tal y como puede verse en la figura 3.5 como resultado del siguiente código: El
autor del libro es <EM>
<body>
El autor de este poema es el
escritor
<EM>
Jhon Jairo Torres Rios
</EM>
</body>
</html>
Lección No 5: Insertando Imágenes: <img src="img.gif">: Permite insertar una

imagen a una página web. Los formatos más complicados basados en complejas fórmulas
matemáticas, que consiguen reducir el tamaño de la imagen son . GIF y .JPEG.
Para insertar una imagen en una página Web es imprescindible guardarla en una carpeta
diferente archivo independiente del documento HTML. Dicho archivo podía contener la
imagen en varios formatos. El formato JPEG. Es aceptado pero utiliza mucho espacio.
Nota: Algunas aplicaciones de retoque de imágenes guardan las imágenes GIF y JPEG
con la extensión en mayúsculas (.GIF, .JPEG). Esta terminación es válida, pero los
nombres de los archivos que contienen imágenes, igual que los de los documentos HTML,
son sensibles a mayúsculas/minúsculas y por tanto .gif no es lo mismo que .GIF con lo
que al referirnos al archivo debemos escribir su nombre y terminación respetando las
mayúsculas y minúsculas. Si las hemos confundido cuando probemos las páginas en el
10
ordenador local probablemente funcionen, pero dejarán de hacerlo cuando las
publiquemos, es decir, cuando las pongamos en el servidor Web
Lección No 6
Uso de la etiqueta <img src="Alturas Bomberil.Gif">: Permite insertar una imagen, ya

sea formato .gif, jpeg
Ejemplo 6
<BODY>
<img src="Alturas Bomberil.Gif">

="BLUE" Face="Helvetica"> El
superbombero </FONT></h1>
</BODY>
LECCIÓN NO 7: USO DE CARACTERES ESPECIALES Y VOCALES TILDADAS
Representac
Carácter Carácter Representación
ión
< < € €

> > ç ç
á á Ç Ç
Á Á ü ü
é é Ü Ü
É É
& &
í í
¿ ¿
Í Í
¡ ¡
ó ó
" "
Ó Ó
ú ú · ·
Ú Ú º º
ñ ñ ª ª
Ñ Ñ ¬ ¬
™ © ©
&nbsp = Espacio ® ®
11
Permite escribir texto que contenga palabras tildadas o que se desee cambiar
las propiedades del texto, así como a insertar caracteres especiales o
separadores.
Ejemplo: Aquí se tilda la á y la Á
Se representa con á
Se representa con Á
Ejemplo 7 Ejemplo de texto tildado con espacios en blancos

<body>
Esta página está
pensada para presentar palabras
tildadas <br>
Deberías aprender a escribir
código XHTML ortograficamente
bien presentado: mira esta plabra
también <br>
Caracter especial <br>
Eñe mayuscula tildad Ñ<br>
Signo de pregunta ¿<br>
="BLUE" Face="Helvetica">
¡Bienvenidos, esta es
mi 1ª &
nbsp; página!
</FONT></h1>
</BODY>
7.1 MAS SOBRE TEXTO
El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los
párrafos debe insertarse entre las etiquetas <p> y </p>.
No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del
anterior, ya que las etiquetas <p> y </p>hacen que se cambie de línea
automáticamente. Tiene como parámetros
a) Align=”left”
b) Align=”center”
c) Align=”right”
12
Ejemplo
<body>
<p align="left">Bienvenidos a mi
página, Este curso de HTML
está pensado para personas que
tengan muchas ganas de aprender
sobre el tema, tiene ejemplos y
pruebas ya ejecutadas para demostrar
que efectivamente si funcionan las
diferentes ordenes o etiquetas, asi que
Jhorito les dice a estudiar
juiciosamente
</p>
Nota: Probar con “center ” y “right”
Lección No 8. USO DE <DIV>
Otra forma de cambiar la alineación del texto es mediante las

etiquetas <div> y </div>, para las que también existe el atributo align. La
etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto,
pero con la diferencia de que la separación entre ellos es menor.
Ejemplo
<body>
<p align="center">Bienvenidos a
mi página </p>
<div align="center">Bienvenidos a
mi página </div>
<div>Aquí
encontraréis; cursos de
formación muy
interesantes.</div>
</body>
13
Ejemplo 2
<body>
<DIV ALIGN="left"> Don José
Alfredo Ríos Osorio, tenía una
contextura disímil de la de su raza:
alto, delgado, de tez morena, paisa
de nacimiento, hijo de padres
Españoles, su madre, oriunda de la
mismísima tierra de Don Toledo,
ciudad cultural y literata Española,
depositaria del poema QIOC e la
narrativa de la existencia del Santo
Grial de la provincia de Galaxia, o
quizá vestigios del monte Arar;
practicante de la filosofía positivista
Francesa de Auguste Comte
</DIV>
<address>Autor: jhorito
</address>
</body>
</html>
A) Hiperenlace <a>
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva
de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se
desee insertar un enlace han de encontrarse entre las etiquetas <a> y</a>. A través
del atributo href se especifica la página a la que está asociado el enlace, la página que
se visualizará cuando el usuario haga clic en el enlace.
EJEMPLO 1.1
<body>
<a href="D:\MARITZA\FLASH Y
DREAMWEAVER\DreamWeaver\CLASES
DE HTML\HTML JHORITO\codigo e
imagen de fondo.html"> Ir al archivo:
codigo e imagen de fondo.html</a>
</body>
14
B) USO DEL IMG SRC
<html>
<head>
</head>
<body>
<h3> Esta pagina carga una imagen llamada
collage2.jpeg , que tiene 200 pixeles de
ancho por 150 p. de alto </h3>
<img src="D:\MARITZA\FLASH Y
DREAMWEAVER\DreamWeaver\CLASES DE
HTML\HTML JHORITO\collage2.jpg"
alt="Esta es mi BB" width="200"
height="150">
</body>
</html>
Lección No 9: Uso de la etiqueta Comment o < - -: Los dos tienen el mismo efecto, sirven
para escribir comentarios explicativos dentro de un código, para explicarme que hace
determinado código o línea de código
<html>
<head>
</head>
<body>
<comment> este es un comentario no lo
tengas encuenta </comment>

</body>
</html>
Lección No 10: Saltos de línea <br>
La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la

etiqueta </br> después de ella, ya que dicha etiqueta no existe.
15
<HTML>
<HEAD>
<TITLE> EJERCICIO HECHO EN
CEINFOS</TITLE>
</HEAD>
<BODY BGCOLOR ="#FFFFFA">

<h1> Apreciados Estudiantes,<br> Les
doy la Bienvenida a HTML </H1>
</BODY>
</HTML>
Lección No 10: USO DEL TEXTO PREFORMATEADO <PRE>
Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido
insertado dentro del código, es utilizando las etiquetas <pre> y </pre>.Utilizando estas
etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los
espacios en blanco que se inserten en el texto, así como todos los saltos de línea
resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta<br>.
Ejemplo: (También tiene comentarios)
<title> Jhorito Prepara Clases</title>

</head>
<body>
<pre> Hola, BIENVENIDOS
APRECIADOS ESTUDIANTES
esta ES MI PÁGINA WEB y
esto un texto preformateado </pre>

</body>
Nota: El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se
pueden incluir las etiquetas <img>, para tal caso se debe utilizar la
etiqueta <object> (para incluir objetos como
animaciones), grande<big>,pequeñas <small>, <sub> ni <sup> (las veremos en este
tema
16
Lección No 11: sonido en una página <bgsound>
Añadir música de fondo a una página tiene pros y contras, si el sonido es apropiado al
contenido de la página, puede hacerla más atractiva en contrapartida la descarga del
archivo de sonido supone una carga que puede ralentizar la visualización de la página y
además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en
Internet, por lo que el escuchar también sonido en cada página que visita puede resultar
algo molesto. Los formatos de sonido más habituales son el WAV, el MP3 y en algunas
ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden
utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio.
Ejemplo
<html>
<head>
</head>
<body>
<embed src="En mi canasta.mp3" width="0" height="0" quality="high"></embed>
</body>
</html>
No tiene imagen de ejecutable porque al ejecutar solo suena
Lección No 12: LINEAS O TITULOS
<HTML>
<HEAD>
<TITLE> ESTUDIANDO</TITLE>
</HEAD>
<h1> PRIMERA LINEA</H1>
<H2> SEGUNDA LINEA</H2>
<H3> TERCERA LINEA</H3>
<H4> CUARTA LINEA</H4>
<H5> QINTA LINEA</H5>
</BODY>
</HTML>
17
También así
<HTML>
<HEAD>
<TITLE> ESTUDIANDO</TITLE>
</HEAD>
<BODY BGCOLOR ="#00ffff">
<FONT SIZE="+2" color ="blue"
Face="Times New Roman"> Tipo
de letra Time New Roma
</FONT>
<h2> <FONT SIZE="+3" color
="red" Face="Tahoma"> Tipo de
letra Tahoma </FONT> </h2>
<H1> PRIMERA LINEA</H1>
<H2> SEGUNDA LINEA</H2>
<H3> TERCERA LINEA</H3>
<H4> CUARTA LINEA</H4>
</BODY>
</HTML>
Lección No 13: TEXTO DENTRO DE UN BODY
<HTML>
<HEAD>
<TITLE> EJERCICIO No 1 </TITLE>
</HEAD>
<body>
<font size ="+2" face "Tahoma" color = "GREEN">
Estamos estudiando el lenguaje de marcado hipertexto, comúnmente conocido como
(HTML), espero dar de lo mejor de si a mis estudiantes, para que estos también se
esfuercen en ser disciplinados, trabajar con aptitud tesonera, no den nada por entendido
sin no se ha comprendido, practicar en el pc, pero si se tiene conocimiento acerca de
cómo funciona el lenguaje en sí, afín de no convertirse en robots que hacen funcionar un
lenguaje, cuando estos imprimen en pantalla un determinado letrero.
</font>
</BODY>
</HTML>
18
Lección No 14: USO DE LEFT , CENTER Y RIGHT : align=center, align=right,
align=left>
<html>
<head>
JAVASCRIPT</title>
<Body>
<h1> Estamos probando el
center, right y left</h1>
<h1 align="center"
color="blue">Esto va para el
centro </h1>
<H1 align="right" color="blue">
Mira a la Derecha </H1>
<H1 align="left>" color="blue">
Mira a la Izquierda </H1>
</body>
</head>
</html>
Lección No 15: Hr>...< /Hr> atributo
El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que
debe ocupar, en grosor, la línea.
Especifica un encabezado de texto de varios tamaños, n indica los tamaños de 1 a 6, 1 es
el más grande y 6 es el más pequeño.
El elemento que suele utilizarse para separar secciones dentro de una misma página es
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:

Atributo Significado Posibles valores
alineación de la regla left (izquierda)

align dentro de la página right (derecha)
center (centro)
un número, acompañado de % cuando
width ancho de la regla
se desee que sea en porcentaje
size alto de la regla un número
eliminar el sombreado
noshade no puede tomar valores
de la regla
19
<html>
<head>
JAVASCRIPT</title>
</head>
<Body>
<h1> Por Jhorito </h1>
<hr size=2 width="70%"
<font COLOR="RED">
<font COLOR="yellow">
<font COLOR="blue">
<h1> ESTOY EN MEDIO DE DOS
LINEAS ROJA AMARILLA AZUL Y
VIOLETA </h1>
<hr size=6 COLOR ="#800080">
</hr>
</body>
</html>
Parámetro: wdith=”40%” significa el porcentaje de la línea que cubrirá la pantalla
Sin porcentaje asume que es 100% x 100%
Lección No 15:LISTAS CON VIÑETAS
Para que una lista sea ordenada, sus elementos deberán encontrarse entre las
etiquetas <ol> y </ol>.
A través del atributo type es posible elegir el tipo de numeración, que puede
ser 1 (números), a (letras minúsculas).
<ol type="i">
<li> Estructura Básica de HTML
</li>
<li> Etiquetas </li>
<li> Viñetas </li>
<li> Colores Básicos en HTML </li>
<li> Construir Líneas </li>
<li> Cargar Imágenes </li>
<li> Letreros centrados, izquierda y
Derecha </li>
<li> Marquesinas</li> </ol>
</body>
20
A (letras mayúsculas), i (números romanos en minúsculas) o I (números romanos en
mayúsculas).
O así también, cambiando a letras mayúsculas

<html>
<head>
<title> PROGRAMACIÓN DE PÁGINAS WEB
CON HTML Y JAVASCRIPT</title>
<Body>
<baseFONT SIZE="5"
color="fuchsia"face="Tahoma">
<h1> Listas o Viñetas </h1>
<OL TYPE ="1" START ="5">
<FONT SIZE="+1" color= "orange">
<LI> Tesoreria
<FONT SIZE="+1" color= "blue">
<LI> Planeación
<FONT SIZE="+1" color = "red">
<LI> Presupuesto
<FONT SIZE="+1" color = "purple">
<LI> Transporte </OL>
</body>
</head>
</html>
Nota: Con números se puede empezar desde donde se quiera, cuando es letras no, en
romanos tampoco
El mismo código, solo cambia

<OL TYPE ="1" START ="I">
Ose como inicia la lista, en este caso
números romanos
21
<body>
<li> Estructura Básica de HTML
</li>
<li> Etiquetas </li>
<li> Viñetas </li>
<li> Colores Básicos en HTML
</li>
<li> Construir Líneas </li>
<li> Cargar Imágenes </li>
<li> Letreros centrados, izquierda
y Derecha </li>
<li> Marquesinas</li>
</body>
Lección No 16. ANIDAR LISTAS
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas
como ordenadas.
Por ejemplo, para insertar la siguiente lista:
1. Enero
 Matemáticas
 Español
2. Febrero
1. Matemáticas
A. Números Binarios, Octal y Hexadecimal
B. Conversiones y Pruebas
22
Ejemplo (código)
<Body>
<basefont color="fuchsia"
size="5" face="castellar">
<ol>
<li>Enero
<ul type="square">
<li>Matematicas</li>
<li>Español</li>
</ul>
</li>
<font color="blue"
<ul type="circle">
<li>Febrero</li>
<ol>
<li> Matematicas </li>
<font color="red"
<ol type="A">
<li> Conversiones Binarias,
Octales y Hexadecimales</li>
<li> Sistema ASCII </li>
</ol>
</ol>
</li>
</ol>
</font>
</font>
</body>
Explicación:
Empezamos por la lista ordenada (la más externa) <ol>, esta lista tiene dos
elementos <li>Enero y <li>Febrero.
El elemento Enero contiene una lista desordenada con tipo cuadrado <ul
type="square"> que tiene dos elementos <li> Matematicas </li> y
<li>Español</li>.
El elemento Febrero contiene una lista ordenada de un sólo elemento<li>
Matematicas </li> elemento que contiene a su vez una lista ordenada de tipo
letras mayúsculas <ol type="A"> con los dos elementos<li> Números Binarios,
Octal y Hexadecimal </li> y <li>Conversiones y Pruebas </li>
23
Lección No 17: PALETA DE LOS 16 COLORES BASICOS
<Body>
<h1> Por ing Jhon Jairo Torres
Rios </h1>
<FONT SIZE="+6"color="blue">
LOS 16 COLORES BASICOS
</FONT>
<OL TYPE ="1" START ="1">
<FONT SIZE="+2" color=
"#ffffff">
<LI> White #ffffff
<FONT SIZE="+2" color=
"#000000">
<LI> Black #000000
<FONT SIZE="+2" color =
"#ff0000">
<LI> Red #ff0000
<FONT SIZE="+2" color = "#00ff00">
<LI> Lime #00ff00
<FONT SIZE="+2" color = "#0000ff">
<LI> Blue #0000ff
<FONT SIZE="+2" color = "#ffff80">
<LI> Yellow #ffff80
<FONT SIZE="+2" color = "#c0c0c0">
<LI> Sylver
<FONT SIZE="+2" color = "#808080">
<LI> Gray
<FONT SIZE="+2" color = "#800000">
<LI> Marron
"#800080">
<LI> Purple
"#ff00ff">
<LI> Fuchsia
"#008000">
<LI> Green
"#808000">
<LI> Olive
"#000080">
<LI> Navy
"#008080">
<LI> Teal
"#00ffff">
<LI> Agua
</body>
</head>
24
Lección 18:USO DEL BLOCKQUOTE E INSEETAR IMÁGENES
<Body>
<h1> Por Jhorito </h1>
<blockquote>
Mi corazón se lastima por la
presunta partida<br>
como sera con la realidad de
la huida,<br>
roto y destrozado<br>
hara trazas de dolor <br>
yan por la partida <br>
<ADDRESS> Author: Jhorito
</blockquote>
<img src="collage2.jpg"
alt="bb" width="800"
height="350" longdesc="flor
amada">">
</body>
</html>
Lección 19 Uso de <DFN> </DFN>

Encierra una definición. El texto dentro de este comando se formatea como una
definición.
<DFN> keyboar= significa teclado </DFN>
Lección 20<BR>
Inserta un final de línea.
Lección 21 <CITE> Encierra una Cita como un título de un libro, etc </CITE>
<body>
<p> Don José Alfredo Ríos Osorio, tenía una
contextura disímil de la de su raza:
alto, delgado, de tez morena, paisa de nacimiento, hijo
de padres Españoles, su madre, oriunda de la
mismísima tierra de Don Toledo, ciudad cultural y
literata Española, depositaria del poema QIOC de la
narrativa de la existencia del Santo Grial de la provincia
de Galaxia, o quizá vestigios del monte Arar;
practicante de la filosofía positivista Francesa de
Auguste Comte <sup>1. </p>
<CITE> 1. Caspicaracho, Torres Rios Jhon Jairo
</CITE> <BR>
<DFN> QUIOC= Obra literaria Centroamericana
que explica el origen del hombre </DFN>
</body>
</html>
25
Lección No 22 <CODE> esta es una prueba </CODE>
Muestra un tipo de letra monoespaciada (por ejemplo Courier) y de tamaño ligeramente

menor al habitual. Esta etiqueta puede usarse, por ejemplo:
<body>
<p> Don José Alfredo Ríos Osorio,
tenía una contextura disímil de la de su
raza:
alto, delgado, de tez morena, paisa de
nacimiento, hijo de padres Españoles,
su madre, oriunda de la mismísima
tierra de Don Toledo, ciudad cultural y
literata Española, depositaria del
poema QIOC de la narrativa de la
existencia
del Santo Grial de la provincia de
Galaxia, o quizá vestigios del monte
Arar;
practicante de la filosofía positivista
Francesa de Auguste Comte <sup>1.
</p>
<CITE> 1. Caspicaracho, Torres Rios

Jhon Jairo </CITE> <BR>
<DFN> QUIOC= Obra literaria
Centroamericana que explica el origen
del hombre </DFN><br>
<CODE>"QUIOC= Obra literaria
Centroamericana que explica el origen
del hombre </CODE>
</body>
</html>
Lección No 22: TEXTOS RESALTADOS <B>.
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se
encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estas etiquetas
necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.
Etiqueta Significado Ejemplo
<b> negrita curso HTML aulaclic
<i> cursiva curso HTML aulaclic
<u> subrayado curso HTML aulaclic
<s> tachado curso HTML aulaclic
26
<tt> teletipo (máquina de escribir) curso HTML jhorito
<big> aumenta el tamaño de la fuente curso HTML aulaclic
<small> disminuye el tamaño de la fuente curso HTML aulaclic
Etiqueta Significado Ejemplo
<cite> cita curso HTML aulaclic
<code> ejemplo de código curso HTML aulaclic
<dfn> definición curso HTML aulaclic
<del> eliminado curso HTML aulaclic
<em> énfasis curso HTML aulaclic
<ins> insertado curso HTML aulaclic
<kbd> teclado curso HTML aulaclic
<samp> muestra curso HTML aulaclic
<strong> destacado curso HTML aulaclic
<sub> subíndice curso HTML aulaclic
<sup> superíndice curso HTML aulaclic
<var> variable curso HTML aulaclic
Ejemplo (código)
<Body>
<b> Se encuentran Daniela, Kelly y Dubier en
clases de HTML </b> <br>
<u> Se encuentran Daniela, Kelly y Dubier en
clases de HTML </u> <br>
<tt> Se encuentran Daniela, Kelly y Dubier en
clases de HTML </tt></font><br>
<BIG> Se encuentran Daniela, Kelly y Dubier en
clases de HTML </big> <br>
</body>
</html>

27
Ejemplo
Otro ejemplo: Uso del <del>: Texto que se presume no vale o esta eliminado del
contexto. <em>: Hace énfasis sobre la manera como viene el texto <ins>: De inser,
hace referencia a a un texto insertado dentro de un contexto.
<html>
<head>
</head>
<Body>
<del> SE ENCUENTRAN LESLY, FRANCY Y
DIANA ESTUDIANDO HTML </del> <br>
<em> SE ENCUENTRAN LESLY, FRANCY Y
DIANA ESTUDIANDO HTML </em> <br>
<ins> SE ENCUENTRAN LESLY, FRANCY Y
DIANA ESTUDIANDO HTML </ins> <br>
<sub> SE ENCUENTRAN <sup>LESLY,
FRANCY Y DIANA <sup> ESTUDIANDO
HTML </sub>
</body>
</html>
<html>
<head>
JAVASCRIPT</title>
</head>
<Body>
<sub>2<sup>3 <sub> x 5 <sup> 8 </sub>
</sup>
</body>
</html>
Lección No 23: Uso de la etiqueta <embed>:embedded objects: La etiqueta HTML con la

que insertamos este tipo de objetos es EMBED. El atributo SRC nos permitirá indicar el
nombre y dirección del archivo tal y como hacíamos con las imágenes. Otros atributos
usados en multitud de ocasiones son WIDTH y HEIGHT con los que podemos controlar la
anchura y altura del objeto respectivamente. Un ejemplo típico de inserción de un objeto
para plug-in podría ser:
<EMBED SRC="futbol.wmv" WIDTH="120" HEIGHT="180"> o tambien
<embed src="FUTBOL.wmv" autostart="true" loop="false">
28
<html>
<head>
<title> Uso embed src </title>
</head>
<body>
<embed src="FUTBOL.wmv" autostart="true"
loop="false">
<comment><EMBED src="FUTBOL.wmv"
WIDTH="120" HEIGHT="180"> para otros
exploradores
</body>
</html>
Lección No 24: uso de <MARQUEE>: MARQUESINAS: Las marquesinas son líneas de

texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.
Para insertar una marquesina, es necesario insertar el texto entre las

etiquetas <marquee> y </marquee>.
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si

lo deseas puedes hacer que estas propiedades varíen.
A través 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). A través del atributo direction puede modificarse la dirección en la que se
moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a
arriba), right (de derecha a izquierda) o left (de izquierda a derecha).También es posible
establecer un color de fondo, a través del atributo bgcolor
<html>
<head>
JAVASCRIPT</title>
</head>
<body>
<marquee bgcolor="#006699"
behavior="scroll" direction="up">
<b><font color="#FFFFCC" size="5">
TEXTO QUE SE ENROLLA DESDE ABAJO
HACIA ARRIBA</font></b>
</marquee>
<marquee bgcolor="red" behavior="scroll"
direction="LEFT">
TEXTO DE IZQUIERDA A LA
DERECHA</font></b>
</marquee>
29
<marquee bgcolor="#006699"
behavior="scroll" direction="RIGHT">
TEXTO DE DERECHA A IZQUIERDA
</font></b>
</marquee>
</body>
</html>
Lección No 25: HIPERENLACES <A>
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva
de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se
desee insertar un enlace han de encontrarse entre las etiquetas <a> y</a>. A través
del atributo href se especifica la página a la que está asociado el enlace, la página que
se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:

<html>
<head>
<title> JHORITO HTML</title>
</head>
<BODY>

="_parent"> Abre una Nueva Pagina
Hotmail.com</a>-->
="_self"> Abre una Nueva Pagina
Hotmail.com</a>-->
<a href="http://www.Google.com" target
="_top"> Abre una Nueva Pagina
Hotmail.com</a>
<body>
</body>
</html>
30
DESTINO DEL ENLACE
El destino del enlace determina en qué ventana va a ser abierta la página vinculada,
se especifica a través 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 vínculo o en el

conjunto de marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o

ventana que el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas
opciones de destino, ya que se volverán a ver en el tema de Marcos. De momento sólo
te interesa retener la opción _blank y _self.
En XHTML, el atributo target se usa para especificar el destino de los vínculos en las
etiquetas <a> o <area> de documentos del tipo XHTML Frameset o HXTML 1.0
transitional, las opciones válidas son:
target="_blank" – Abre el enlace en una nueva ventana
target="_top" – Abre el enlace al inicio de la misma ventana, escapando incluso de los
frames.
target="_self" – Abre el enlace en el mismo frame, si el atributo TARGET no se
especifica, esta es la opción por defecto.
target="_parent" – Abre el enlace en el primer frame de un documentos con frames.
target="NombreDelFrame" – Abre el enlace en el frame con el nombre especificado.
target="new" – Abre enlaces en una nueva ventana, sin embargo este atributo NO ES
VALIDO y no es soportado por todos los navegadores, no se recomienda su uso, en su
lugar se debe usar_blank.
31
Lección No 26. ENLACE AL ANCLA
<h1> LOS DEPORTES DE

JHORITO</h1>
<ul>
<li><a
href="#futbol">Pista
fútbol sala y
baloncesto</a></li>
<li><a
href="#aerobic">Sala
aeróbic</a></li>
<li><a
href="#tenis">Pistas de
tenis</a></li>
<li><a
href="#musculacion">Sala
de
musculación</a></l
i>
<li><a
href="#Sauna">Sauna</a>
</li>
<li><a
href="#Duchas">Duchas</
a></li>
</ul>
<h3><a
name="#futbol"></a>Pista
fútbol sala y
baloncesto</h3>
<p>Disponemos de una
pista de fútbol sala y
una de baloncesto, estas se
deben reservar con una
semana con mínimo
de antelación.
También
ofrecemos el servicio de
alquiler de pelotas</p>
<img
src="jhoritofutsala.jpg"
alt="Haga Deportes"
width="400" height="200"
<p> </p>
<img
src="multideportes.bmp"
alt="Multideportes"
<p> </p>
<h3><a
32
name="#aerobic"></a>Sal
a aeróbic</h3>
<p>Las sesiones de
aeróbic se realizan
con monitores titulados para
más
información pregunta
en recepción por los
horarios disponibles.</p>
<p> </p>
<h3><a
name="#tenis"></a>Pistas
de tenis</h3>
<p>Las practicas de tenis se
realizan con monitores
titulados graduados por el
SENA</p>
<p> </p>
<h3><a
name="#musculacion"></a
>Sala de
musculación</h3>
<p>El crecimiento de la
masa muscular es fruto de la
practica de ejercicios de
fuerza y resistencia </p>
<img src="deportes1.bmp"
alt="Haga Deportes"
<p> </p>
<h3><a
name="#Sauna"></a>Saun
a</h3>
<p>Las sesiones de sauna
con agua fria y caliente crea
en el organismo beneficios
en cuanto a la dermis,
epidermis y demas partes del
cuerpo</p>
<p> </p>
<h3><a
name="#Duchas"></a>Duc
has</h3>
<p>Las duchas amplias y
esterilizadas permiten la
practica de ejercicios idoneos
para la ampliacion de cja
toraxica y modelacion de
musculos</p>
</body>
</HTML>
33
Para que el enlace vaya directamente a un lugar concreto de la página debemos definir
anclas delante de la descripción de cada actividad, y añadir el enlace a esa ancla en cada
actividad de la lista. El código quedará de la siguiente forma
Lección No 27. ENLACES ESPECIALES (coreo electrónico)
<HTML>
<HEAD>
<TITLE> EJERCICIO No 1 </TITLE>
</HEAD>
<body>
<a
href="mailto:jjtrios@hotmail.com">Correo
para Jhorito</a>
</body>
</HTML>
Lección No 28. VÍNCULO A FICHEROS PARA DESCARGA
<html>
<head>
PÁGINAS WEB CON HTML </title>
<Body>
<A HREF="D:\MARITZA\FLASH Y
DREAMWEAVER\DreamWeaver\CLASE
S DE HTML\HTML
JHORITO\estilos.pdf">
<IMG SRC="D:\MARITZA\FLASH Y
DREAMWEAVER\DreamWeaver\CLASE
S DE HTML\HTML JHORITO\nicol y
oscar.bmp"
WIDTH=500 HEIGHT=500 ALT="HAS
CLICK par aver el documento"></A>
</body>
</html>
27.1.VINCULO VACIO
Ejemplo
<body>
<a href="#"> vinculo vacio</a>
</body>
34
</body>
Este tipo de enlace resulta útil para trabajar con comportamientos javascript.
17. IR A UNA PAGINA WEB

<html>
<head>
<title> jhorito </title>
</head>
<body>
<a href="http://www.google.com/" onclick="this.target='_blank'"> Ir a
Google </a>
</body>
</html>
Lección 28. USO DEL INPUT
<BODY
BACKGROUND=ENCUESTA.JPG
TEXT=BLUE>
<H1> DATOS PERSONALES</H1>
<FONT SIZE="5" COLOR="RED"

FACE="FORTE"></FONT>
NOMBRES:<INPUT TYPE="NOMBRE"
NAME="NOMBRE" SIZE="25"
MAXLENGTH="25"
VALUE=""></FORM><FORM>
APELLIDOS:<input
type="APELLLIDOS"
name="APELLIDOS" size="25"
MAXLENGTH="25"
VALUE=""></FORM>
</BODY>
</HTML>
35
OTRO EJEMPLO CON INPUT CON FONDO
<BODY BACKGROUND="nicol y
oscar.bmp" TEXT="BLUE">
<H1> DATOS PERSONALES</H1>
<FONT SIZE="5" COLOR="RED"
FACE="FORTE"></FONT>
NOMBRES:<INPUT TYPE="NOMBRE"
NAME="NOMBRE" SIZE="25"
MAXLENGTH="25"
VALUE=""></FORM><FORM>
APELLIDOS:<input
type="APELLLIDOS"
name="APELLIDOS" size="25"
MAXLENGTH="25"
VALUE=""></FORM>
</BODY>
Lección 29. USO DEL INPUT, TEXTBOX, OPTION, RATIO BUTTON, TEXAREA ETC
INPUT: Permite insertar varios tipos de controles, entre los que se encuentra el botón de
envío. Para indicar el tipo de control que queremos insertar se usa el atributo TYPE. Para
crear el botón de envío debemos usar TYPE="submit".
Aunque lo habitual es incluir un único botón de envío el lenguaje HTML permite la
posibilidad de incluir varios. En este caso debemos usar un nuevo atributo, NAME, para
dar un nombre a cada uno que permita al servidor diferenciar cual se ha pulsado. Este
nombre será enviado junto con los datos cuando se pulse sobre el botón. De esta forma
es posible realizar acciones diferentes dependiendo de sí se pulsa uno u otro. Por ejemplo
podían incluirse botones que simulasen distintas direcciones a las que acceder tras
introducir los datos:
36
<body
background=paisajegalindez1.j
pg text=blue>
<h1>
<basefont size="5"
color="#cocoff"
face="tahoma">
</h1>
<h1> ENCUESTA DE
SATISFACION DE
ESTUDIANTES</h1>
<h3> LLENA A CONTINUACION
LOS SIGUIENTES DATOS</h3>
<form
action="mailto:jjtrios@hotmail.
com" method="get">
<pre>
NOMBRE: <input
type="nombre"
name="nombre" size="25"
maxlength="25"value="">
APELLIDO: <input
type="nombre"
name="apellidos" size="25"
maxlength="25"value="">
TELEFONO: <input
type="nombre"
name="telefono" size="25"
maxlength="10" value="">
e-Mail: <input type="nombre"
name="e-mail" size="25"
maxlength="15"value=""></p
re>
¿EN QUE AREAS DEL
CONOCIMIENTO TE DEFIENDES
MEJOR? <br>
<font size="2" color =
"#ff0000">
<MATERIA :<select
name="materia">
<option>Informatica Basica
<option>Mantenimiento
<option>Lenguaje html
<option>Diseño Flash
<option>Programacion Visual
Basic 6
<option>Contabilidad
<option>Proyectos
</select>
37
</font>
<pre>
SEXO
F <input type="radio"
name="sexo" value="f">
M <input type="radio"
name="sexo" value="m">
EDAD
<input type="radio"
name="edad" value="menos
de 15">menos de 15<br>
<input type="radio"
name="edad" value="entre 15
y 25">entre 15 y 25<br>
<input type="radio"
name="edad" value="mas de
25">mas de 25
NIVEL ACADEMICO
<input type="checkbox"
name="primaria"
value="primaria">Primaria
<br>
name="secundaria"
value="secundaria">Secundari
a<br>
name="tecnico"
value="tecnico">Tecnico<br>
name="tecnologico"
value="tecnologico">Tecnologi
co<br>
name="profesional"
value="profesional">Profesion
al<br>
</pre>
<hr align="center" size="1"
width="100%">
<br>
<h4> DURANTE EL TRANSITO
POR LA INSTITUCION QUE
MATERIAS Y QUE DOCENTES
MERECEN SU COMENTARIO
</h4>
<h6>CUENTANOS DE FORMA
REAL</h6>
<textarea name="textarea"
rows="10"
cols="80"></textarea>
38
width="100%">
<br>
<h2>¿POR QUE
ESCOGISTES ESTUDIAR EN
NUESTRA INSTITUCION?
</h2>
ESCRIBE AQUI TU
COMENTARIO
<textarea name="nombre"
rows="10"
cols="80"></textarea>
width="100%"
color="#ff00ff">
<h2>NOTA</h2>
De Acuerso Con Su
DesempeÑO En Clase,
(Cuaderno, Participacion Y
Trabajos Revisados) Tu Nota
Deberia Ser:
<select name="nota"
size="1">
<option>uno
<option selected>dos
<option>tres
<option>cuatro
<option>cinco
</select>
<input type ="submit"
value="enviar">
<input type ="reset"
value="borrar">
</body>
Lección No 30. USO DE TABLAS

nbsp: Espacio blanco
CÓMO SE CREA UNA TABLA
Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en
inglés, tabla. Esta etiqueta consta de instrucción de inicio, <TABLE>, e instrucción de fin,
</TABLE>. Entre ambas debemos introducir otras tres etiquetas, que definirán la
estructura de la tabla. Estas etiquetas son:
• TR: La etiqueta Table Row nos permitirá insertar filas en la tabla. La tabla tendrá tantas
filas como apariciones de esta etiqueta haya entre <TABLE> y </TABLE>. La instrucción
de inicio de TR, <TR>, marca el comienzo de la línea, la instrucción de fin, </TR%gt;,
marca su final. La instrucción de fin es optativa, si no se usa se considera que una línea ha
acabado cuando comienza otra o cuando acaba la tabla. Entre el comienzo y el fin
de la línea debemos insertar las celdas de la tabla.
39
• TH: Este es el primero de los dos tipos de celdas existentes en el lenguaje HTML. El
nombre de la etiqueta proviene del inglés Table Header, encabezado de tabla. Al igual que
la etiqueta anterior el comienzo del encabezado viene dado por la instrucción de inicio,
<TH> y finaliza con la instrucción de fin, </TH>, o con el comienzo de otra celda. En
general entre el comienzo y el fin se suele insertar texto, que será mostrado en negrita o
subrayado y centrado. Ejemplo:
<tr>
<td>Texto de la primera columna.</td>
<td>Texto de la segunda columna.</td>
</tr>
• TD: Este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta, Table
Data (Datos de tabla), nos induce a pensar que su función será introducir todos los datos
que queramos en las celdillas definidas de esta forma. Y así será, de hecho podemos
insertar cualquier elemento de HTML: imágenes, listas, texto formateado e incluso otras
tablas. La diferencia de esta celda con la anterior es pequeña, y su existencia separada
sólo tiene sentido si consideramos el carácter descriptivo del HTML. En la práctica la
diferencia principal es que el texto de los encabezados de tabla aparecerá resaltado y
centrado y el de las celdas normales (TD) no.
BORDER, que significa borde en inglés. Este atributo puede tomar un valor en pixeles que
representa el grosor del borde a mostrar. Si incluimos BORDER sin ningún valor es
equivalente a BORDER="1"
20. ACLARACIONES
<a>: Se utiliza para hiperenlaces en combinación con otras etiquetas

Márgenes: Las propiedades son margin-top (margen superior), margin-right (margen
derecho), margin-bottom (margen inferior),margin-left (margen izquierdo),
o margin (los valores de los márgenes superior, derecho, inferior e izquierdo, separados
por espacios).
<table width="100%" border="0" cellpadding="5">
Table: crea la table, width: ancho: Cantidad de pixels, border: sin o con borde y
cellpadding=”5”: Define el espacio entre el borde de la celda y su contenido
40
<html>
<head>
<title>Documento sin
título</title>
</head>
<body>
<table width="500" border="1">
<tr>
<th
scope="col">NOMBRE </th>
<th
scope="col">DIRECCION </th>
<th
scope="col">CEDULA </th>
<th
scope="col">TELEFONO </th>
<th
scope="col">EMAIL </th>
</tr>
<tr>
<th scope="row">Jhon
Jairo </th>
<td> Carrera 3 No 8-80</td>
<td>76304895 </td>
<th
scope="col">3127938733 </th>
<th
scope="col">jjtrios@hotmail.com
</th>
</tr>
<tr>
<th scope="row">Lucy
Fernanda </th>
<td> B/Balboita</td>
<td>25.601.524 </td>
<th
scope="col">3124646 </th>
<th
scope="col">lucybeatiful@hotmail.com </t
h>
</tr>
</table>
</body>
</html>
Lección No 31
Uso de la etiqueta: "href": Establece cuál es la relación entre el documento actual y el
recurso destino
41
<html>
<head>
<title> jHORITO.COM</title>
</head>
<body>
<a href="Uso de h1 sin colores.html">
LLAMANDO AL EJERCICO
EJEMPLO.HTML</a>
</body>
</html>
Lección No 32 Estilos CSS: Uso de la etiqueta <style type>:

En este ejemplo se muestra que la etiqueta <style> con su atributo type define una
hoja de estilo por medio del valor text/css. Se debe incluir dentro del head.
En este ejemplo podemos observar que le hemos aplicado estilos a los siguientes
elementos:
body: define el color de fondo de la página en rosado.

p: define todas las fuentes de color tipo de rojo.
<html>
<head>
<title> Uso de Style</title>
<style type="text/css">
body {background-color:#FFAACC}
p {color:#FF00AA}
</style>
</head>
<body>
<p>Fuentes blancas sobre fondo
azul</p>
</body>
</html>
Lección No 33: Uso de style="color:red;

<html>
<head>
<head>
<style type="text/css">
body {background-color:#FFAACC}
p {color:red}
</style>
</head>
<body>
<p>Fuentes blancas sobre fondo
azul</p>
</body>
</html>
42
Lección No 34 : NORMAS
NORMAS PARA INCORPORAR ELEMENTOS GRÁFICOS Y MULTIMEDIALES
Cuando en un Sitio Web se incorporan elementos gráficos y multimediales, se deben

seguir normas muy concretas para evitar que su peso afecte el desempeño de la página
cuando sea solicitada por los usuarios del Sitio Web.
Características del lenguaje HTML
El Web tenía que ser distribuido: La información repartida en páginas no muy grandes
enlazadas entre sí.
• El Web tenía que ser hipertexto y debía ser fácil navegar por él.
• Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de
trabajo...) y con todo
tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y
rápido
La división de las diferentes secciones de una página(logo, menú, banners, publicidad o
el contenido mismo) se puede definir por medio de este sistema.
A continuación entregamos algunas recomendaciones tendientes a asegurar la correcta

inclusión de dichos elementos:
Optimizar el peso de las imágenes: se debe bajar al máximo posible el peso de las
imágenes; cuando esto no sea posible hacerlo por su tamaño, se debe reducir el
número de colores disponibles y la resolución (72 dpi es la norma).
Elegir el formato adecuado: ante un mismo tamaño de imagen, el peso varía
dependiendo de si son procesadas para desplegarse en formato GIF respecto del
formato JPG. Normalmente una imagen con colores planos (como un icono) tendrá un
peso menor si se guarda en GIF respecto de si es guardada en JPG. Lo contrario
ocurrirá con una imagen con muchos colores diversos (como una foto). Se recomienda
probar ambos formatos para determinar el óptimo.
Ubicación de imágenes: se recomienda usar un solo directorio para almacenar las
imágenes repetidas, tales como los iconos y otros elementos gráficos que son
utilizados en diferentes páginas del sitio. Al ubicarlos en un directorio único se puede
aprovechar la función de caché del programa visualizador para mejorar el rendimiento
de las páginas. Para efectos de seguridad, se recomienda impedir que un programa
visualizador pueda ver el contenido de dicho directorio o cualquier otro dentro del sitio.
Usar el atributo ALT en imágenes: en el código HTML se debe usar el
atributo ALT (texto alterno) en las imágenes para que éste se despliegue antes que las
imágenes y facilite de esta forma la comprensión del contenido a los usuarios.
Imágenes con alto y ancho: las imágenes (dibujos, fotos, iconos, botones) deben tener
tamaño para el ancho y el alto, para que el programa visualizador pueda dejar
reservado el espacio para dicho contenido antes de que se realice su despliegue visual.
43
Ofrecer plug-ins: cuando se utilizan archivos multimediales que requieren el uso de
plugins (programas visualizadores especiales) para revisarlos, se recomienda poner el
programa para ser bajado u ofrecer un enlace a lugares donde obtenerlo. Esto es
especialmente válido en sitios que ofrecen presentaciones de portada en tecnología
Flash, las cuales deben ser anunciadas para que el usuario tenga la opción de verlas o
avanzar directo al sitio.
Indicar el peso de los archivos: cuando se ofrecen elementos gráficos o audiovisuales
para que sean bajados al computador personal por el usuario (especialmente en Video,
Audio, Flash u otros), se recomienda indicar el peso de los mismos, con el objeto de
ofrecerle información útil para efectuar la operación.
Una buena página WEB tiene: imágenes impactantes, animaciones sorprendentes,
formularios interactivos, et
Muchas veces deseamos que el contenido de nuestra página esté dividido en 2 o más
columnas.
Para ello nos valemos del uso de las tablas, sin bordes y definiendo los diferentes
anchos de cada una de las columnas.
Otro sistema más efectivo, es el uso de estilos para la disposición de los diferentes
elementos dentro de la página, llamado CSS
44

Curso de HTML Por Ing Jhon Jairo Torres Rios - Mayo 01 2019

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Curso de HTML Por Ing Jhon Jairo Torres Rios - Mayo 01 2019

Загружено:

Авторское право:

Доступные форматы

CURSO DIDACTICO Y PEDAGOGICO DE HTML

POR: Ing JHON JAIRO TORRES RIOS

HTML= (Hyper Text Markup Language): Significa Lenguaje de hipertexto de marcas. En

Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas,

La verdadera fuerza de Internet estriba en la posibilidad de navegar con una sola

Cada uno de los 93 elementos estándar produce un resultado específico cuando el

<NOMBRE_ETIQUETA> TEXTO </cierra ETIQUETA>

Su contenido es ubicado entre el tag de apertura y el de cierre.

La estructura básica de una página es:

Acá ubicamos el logo o un banner

Menú Acá va el contenido

La primera etiqueta <table> define el tamaño general de la página.

El capítulo de tablas lo veremos al final de estas lecciones.

Lección No 1: Uso de la etiqueta <title> Texto </title>: Permite escribir el nombre de la

Ejemplo1.Nombre del archivo: uso de title.html

Lección No 2: Uso de <body>:CUERPO: El cuerpo del documento contiene la información

Ejemplo: nombre del archivo: Uso de Fondo Verde.html

<h1> <FONT SIZE="+5"color

Nota: Por lo general la creación de fondos requiere programas especiales, bastante

La creación de imágenes de fondo es complicada y delicada. En general suelen ser más

Lección No 3: Uso del <FONT SIZE="2"> </font>: La etiqueta etiqueta <font..>:

PARÁMETROS: COLOR Y FACE: El primero permite definir el color de la letra y el segundo,

Lección No 4: <EM>...< /EM>: Esta etiqueta proviene de la palabra inglesa EMphasize,

Lección No 5: Insertando Imágenes: <img src="img.gif">: Permite insertar una

Uso de la etiqueta <img src="Alturas Bomberil.Gif">: Permite insertar una imagen, ya

<img src="Alturas Bomberil.Gif">

<h1> <FONT SIZE="+5"color

LECCIÓN NO 7: USO DE CARACTERES ESPECIALES Y VOCALES TILDADAS

< &lt; € &euro;

Ejemplo: Aquí se tilda la á y la Á

Se representa con &aacute;

Se representa con &Aacute;

Ejemplo 7 Ejemplo de texto tildado con espacios en blancos

7.1 MAS SOBRE TEXTO

Nota: Probar con “center ” y “right”

Lección No 8. USO DE <DIV>

Otra forma de cambiar la alineación del texto es mediante las

Lección No 10: Saltos de línea <br>

La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la

Lección No 10: USO DEL TEXTO PREFORMATEADO <PRE>

Ejemplo: (También tiene comentarios)

<title> Jhorito Prepara Clases</title>

<embed src="En mi canasta.mp3" width="0" height="0" quality="high"></embed>

No tiene imagen de ejecutable porque al ejecutar solo suena

Lección No 12: LINEAS O TITULOS

Lección No 13: TEXTO DENTRO DE UN BODY

Es posible especificar algunos atributos de la regla horizontal:

alineación de la regla left (izquierda)

size alto de la regla un número

Sin porcentaje asume que es 100% x 100%

Lección No 15:LISTAS CON VIÑETAS

O así también, cambiando a letras mayúsculas

El mismo código, solo cambia

Lección No 16. ANIDAR LISTAS

Lección 19 Uso de <DFN> </DFN>

Muestra un tipo de letra monoespaciada (por ejemplo Courier) y de tamaño ligeramente

<CITE> 1. Caspicaracho, Torres Rios

Lección No 22: TEXTOS RESALTADOS <B>.

<b> negrita curso HTML aulaclic

<i> cursiva curso HTML aulaclic

<u> subrayado curso HTML aulaclic

<s> tachado curso HTML aulaclic

<big> aumenta el tamaño de la fuente curso HTML aulaclic

< < € €

Se representa con á

Se representa con Á