Conceptos básicos
El servicio World Wide Web también conocido
como WWW o simplemente Web, es un
sistema de información distribuido por
Internet
basado
en
la
tecnología
hipertexto/hipermedia que proporciona una
interfaz común a los distintos formatos de
datos (texto, grafico, video, audio, etc.) y a
los servicios de Internet existentes.
Todos esto hace que el Servicio Web sea el
más utilizado
Es un texto en que cualquier palabra puede
ser especificada como enlace a otros
documentos que contienen más información
sobre dicha palabra, por lo que la lectura del
documento hipertexto no es secuencial o
lineal, sino que se puede acceder a la
información que nos interese desde otros
conceptos relacionados y de esta forma
avanzar de documento en documento hasta
encontrar la información deseada.
Es un hipertexto pero que no incluye solo
información textual sino también información
hipermedia (gráficos, video, sonido)
Es un lenguaje muy sencillo que permite
describir documentos hipertexto.
La descripción se basa en especificar en el
texto la estructura lógica del contenido
(títulos,
párrafos
de
texto
normal,
enumeraciones, definiciones, citas, etc.), así
como los diferentes efectos que se quieren dar
a los elementos insertados.
1. Utilizar programas creados para desarrollo
de páginas WEB, entre los que podemos
citar:




Microsoft Front Page
Dreamweaber
Microsoft Internet Assistant
Microsoft Office 97
2. Utilizar un editor de texto y crear nuestro
propio código, el mismo que ya no
contendría código basura. (Bloc de Notas)
Una etiqueta cumple su función de la siguiente
manera:
<nombre de la etiqueta>  Apertura de una etiqueta siempre
entre “< >”
texto/gráfico/etiquetas A la cual se aplica la etiqueta
</nombre de la etiqueta Cierra de la etiqueta siempre
entre “</ >”
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
como las que hemos visto.
<html>
C
a
b
e
c
e
r
a
C
u
e
r
p
o
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero
que son importantes para catalogarla: Titulo,
palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el
navegador: Texto e imágenes
</body>
</html>
<html>
<head> </head>
<body>
Bienvenidos al curso de PPW
</body>
</html>
Esta etiqueta va en la parte del encabezamiento de la
página web, es decir en el HEAD, y define en su contenido
el título de la página web, mismo que aparecerá en la
parte superior izquierda de la pantalla de su navegador.
Ejemplo 2:
<html>
<head>
<title>Curso de PPW</title>
</head>
<body>
Bienvenidos al curso de PPW
</body>
</html>
Todo el texto, las imágenes y el formato visibles al usuario
deben encontrarse entre las etiquetas <body>...</body>.
Esta etiqueta cuenta con los siguientes atributos:








Bgcolor define el color de fondo de la página
Text  define el color del texto de la página
Link  define el color de los vínculos en la página
Alink  define el color del vínculo actual o activado en la
página
Vlink  define el color del vínculo ya visitado
Background  define el archivo gráfico que será desplegado
como fondo
Bgsound  define el archivo de audio que se tocará en la
página.
Bgproperties  define el movimiento vertical del fondo.
Los atributos se incluyen en la etiqueta de apertura, separados
por un espacio.
Se pueden llegar a tener 16 millones de colores en una página web.
Existen dos formas para aplicar colores a una página web:
1. Se especifica el color deseado directamente con el nombre del color
en ingles: Ej: blue,green, yellow
2. Se especifica el color deseado mediante números hexadecimales
mediante la siguiente estructura:
#RRVVAA
El color tiene un signo de numeral # antecediendo a los 6 números.
Existen dos números para cada color principal: rojo, verde y azul.
Cada
uno
de
los
{0,1,2....,9,A,B,...F}.
números
varía
hexadecimalmente
#RRVVAA
Color
#RRVVAA
Color
#FFFFFF
#000000
#FF0000
#00FF00
#0000FF
#FF00FF
#00FFFF
Blanco
Negro
Rojo
Verde
Azul
Magenta
Cyan
#FFFF00
#70DB93
#000080
#FF7F00
#A62A2A
#C0C0C0
#4F2F4F
Amarillo
Agua Marino
Azul Marino
Coral
Café
Plomo
Violeta
<html>
<head>
<title>Curso de HTML</title>
</head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al curso de PPW
</body>
</html>
La etiqueta <br> instruye al navegador
cliente que inserte un salto de línea en un
documento HTML.
La etiqueta <BR> tiene el mismo efecto que
un retorno de carro en una máquina de
escribir.
Es una etiqueta especial, pues no precisa de
etiqueta de cierre.
La etiqueta <hr> dibuja de manera predeterminada una regla
horizontal alineada automáticamente, con una apariencia de
tercera dimensión.
Esta etiqueta especial, por que no necesita de cierre, tiene los
siguientes atributos:




Align establece que la regla se alinee a la izquierda,
centro o derecha LEFT,CENTER o RIGHT
NOSHADE  quita el sombreado predeterminado de la regla
WIDTH  permite especificar el ancho de la regla (en
pixeles o porcentaje)
SIZE  permite especificar el alto de la regla (en pixeles)
<html>
<head>
<title>Curso de HTML</title>
</head>
<body bgcolor="#C0D9D9" text="#000000">
Bienvenidos al curso de HTML<br>
<hr align=center width=50%><br>
Cuando la temperatura es menor a 15&deg;c hace
bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;gina WEB :)<br>
</body>
</html>
Las etiquetas <h1> </h1> al <h6> </h6>
(acrónimos de “heading 1..6”) son encabezados
del cuerpo del texto.
El encabezamiento <h1> nos proporciona las
letras de mayor tamaño.
Notará que si usamos una etiqueta de
encabezamiento, automáticamente se incluirá
un retorno de carro al final del mismo.
La etiqueta tiene el siguiente atributo:

Align  Permite ubicar el encabezamiento a la
izquierda, centro o derecha de la pantalla
(LEFT, CENTER,RIGHT)
<html>
<head>
<title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Bienvenidos al curso de HTML
</h1><br>
<hr align=center width=50%><br>
<h2>Bienvenidos</h2>
Cuando la temperatura es menor a 15&deg;c hace
bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;gina WEB :)<br>
</body>
</html>
<html>
<head> <title>Ejercicio con imagenes</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<CENTER> <H1> Im&aacute;genes </H1> </CENTER>
<H2> En este ejercicio se muestran los diferentes usos de
im&aacute;genes en una pagina Web <br>
<h3> Insertar una im&aacute;gen </h3> <br>
<h3> Modificar el tamaño de una im&aacute;gen </h3><br>
<h3> Poner bordes a una im&aacute;gen </h3> <br>
<h3> Alinear el texto a una im&aacute;gen </h3> <br>
<h3> Im&aacute;gen con texto alternativo</h3> <br>
<h3> Usar im&aacute;genes como enlace </h3> <br>
</body>
</html>
 Se
utiliza para la inclusión de imágenes
 Utilizando
el siguiente formato:
<IMG SRC=“imagen.jpg”></IMG>
Ejemplo:
<IMG SRC=“imagen2.gif”>
Si no se especifica ningún atributo las
imágenes aparecerán en su tamaño original
 Para modificar el tamaño de las imágenes se
utilizan los modificadores en la etiqueta <IMG>:

WIDTH: Especifica el ancho de la imagen
HEIGTH: Especifica el alto de la imagen
Ejemplo:
<IMG SRC=“imagen2.gif” width=100 height=80>
 Mediante
el modificador BORDER se pueden
añadir bordes a las imágenes.
Ejemplo:
<IMG SRC=“imagen2.gif” Border="3">
 Se
realiza mediante el modificador ALIGN
 Los valores pueden ser: TOP, TEXTOP,
CENTER, ABSCENTER, MIDDLE, BOTTOM, LEFT,
RIGTH
Ejemplo:
<IMG SRC=“imagen2.gif” ALING=TOP>
 Para
utilizar una imagen como enlace a otra
parte de la página o a una página externa
hay que introducirlas dentro de la referencia
<A HREF> de la siguiente manera:
<A HREF=“enlace”><IMG SRC=imagen”></A>
Ejemplo:
<A HREF="http://www.google.com"><IMG SRC=“imagen2.gif”> </A>

Cuando no se puede mostrar una imagen se
puede mostrar un te|xto donde se indique
que se puede encontrar en la imagen
Ejemplo:
<IMG SRC=“imagen2.gif” ALT=“descripcion">
 Para
poder establecer una imagen como
fondo de una página Web, se hace a través
del atributo BACKGROUND dentro de la
etiqueta BODY
Ejemplo:
<body background="imagen1.jpg“>
<html>
<head> <title> Ejercicio Enlaces Locales </title> </head>
<body>
<h2> Enlaces locales </h2>
<h3> <A name=“indice”> Indice </A> </h3>
<ul>
<li><A href=“#uno”> Seccion uno </A>
<li><A href=“#dos”> Seccion dos </A>
<li><A href=“#tres”> Seccion tres </A>
</ul>
<h3> <A name=“uno”> Seccion uno </A> </H3>
<p> Esta es la secci&oacute;n 1 de la pagina de enlaces locales </p>
<p> Click aqui para <A href=“#indice”> volver al indice </A>
<h3> <A name=“dos”> Seccion dos </A> </H3>
<p> Esta es la secci&oacute;n 2 de la pagina de enlaces locales </p>
<p> Click aqui para <A href=“#indice”> volver al indice </A>
<h3> <A name=“tres”> Seccion tres </A> </H3>
<p> Esta es la secci&oacute;n 3 de la pagina de enlaces locales </p>
<p> Click aqui para <A href=“#indice”> volver al indice </A>
</body>
</html>
<html>
<head>
<title> Ejercicio Enlaces a otras p&aacute;ginas</title>
</head>
<body>
<h1> Enlaces a otras p&aacute;ginas </h1>
<h2> Referencias relativas </h2>
<p> Se puede referenciar a un archivo localizado en el
mismo
directorio, como por ejemplo, al
<A href=“ejemplo6.html”> Imágenes</A>
<h2> Referencias absolutas </h2>
<h3> Algunos servicios Web de correo de
busqueda</h3>
<p> La <A href=“http://www.google.com”>
Buscador de
Google </A> que permite el acceso a la
localizacion de informacion de cualquier tipo </p>
</body>
</html>
<html>
<head>
<title> Enlaces a zonas de otras p&aacute;ginas </title>
</head>
<body>
<h1> Enlaces a zonas de otras paginas </h1>
<p> Enlazamos a la <A href="ejemplo6.html#tres"> la sección 3 del
ejemplo 6 </A>. </P>
</body>
</html>
Descargar

html basico