You are on page 1of 7

COMO CREAR PAGINAS WEB CON HTML

Lo primero que tenemos que hacer es crear una carpeta nueva y dentro de ella un nuevo documento de texto. Dentro del documento de texto vamos a escribir la siguiente etiqueta: <html> Con esto lo que hacemos es dar la orden de que se va a trabajar dentro del lenguaje HTML. Luego lo que tenemos que hacer es darle un encabezado y un titulo para nuestra web. entonces en otra linea escribiremos <head><title>NOMBRE DE LA WEB</title></head> Entonces quedara todo completo asi: <html> <head><title>NOMBRE DE LA WEB</title></head>

<BODY>
El cuerpo de un documento HTML contiene el texto que, con la presentacin y los efectos que se decidan, se presentar ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos Y atributos que se van a mencionar durante este tutorial. En resumen, la estructura bsica de un documento HTML queda de la forma siguiente: <html> <head> <title>Ttulo</title> </head> <body> Texto del documento, menciones a grficos, enlaces, etc. </body> </html> Podemos colocar una frase como bienvenida al proceso de la creacin de webs por medio de html EJEMPLO:

<html> <head><title>MI PRIMERA PAGINA WEB</title></head> <body> HOLA MUNDO </body>

</html>

Asi lo guardamos como index.html y lo abrimos y nos saldr el mensaje puesto en el cuerpo de la pagina. El nombre (index) se puede cambiar siempre y cuando no olvidemos que es la pagina principal y que debe ir con extencion .html

TTULOS
Mediante los ttulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, Y su estructura bsica. Si queremos q los ttulos tengan un mayor tamao simplemente tenemos que colocar la etiqueta <Hn> </Hn> N= cualquier numero entero Ejemplo: <h1>tamao de letra con 1</h1> tamao de letra con 1 <h3> tamao de letra con 3</h3> tamao de letra con 3

ejemplo: <html> <head><title>MI PRIMERA PAGINA WEB</title></head> <body> <h1> HOLA MUNDO</h1> </body> </html>

Cita Textual

Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva <blockquote>: <blockquote>Muchos aos despus, frente al pelotn de fusilamiento, el coronel Aureliano Buenda haba de recordar aquella tarde remota en que su padre lo llev a conocer el hielo.<br> (Gabriel Garca Mrquez, Cien aos de soledad)</blockquote> (Este texto fue copeado del libro: Manual Prctico HTML)

para colocar un parrafo


simplemente lo hacemos con <p>

ejemplo: <p> en esta sencilla web aprendermos como disear nuestra propia pagina y adems ensayamos algunos truquitos para hacerla mucho mejor </p>

si queremos colocar en negrilla o cursiva o bien sean las dos el texto que hay en nuestro prrafo pues colocaremos las siguientes etiquetas: PARA CURSIVA: <i></i> PARA NEGRITA: <b></b> Entonces, quedara asi para solo cursiva: <p> <i>en esta sencilla web aprendermos como disear nuestra propia pagina y adems ensayamos algunos truquitos para hacerla mucho mejor </i></p> Y asi para solo negrita: <p> <b>en esta sencilla web aprendermos como disear nuestra propia pagina y adems ensayamos algunos truquitos para hacerla mucho mejor </b></p> Y para las dos: <p> <b><i>en esta sencilla web aprendermos como disear nuestra propia pagina y adems ensayamos algunos truquitos para hacerla mucho mejor </i></b></p>

PARA CENTRAR EL PARRAFO o CUALQUIER ELEMENTO:


Para centrar el prrafo solo marcamos la etiqueta <center>

Ejemplo: <html> <head><title>MI PRIMERA PAGINA WEB</title></head> <body> <center> <h1> <p> <b><i>en esta sencilla web aprendermos como disear nuestra propia pagina y adems ensayamos algunos truquitos para hacerla mucho mejor </i></b></p> </h1></center> </body> </html>

PARA INSERTAR MARQUESINA EN NUESTRA PAGINA:


para insertar la famosa marquesina es necesario ya tener un cuerpo hecho por consiguiente utilizaremos el cdigo del anterior ejemplo pero con <marquee> Ejemplo: <html> <head><title>MI PRIMERA PAGINA WEB</title></head> <body> <marquee> <h1> <p> <b><i>en esta sencilla web aprendermos como disear nuestra propia pagina y adems ensayamos algunos truquitos para hacerla mucho mejor </i></b></p> </h1></body> </marquee> </html>

* PARA DARLE COLOR A NUESTRA WEB!


Lo que tenemos que hacer es teclear el comando "body" para darle cuerpo a nuestra web, mas el atributo "bgcolor" que es para poner color de fondo a nuestra pagina. entonces la linea de codigo quedaria asi.. <body bgcolor="blue"> el color puede ser cualquiera siempre y cuando lo escribamos en ingles y siempre va dentro de las comillas. (todo el ejemplo completo)

<html> <head><title>NOMBRE DE LA WEB</title></head> <body bgcolor="blue">

* PARA COLOCAR UNA IMAGEN DE FONDO EN NUESTRA PAGINA WEB!


como ya lo dije antes tenemos que darle un cuerpo a la pagina pero esta vez cambiaremos el atributo "bg color" por el "background". entonces para colocar la imagen de fondo, la linea de codigo queda de la siguiente forma:

<body background="nombreimg.jpg"> Nota: el nombre de la imagen debe transcribirse igual en la linea de codigo con la extencion correspondiente. tambien la imagen debe estar dentro de la carpeta en la cual se esta trabajando. (ejemplo completo) <html> <head><title>NOMBRE DE LA WEB</title></head> <body background="bio-linux.jpg"> </html>

en este caso la imagen con la cual trabaje se llama bio-linux y tiene como formato la extencion .jpg

* PARA CAMBIAR EL COLOR DEL TEXTO DE LA PAGINA!


si no esta establecido antes, el color con el que salen los textos en la web son de color negro, ya que este es el color que los navegadores de internet establecen por defecto. la escritura quedaria: <body background="bio-linux.jpg" text="orange"> simplemente es colocar un nuevo atributo seguido del background o del bgcolor el atributo

text. LISTAS Las listas se definen de forma muy sencilla: se dice dnde empieza la lista, dnde empieza cada punto y dnde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de lnea, o al menos sin texto por delante (slo espacios o tabulaciones). Podemos recurrir a tres tipos distintos de listas, cada una con una presentacin diferente: no numeradas, numeradas y listas de definiciones (glosarios). Las listas se pueden anidar, es decir, en el lugar donde debera ir uno de los trminos de la lista se pone una nueva lista, que por supuesto no tiene porqu ser del mismo tipo. Esto es una lista no numerada: <ul> <li>Manzanas <li>Zapatos <li>Computadoras </ul> Manzanas Zapatos Computadoras Esto una lista numerada: <ol> <li>Diego Asencio <li>Victor Jimenez <li>Cristian Montoya </ol> Diego Asencio Victor Jimenez Cristian Montoya

Un glosario est formado por una serie de parejas de trmino (marcado con <dt> al principio de lnea) y definicin (con <dd>. Por ejemplo, podramos crear un pequeo diccionario con los trminos perro, gato y pescadilla, de la siguiente manera: <dl> <dt>Perro (<i>n. masc.</i> <dd>Animal de cuatro patas que ladra. <dt>Gato (<i>n. masc.</i> <dd>Animal de cuatro patas que malla y se lleva muy mal con el perro. <dt>Pescadilla (<i>n. fem.</i> <dd>Animal que vive en el mar y est recubierto de escamas. </dl>

Entonces quedara asi:

Perro (n. masc.) Animal de cuatro patas que ladra. Gato (n. masc.) Animal de cuatro patas que malla y se lleva muy mal con el perro. Pescadilla (n. fem.) Animal que vive en el mar y est recubierto de escamas.

ENLACES:
Con lo que ya hemos dicho, podemos abordar sin problemas el asunto que originalmente nos ocupaba: cmo se introducen enlaces en un documento HTML. Para definir un enlace es necesario marcar con la directiva <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parmetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y despus cerrar con </a>. Por ejemplo, si queremos que el texto TARINGA! nos conduzca a la home page de la NASA, debemos escribir en nuestro texto HTML: <a href="http://www.taringa.net/">TARINGA!</a>

Entonces quedara asi:

<html> <head><title>NOMBRE DE LA WEB</title></head> <body> <a href="http://www.taringa.net/">TARINGA!</a> </body> </html>

You might also like