Presentacinhtml 091121100213-phpapp02

POR:
Angie Natalia Ruiz Villamil
LENGUAJE HTML

HTML
 Las páginas que nos encontramos en
Internet, las páginas web, están
construidas en un lenguaje de etiquetas
denominado lenguaje html.
 El HTML, el cual tiene dos herramientas preexistentes: El concepto de
Hipertexto (Conocido también como link o ancla) el cual permite conectar
dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General)
el cual sirve para colocar etiquetas o marcas en un texto que indique como
debe verse.
 HTML no es propiamente un lenguaje de programación como C++, Visual
Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador,
por lo tanto algún error de sintaxis que se presente éste no lo detectará y se
visualizara en la forma como éste lo entienda.

1. Empezando a utilizar html
 El código fuente, se escribe en un procesador
de texto. Lo vamos a hacer con el Bloc de
notas.

etiquetas
 Las dos etiquetas fundamentales dentro de las
cuales tiene que ir nuestro código fuente son
<html> como etiqueta de apertura y
</html> como etiqueta de cierre.
 Todo lo que será visible al visitar la página con
el navegador, debe de estar entre las
etiquetas <body> cuerpo, en inglés, como
etiqueta de apertura y </body> como etiqueta
de cierre.

ESCRIBIR MENSAJE
 Vamos a escribir Bienvenida.
 Lo escribiremos entre <body> y </body>. Nuestro código
quedará así:

GUARDAR DOCUMENTO
 Ahora tenemos que guardar el documento con un nombre y una
extensión especial.
 El nombre va a ser index y su extensión .html
 También se podría guardar con la extensión .htm (el resultado es
exactamente el mismo).
 El sitio puede ser cualquier parte del ordenador. Para tenerlo
accesible, lo vamos a guardar en el Escritorio: Le damos a
Archivo > Guardar

2. Mi primera página
 Ya podemos ir al Escritorio para abrir la página.
 Observa que el icono de la página en el
escritorio tiene el del Explorer:
 Si haces doble clic sobre él, se te abrirá la página

VISTA DE LA PÁGINA
 A partir de este momento, es conveniente
tener el navegador minimizado en la barra de
tareas para actualizar y visualizar rápidamente
con el navegador los cambios efectuados.

3. Mejorando la página
3.1. Centrar el texto.
 Si queremos que nuestro saludo: Bienvenida
que aparezca en el centro de la página,
escribimos delante del saludo la etiqueta
<center> y al final del mismo la etiqueta de
cierre </center>
 El código quedaría así:

 Guardamos los cambios:
 Minimizamos y comprobamos los resultados con
el Explorer (lo recuperamos desde la barra de
tareas):
 Si observamos que nuestro mensaje no aparece
centrado le damos clic al botón actualizar.

3.2. Aumentar el tamaño del texto
 Podemos aumentar su tamaño empleando las etiquetas de
encabezados. Las etiquetas van desde el <h1> (h de head, en
inglés, cabeza) para la más grande, al <h6> para la más
pequeña.
 Vamos a poner el tamaño mayor:

 Le damos a Archivo > Guardar , minimizamos y
comprobamos los cambios con cada uno de
los navegadores

3.3. Poner un color de fondo
 Para poner un color de fondo a toda la página, lo tenemos que
hacer dentro de la etiqueta <body> pues afecta a todo el
documento. Esto que se escribe dentro de una etiqueta se
denomina atributo.
 Los colores deben escribirse mediante el denominado código
hexadecimal que consiste en 6 cifras/letras agrupadas de dos en
dos, que nos indican la cantidad de rojo, verde y azul que
contiene ese color, o bien, con la palabra inglesa que
corresponde al color.
 Vamos a poner el color rojo al fondo de la página. Lo
conseguimos escribiendo la etiqueta <body> con su atributo
como sigue: <body bgcolor="red"> ( bg de background ).

VER COLOR DE FONDO
 Guardamos los cambios y abrimos el navegador para
comprobar los resultados:

3.4. Cambiar el color del texto
 Para cambiar el color del texto empleamos la etiqueta <font>
con su atributo color. Vamos a cambiar el color negro del texto,
al color blanco.
 Podríamos emplear el nombre en inglés del color, igual que
hemos hecho con el fondo. La etiqueta quedaría <font
color="white">. Vamos ahora, a colocar el código hexadecimal
de este color que es el ffffff. La etiqueta quedaría así: <font
color="#ffffff">. La etiqueta se debe cerrar sin su atributo.

Ver color de la letra
 Guardamos los cambios, minimizamos y abrimos
el navegador

3.5. Saltos de línea
 Vamos a incluir una nueva línea en nuestra
página: Por ejemplo vamos a poner:
A mi primera página web

Ver saltos de linea
 Bienvenida A mi primera página web
 El salto de línea que hemos hecho en el código no lo
reconocen los navegadores. Para que el salto de línea
se incorpore hay que hacerlo con la etiqueta <br> del
inglés break, romper. Esta etiqueta no tiene cierre.
 El código quedaría así:

3.6 Párrafos
 Cuando queremos introducir una línea en blanco,
utilizamos la etiqueta <p> de párrafo. Esta etiqueta
admite su correspondiente cierre </p>, aunque no es
necesario.

Ver parrafos
Bienvenida
Este es mi primer trabajo.
Al principio es muy sencillo pero, poco a poco,
se
va a ir complicando.

Si queremos separar más no es suficiente repetir la
etiqueta <p>. Hay que unir las dos etiquetas y repetir
Ambas como lo muestra la siguiente pantalla:

Bienvenida
Este es mi primer trabajo.
Al principio es muy sencillo pero, poco a poco, se
va a ir complicando.

4. La cabecera
 La cabecera se coloca entre las etiquetas
<head> y </head> . Va justo después de la
primera etiqueta <html> y antes del <body>.
Constituye la parte no visible del documento:
 lo que más nos interesa poner dentro de la
cabecera del documento es el título de la
página.
 Observa que en la barra de título, la barra
superior aparece:

Agregar titulo
 Para poner el título al documento, hay que
introducir dos nuevas etiquetas dentro de la
cabecera. Son las etiquetas <title> de apertura y
</title> de cierre. Y, entre ellas ponemos la frase
que defina nuestro documento:
<html>
<head>
<title>
Ejercicio 1
</title>
</head>
<body>
Bienvenido a mi página
</body>
</html>

Agregar titulo
 En la barra superior del navegador, barra de
título, aparece el título que acabamos de
poner al documento:
Se cerrará esta página que después será
utilizada.
Abriremos una nueva página para hacer los
siguientes
ejercicios.

5. Imágenes
 La etiqueta para introducir una imagen es
<img src="nombre.gif">
(src de source en inglés fuente u origen de la imagen) y
siendo nombre el nombre que tiene la imagen y .gif su
formato.
 La etiqueta funcionará bien siempre y cuando la imagen
esté en la misma carpeta en la que se encuentra la página
web desde la que la llamamos. Es habitual (y
recomendable) colocar todas las imágenes en otra
carpeta interna, en ese caso, habrá que darle la ruta en la
cual se encuentra nuestra imagen.
 Supongamos que la imagen nombre.gif se encuentra en
una carpeta denominada imag, pues bien, la etiqueta sería
<img src="imag/nombre.gif">

Ver imagen
 En este caso el formato de la imagen es .jpg (junto con el .gif y el
.png los formatos de imágenes más habituales en internet). La
imagen se denomina riglos2.jpg
<html>
<head>
<title>
Imágenes 1
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg">
</center>
</body>
</html

5.1. Atributos de la imagen
width y height
 Es muy importante introducir las medidas de la imagen dentro de
la etiqueta <img>.
 De esta manera cuando el navegador va recorriendo la página
reserva el espacio justo para la imagen y, el resto de la página se
va cargando sin problemas mientra se acaba de cargar la
imagen.
 Supongamos que la imagen tiene 150 de ancho y 230 de alto.
Escribiríamos:

Ancho y largo de la imagen
<html>
<head>
<title>
Imágenes 2
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg” width="150" height="230">
</center>
</body>
</html>

5.2. Colocar una imagen como fondo de la página
 Simplemente tenemos que colocar dentro de la etiqueta <body> el atributo
background con el nombre y/o dirección de la imagen que queremos
colocar. Supongamos que quiero colocar una imagen denominada claro1.gif
que está dentro de la carpeta imag. El código será el siguiente:
<html>
<head>
<title>
Imagen como fondo de página
</title>
</head>
<body background="imag/claro1.gif">
<center>
<h2>
Esta página tiene una imagen de fondo.
</h2>
</center>
</body>
</html>

6. Vínculos
 Es una de las herramientas más interesantes de los documentos html.
La sintaxis para establecer un enlace es:
<a href="destino">texto</a>
 Donde destino es el documento con el que se enlaza y texto es la
palabra o palabras que, al pulsar, nos llevan a ese destino (también
puede ser una imagen).
6.1. Vínculos a otro documento del mismo sitio.
 Nuestro sitio estará formado por varios archivos generadores de
varios documentos. Los documentos tendrán la extensión .html (o
.htm). Para establecer el vínculo escribiremos sencillamente el
nombre del documento en el destino y, entre las etiquetas de
apertura y cierre la palabra o palabras que activarán el vínculo.
 Como ejemplo vamos a establecer un enlace a la primera página de
este sitio (primer documento) cuyo archivo tiene como nombre
index.htm

Ver vinculos
<html>
<head>
<title>
Vínculos 1
</title>
</head>
<body>
<center>
<a href="index.htm“>
Ir a la página inicial
</a>
</center>
</body>
</html>

6.2. Vínculos a otro documento externo al sitio
 En este caso en destino deberemos escribir toda la
dirección URL del sitio.
 Vamos a establecer un enlace a la página del buscador
Google cuya dirección URL es http://www.google.es
<html>
<head>
<title>
Vínculos 2
</title>
</head>
<body>
<center>
<a href="http://www.google.es">
Ir a Google
</a>
</center>
</body>
</html>

6.3. Vínculos a otro documento externo al sitio
 En este caso en destino deberemos escribir toda la dirección URL del
sitio.
 Vamos a establecer un enlace a la página del buscador Google
cuya dirección URL es http://www.google.es
<html>
<head>
<title>
Vínculos 2
</title>
</head>
<body>
<center>
<a href="http://www.google.es">
Ir a Google
</a>
</center>
</body>
</html>

6.4.- Vínculos a otra parte del mismo
documento.
 A veces cuando el documento es muy extenso conviene
establecer formas rápidas para subir o bajar a una parte
determinada del documento.
 Para realizar esto, primero hay que establecer un ancla o
marca en la/s parte/s del documento a los que queremos
acceder de forma rápida.
 La sintaxis de la marca es
<a name="ancla1"></a>
poniéndolo en el punto de destino. No hace fata que haya nada
entre la etiqueta de apertura y cierre.
 En el punto activador escribiremos
<a href ="#ancla1"> Ir a la parte tal </a>.
 Como ejemplo vamos a movernos por las partes anteriores a
esta línea del punto en el que estamos.

 Como ejemplo vamos a movernos por las partes
anteriores a esta línea del punto en el que
estamos.
 En primer lugar hemos nombrado las anclas con
el mismo nombre que tienen los diferentes
apartados (cambiando el punto por un guión
bajo) a los que vamos a desplazarnos:

6.5.- Vínculos de correo electrónico
 Vamos a ver los enlaces a una dirección de correo electrónico. Cuando el navegante
pinche sobre el activador del vínculo, se abrirá el programa de correo con la dirección
del destinatario ya escrita en el mensaje.
 La sintaxis es <a href="mailto:login@servidor.es"> Mándame un mensaje </a>
<html>
<head>
<title>
Vínculos 5
</title>
</head>
<body>
<center>
<a href="mailto:mmalvarez@sena.edu.co">
Dime lo que piensas de este curso
</a>
</center>
</body>
</html>

6.6. Imagen como vínculo
a otro documento
 En lugar de texto podemos utilizar una imagen como
vínculo.
 En primer lugar deberemos escribir la etiqueta de
apertura del vínculo y luego la etiqueta de inclusión de
la imagen cerrando, posteriormente, la etiqueta del
vínculo.
 Para este tipo de vínculos se suelen emplear pequeñas
imágenes, aunque, a veces, también se utilizan
imágenes de gran formato (sobre todo en los portales
de los sitios).

Vinculo imagen otro documento
<html>
<head>
<title>
Vínculos 6
</title>
</head>
<body>
<center>
Visita la página de TERRA:<P>
<a href="http://www.terra.es">
<img src="imag/logo_terra.gif">
</a>
</center>
</body>
</html>

7. Listas
A menudo hay que hacer listas de objetos, de conceptos, de definiciones...
Las listas pueden ser no numeradas (el orden no importa) y numeradas:
7.1. Listas no numeradas
 Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>.
Cada objeto que forma la lista va precedido de la etiqueta <li> (list item) sin etiqueta de cierre.
<html>
<head>
<title>
Listas no numeradas
</title>
</head>
<body>
Mis aficiones:
<ul>
<li> El cine.
<li> La montaña.
<li> La música.
</ul>
</body>
</html>

Resultado de listas no
numeradas
Mis aficiones:
El cine.
La montaña.
La música.

7.2. Listas numeradas
 Comienza el listado con la etiqueta <ol> (ordered list) y su final con la
etiqueta </ol>. Cada objeto que forma la lista va precedido, igual que en las
anteriores de la etiqueta <li> sin cierre.
<html>
<head>
<title>
Listas numeradas
</title>
</head>
<body>
Mis preferencias:
<ol>
<li> Viajar.
<li> Salir con mis amigos.
<li> Dormir.
</ol>
</body>
</html>

Resultado listas no numeradas
Mis preferencias:
1. Viajar.
2. Salir con mis amigos.
3. Dormir.

7.3. Listas anidadas
 Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener, simplemente, cuidado en la colocación de las etiquetas de apertura y cierre.
<html>
<head>
<title>
Listas anidadas
</title>
</head>
<body>
<h3>Animales:<h3>
<ul>
<li> VERTEBRADOS.
<ul>
<li>Anfibios
<li>Peces
<li>Reptiles
<li>Aves
<li>Mamíferos
</ul>
<li> INVERTEBRADOS.
<ul>
<li>Insectos
<li>Arácnidos
<li>Crustáceos
<li>Miriápodos
</ul>
</ul>
</body>
</html>

Resultado listas anidadas
Animales:
VERTEBRADOS.
 Anfibios
 Peces
 Reptiles
 Aves
 Mamíferos
INVERTEBRADOS.
 Insectos
 Arácnidos
 Crustáceos
 Miriápodos
 Hemos incorporado la etiqueta de encabezado de tercer orden <h3>
para resaltar el concepto que se va a clasificar. (Recuerda que los
encabezados van del <h1> el mayor al <h6> el menor).

5.4 Listas de definiciones
 Son apropiadas, como su nombre indica, para establecer listados de términos con sus
definiciones. Las etiquetas de apertura y cierre son <dl> y </dl> (definition list). Los
conceptos a definir van con la etiqueta <dt> (definition term) y las definiciones con la
etiqueta <dd> (definition definition).
<html>
<head>
<title> Listas de definiciones
</title>
</head>
<body>
<dl>
<dt>Concepto 1
<dd>Definición del Concepto 1
<dt>Concepto 2
<dd>Definición del concepto 2
</dl>
</body>
</html>

Resultado listas de definiciones
Concepto 1
Definición del Concepto 1
Concepto 2
Definición del concepto 2

Presentacinhtml 091121100213-phpapp02

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Presentacinhtml 091121100213-phpapp02

Similar a Presentacinhtml 091121100213-phpapp02 (20)

Último

Último (14)

Presentacinhtml 091121100213-phpapp02