Aprende a crear una pagina web sin salir del post

hola amigos hoy os voy a enseñar como hacer una pagina web muy facil y simple lo que vamos a necesitar es
1 ganas para aprender
2 entender que es lo que estas haciendo : )
3 el blog de notas de windows
4 internet explorer
si ya tienes todo esto empezamos
primero que es el codigo HTML
ya se que no te gusta leer pero es poco

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.

como usar el codigo HTML.?
Aprende a crear una pagina web sin salir del post
Tags Básicos
<html></html>
Crea un documento HTML
<head></head>
Stea el título y otra información que no se visualizará en la página web
<body></body>
Setea la parte visible de la página



Header Tags
<title></title>
Pone el nombre del documento en la barra del título


Atributos del Body
<body bgcolor=?>
Setea el color de fondo, usando nombres o valores hex
<body text=?>
Setea el color del texto, usando nombres o valores hex
<body link=?>
Setea el color de los enlaces, usando nombres o valores hex
<body vlink=?>
Setea el color de los enlaces visitados, usando nombres o valores hex
<body alink=?>
Setea el color de los enlaces al ser presionados, usando nombres o valores hex


Tags de texto
<pre></pre>
Crea texto preformateado
<hl></hl>
Crea un título grande
<h6></h6>
Crea un título pequeño
<b></b>
Crea texto en negritas
<i></i>
Crea texto en itálicas
<tt></tt>
Crea texto teletipo
<cite></cite>
Crea una cita, usando itálicas
<em></em>
Enfatiza una palabra
<strong></strong>
Enfatiza una palabra (con itálicas or negritas)
<font size=?></font>
Setea el cuerpo de la fuente de 1 a 7
<font color=?></font>
Setea el color de la fuente, usando nombres o valores hex


Enlaces
<a href="URL"></a>
Crea un hipervínculo
<a href="mailto:EMAIL"></a>
Crea un enlace de email
<a name="NAME"></a>
Crea un enlace dentro del documento
<a href="#NAME"></a>
Vincula a ese target dentro del documento


Formatting
<p></p>
Crea un párrafo nuevo
<p align=?>
Alinea un párrafa (izquierda, centro, derecha)
<br>
Inserta un salto de línea
<blockquote>
</blockquote>
Justifica el texto a ambos lados
<dl></dl>
Crea un lista de definición
<dt>
Precede cada término de definición
<dd>
Precede cada definición
<ol></ol>
Crea un lista numerada
<li></li>
Precede cada ítem de una lista y le agrega un número
<ul></ul>
Crea una lista con puntos
<div align=?>
Un tag genérico utilizado para formatear grandes bloques de HTML, también usado para stylesheets


Elementos Gráficos
<img src="name">
Agrega una imagen
<img src="name" align=?>
Alinea una imagen an image
<img src="name" border=?>
Setea el grosor del borde de la imagen
<hr>
Inserta una linea horizontal
<hr size=?>
Setea la altura de una linea
<hr width=?>
Setea el ancho de la linea, en porcentaje o números absolutos
<hr noshade>
Inserta una linea horizontal sin sombra


Tablas
<table></table>
Crea una tabla
<tr></tr>
Setea cada row de la tabla
<td></td>
Setea cada celda de la tabla
<th></th>
Setea el header de la tabla (una celda normal, con texto centrado y resaltado)



Atributos de las Tablas
<table border=#>
Setea el grosor del borde de la tabla
<table cellspacing=#>
Setea la cantidad de espacio entre las celdas
<table cellpadding=#>
Setea la cantidad de espacio entre el borde de las celdas y su contenido
<table width=# or %>
Setea el ancho de la tabla - en pixel o en porcentaje de acuerdo al ancho del documento
<tr align=?> or <td align=?>
Setea la alineación delas celdas (izquierda, centro, derecha)
<tr valign=?> or <td valign=?>
Setea la alineación vertical de las celdas (arriba, nedio, abajo)
<td colspan=#>
Setea la cantidad de columnas dentro de una celda
<td rowspan=#>
Setea la cantidad de rows que una celda despliega (por defecto=1)
<td nowrap>
Previene que se rompa una linea dentro de la celda




Frames
<frameset></frameset>
tag dentro de un documento de frames
<frameset rows="value,value">
Define las filas de un frame, usando números o porcentaje para definir el largo
<frameset cols="value,value">
Define las columnas de un frame, usando números o porcentaje para definir el largo
<frame>
Define un solo frame - o región - dentro de frameset
<noframes></noframes>
Define lo que aparecerá en navegadores que no soporten frames



Atributos de los Frames
<frame src="URL">
Especifica que documento html será desplegado
<frame name="name">
Nombra al frame or región, para que pueda ser llamado desde otro frame
<frame marginwidth=#>
Define los márgenes derecho e izquierdo del frame; debe ser igual o mayor a 1
<frame marginheight=#>
Define los márgenes de arriba y abajo del frame; debe ser igual o mayor a 1
<frame scrolling=VALUE>
Setea si el frame tendrá barra de desplazamiento o no; el valor debe ser "yes," "no," o "auto. " El default es "auto".
<frame noresize>
Previeve al usuario de cambiar el tamaño del frame


Formularios
Para forms funcionales, deberá correr un script de CGI. El HTML sólo crea la apariencia del formulario.
<form></form>
Crea el formulario
<select multiple name="NAME" size=?></select>
Crea un menú de desplazamiento. Size setea el número de ítems visibles antes de tener que desplazarse.
<option>
Setea cada ítem del menú
<select name="NAME"></select>
Crea un menú desplegable
<textarea name="NAME" cols=40 rows=8></textarea>
Crea una área de texto.
<input type="checkbox" name="NAME">
Crea una checkbox.
<input type="radio" name="NAME" value="x">
Crea un radio button.
<input type=text name="foo" size=20>
Crea un área de texto de una sola línea. Size setea el largo en caracteres.
<input type="submit" value="NAME">
Crea un botón de envio.
<input type="image" border=0 name="NAME" src="name.gif">
Crea un botón de envio utilizando una imagen.


espero que lo hayas leido todo y que lo hayas entendido
aprende
ahora un poco de cigo css

INDICE DEL MANUAL DE CSS
Introducción a CSS - Introducción a las hojas de estilo con CSS.

El Tag LINK - Esta etiqueta nos permitirá aplicar hojas de estilo a una página web.

El Tag STYLE y la directiva @import - Más formas de aplicar estilos CSS a una página web.

Comentarios CSS y Reglas Básicas - Como incluir comentarios de texto en el código CSS y empezando a ver las reglas básicas de CSS para realizar los primeros estilos.

Agrupación de Selectores y Declaraciones - Con estos métodos el código CSS será mucho más legible y ocupará menos.

El Atributo Class y el Atributo ID - Estos atributos permiten aplicar estilos específicos a las etiquetas que queramos.

Pseudo-clases y Pseudo-elementos - Este tipo de elementos nos permitirán aplicar estilos de forma especial, por ejemplo al pasar el ratón por encima.

Estructura y Herencia - Con CSS es posible aplicar estilos a elementos que están detro de otros.

Especificidad y Estilos en Cascada - CSS da más importancia a unos selectores que a otros y además, permite aplicar estilos en cascada.

Clasificación de los elementos y Colores - Tipos de elementos HTML, según la forma en que se muestran y los colores, como se representan en CSS.

Unidades - Las unidades permiten especificar el tamaño o la posición de un elemento.

Indentación - De esta forma podemos conseguir una sangría en el texto.

Alineación - Alineando elementos con CSS.

Espacios en Blanco - CSS permite formatear los espacios, ideal para mostrar código en una página web.

Anchura de Líneas - Permite configurar la distancia entre líneas.

Alineación Vertical - Alineción vertical de elementos.

Espacio entre Palabras y entre Letras - Con CSS es posible definir el espacio entre letras y palabras.

Transformación del Texto - Sencillas transformación al texto, como por ejemplo, pasarlo a mayúsculas.

Decoración del Texto - Elementos del texto como subrayado, tachado, parpadeo, etc.

web
no te desesperes ya con esto estamos listos para hacer una pagina web

empezamos

crear


primero te acuerdas de algo de lo que leiste

salir

una

bueno primero vamos a espezar haciendo una carpeta que se llame
web
dentro de la carpeta web creamos otra que se llame objetos hay se va a poner las imagenes que va a llevar la pagina web

abrimos el blog de notas escribimos esto

<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
aprende codigo HTML</h1></center><br>
<hr width=50%><br>
<h2>Informaci&oacute;n General</h2>
aqui aprenderas hacer una pagina web es muy sencilla <b><i><font color="#000080">HTML</font></i></b>.<br><br>
<center></center>
<br>
aqui pon lo que quieres
<b><i><font color="red"></font></i></b>.<br><br>
se un web master profesional<br>
</body>
</html>


luego vamos a guardar como y ponemos lo qeu queramos pero la ultimo .hml
ej
miweb.html

te preguntaras para que te puse el codigo css es para poder dar estilo a nuestra pagina web
sin

bueno te dejo que descanses un poco yo hago todo el trabajo por ti

pagina

escribe o copia este codigo en tu blog de notas


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/index_01.jpg" width="796"
height="80" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="navegacion">
<ul>
<li><a href="#">IMAGENES</a></li>
<li><a href="#">MUSICA</a></li>
<li><a href="#">TUTORIAlES</a></li>
</ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
<div id="contenido">
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><A HREF="http://www.taringa.net/posts/humor/9648578/Cyadine-Eamp_-Happiness.html">Cyadine & Happiness</A></li><li><A HREF="http://www.taringa.net/posts/downloads/9640438/Cuida-tu-pc-con-estos-programas.html">Cuida tu pc</a></li><li>
<A HREF="http://www.taringa.net/posts/downloads/9589808/Kaspersky-2011-por-3700-dias.html">Kaspersky 2011</a></li><li><A HREF="http://www.taringa.net/posts/linux/8698854/Tienes-linux-seguro-que-entras.html">Tienes linux</a></li></ul>
</div>
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo.
Cuando terminás de levantarte y vienen a preguntarte:
- Te despertaste?
- NO. SOY SONÁMBULO!</p>
<h2>Y este es el tercer párrafo.</h2>
<p>Tu amigo te llama a tu casa y pregunta:
- Donde estás?
- EN EL POLO NORTE! UN TORNADO ME LLEVÓ LA CASA PARA ALLÁ!</p>
<p>ya esta completa la pagine web</p>
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie">
<div id="pieuno">
<ul>

<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
<!-- FIN CODIGO PIE DE PAGINA -->
<div id="curva-inferior"></div>
</div>
</body>
</html>
</html>


guarda esto en la carpeta con el nombre web
luego abre un nuevo blog de notas y escribe esto

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: geen ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 30px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 1px 10px 0px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid ;
border-top: black 1px solid ;
height: 65px ;}
#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ; font-size: 12px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:488px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
a.enlaceuno {}
a.enlaceuno:link {}
a.enlaceuno:visited {}
a.enlaceuno:hover {}
a.enlaceuno:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

<style type="text/css">
*{-moz-box-sizing: border-box;box-sizing: border-box}
p{margin-top:0px;margin-bottom:1em}
form{margin:0px}
input{padding:1px}
</style>








guardalo como
estilo.css
en la misma carpeta
si cambias el nombre se te va a dañar todo

luego guarda estas imagenes en objetos

Post
guardalo con el nombre curva-inferior

a
gurdalo como curva-superior

del
guardalo como index_01


Aprende a crear una pagina web sin salir del post
guardalo como menu-parte-inferior

aprende
guardalo como menu-parte-superior

ahora te toca a ti solo modifica las cosas que estan a dentro y ya tienes tu propia pagina web
web
espero vuestros comentarios ya que esto me costo mucho tiempo spero que lo sepas agradecer mi trabajo
hasta la proxima

29 comentarios - Aprende a crear una pagina web sin salir del post

@esteban22x +1
PHP y JSP con el corazon de la Web 2.0 , el HTML es solo un derivado
@derone +2
e mostrame el tuyo primero asi veo como queda
@Stormbird
SI ESTO REALMENTE FUNCIONARA SERIA UN GRAN POST....
@Italimante
Podrías mejorar el post con más diseño asi se valora mejor el contenido!
@anthigh
Mira mis post de crear una pagina web y el llamado &quot;portes web&quot; y compara
@FinnishRock
buyeno tu post, ademas de recomendarlo, va a favoritos!!!
@programador3 +2
sabés algo de todo esto o solamente lo encontraste y lo compartiste?
@MURETO
soy programador y es un buen post bro
@RNR92
Ban mis 10!!
@RNR92
Recomendado!!
@hackxcracks +1
rambocounter dijo:no lei un CARAJOOO

entonces callate y anda a mamarle la verga a la puta q te pario

buen post +10