Ing De Software
Enviado por judasime • 16 de Mayo de 2014 • 6.386 Palabras (26 Páginas) • 228 Visitas
En este manual aprenderás a crear páginas en Html, desde qué tipo de programas podemos usar para la creación de nuestra página web hasta como usar frames, introducir música o videos en una página web.
Ten paciencia, ya que algunas cosas no son difíciles de entender, pero requieren más esfuerzo. Si no llegaras a entender algo, trata de leerlo nuevamente. Incluye algunas imágenes (carpeta Images) y ejemplos (carpeta Samples) para que comprendas mejor. Para no confundirse, los códigos están en color verde oscuro y las etiquetas en negrita. Este manual no es copiado, lo hice yo, así que si lo ves en otro lugar avísame.
Espero que te sea útil.
1. ¿Qué programa debo usar?
Para empezar a programar con Html, se necesita un programa en el cual podamos introducir nuestro código y así, crear nuestra web. Existen varios programas (editores web) con los cuales puedes ayudarte, entre los más conocidos están DreamWeaver, Frontpage y HomeSite. Sin embargo, el mejor sigue siendo DreamWeaver por ser tan completo.
Existe también la posibilidad de usar el Bloc de Notas, el cual yo recomendaría para que te aprendes las etiquetas y no te las escribe el programa (yo aprendí con el bloc de notas), pero la decisión es tuya.
Bueno, ya sabemos que programa podemos utilizar, ahora veremos qué es exactamente el Html.
2.
3. ¿Qué es Html?
Html es el lenguaje con el que al escribir eitquetas creamos páginas web. Las páginas se visualizan por medio de un navegador (Internet Explorer, Netscape...). Con Html puedes crear tablas, colocar imágenes, reproducir audio y/o video, etc.
El Html no es el único lenguaje que existe, es simplemente el básico, ya que los demás lenguajes como Php, Asp, Javascript... también requieren de algunos códigos de Html para poder funcionar.
Debido a que hay distintos navegadores, a veces se pueden omitir o agregar códigos para que otros navegadores puedan también visualizar una página.
Tal vez te estarás preguntando ¿Qué extensión es para lo archivos HTML?, bueno pues pueden ser dos tipos .htm - .html, cualquiera de las dos extensiones nos sirven, ya será tu decisión cual poner.
Ahora, comencemos con las etiquetas de Html.
3. Estructura y etiquetas
Como dijimos, el Html es un lenguaje (de programación) que contiene etiquetas, las cuales nos permiten configurar nuestra web. Las etiquetas se escriben entre < > y (la mayoría) tienen la etiqueta de cierre < / >, que es la misma etiqueta solo que con la barra / después de <. Lo que está entre las dos etiquetas recibe el efecto.
¿Para qué una etiqueta de cierre?, bueno es para limitar nuestra etiqueta, o sea, como no queremos que todo este subrayado (por ejemplo) donde ya no queremos que sea así escribimos el cierre. La etiqueta <u> y su etiqueta de cierre, </u>, indica subrayar un texto.
Ejemplo:
<u> Texto subrayado </u> Texto Normal, el resultado es:
Texto subrayado Texto Normal
Las partes del documento:
Los documentos deben empezar con la etiqueta principal, que es <html> y terminar con su etiqueta de cierre </html>.
El encabezado, que es el título de la página se escribe entre las etiquetas <head> y </head>. El título se escribe entre las etiquetas <title> y </title> dentro de la etiqueta <head>.
Y el contenido de la página, entre <body> y </body>.
No importa si lo ponemos en mayúsculas o minúsculas, lo importante es que el cierre sea igual a como se abrió. Todo esto quedaría así:
<html>
<head> <title> Título de mi página </title> </head>
<body>
Aquí
va el contenido de mi
página
</body> </html>
4. Ya tenemos los conceptos para empezar a crear nuestra primer página. Ahora vamos a crear una página con texto en negritas y con espacio de una línea. La etiqueta <b> indica texto en negrita, y la etiqueta <p> indica salto de línea (dejar una línea de separación).
El código es este:
<html>
<head>
<title>Música</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estas en la mejor página.</p>
<p>La mejor música solo aquí.</p>
</body>
</html>
Copia y pega este código en tu editor y guárdalo con un nombre con extensión .htm - .html (pag.html, por ejemplo).
Nota: Te recomiendo no usar espacios, mayúsculas o caracteres especiales (# $ % °) en el nombre de tu archivo, para evitar problemas de lectura con el navegador.
Podrías utilizar guiones ( - ) o guiones bajos ( _ ) para reemplazar a los espacios y nombrar a tu archivo algo así: pagina_1.html
Ya tenemos una sencilla página creada con texto en negritas y con espacios. Ahora vemos en la siguiente imágen lo que hemos puesto:
Si haces click con el botón derecho del mouse y seleccionas Ver Código Fuente (o en el menú seleccionas Ver | Código Fuente) puedes ver el código (con el bloc de notas) que has escrito para esa página.
Importante: La página principal de tu sitio, osea la primer página que aparece, debemos nombrarla index seguida de un punto y el tipo d extensión (en este caso .htm o .html),
así: index.html o index.htm
5. Mi primer página
6. Estilos de párrafos
Resulta común querer hacer espacios entre párrafos. Antes vimos que la etiquieta <p> dejaba una línea en blanco y después se escribía el texto, pero esta no es la única etiqueta que puede hacer esto. Existe también la etiqueta <br> que deja una linea de espacio. Podemos repetir la etiqueta para dejar dos líneas de espacio. Ejemplo:
Texto 1<br> Texto 2<br><br>Texto3, resultado:
Texto 1
Texto 2
Texto 3
También podemos colocar una línea para separar, con la etiqueta <hr> y podemos ponerle el tamaño con la propiedad size, el ancho con width y el color con color, ejemplo:
<hr size="3" color="purple" width="75%">, resultado:
Nota: Las etiquetas <br> y <hr> son unas de las etiquetas que no tienen cierre, así que no es necesario poner la que sería etiqueta de cierre </br> o </hr>.
6. Alineación
Ya sabemos como dejar espacio, pero nos falta algo que es la alineación. Yo quiero que despúes de dejar el espacio en blanco se escriba el texto al centro, o a la derecha. Para esto tenemos dos etiquetas<p>, que además
...