epelpad

El post que buscas se encuentra eliminado, pero este también te puede interesar

Como crear una pagina web

En un Bloc de notas


INTRODUCCION

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas Web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>. HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores Web y otros procesadores de HTML.

Ahora bien, ¿Por qué aprender el código HTML cuando tenemos en el mercado infinidad de programas que facilitan el diseño Web? Visitemos este sitio Web y conozcamos las respuestas. Ir a:

http://www.htmlquick.com/es/articles/why-to-learn-html-code.html

Veamos ahora un video introductorio de HTML. Para lo cual ingresamos al sitio Web:

http://www.dailymotion.com/video/xa5a7p_manual-de-html-parte-1_tech

LECCIÓN 1


Sólo sigue las instrucciones. Abre el Bloc de notas e inicia con esto...

<html>
</html>

Cada página debe comenzar y terminar con la etiqueta (tag) HTML. Una etiqueta se cierra agregando /. La mayoría de las etiquetas tienen una etiqueta de terminación. Con las etiquetas se dan instrucciones a los navegadores. Lo que se acaba de decir al navegador es "este es el inicio de un documento HTML" (<html> y "este es el final del documento HTML" (</html>. Ahora necesitamos colocar información entre estas etiquetas.


--------------------------------------------------------------------------------


Todo documento HTML requiere un par de "etiquetas de encabezado"

<html>
<head>
</head>
</html>


--------------------------------------------------------------------------------


Por el momento contemplaremos la etiqueta "Título" (title) dentro de las "etiquetas de encabezado" (head)

<html>
<head>
<title></title>
</head>
</html>


--------------------------------------------------------------------------------


El resto del documento aparecerá dentro de las etiquetas "BODY"

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>


--------------------------------------------------------------------------------


Casi lo olvido, coloca un título para tu página

<html>
<head>
<title>Mi primera página</title>
</head>
<body>
</body>
</html>


--------------------------------------------------------------------------------


Ahora guarda tu página, no como un archivo txt, sino como un documento html. Guárdala como pagina1.html Si no sabes cómo hacer esto, lee lo siguiente:



1. Selecciona "Guardar como" en el bloc de notas
2. Elige el directorio en que guardarás el archivo.
3. En donde dice "Guardar como archivos de tipo" selecciona "Todos los archivos (*.*)"
4. En "Nombre de archivo" anota pagina1.html
5. Clic en "Guardar" y... listo... ¡has creado tu primera página!

Desafortunadamente, por ahora tu página no contiene nada, sólo se muestra el título de la misma en la parte superior del navegador. Así que la siguiente tarea es agregar algo en tu página.

La mejor forma de seguir las lecciones es abriendo una pestaña (ventana) adicional para que en ella visualices tu trabajo, mientras lees esta ventana y trabajas con el bloc de notas.

Para abrir una nueva pestaña (ventana) debes hacer lo siguiente:

1. Selecciona el menú "Archivo" (File)
2. Ahora "Nueva pestaña" (New Tab)
3. Si estás usando Internet Explorer y Firefox, puedes abrirla más rápido si presionas CTRL + T.

LECCIÓN 2

Para evitar escribir varias veces lo mismo, me enfocaré a la etiqueta "BODY" para incluir el contenido de la página.

<body>
</body>


--------------------------------------------------------------------------------


Anota: "Lo que más se te antoje"

<body>
Lo que más se te antoje
</body>

Cada vez que agregues algo nuevo, salva tu documento, después, da clic en el botón Actualizar del navegador (supongo que tienes abierto tu documento en la pestaña (ventana) adicional de la lección anterior).




--------------------------------------------------------------------------------


Lo primero que debes aprender es a cambiar los colores del fondo.

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

* bgcolor="#ffffff" (background="blanco" es el código del color blanco. También puedes abrir el documento anexo_coloreshexadecimales.doc para elegir el color de tu agrado.


--------------------------------------------------------------------------------


Se puede especificar una imagen para colocarla como fondo en lugar de un color sólido. Busca un archivo de imagen cualquiera de tu disco y cópialo a tu carpeta de trabajo. Luego….


<body background="background4.jpg">
Lo que más se te antoje
</body>




--------------------------------------------------------------------------------


Es obvio que la imagen se coloca en forma de mosaico para cubrir toda la página. Pero si creas una imagen larga puedes obtener un efecto similar al que se muestra a continuación...


<body background="fondo.jpg">
Lo que más se te antoje
</body>




--------------------------------------------------------------------------------


Regresemos a la pantalla blanca

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>

Coloquemos algo en Negritas

<body bgcolor="#ffffff">
Lo que más se te <strong>antoje</strong>
</body>

Lo que se dice al navegador es: en <strong> comenzar con negritas, y en </strong> detener las negritas.


--------------------------------------------------------------------------------


Lo mismo aplica para las itálicas

<body bgcolor="#ffffff">
Lo que mas <EM>se te</EM> antoje
</body>


--------------------------------------------------------------------------------


... y también para el subrayado

<body bgcolor="#ffffff">
<U>Lo que más</U> se te antoje
</body>


--------------------------------------------------------------------------------


Regresemos nuevamente a pantalla blanca sin formato en palabras...

<body bgcolor="#ffffff"> (bgcolor puedes colocarlo en mayúsculas )
Lo que mas se te antoje
</body>


--------------------------------------------------------------------------------


Se puede usar una combinación de etiquetas si se desea.

<body bgcolor="#ffffff">
Lo que más se te <i><strong> antoje</strong></i>
</body>

Este es un ejemplo de etiquetas combinadas. Si vas a usar etiquetas combinadas (lo que harás dentro de poco), entonces debes evitar confundir al navegador, las etiquetas deben ser combinadas no sobre puestas. Déjame explicarte lo que trato de decir...


<esto><aquello> </esto></aquello> Etiquetas sobre puestas... mal
<esto><aquello></aquello> </esto> Etiquetas combinadas... bien


--------------------------------------------------------------------------------


Puedes cambiar el tamaño de las letras... es muy sencillo

Primero agrega las etiquetas de fuente
<body bgcolor="#ffffff">
Lo que más se te <font>antoje</font>
</body>

Después aplica el tamaño
<body bgcolor="#ffffff">
Lo que más se te <font size=6>antoje</font>
</body>

Existen 7 tamaños de fuente

1 2 3 4 5 6 7




El valor por defecto en los navegadores (no todos) es Times New Roman 12 pt (lo cual representa el número 3 con el cógido de html) en color negro. Intenta colocar la fuente como Arial o Comic Sans...

<body bgcolor="#ffffff">
Lo que más se te <font face="arial">antoje</font>
</body>

Sin embargo, no se recomienda emplear la etiqueta FACE debido a que se requiere tener la fuente en la PC para poder visualizarla. Me explico, si tú tienes la fuente "XYZ" en tu PC y la colocas en tu página Web, la podrás ver sin problemas, pero cuando un visitante llega y no tiene la fuente, no podrá ver ese tipo de letra que colocaste y será suplantada por la fuente por defecto de su sistema.

Se puede usar una combinación de fuentes que pueden resolver este problema, tal como en <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Quiero aprender HTML</FONT>.

Para aquellos que no entienden qué ocurre aquí, tal como me pasó a mí, esto es lo que sucede ===> El navegador busca por la fuente Arial, si la encuentra la usa, si no la encuentra buscará por Helvetica... si no la encuentra entonces buscará por Lucida Sans... y si no la encuentra entonces usará la fuente por defecto.

Un tip sobre la sintaxis... habrás notado que uso mayúsculas y minúsculas en las etiquetas. Hasta este punto puedes usar lo que desees, ya sea <FONT>, <font> o <fONt>, pues representan lo mismo. Lo que no debes olvidar es colocar bien las comillas y los signos de mayor qué ">" y menor qué "<".

Personalmente te sugiero utilizar siempre los nombres de las etiquetas en minúsculas, pues los estándares establecidos por la W3C así lo exigen para validar HTML.

Se puede cambiar el color de la fuente...

<body bgcolor="#ffffff">
Lo que más se te <font color="#ff0000">antoje</font>
</body>


--------------------------------------------------------------------------------


Se puede usar más de un ATRIBUTO en una <ETIQUETA>...

<body bgcolor="#ffffff#>
Lo que más se te <font color="#ff0000" face="arial" size=7>antoje</font>
</body>


--------------------------------------------------------------------------------


Y más de una <ETIQUETA> a la misma sección...

<body bgcolor="#ffffff">
Lo que más se te <u> <em><strong><font color="#ff0000" face="arial" size=7>antoje</font> </strong></em> </u>
</body>


--------------------------------------------------------------------------------


Recuerda, nuevamente, que las etiquetas deben ser combinadas y no sobre puestas...

<ETIQUETA1><ETIQUETA2> <ETIQUETA3>@ i-Meil</ETIQUETA3> </ETIQUETA2></ETIQUETA1>... correcto

<ETIQUETA3><ETIQUETA1> <ETIQUETA2>@ i-Meil</ETIQUETA2> </ETIQUETA1></ETIQUETA3>... correcto

<ETIQUETA3><ETIQUETA2> <ETIQUETA1>@ i-Meil</ETIQUETA3> </ETIQUETA1></ETIQUETA2>... mal


--------------------------------------------------------------------------------


Los navegadores presentan una forma predeterminada para el color de la fuente, del link (vínculo), del link visitado y del link actual. Estos atributos predeterminados son...

Texto Negro
Link color Azul
Link visitado Púrpura
Link activo Rojo

Puedes modificar estos atributos predeterminados en la etiqueta <BODY>...

<body bgcolor="#000000" text="#ffff00" link="#ff0000" vlink="#800000" alink="#008000">
Lo que más se te antoje
</body>

donde vlink es Visited Link (link visitado) y alink es Active Link (Link activo o actual).

LECCIÓN 3

Ahora vas a conocer la forma en que trabaja o responde el navegador al código html que anotas. Vamos con ejemplos...

<body bgcolor="#ffffff">
Lo que más se te antoje
¡cualquier cosa!
</body>


--------------------------------------------------------------------------------


<body bgcolor="#ffffff">
Ahora...
¿qué es
lo que
ocurre
con ésto?
</body>


--------------------------------------------------------------------------------


El navegador no reconoce el formato. A menos que se lo indiques, presentará las letras y las palabras en forma normal. Si deseas comenzar con una nueva línea, debes usar la etiqueta respectiva.

<body bgcolor="#ffffff">
Ahora...<br />
¿qué es<br />
lo que<br />
ocurre<br />
con ésto?
</body>


--------------------------------------------------------------------------------


<br /> indica "comenzar una nueva línea". <p> es similar a <br />, pero da un salto de línea y ahí comienza el texto.

<body bgcolor="#ffffff">
Ahora...<p>
¿qué es<p>
lo que<p>
ocurre<p>
con ésto?
</body>


--------------------------------------------------------------------------------


<p> es una de las pocas etiquetas que no requieren la de cierre, pero para cumplir con los estándares de HTML, siempre debes cerrar una etiqueta con su par respectivo. <p> no puede emplearse para obtener varias líneas en blanco, si anotas <p><p><p> no obtendrás 3 líneas en blanco, sólo proporcionará 1. ¿Cómo obtenerlas entonces? vamos a explicarlo. Observa lo siguiente...

<body bgcolor="#ffffff">
Lo que más se te antoje
</body>


--------------------------------------------------------------------------------


El navegador sólo reconoce 1 espacio, aunque parezca tonto, pero de esta forma permite tener mayor control en la apariencia del documento.

Para dar un espacio como el de la barra espaciadora del teclado, se debe utilizar ==> &nbsp; Inténtalo....

<body bgcolor="#FFFFFF">
Lo que más&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
se te&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
antoje
</body>


--------------------------------------------------------------------------------


El signo "&" indica que se inicia un carácter especial, mientras que el signo ";" indica que ahí termina, las letras en medio son una abreviación de lo que representa. Existen seis caracteres especiales que son muy usados (siempre deben escribirse en minúsculas).

&nbsp; (espacio en blanco)
&lt; (símbolo menor qué "<"
&gt; (símbolo mayor qué ">"
&amp; (signo "&"
&quot; (comilla "
&shy; (guión )

No se deben utilizar todos al mismo tiempo, pero con un poco de práctica se sabrá cuándo deben ser utilizados. La mayoría de los programas para hacer páginas web del tipo "WYSIWYG" ("Lo que ves es lo que obtienes", que proviene del inglés "What You See Is What You Get" no requieren que les indiques código html.

Si no consigues colocarlos bien, no te preocupes, ya que "echando a perder se aprende" --eso pregúntenlo a "Fatty" (mi pc) que ha recibido alrededor de 9 formateadas de disco duro.

Regresemos a nuestro asunto... si se presiona la tecla "ENTER" (RETURN) del teclado al tiempo que se está escribiendo, el navegador lo interpretará como un espacio. Veamos un ejemplo más...

<body bgcolor="#ffffff">
Lo que más
<br />se te<br />antoje<br />
cualquier<br />cosa!
</body>


--------------------------------------------------------------------------------


Ahora anota lo siguiente...

<body bgcolor="#ffffff">
<center>Lo que más se te antoje</center>
</body>


--------------------------------------------------------------------------------


Todo lo que se encuentre dentro de las etiquetas <CENTER> estará centrado en la pantalla. Esta etiqueta ha sido "descontinuada", cuando llegues al nivel de CSS (Cascading Style Sheets) sabrás de qué te hablo... por el momento sigamos adelante.


--------------------------------------------------------------------------------


¡Hey! casi olvido algo... para obtener varias líneas en blanco se debe crear un espacio en blanco "&nbsp;" y después colocar el corte de línea "<BR>"...

<body bgcolor="#ffffff">
Lo que más se te<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
&nbsp;<br />
antoje
</body>


--------------------------------------------------------------------------------


Ahora vamos con la inclusión de imágenes en la página. Usaremos la siguiente (vieja página inicio de mi sitio web). Si quieres guardarla hazlo como anteriormente... clic con el botón derecho y "Save Image As..." ("Guardar imagen como..."



Se especifica una imagen con la etiqueta <IMG> (imagen).

<body bgcolor="#ffffff">
<img>
</body>


--------------------------------------------------------------------------------


Ahora se coloca la ruta y tamaño de la imagen.

<body bgcolor="#ffffff">
<imr src="lecci3a.jpg" width="150" height="110">
</body>


--------------------------------------------------------------------------------


Ten presente que la ruta no especifica únicamente la imagen, sino también dónde se ubica. La ruta de arriba, "lecci3a.jpg", indica que el navegador buscará la imagen llamada "lecci3a.jpg" en la misma carpeta (o directorio) en que se encuentra el archivo html.

Otra forma de especificar la ruta es anotando el URL completo. Por ejemplo: src="http://www.imeil.com.mx/imagenes/imeil.gif"

Supongo que te has de estar preguntando la ventaja de usar URL's relativos (parciales) contra los URL's absolutos (completos). La respuesta es sencilla... porque tus links funcionarán en cualquier servidor o computadora que los coloques, las páginas cargarán más rápido y te evitarás el tener que editar para modificar todos los URL's o links de las páginas.


--------------------------------------------------------------------------------


Algo muy importante que debes conocer de las imágenes y su tamaño. Intenta esto...

<body bgcolor="#ffffff">
<img src="lecci3a.jpg">
</body>




--------------------------------------------------------------------------------


Como puedes notar, el navegador establece el tamaño de la imagen en forma automática. ¿Por qué preocuparse entonces por las dimensiones? Sin caer en detalles... porque ayuda al navegador a cargar las imágenes en forma más rápida.

¿Cuál es la parte importante? Checa...

<body bgcolor="#ffffff">
<img src="lecci3a.jpg" widht="200" height="68">
</body>



<body bgcolor="#ffffff">
<img src="lecci3a.jpg" width="20" height="100">
</body>

------------------------------------------------------------------------------------------

Fin Del Post

20 comentarios - Como crear una pagina web

Windowsman
Hacete un blog y listo, blogspot.
everwalter
ps yo puedo un poko de html y me recordastes algunas cosas q se me avian olvidado (aunque ya hise mi examen que era crear una pag. web) te dejo +10

haste otro tuto de como usar dreamweaver
CesaRene
quiero una pagina web ya la are
nearkun
bueno che.. ya que estamos, te dejo +10, ya voy a probar q tal me sale
texerita
+10 tu amigo texerita te los da
Luwamm666
GRACIASSSSS¡¡¡¡¡¡¡¡¡¡nO TENGO PUNTOS PARA DEJARTE, PERO TE DEJO MI AGRADECIMIENTO Y MI ADMIRACION¡¡¡¡¡¡¡¡¡
dxxd10 +1
www.NUEVO-TARINGA.TK
Juan1831
Maestro soy amigo de maury_95, el bldo no sabia pero yo ya te habia dejado +10!... bueno vele el lado positivo ya son 40 puntos! estas mas cerca!
esteb89
+10 Ahora sos NFU
gnom3
Wordpress RoOlz

Como crear una pagina web
Gabykem +1
MIRA FLACO ESTUDIO TECNICO EN INFORMATICA Y ESTE AÑO TERMINO Y PARA ESO TENGO QUE CREAR UNA PAGINA WEB Y QUIERO HACERLA EN HTML... NO SE NADA DE HTML... Y LA VERDAD QUE TU POST ES LO MEJOR QUE ME PASO EN LA VIDA TE DEJO UN +10 Y SE LOS VOY A RECOMENDAR A TODOS LOS PIBES DE LA CARRERA Y SI PUDIERA TE PEGO UNA BUENA CHUPADA DE PIJA PERO GRACIAS A DIOS NO TE CONOSCO
2310prostar -1
todavia no aprendi a poner puntos, cuando aprenda van +10
Meg58
Windowsman dijo:Hacete un blog y listo, blogspot.

pero no podes editarlo desde 0 a gusto osea ahcerlo desde pagina en balnca a tu gusto, es mejor con dreamweaver o como dice aqui en HTML con le bloc de notas