Guia html

GUIA GRADO DECIMO

LENGUAJE DE PROGRAMACIÓN - HTML

OBJETIVO

Aprender HTML en forma sencilla viendo un concepto teórico, luego algunos ejercicios
resueltos y por último y lo más importante poder desarrollar otros por cuenta propia
.
La Programación de páginas Web con HTML tiene como fin que el estudiante conozca la
estructura básica de una página web y sus principales componentes, así como, las
etiquetas más utilizadas para el diseño de páginas web.

HTML

HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden
ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos
decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar
las páginas webs al usuario, siendo hoy en día la interface más extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro
gusto. Además, el HTML nos permite la introducción de referencias a otras páginas por
medio de los enlaces hipertexto.

Un archivo HTML (una página) no es más que un texto. Es por ello que para programar
en HTML necesitamos un editor de textos.

CREAR PAGINA WEB

En la actualidad, millones de personas y empresas mantienen su propio sitio en Internet,
sea con fines comerciales o simplemente como un pasatiempo.

Tener una página en la Red Mundial ha pasado de ser un simple capricho a una
verdadera necesidad para la mayoría de los usuarios.

Muchos de los individuos que tienen sitios Web prefieren crearlos ellos mismos, debido a
que el diseño en sí no necesita de mucha habilidad. Todo lo que se necesita para poder
realizar sus propias páginas interactivas es el Bloc de Notas que viene el sistema ope-
rativo, así como algunos conocimientos básicos de un lenguaje llamado HTML ( Hyper
Text Markup Language, o Lenguaje de marcado en hipertexto).
Por la misma razón por la cual queremos que nuestros hijos aprendan a multiplicar por
ellos mismos antes de que aprendan a utilizar la calculadora, es necesario comprender
el uso y funcionamiento del lenguaje HTML, saber con qué estamos trabajando, nos
permitirá sacar un mayor provecho a los editores.

A los comandos u órdenes del lenguaje HTML se les conoce como etiquetas y tiene
importantes reglas de codificación:

l. Las etiquetas siempre deben estar encerradas entre los símbolos de menor que" ( < )
y mayor que" ( > ), cómo lo muestran los ejemplos:
<center>
<span>
<font>
2. La mayoría de las etiquetas viene en pares y deben encerrar al texto al cual
deseamos aplicar el comando. Esto significa que la primera etiqueta indica que al texto
que sigue se le debe aplicar cierto formato. A esta primera etiqueta se le llama etiqueta
de apertura. Y la etiqueta final, a la cual se le llama de cierre", indica el final del
comando; esto es, que debe dejarse de aplicar el formato o función elegida. Por ejemplo,
se usan del siguiente modo:
<center> texto </center>
Como en todas las reglas, siempre hay algunas excepciones. Por ejemplo, la etiqueta
que indica un salto de línea ( <BR> ) no necesita de una etiqueta de cierre.
3. La segunda etiqueta, la de cierre. SIEMPRE empieza con una diagonal. Por ejemplo,
la etiqueta que indica que el texto siguiente debe mostrarse en negritas es <b> y su
correspondiente etiqueta de cierre es </b>. Con esto, se indica que, a partir de ahí, el
texto debe mostrarse en forma normal.
4. Las etiquetas de apertura y de cierre a menudo se utilizan en forma anidada. Esto
significa que pueden usarse etiquetas dentro de las etiquetas para aplicar más de un
comando a un mismo texto. De ser así, debemos cerrar primero la etiqueta interna antes
de cerrar la externa, como lo muestra el ejemplo siguiente:
Forma errónea: . .
<font> <center> <b> Tu texto aquí
</center> </font> </b>

Forma correcta

<font>
<center> <b>
Tu texto aquí
</b> </center> </font>

Hay algunas etiquetas que se deben poner en todos los documentos HTML para que se
conviertan verdaderamente en páginas Web. La primera etiqueta que debemos escribir
en todas nuestras páginas Web es <HTML".

<HTML>
</HTML>
Debajo de la etiqueta de apertura, se ingresa la etiqueta <HEAD>. Ésta contendrá in-
formación del documento, pero no aparecerá en la página. el documento debe de verse,
de la siguiente forma.

<HTML>
<HEAD>
</HEAD>
</HTML>
Hay varias etiquetas que pueden ir entre las etiquetas <HEAD>.

La etiqueta <TITLE> coloca el nombre de la pagina en la barra de título del navegador.
Las etiquetas <BODY> y </BODY> contendrán todo el cuerpo de 1a página.
Después de escribir esta etiqueta; el documento debe verse de la siguiente manera:

<HTML>
<HEAD>
<TITLE>
Mi primera página Web.
</TITLE>
</HEAD>
<BODY>

Este es el cuerpo de mi página Web.
</BODY"
</HTML"

PARTES DE UN DOCUMENTO HTML

Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de
este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de
índole informativo como por ejemplo el titulo de nuestra página.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos
nuestro texto e imágenes delimitados a su vez por otras etiquetas.

GUARDAR: Hay que guardar el documento y nombrarlo de acuerdo a la conveniencia.
Es importante que se escriba la extensión .html o .htm

Ejemplo: prueba.htm prueba.html

Consejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso evitará que te
confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html.
Si trabajas con un equipo en un proyecto todavía más importante que os pongáis todos
de acuerdo en la extensión.

El profesor te indicara la manea de guardar y visualizar tu pagina.

ETIQUETAS

<P> indica el inicio de un nuevo párrafo. el cual se alinea en forma predeterminada
hacia la izquierda.(salto de pagina)

<P ALIGN=RIGHT> alinear el párrafo a la derecha de la página o bien
<P ALIGN=CENTER> para centrarlo.

COLOR DE FONDO.
La etiqueta <BODY> usa varios atributos que son de suma importancia para controlar la
apariencia de la página.
<BGCOLOR>, el cual cambia el color del fondo de la página.
Ejemplo: <BODY BGCOLOR="red"> o
<BODY BGCOLOR="#OOFFOO"> en número hexadecimal

TIPO DE FUENTE
<FONT FACE="Arial">
Define tipo de letra

IMAGEN DE FONDO
Otra opción; además de utilizar un color en el fondo de la página, consiste en emplear
una imagen. Para ello, se debe preparar la imagen que se desea que aparezca en el
fondo de la página, y guardarla en la misma carpeta Web que se crea con anterioridad.
Dicha imagen se repetirá el número de veces necesario hasta cubrir toda la extensión de
la página, creando así un tapiz.
El código se muestra a continuación:
<BODY BACKGROUND="fondo.jpg">
<BODY BACKGROUND="YELLOW.GIF">

COLOR DE TEXTO
<FONT COLOR="RED">. El contenido dentro de las comillas es una variable.

A continuación se muestran los 216 colores seguros para web, para que puedas
consultarlos cuando lo necesites.

Existe otra forma de representar algunos colores, sin la necesidad de utilizar números en
hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes:

Hexadecimal Nombre
#FFFFFF white
#000000 black
#000080 navy
#0000FF blue

#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow

FORMATO AL TEXTO: para definir distintos tamaños de letras en HTML se utiliza el
elemento lleno <Hx> </hx> donde x es el número que puede variar entre 1 y 6.<H1> a la
<H6>, donde <H1> es el tipo de letra de mayor tamaño y <H6> la menor.

Ejemplo: <H2> Subtítulo de mi página </H2>
CENTRAR
<CENTER>

La etiqueta <BR> obliga a que la línea sea cortada sin agregar ninguna línea en blanco
después de la etiqueta. Esta etiqueta es buena elección para terminar líneas de texto
dentro de un párrafo. Pero la primer línea del párrafo siguiente quedará inmediatamente
después del párrafo anterior. Por ello, se debe utilizar esta etiqueta únicamente por
razones de diseño o contenido.

<I> para itálicas o cursiva
<B> para "negritas".

TAMAÑO DE FUENTE
<FONT SIZE="5"> El contenido dentro de las comillas es una variable que desde 1 hasta
7.

ENLACES O LINKS

La etiqueta que permite realizar los enlaces o links se le conoce como "ancla" (<A" </a")
y se utiliza junto con algunos atributos para enlazar sitios web, páginas dentro de un mis-
mo sitio o direcciones de correo electrónico. Su importancia es tal que, sin la etiqueta
Ancla, no existiría la World Wide Web.
Para poder hacer enlaces entre páginas, se debe tener listos varios archivos, los cuales
se enlazaran entre sí. Se Copia el código en el bloc de notas para integrar la página

principal de nuestro sitio Web. éste será el archivo principal de nuestro site, cuando se
guarde se debe nombrarlo index.htm

La etiqueta <A> </a>, es la que le indica al navegador que se ha creado un enlace o link.
El atributo HREF (que significa, Hyper Reference o Hiper Referencia) señala la ruta al
documento o sitio Web al cual, se quiere vincular.

Por supuesto, en cada enlace se tendrá que cambiar el nombre del documento en HTML
y la identificación del mismo.
la ruta completa al documento vinculado debe mostrarse entre comillas. En este
ejemplo, es "aficiones.htm”.
Si el documento "aficiones.htm" está dentro de una carpeta llamada "páginas" para
organizar mejor el site, la ruta correcta sería "paginas/aficiones.htm". En cambio, si el
enlace fuera un sitio web diferente, la sintaxis y ruta del documento debe quedar de la
manera siguiente:
<a HREF="http://www.l00lfotografos.com">
SITIO DE FOTOGRAFIA
</A>

Por otra parte, cuando un usuario navegue por la página se observará que el texto que
es enlace se muestra en un color diferente y que además está subrayado. El color en el
cual se mostrará las palabras que funcionen como enlaces se define en la primera línea
del documento

TEXTO ALINEADO A LA IZQUIERDA escribiríamos:

<p align="left">

JUSTIFICACIÓN AL CENTRO:

<p align="center">

JUSTIFICAR A LA DERECHA:

<p align="right">

EJERCICIO PRÁCTICO

1. Debes practicar cada uno de los ejemplos incluidos dentro de la teoría.
2. Investiga mas colores para que tengas más opciones para tu pagina.
3. Para practicar un poco vamos a proponer un ejercicio para resolver en nuestros
ordenadores. Simplemente queremos construir una página que tenga, por este
orden:

2 Párrafos centrados
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda

4. Copia la etiqueta <HR> y observa que función realiza dentro de tu página. Comenta
tus resultados.
5. Luego intenta con <PRE>
6. Escribe dentro de BODY el siguiente texto y escribe que pasa cuando corras tu
pagina.

Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi
página.

OTROS EFECTOS:
<U> subrayado
<STRIKE> tachado
<BIG> letra más grande que el estándar
<SMALL> letra más pequeña que el estándar
<SUB> subíndice
<SUP> superíndice
<STRONG> texto realzado
<BLINK> texto intermitente

LAS LISTAS NO ORDENADAS: Escribe lo siguiente y verifica cuales son estas listas

<UL>
<LI>Van precedidas por "bullets"
<LI>Se entiende que no importa el orden
<LI>Se utilizan con mucha frecuencia
</UL>

LAS LISTAS ORDENADAS: Escribe lo siguiente e informa que pasa con relación a las
listas no ordenadas.

<P>Las listas ordenadas:
<OL>
<LI>Van precedidas por números
<LI>La numeración es automática
<LI>Son también muy utilizadas
</OL>

Se pueden cambiar los puntos usando el atributo TYPE con tres valores. Con el valor
CIRCLE, se verá con una viñeta con un circulo. SQUARE con un recuadro.
Ejemplo: <UL TYPE=CIRCLE>

Las listas ordenadas no solo se pueden ordenar con números. También se pueden
utilizar letras y numeración romana tanto en mayúsculas como en minúsculas. Para esto
se utiliza el atributo TYPE del elemento <ol> con los siguientes valores: TYPE=1 ( Por
defecto) para números, TYPE=A para letras mayúsculas, TYPE =a para letras
minúsculas, TYPE=I para numeración romana en mayúscula, TYPE=i para numeración
romana en minúscula
Ejemplo: <OL TYPE=A>

En algunos casos puede interesarnos que la lista no comience por el numero 1 ( por
ejemplo si es una lista que continua en otra pagina). Se puede conseguir con el atributo
START combinado con TYPE.
EJEMPLO: <OL TYPE=A START= 5> este empezara con la letra A.

<MENU>
La diferencia entre un menú y una lista desordenada, es que las líneas en la lista
desordenada comienzan en el margen izquierdo y las del menú unas posiciones mas a
la derecha.
Ejemplo: <MENU>
<LI> primera línea
<LI> segunda línea
</menú>

INSERTAR IMÁGENES

Un recurso que da mucha vida a una página hecha con HTML es la inserción de
elementos gráficos. Las imágenes utilizadas pueden estar en formato GIF O JPG. Para
insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita
etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src.

A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño
de la imagen

La forma de insertar una imagen es la siguiente:

<IMG SRC="todo.gif">

IMAGEN ALINEADA A LA IZQUIERDA (por defecto)
<IMG SRC="todo.gif"> en donde todo.gif es el nombre del archivo de imagen.

IMAGEN ALINEADA A LA DERECHA texto alineado a la izquierda de la imagen
<IMG SRC="todo.gif" ALIGN=RIGHT>

IMAGEN ALINEADA A LA IZQUIERDA CON MARCO. Texto alineado a la izquierda
de la imagen
<IMG SRC="todo.gif" ALIGN=LEFT BORDER=5> BORDER=5 es el grueso del borde.

TEXTO EN MOVIMIENTO

<MARQUEE> </MARQUEE> sirve para hacer que el contenido de un bloque se
desplace horizontalmente a lo ancho del mismo. Además de texto el bloque puede
contener también imágenes. Tiene muchas parametrizaciones:
DIRECTION= establece en que dirección se mueve el contenido del bloque en la
pantalla. Puede tener dos valores.
LEFT izquierda
RIGHT derecha

BEHAVIOR= determina como se mueve el contenido del bloque en la pantalla. Puede
tener tres valores:
SCROLL= hará que el contenido del bloque aparezcan por un extremo, desaparezca por
el contrario y vuelva aparecer por donde comenzó.
SLIDE=(por defecto) hace que el contenido del bloque se deslice hacia el lado indicado
por direction y se detenga al llegar al lado opuesto. Solamente volverá a moverse si la
pagina es cargada de nuevo.
ALTERNATE= el contenido del bloque se moverá alternativamente en una dirección y
otra, comenzando por la indicada por DIRECTION.
ALIGN= es la alineación del bloque en la pantalla. No funciona en todos los
navegadores. Puede tener tres valores.
CENTER= LEFT= RIGHT=

Ejemplo:
<MARQUEE BGCOLOR=”cyan” HEIGHT=”40” WIDTH=”50%”>
Indica marquesina color cyan, alto 40 y ancho 50.

<DIRECTION=”RIGHT” BEHAVIOR=”ALTERNATE” SCROLLDELAY=”400”>
Indica la dirección del texto que será hacia la derecha, en movimientos alternos con
una velocidad de movimiento 400 milisegundos.

PARA QUE APRENNDAS MAS, DESARROLLA LOS SIGUIENTES EJERCICIOS
PRACTICOS.

A. crear una página básica

Objetivo: Practicar las operaciones que hay que realizar para crear una página básica.

Crea una carpeta en mis documentos con el nombre animales.

En el bloc de notas Escribe el código que aparece a continuación:

<html>
<head>
<title>Inicio</title>
</head>
<body bgcolor="#99CC99">
</body>
</html>

Con este código estarás creando un documento con el título "Inicio", y con el color de
fondo verde (#99CC99).

Haz clic sobre el menú Archivo. Haz clic sobre la opción Guardar como. Se abrirá el
cuadro de diálogo Guardar como. En el recuadro Tipo: elige Todos los archivos. Guarda
el documento con el nombre inicio.htm, dentro de la carpeta animales de tu disco duro.
Abre el documento que acabas de crear en un navegador. Fíjate en el color de fondo de
la página y en la barra de título.

Ejercicio 1: Con el mismo ejercicio establecer #0099CC como color de fondo y 40 como
tamaño de los márgenes.

Ejercicio 2: Con ayuda del profesor crea una imagen llamada fondo.gif y almacenala en
la misma carpeta creada. Establecer como imagen de fondo la imagen fondo.gif.Guardar
los cambios y comprobar el funcionamiento en tu navegador.

B. Insertar una imagen
Objetivo: Practicar las operaciones que hay que realizar para insertar una imagen
Inserta lo siguiente
<img src="_______.jpg" alt="visita aulaclic" width="90" height="32" border="4">
Con este código estarás asociando el enlace con la imagen ______.jpg que se
encuentra en la carpeta animales. La imagen medirá 90 píxeles de ancho, y 32 píxeles
de alto (atributos width y height).
Tendrá un borde de 4 píxeles (atributo border), que aparecerá de color rojo, al ser este
color el definido para los enlaces de esta página.
Guardar y verifica tu pagina
Inserta <p align="center"><img src="_______.gif" width="122" height="85"> </p>

El párrafo se añade para centrar la imagen
</ul> la línea:
Crea una imagen de un gato y nombralo gatito.gif, inserta la siguiente etiqueta
<img src="gatito.gif" alt="gatito" border="0">
Guarda y visualize tu pagina actualizada.

C. inserta una lista de actividades pendientes para realizar en tu casa con viñetas.

D. crea una pagina nueva que se vea como la que esta aquí, Establecer #990033 como
color del texto del documento, y 4 como el tamaño normal. Guardar y comprobar el
funcionamiento en el navegador

E. Copia el siguiente código dentro BODY

<h1><u>¿QUIENES SOMOS?</u></h1>
<br>
<p align="justify">Somos una cadena de centros deportivos dispuestos a ofrecerte
nuestras instalaciones a buen precio, con la posibilidad de reservarlas con
antelación a través de esta web.</p>
<br>
<p align="center">Este més, podrás hacerte socio de forma totalmente
gratuita. <br>
Acércate a uno de nuestros centros y no pierdas esta oportunidad.</p>

F. Reproduce las siguientes etiquetas:
Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.
2 Abre el archivo inicio.htm, que creaste.
3 Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el siguiente código
en ella:
<basefont color="red" size="1 ">
Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto
del documento.
Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la
página no tiene texto.
4 Detrás de la etiqueta <basefont> inserta una línea en blanco, y escribe el siguiente
texto: Inicio
5 Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo y
pequeño.
Dejaremos la página un poco más discreta y cambiaremos el color del texto a verde
oscuro (#003333) y subiremos el tamaño de las letras.
6 Rectifica la etiqueta <basefont para que quede así:

<basefont color="#003333" size="4">
Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 para
el texto del documento.
7 Guarda el archivo y visualízalo en tu navegador, observa los cambios.
8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:
<h1>Inicio</h1>
Con este código estarás conviertiendo el texto en un encabezado de primer nivel.
9 Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparece
destacado y más grande.
10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>.
Con esta etiqueta estarás insertando una regla horizontal.
11 Guarda el archivo y visualízalo en tu navegador, observa la regla
12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente
código en ella:
<blockquote>
<blockquote>
<p align="left">
<em>
Somos una asociación de veterinarios, estudiantes de veterinaria, o simplemente
amantes de los animales.
<br>
Desde esta página web intentaremos resolver tus dudas acerca de cómo
cuidar a tus mascotas.
</em>
</p>
</blockquote>
</blockquote>
Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>).
Este párrafo estará alineado a la izquierda (align="left"), aparecerá en cursiva (<em>) y
tendrá doble sangrado (<blockquote>).
13 Guarda el archivo y visualízalo en tu navegador

G. Crea una página igual a la imagen

H. Crea una página principal llamada menú, en la que incluyas como mínimo el nombre
de 5 animales domésticos, en forma de lista con viñetas.

Crea una página diferente con información acerca de cada uno de los animales de la
lista, en la que debe haber una imagen. Utiliza tu creatividad para que se vea amigable,
utiliza las etiquetas que consideres necesarias y llámala de acuerdo con el animal.

A partir de la página inicial menú, crea vínculos para cada una de las páginas.

Tienes que mostrar tu creatividad.

Guia html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a Guia html

Similar a Guia html (20)

Más de Luz Marina Melendez Campos

Más de Luz Marina Melendez Campos (20)

Guia html