Cómo crear una página web MUY básica

Lau · Mensajepor **Lau** » Mié Feb 29, 2012 2:31 pm

Hola, en este tutorial os enseñaré a hacer una página sencilla como esta:
http://i43.tinypic.com/2jcsm6x.png

Primero, abrimos el bloc de notas:
http://i40.tinypic.com/3495cav.png

Y ponemos lo siguiente:

Código: Seleccionar todo

<title>Título de mi página web</title>

Cuando tengamos puesto el título, ponemos:

Código: Seleccionar todo

<link href="http://URL DE TU FAVICON" rel="shortcut icon" />

Con esto, nuestra web tendrá un icono distintivo, que ayudará a que sea fácil encontrar la web en los favoritos.

QUE ES EL FAVICON?
Es el icono con el que se puede diferenciar a una web de otra en la carpeta de "Favoritos" en tu navegador web. Ejemplo:
Imagen

Cuando ya tengamos todo eso, ponemos:
<div align="center"><img src="URL DE TU IMAGEN"></img>

Así centraremos el texto, y podremos poner una foto.

Justo después, se pone:
<h2>Mi título</h2>

Para los links:
<li><a href="LINK">título del link</a><br>

Y el disclaimer:
<hr><sub>Mi sitio web es © 1999 - 2012 Nintendo.</sub>

Así queda el código completo:

Código: Seleccionar todo

<title>god is dead an no one cares</title>
<link href="http://pipecity.webs.com/F149.png" rel="shortcut icon" />
<div align="center"><img src="http://i223.photobucket.com/albums/dd302/squirtle_fan/0005x60f-1.jpg"></img><h2>Hello. Welcome to my litte space on the net.</h2></div><li><a href="/index2.html">pipecity :: index [old index page]<li><A href="/bw2/">pokémon bw website</A><br><li><a href="http://last.fm/user/KamonegiRed">me @ last.fm</a><br><li><a href="http://rockworshipper.livejournal.com">me @ livejournal</a><hr><div align="center"><sub>last update: feb. 29, 2012<br>this website is &copy 2008 - 2012 Lau Sempai of Pandemonium<br>i don't own ville valo (i wish)/pokemon/most of the things listed here.

Así se crea una página bien sencilla :D.

Aagie KLZ · Mensajepor **Aagie KLZ** » Vie Mar 02, 2012 9:22 am

Hay miles de cosas mas, eso es solo el encabezado de la pagina mas sencilla x)
Pero bueno, ya es cosa de investigar, cosa que yo mismo estoy haciendo :p
Thanx por el aporte ;)

Lau · Mensajepor **Lau** » Vie Mar 02, 2012 4:07 pm

De nada, este tutorial se supone que es para los que no tienen ni idea xD.

Ðrake · Mensajepor **Ðrake** » Sab Mar 03, 2012 10:32 am

Buen tutorial, podrías añadir también que por medio del programa Dreamweaver se pueden crear páginas sencillas.

Esperare tu tutorial sobre como personalizar el escritorio :S

Darkprotoman=^-^= · Sab Mar 03, 2012 12:00 pm

-Greed- escribió:Buen tutorial, podrías añadir también que por medio del programa Dreamweaver se pueden crear páginas sencillas.

Esperare tu tutorial sobre como personalizar el escritorio :S

Dreamweaver es más para uso avanzado de Html, CSS, y Javascript, además de que va más a programación orientada a objetos.

Mis respetos para quien pueda hacer una página como pokémon-stats sin necesidad de Dreamweaver debió haberle tomado una semana el poder hacer el puro script de la página principal.

Ðrake · Mensajepor **Ðrake** » Sab Mar 03, 2012 12:07 pm

Darkprotoman=^-^= escribió:
-Greed- escribió:Buen tutorial, podrías añadir también que por medio del programa Dreamweaver se pueden crear páginas sencillas.

Esperare tu tutorial sobre como personalizar el escritorio :S

Dreamweaver es más para uso avanzado de Html, CSS, y Javascript, además de que va más a programación orientada a objetos.

Mis respetos para quien pueda hacer una página como pokémon-stats sin necesidad de Dreamweaver debió haberle tomado una semana el poder hacer el puro script de la página principal.

Lo se proto, pero aun así, el Dreamweaver también puede hacer páginas de HTML basico...

Y sí, si Math hizo esta web en general sin DreamWeaver... es un pro :S

FireX · Mensajepor **FireX** » Sab Mar 03, 2012 4:03 pm

Hay muchísimas etiquetas para hacer una página así, el problema es conocer todas las necesarias, acá hay una pequeña lista con algunas etiquetas:
http://crismattweb.tripod.com/guiahtml/etiqueta.html

Ya revisé y no aparecen todas, para encontrar muchas es cuestión de ponerse a buscar.

Sakara · Mensajepor **Sakara** » Mar Mar 06, 2012 1:23 pm

Has cometido infinidad de errores allí, muchos de los cuales me provocaron sangrado ocular. Por favor, al menos infórmate y lee un poco sobre lo más BÁSICO del HTML porque parece que ni idea de eso tienes. Si vas a enseñar hazlo con las bases correctas y no con... esto.
Te olvidaste tanto de las etiquetas HTML como las de HEAD y BODY. Para los links no hace falta poner una etiqueta LI (que son la de listas, las cuales llevan un cierre que no colocaste, y deben incluirse dentro de UL u OL, cosa que no hiciste), ni tampoco la etiqueta BR atrás.
La etiqueta IMG no se cierra así, sino que lleva cierre implícito, o si lo pones en el HTML más antiguo, no lleva cierre directamente.
Además se te olvidó decir que hay que guardar la página en formato .html para que pueda ser abierta y reconocida como tal.
No tengo ganas de ponerme a corregir todos tus errores, así que me voy ya. Mi planeta me necesita. Gracias por nada, te recomiendo simplemente que sigas poniendo posts alabándome en tu blog.

Darkprotoman=^-^= · Mar Mar 06, 2012 7:50 pm

Sakara escribió:Has cometido infinidad de errores allí, muchos de los cuales me provocaron sangrado ocular. Por favor, al menos infórmate y lee un poco sobre lo más BÁSICO del HTML porque parece que ni idea de eso tienes. Si vas a enseñar hazlo con las bases correctas y no con... esto.
Te olvidaste tanto de las etiquetas HTML como las de HEAD y BODY. Para los links no hace falta poner una etiqueta LI (que son la de listas, las cuales llevan un cierre que no colocaste, y deben incluirse dentro de UL u OL, cosa que no hiciste), ni tampoco la etiqueta BR atrás.
La etiqueta IMG no se cierra así, sino que lleva cierre implícito, o si lo pones en el HTML más antiguo, no lleva cierre directamente.
Además se te olvidó decir que hay que guardar la página en formato .html para que pueda ser abierta y reconocida como tal.
No tengo ganas de ponerme a corregir todos tus errores, así que me voy ya. Mi planeta me necesita. Gracias por nada, te recomiendo simplemente que sigas poniendo posts alabándome en tu blog.

:O Sakara es pro en HTML

Bueno dejo mi "página" no tenía nada que hacer en clase de programación dado a que ya nos estancamos por culpa de los amigos que van atrasados ._. así que con un poco de PS, 20 minutos de clase, con muy poco ingenio y con muy pocas ganas....

http://img710.imageshack.us/img710/8374/webo.png

Código: Seleccionar todo

<HTML>
<HEAD><title>Bienvenido a Darkprotoman mi página web</title></HEAD>
<body bgcolor="black">
<center><img src="http://img443.imageshack.us/img443/2889/banner1234f.jpg"></center>
<center><img src="http://img21.imageshack.us/img21/3441/iniciomq.jpg"><img src="http://img191.imageshack.us/img191/703/animeqr.jpg"><img src="http://img860.imageshack.us/img860/7563/mangau.jpg"><img src="http://img577.imageshack.us/img577/4836/programasv.jpg"><a href="http://darkprotoman.orgfree.com/Chat.html"><img src="http://img824.imageshack.us/img824/7284/chatna.jpg"></a><img src="http://img46.imageshack.us/img46/491/forop.jpg"></center>
<p><br>
<p><br>
<p><br>
<p><br>
<p><br>
<p><br>
<p><br>
<p><br>
<p><br>
<p><br>
</body>
</HTML>

FireX · Mensajepor **FireX** » Mar Mar 06, 2012 8:39 pm

Por si les interesa pueden ver el código fuente da la pagina que quieran fácilmente dependiendo del navegador que tengan, en firefox por ejemplo es en herramientas, desarrollador web y código fuente de la página, ahí se dan cuenta del grosor que tiene determinada página.

En chrome es herramientas y ver código fuente.

:O Sakara es pro en HTML

Bueno dejo mi "página" no tenía nada que hacer en clase de programación dado a que ya nos estancamos por culpa de los amigos que van atrasados ._. así que con un poco de PS, 20 minutos de clase, con muy poco ingenio y con muy pocas ganas....

http://img710.imageshack.us/img710/8374/webo.png

Que no se note la pestaña que dice "Hentai .....". lol

Darkprotoman=^-^= · Mar Mar 06, 2012 9:03 pm

FireX escribió:Por si les interesa pueden ver el código fuente da la pagina que quieran fácilmente dependiendo del navegador que tengan, en firefox por ejemplo es en herramientas, desarrollador web y código fuente de la página, ahí se dan cuenta del grosor que tiene determinada página.

En chrome es herramientas y ver código fuente.

:O Sakara es pro en HTML

Bueno dejo mi "página" no tenía nada que hacer en clase de programación dado a que ya nos estancamos por culpa de los amigos que van atrasados ._. así que con un poco de PS, 20 minutos de clase, con muy poco ingenio y con muy pocas ganas....

http://img710.imageshack.us/img710/8374/webo.png

Que no se note la pestaña que dice "Hentai .....". lol

Bueno con respecto con lo primero, ese código te sirve para saber ciertas cosas que tal vez no tengas ni idea de cómo hacerlo, pero no es bueno si apenas estás aprendiendo te distraerá de lo básico.

Sabia que alguien se daría cuenta, pero aunque no lo creas es un manga no es un hentai xD, es la recomendación de submanga de la semana y no tienen permitido publicar hentai como manga de la semana x3! aunque aún así no creo que lo veo es algo como un ToLove Ru o cosas muy ecchi ._.

Sakara · Mensajepor **Sakara** » Mié Mar 07, 2012 12:38 pm

Soy pro tanto en XHTML como en CSS, incluyendo HTML5 y CSS3. No sé de qué se sorprenden, o sea, era obvio que sería superior.
En fin. Este tutorial apesta, si quieren aprender a diseñar vayan y lean unos cuantos libros, como he hecho yo.
Darkprotoman, espero que tu web sea tableless.

Adiós.
Imagen

Combusken · Mensajepor **Combusken** » Mié Mar 07, 2012 2:59 pm

Si Lau se está dedicando a aprender html por su cuenta mientras estudia Bachillerato y tú dedicas a estudiar Programación, no deberías comparar tu situación con la suya. No estoy afirmando que sea así, pero deduzco que es o eso, o que le sacas unos cuantos años de más.
Bien cierto es que si alguien no está seguro de algo no debería explicarlo directamente como tutorial, ni mucho menos... pero lo hecho, hecho está, y mientras admita errores, no le veo lo malo al tema. Al fin y al cabo, leyendo las respuestas también se aprende.

Yo no puedo aportar nada, ahora estoy volcada en el lenguaje C++ y los pocos conocimientos que tenía de html están un poco en el cajón... xD

Lau · Mensajepor **Lau** » Mié Mar 07, 2012 3:15 pm

Yo solo hice el tema para ayudar a esa gente que no tenía ni idea...y el HTML lo he ido aprendiendo por mi cuenta muy lentamente (uso programas como KompoZer e_e).

Aún así, sigo aceptando críticas.

Frame · Mensajepor **Frame** » Jue Mar 08, 2012 10:21 am

esto esa muy vasico.
deberias porlomenos explicar las table para que mminimo agan esto en 1 Hora.
http://paladi-web.host22.com/

esa wb es mia la ise en 5 minutos o menos xD

Darkprotoman=^-^= · Jue Mar 08, 2012 1:59 pm

Frame escribió:esto esa muy vasico.
deberias porlomenos explicar las table para que mminimo agan esto en 1 Hora.
http://paladi-web.host22.com/

esa wb es mia la ise en 5 minutos o menos xD

1.-La separación por tablas para crear páginas web está mal vista, a pesar de ser la manera más fácil de hacerlo, no está considerado como correcto.
2.-No te ofendas pero que asco de diseño, nada combina entre si y no sé si puedo llamar banner a eso ._..

Frame · Mensajepor **Frame** » Jue Mar 08, 2012 2:03 pm

lose como dije la ise e 15 minutos
termine de reformar mucho la web
http://paladi-web.host22.com/index.html
entra es 2.0

a ahora la ise en 30 minutos las ago rapido

Ðrake · Mensajepor **Ðrake** » Jue Mar 08, 2012 2:15 pm

Frame escribió:esto esa muy vasico.
deberias porlomenos explicar las table para que mminimo agan esto en 1 Hora.
<span><a href="http://paladi-web.host22.com/" class="smarterwiki-linkify">http://paladi-web.host22.com/</a></span>

esa wb es mia la ise en 5 minutos o menos xD

Frame escribió:lose como dije la ise e 15 minutos
termine de reformar mucho la web
http://paladi-web.host22.com/index.html
entra es 2.0

a ahora la ise en 30 minutos las ago rapido

¿Porque te contradices? Me sigue pareciendo que esa web 2.0 sigue siendo fea el baner no convina con el fondo, etc.

Frame · Mensajepor **Frame** » Jue Mar 08, 2012 2:21 pm

como dije son solo de pruebas nada mas
solo repasando una cosas para el colegio

y eso porque me habia olvidado cuanto tiempo la ise

FireX · Mensajepor **FireX** » Jue Mar 08, 2012 2:31 pm

Frame escribió:esto esa muy vasico.
deberias porlomenos explicar las table para que mminimo agan esto en 1 Hora.
http://paladi-web.host22.com/

esa wb es mia la ise en 5 minutos o menos xD

No hace falta que digas que esto es básico porque el mismo título del tema lo dice, es sobre como hacer una página web básica, y la tuya es muy básica por cierto así que no entiendo el punto de tu crítica, una pagina web compleja osea no básica, yo creo que debería tomar como mínimo una semana para que quede decente y eso si ya sabes que es lo que vas a hacer.

Ah y me parece que se están pasando un poco, bajenle dos niveles a la intensidad, se supone que este tema es para discutir sobre como se hace una página web tampoco hay que rajar así.

Frame · Mensajepor **Frame** » Jue Mar 08, 2012 2:38 pm

Frame escribió:esto esa muy vasico.
deberias porlomenos explicar las table para que mminimo agan esto en 1 Hora.
http://paladi-web.host22.com/

esa wb es mia la ise en 5 minutos o menos xD

Porlomenos lo lelleron?

solo dije que minimo debes explicar las Table para un mejor orden de la web nada mas

yo di un Ejemplo Basico de lo que podrian a llegar a hacer con unas Table
nada mas
que los demas saltaran diciendo que mi web es una ***** no me preocupa

Frame · Mensajepor **Frame** » Vie Mar 09, 2012 2:19 pm

Recomiendo que usen o dreamvewer para un poco avanzados, NVU para novatos o notepad para los PRo como yo xD
na joda ls dos primeros :D

Zim · Mensajepor **Zim** » Sab Mar 10, 2012 12:29 pm

Fire.FM nunca me gustó (la aplicación esa de Firefox). Mi gran comentario del día al ver el Browser de Lau. Por lo demás está interesante el tema de la web excesivamente básica.

Sobre la guerra de egos de niños que se creen Steve Jobs II al hacer super webs en 20 minutos...sigan, está entretenido :B