Hola taringuer@s, hoy haré un tutorial bastante detallado de como hice mi página web, que la pueden ver aquí:
Bueno, empezemos:
Primero, deben saber un poco HTML, que está en uso en "INDEX.html". Primero, deben conocer la fuente, 193 líneas, miren la fuente con su navegador web, mi página es esta: . No pondré capturas ya que la página es larga.
El nombre de la página en movimiento:
Esto es fácil, solamente es un Javascript, aquí lo tienen:
Como verán, es solo un Javascript, algo simple.
Cuerpo:
El cuerpo es todo una tabla, que es <table (ATRIBUTOS)><tr><td>CONTENIDO</td><tr></table>. No es muy recomendable usar tablas por el tema de la compatibilidad, pero no se preocupen, ustedes pueden usar <div>.
El título:
Si entran a la página, verán como título, arriba de todo, en el cuerpo, "La página de Brian". Ese título, usa la fuente Orbitron, conseguida en Google web Fonts , un servicio de Google que ofrece fuentes para tu web. El título está programado así:
Esa es una parte de la tabla, el principio, donde pueden ver como está programada.
La barra de navegación:
Es solo un Div simple, así:
Es la continuación del código anterior.
El texto
Para el texto, tuve que cerrar la tabla y crear una nueva, con dos columnas, así:
Comentarios:
Aquí fue más dificil, ya que tuve que hacer un script que se adaptara con mi página, de Facebook. Cree una nueva tabla con las características del título, tal y como lo pueden ver aquí:
La barra del costado (Compartir):
Esta barra es un script de ShareSidebar.com, aquí el código:
Esto es todo, luego haré un post sobre las otras partes de mi página.
Bueno, empezemos:
Primero, deben saber un poco HTML, que está en uso en "INDEX.html". Primero, deben conocer la fuente, 193 líneas, miren la fuente con su navegador web, mi página es esta: . No pondré capturas ya que la página es larga.
El nombre de la página en movimiento:
Esto es fácil, solamente es un Javascript, aquí lo tienen:
<title>La pagina de Brian ---- </title>
<script type="text/JavaScript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return}
setTimeout("titlemove()",300)}
if (document.title)
titlemove()
</script>
Como verán, es solo un Javascript, algo simple.
Cuerpo:
El cuerpo es todo una tabla, que es <table (ATRIBUTOS)><tr><td>CONTENIDO</td><tr></table>. No es muy recomendable usar tablas por el tema de la compatibilidad, pero no se preocupen, ustedes pueden usar <div>.
El título:
Si entran a la página, verán como título, arriba de todo, en el cuerpo, "La página de Brian". Ese título, usa la fuente Orbitron, conseguida en Google web Fonts , un servicio de Google que ofrece fuentes para tu web. El título está programado así:
<table width="100%" border="0" background="transparente50.png" align="center">
<tr>
<td align="center"><h1><a href="https://www.facebook.com/apps/application.php?id=187579581277438">La página de Brian</a></h1></td>
</tr>
Esa es una parte de la tabla, el principio, donde pueden ver como está programada.
La barra de navegación:
Es solo un Div simple, así:
<tr>
<td><ul id= "nav" >
<li><a href="Hey!.html" title="Hey!" class="barra" rel="facebox">Hey!</a></li>
<li><a href="http://chat.la-pagina-de-brian.com.ar/" title="Chat" class="barra">Chat Publico</a></li>
<li><a href="http://hosting.la-pagina-de-brian.com.ar/" title="Hosting" class="barra" rel="ventana">Hosting De imagenes</a></li>
<li><a href="proximamente.html" title="Index" class="barra" rel="facebox">Index</a></li>
</ul></td></tr></table>
Es la continuación del código anterior.
El texto
Para el texto, tuve que cerrar la tabla y crear una nueva, con dos columnas, así:
<table width="100%" border="0" align="center" background="transparente50.png">
<tr>
<td><h2>Bienvenidos a mi pagina web. Recomienden esta pagina y comenten! :D. Soy adiction_99 en Taringa!</h2></td>
<td><h2>¡Ahora Mozilla Firefox es compatible con mi página! Les dejo la parodia de Friday, de Rebecca Black :D</h2></td>
</tr>
<tr>
<td><iframe width="310" height="227" src="http://www.youtube.com/embed/gvQI69U8cxc" frameborder="0" allowfullscreen1></iframe></td>
<td bgcolor="#FFFFFF"><iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FMe-quedo-en-la-compu-aunque-no-sepa-que-hacer-D%2F177987082252043&width=310&colorscheme=light&show_faces=true&stream=true&header=true&height=227" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:310px; height:227px;" allowTransparency="true"></iframe></td>
</tr>
</table>
Comentarios:
Aquí fue más dificil, ya que tuve que hacer un script que se adaptara con mi página, de Facebook. Cree una nueva tabla con las características del título, tal y como lo pueden ver aquí:
<table width="100%" border="0" background="transparente50.png" align="center">
<tr><td><script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script><fb:like href="http://la-pagina-de-brian.com.ar/" show_faces="true" width="624" font="tahoma"></fb:like>
<div id="fb-root"></div><script src="http://connect.facebook.net/es_ES/all.js#appId=187579581277438&xfbml=1"></script><fb:comments href="pruebas-html.zymichost.com" num_posts="50" width="624"></fb:comments><meta property="fb:admins" content="adiction99"></td></tr>
<tr><td><p><h3>Hecho por Brian Valente porque esta muy aburrido :D</h3></p></td></tr>
</table>
La barra del costado (Compartir):
Esta barra es un script de ShareSidebar.com, aquí el código:
<!--ShareSidebar.com BEGINS-->
<style>
.FBConnectButton_Small{background-position:-5px -232px !important;border-left:1px solid #1A356E}.FBConnectButton_Text{margin-left:12px !important;padding:2px 3px 3px !important}#ShareSidebar{top: 10%;width:69px;Right: 0 !important;overflow:hidden;position: fixed;z-index: 100000;text-align:center;line-height:normal;_position: absolute;font-size:9px;}#ShareSidebar a,#ShareSidebar a:hover,#ShareSidebar a:visited{text-decoration:none;font-size:9px;}</style><div id="ShareSidebar">
<div style="float:left; margin:10px 0 0 10px;"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<div style="float:left; margin:10px 0 0 10px;"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>
<div style="float:left; margin:10px 0 0 10px;"><script type="text/javascript">(function() {var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://widgets.digg.com/buttons.js';s1.parentNode.insertBefore(s, s1);})();</script><a class="DiggThisButton DiggMedium"></a></div>
<div style="float:left; margin:7px 0 0 10px;"><a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div>
<div style="float:left; margin:10px 0 0 10px;"><script type="text/javascript" src="http://reddit.com/static/button/button2.js"></script></div>
<div style="float:left; margin:10px 0 0 10px;"><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div style="float:left; margin:10px 0 0 7px;"><script src="http://orkut-share.googlecode.com/svn/trunk/delicious.js"></script></div>
<div style="float:left; margin:10px 0 0 5px; color:#000000; font-family:Arial, Helvetica, sans-serif; background-color:#F4295C; padding:2px 3px;"><a href="http://sharesidebar.com" target="_blank"><font color="#ffffff">Share</font><font color="#000000">Sidebar</font></a></div></div>
<!--ShareSidebar.com ENDS-->
Esto es todo, luego haré un post sobre las otras partes de mi página.