tutorial para crear una pagina web en html 4.0

 Bienvenidos a mi nuevo post. Ahora vengo a traerles un tutorial de como crear una pagina web usando html 4.0.

Comenzaremos habriendo el bloc de notas.
Como ya sabemos toda pagina web en html comienza y termina con las etiquetas <html>  </html>

Asi que el codigo de nuestra primera pagina sera.

<html>
hola gente

</html>


Ya sabemos que para que el navegador lo abra como pagina debemos guardarlo con el nombre terminado en .html, ejemplo:uno.html

como se puede ver abajo genera la siguiente pagina



pantalla completa http://i.minus.com/ibtC1IMJG44PVJ.jpg

Bien ahora vamos a agregar dos etiquetas mas que son <head> con su etiqueta de cierre </head> y <body> con su etiqueta de cierre </body>

La estructura general de una pagina tiene la siguiente forma

<html>
<head>
codigo
</head>
<body>
codigo y contenido que mostrara la pagina
</body>
</html>

Entre las etiquetas <head> y </head> podemos poner informacion que no se vera en la pagina y el titulo de la pagina. Y entre las etiquetas <body> y </body> pondremos el contenido que mostrara nuestra pagina.

Y algo mas habia dicho que entre las etiquetas <head> y </head> se podia poner el titulo de la pagina, este titulo debe ir entre estas etiquetas <title> y </title>

Ejemplo sea nuestro nuevo codigo.

<html>
<head> <title> primera pagina </title> </head>
<body>
Hola gente bienvenida a la pagina oficial de prueba
</body>
</html>

genera la siguiente pagina cuya unica diferencia con la anterior es el titulo que aparece en la pestaña.



pantalla completa http://i.minus.com/iiIUfKKLpc1tg.jpg


Encabezados, en html tenemos seis tamaños de letras para distinguir titulos y subtilos del texto que pondremos. etc Las etiquetas para cambiar el tamaño de los titulos o de las oraciones son seis, <h1>,<h2>,<h3>,<h4>,<h5> y <h6> cada una con sus respectivas etiquetas de cierre. Siendo el tamaño mas grande el <h1> y decreciendo hasta <h6>

Otra cosa mas como vimos en los ejemplos anteriores cuando ponemos un texto la pagina lo alinea por defecto a la izquierda. Pero si escribimos dicho texto entre las etiquetas <center> y </center> la oraciones quedaran en el centro o medio.

Veamos el siguiente codigo

<html>
<head> <title> primera pagina </title> </head>
<body>
<center>
Hola gente bienvenida a la pagina oficial de prueba
<h1>encabezado 1</h1>
<h2>encabezado 2</h2>
<h3>encabezado 3</h3>
<h4>encabezado 4</h4>
<h5>encabezado 5</h5>
<h6>encabezado 6</h6>
</center>
</body>
</html>

se vera la siguiente pagina




pantalla completa http://i.minus.com/ibvtVDya4uhVnN.jpg

Ahora veamos como escribimos un texto compuesto de varios parrafos, para ello usaremos las etiquetas <p> y < br >

Para crear un parrafo su contenido debe ir entre <p> y </p> y para poner un punto aparte en una oracion y poder pasar a la linea o renglon de abajo se debe introducir la etiqueta [br /]. Si no introducimos la etiqueta [br /] el navegador escribiria todas las oraciones seguidas hasta abarcar el ancho total de la pagina y recien seguiria abajo.

Esta etiqueta <p> tiene varios atributos entre los que mencionare "align" que tiene tres valores,center,right,left.Y se usan de la siguiente manera
Por ejemplo:

<p align=center>
texto que pondremos
</p>

En el codigo de abajo usaremos ese atributo y le daremos los tres valores para ver como cambia la posicion de los parrafos.

<html>

<head> <title> primera pagina </title> </head>
<body>
<center>
Hola gente bienvenida a la pagina oficial de prueba
<h1>encabezado 1</h1>
<h2>encabezado 2</h2>
<h3>encabezado 3</h3>
<h4>encabezado 4</h4>
<h5>encabezado 5</h5>
<h6>encabezado 6</h6>
</center>
<p align=left>
Este es un parrafo de varias lineas [br /]
Esta es la segunda linea del parrafo[br /]
y esta es la tercera linea
</p>
<p align=center>
este parrafo de varias lineas tambien,[br /]
esta en el centro[br /]
o el medio de la pagina
</p>
<p align=right>
Este otro parrafo aparecerá en la derecha de la pagina[br /]
y juntos mostraran la forma en que cambia[br /]
la posición del párrafo el atributo align
</p>
</body>
</html>


Abajo se ve la pagina



pantalla completa http://i.minus.com/iO6mGIlMBcXpE.jpg

Veremos algunas etiquetas para cambiar la forma de los textos.

y pone en negritas las palabras entre ellas
y pone en cursivas las palabras entre ellas
<strike> y </strike> pone palabras tachadas
<big> y </big> aumenta el tamaño de las palabras entre ellas respecto del tamaño de las palabra anteriores a las etiquetas.
<small> y </small> disminuye el tamaño de las palabras entre ellas respecto del tamaño de las palabras anteriores a la etiqueta.
<sub> y </sub> pone subindices
<sup> y </sup> pone superindices
y subralla las palabras entre estas etiquetas

Por ultimo veremos la etiqueta <font>, que con su atributo "size" sirve para modificarle el tamaño del texto.

Su uso es asi, el numero asignado a size puede variar del 1 al 7

<font size=5>
texto
</font>

Sea el codigo

<html>
<head> <title> primera pagina </title> </head>
<body>
<center>
Hola gente bienvenida a la pagina oficial de prueba
<h1>encabezado 1</h1>
<h2>encabezado 2</h2>
<h3>encabezado 3</h3>
<h4>encabezado 4</h4>
<h5>encabezado 5</h5>
<h6>encabezado 6</h6>
</center>
<p align=left>
Este es un parrafo de varias lineas [br /]
Esta es la segunda linea del parrafo[br /]
y esta es la tercera linea
</p>
<p align=center>
este parrafo de varias lineas tambien,[br /]
esta en el centro[br /]
o el medio de la pagina
</p>
<p align=right>
Este otro parrafo aparecerá en la derecha de la pagina[br /]
y juntos mostraran la forma en que cambia[br /]
la posición del párrafo el atributo align
</p>  
esta oracion aparecera en negritas[br /]
esta otra aparecera en cursiva[br /]
<strike>estas palabras apareceran tachadas</strike>[br /]
por aqui hay una palabra mas <big>grande</big>
y por aca hay una palabra mas <small>pequeña</small>[br /]
esta oracion aparecera subrayada [br /]
[br /]
<font size=5>
Y se termina todo por hoy espero les haya gustado[br /]
nos vemos hasta la proxima[br /]
seguro para algo les sirvio este tutorial[br /]
</font>
</body>
</html>

En este ejemplo veremos como queda la pagina aplicando esas etiquetas



pantalla completa http://i.minus.com/id9MphTyzRuer.jpg

Espero que les haya servido este minitutorial.
tutorial para crear una pagina web en html 4.0
5 Puntos Score: 5/10
Visitas: 2078 Favoritos: 6
Ver los usuarios que votaron...
10 Comentarios tutorial para crear una pagina web en html 4.0
gracias le echare un vistazo mas rato (Y) me sera muy util
muy bueno, loco, segui adelante. un aporte, es "abre", o "abrir", sin "h". saludos.
muy bueno tuto para los novatos
@danni_89
@pablogener
@luis2013
gracias por comentar y me alegro que les haya gustado , en este momento estoy haciendo la segunda parte que estara mucho mejor,jeje
bn amigo quiero saver en un tercer tutorial como agregar el fondo los bordes y imagenes

asi va  el m io hasta el momento jejejeje

<!DOCTYPE html>
<html lang="es">
<head><title>Brayam y Lina</title> </head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
<style>  
body{background:#b7e5ff; pink
font-size:20px;
color:black;
padding:20px;
border:6px solid white;}
h1{color:violet;}
</style>  
</head>

<body>
<center>
<h1>VALERY</h1>
<p align=center>
<h6>ALG?
@brayamg2
hola amigo me alegro que te haya servido hace mcho que no escribo nada , pero ya vere de hacer algun tutorial nuevo.
debiste poner tutorial de algunos c?
@Dstoyevski
jajaja muy bien dicho, disculpa si no fue lo que esperabas, eso fue hace mucho tiempo y como lo dices es mucho mas, ahora estoy haciendo un proyecto personal con html y php5 y ya voy haciendo como 1200 lineas de codigo en una sola pagina qeu compone dicho proyecto.
Amigo  patrosalta espero un tutorial de lo que estas estudiando me cervira estoy tomando un curso de idiomas de programacion jejejeje me ayudarias en eso.

hojala lo completes con lo que dice Dstoyevski
@brayamg2
Bueno amigo ya hare un tutorial mas completo con hojas de estilo css3 y html 4.01.
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!