4

4
Como escribir páginas Web fácilmente

Escribir páginas web puede ser una tarea sencilla o convertirse en una auténtica
pesadilla para el autor y para los visitantes.
Una página web es un archivo de texto, se puede preparar con un editor sencillo
como el bloc de notas de Windows. De hecho un editor de texto simple es
probablemente la única herramienta imprescindible para el autor de páginas Web.
Vamos a preparar paso a paso un 'esqueleto' que nos sirva para todas nuestras
páginas, una plantilla.
La estructura de un documento HTML, una plantilla
El contenido de un documento html se escribe entre etiquetas; la sintaxis de las

etiquetas es sencilla, se abre con el nombre escrito entre los signos 'menor que' y
'mayor que' y se cierra exactamente igual pero añadiendo el signo de división al
principio del nombre de la etiqueta con la que cerramos.
Para empezar vamos a abrir y cerrar el documento html; abrimos un documento de

texto nuevo con nuestro 'bloc de notas' y escribimos:
<html>
</html>
Ahora lo podemos guardar con un nombre; por ejemplo 'index.html' y abrirlo con
nuestro navegador favorito; como que no tiene nada no veremos nada, pero según
avancemos podremos ir viendo el resultado al actualizar la página.
Dentro de la página debe haber dos secciones, la cabecera y el cuerpo; la

cabecera la vamos a encerrar entre unas etiquetas apropiadas que llamaremos
HEAD y el cuerpo en otras que llamaremos BODY; nuestro esqueleto va a quedar
así:
<html>
<head>
</head>
<body>
</body>
</html>
Podemos actualizar el navegador para comprobar que no ha pasado nada, en

realidad todavía estamos con la parte elemental de la estructura.
Vamos a ponerle a la página un título y lo pondremos en la cabecera de la página;

el título sirve entre otras cosas para 'ilustrar' al visitante, pero muchos motores de
búsqueda, robots, índices, etc. lo utilizan cuando almacenan nuestras páginas así
que vamos a ponerle un título que tenga relación con el contenido, obviamente el
título lo pondremos entre dos etiquetas TITLE:
1
4
<html>
<head>
<title>Aprendiendo HTML</title>
</head>
<body>
</body>
</html>
Al actualizar el navegador ya vemos un pequeño cambio; el título de nuestra página

está en la barra de título de la ventana.
Ahora vamos a poner un poco de contenido en el cuerpo de la página, un título de

nivel 1 (H1) y un párrafo (P), abrimos y cerramos los contenedores exactamente
igual:
<html>
<head>
</head>
<body>
<h1>Aprendiendo HTML</h1>
<p>Esta plantilla servirá como referencia para mis páginas.</p>
</body>
</html>
Podemos hacer unas pruebas con los niveles de los títulos para ver como queda la
clasificación el contenido.
<html>
<head>
</head>
<body>
<h2>Primeros pasos</h2>
<p>Algunas cosas a tener en cuenta al comenzar.</p>
<h3>Referencias esenciales</h3>
<p>Seguro que ya hay muchas cosas escritas que pueden servirme.</p>
<h3>Los enlaces, lo mas esencial</h3>

<p>HTML sirve para enlazar páginas, aprendamos como.</p>
<h2>Los estandares</h2>
<p>La sintaxis de HTML está consensuada en estandares.</p>
</body>
</html>
Mis primeros enlaces
2
4
Las siglas HTML significan precisamente 'lenguaje de marcas de hipertexto', en
palabras sencillas esto quiere decir que es una forma de escribir que permite poner
enlaces a otros documentos.
Los enlaces se ponen encerrando entre determinadas etiquetas un texto para que al
pulsarlo saltemos al documento al que nos referimos.
Las etiquetas son anclas, es decir abrimos con <a> y cerramos con </a>.
Y el documento al que nos enlazamos se incluye en la primera etiqueta como valor

del parámetro 'HREF', esta es la sintaxis de un enlace que nos manda a esta misma
página:
<a href="http://www.arquer.net/web001.html"> Enlace a la primera lección </a>
El enlace que vemos se llama absoluto porque contiene la dirección completa de la

página. Es el más directo y efectivo y el que menos problemas nos crea, pero es un
poco largo.
Si queremos enlazar a una página de nuestro mismo sitio web basta con poner una
ruta relativa como esta:
<a href="web001.html"> Enlace a la primera lección </a>
Esta última forma de hacer enlaces tiene el inconveniente de que si cambiamos la

página a otra carpeta tendremos que cambiar la ruta relativa del enlace, en cambio
es muy fácil cambiarla de servidor y también es posible visitar los enlaces de
nuestras páginas localmente sin servidor web.
Los enlaces no son parte de la estructura del documento sino del contenido; se
pueden poner en cualquier sitio, dentro de los párrafos, de las listas e incluso de los
títulos
Adornando el documento
Quiero que toda la página tenga un fondo de color azul claro y la letra negra, pero
quiero que el título 'Los estándares' sea de color rojo.
Primero pondré el estilo que se aplica a toda la página en una sección de estilo que
escribo en la cabecera (HEAD):
<html>
<head>
<style type="text/css">
body {background-color:#CCF; color:#000;}
</style>
</head>
<body>
3
4
...
Hemos escrito una etiqueta de apertura STYLE explicando que lo que sigue es texto
y una etiqueta de cierre; a continuación escribimos el nombre de un elemento, en
este caso el cuerpo del documento, y a continuación, entre corchetes y separados
por comas, los estilos que se aplican. En este caso solo especificamos el color de
fondo y el color de primer plano.
Para asegurarnos la accesibilidad de nuestra página cuidaremos de poner siempre

dos colores (de fondo y primer plano) que sean lo suficientemente distintos para no
provocar dificultades de lectura.
Ahora vamos a añadir estilo sólo a un elemento; lo haremos con un estilo en línea.
...
<h2 style="color:#F00;background-color:#FFF;">Los estándares</h2>

<p>La sintaxis de HTML esta consensuada en estándares.</p>
...
Una nota de color
Es el momento de explicar que los colores se definen con sus valores RGB (Red,
Green, Blue o en español: RVA - Rojo, Verde Azul) y que podemos hacerlo con
valores entre 0 y 255 pero escritos en hexadecimal (desde 000000 hasta FFFFFF).
¿Complica esto las cosas? bueno, un poco sí pero buscaremos la forma de hacerlo
muy sencillo. Para empezar se puede escribir el color abreviado con solo tres dígitos
(nos limitamos a 4096 colores).
Estos son los números hexadecimales: 0, 1, 2, 3, 4, 5, 6, .., A, B, C, D, E, F y luego

10, 11, ... 1E, 1F, 20, 21, ..hasta FC, FD, FE y FF.
Si te quedan fuerzas esta es la segunda parte de este sencillo tutorial
Publicar imagenes en Internet

Vamos a insertar una imagen en una página paso a paso:
0.- Primer paso y fundamental, abrimos la imagen con un editor cualquiera y le

cambiamos el tamaño para que coincida con el espacio que le vamos a dar en la
página; por ejemplo, una imagen de la cámara digital de 2560x1920 que ocupa
unos 2,3 megas la podríamos dejar a 400 pixels por 300 para que sea más o menos
ligera. A continuación la guardamos con un nombre al 60 o el 70 por ciento.
Nota: Como regla general utilizaremos el formato jpeg ó jpg (formato de

intercambio de la union de fotografos) para fotografías y el gif (formato para
intercambio de gráficos) para dibujos; alternativamente se puede utilizar png
(formato de gráficos portables para red).
4
4
1.- Insertar la imagen: basta con poner la dirección de la imagen dentro de una
etiqueta como esta:
<img src="ruta/imagen.jpg">
2.- Informar del significado de la imagen para que los navegadores y las personas
sepan de qué se trata, se añade una etiqueta 'alt' con una breve descripción:
<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo">
3.- Reservar sitio para que se cargue todo más rápido (ponemos dos etiquetas
especificando el ancho y el alto en pixeles y el navegador reserva el espacio justo)
<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo" width=400 height=300>
4.- Podemos también alinear la imagen a la izquierda para que se muestre a un

lado del texto y las líneas fluyan a su alrededor:
Asi que lo correcto es 'flotar' la imagen: (ejemplo a la izquierda)
<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo" width=400 height=300

style="FLOAT:left">
Y para que 'flote' a la derecha ponemos "FLOAT:right"
La separamos del texto que la rodea con otro elemento de estilo, un margen y listo

4

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

4

Diunggah oleh

Hak Cipta:

Format Tersedia

4

Como escribir páginas Web fácilmente

La estructura de un documento HTML, una plantilla

El contenido de un documento html se escribe entre etiquetas; la sintaxis de las

Para empezar vamos a abrir y cerrar el documento html; abrimos un documento de

Dentro de la página debe haber dos secciones, la cabecera y el cuerpo; la

Podemos actualizar el navegador para comprobar que no ha pasado nada, en

Vamos a ponerle a la página un título y lo pondremos en la cabecera de la página;

Al actualizar el navegador ya vemos un pequeño cambio; el título de nuestra página

Ahora vamos a poner un poco de contenido en el cuerpo de la página, un título de

<h3>Los enlaces, lo mas esencial</h3>

Mis primeros enlaces

Y el documento al que nos enlazamos se incluye en la primera etiqueta como valor

<a href="http://www.arquer.net/web001.html"> Enlace a la primera lección </a>

El enlace que vemos se llama absoluto porque contiene la dirección completa de la

<a href="web001.html"> Enlace a la primera lección </a>

Esta última forma de hacer enlaces tiene el inconveniente de que si cambiamos la

Para asegurarnos la accesibilidad de nuestra página cuidaremos de poner siempre

<h2 style="color:#F00;background-color:#FFF;">Los estándares</h2>

Una nota de color

Estos son los números hexadecimales: 0, 1, 2, 3, 4, 5, 6, .., A, B, C, D, E, F y luego

Si te quedan fuerzas esta es la segunda parte de este sencillo tutorial

Publicar imagenes en Internet

0.- Primer paso y fundamental, abrimos la imagen con un editor cualquiera y le

Nota: Como regla general utilizaremos el formato jpeg ó jpg (formato de

<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo">

<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo" width=400 height=300>

4.- Podemos también alinear la imagen a la izquierda para que se muestre a un

Asi que lo correcto es 'flotar' la imagen: (ejemplo a la izquierda)

<img src="ruta/imagen.jpg" alt="Esta es una imagen de ejemplo" width=400 height=300

Y para que 'flote' a la derecha ponemos "FLOAT:right"

Anda mungkin juga menyukai