Foros del Web » Creando para Internet » HTML »

Como puedo crear otras pestañas aparte de inicio

 Estas en el tema de Como puedo crear otras pestañas aparte de inicio en el foro de HTML en Foros del Web. Hola chicos, soy bastante nuevo en esto, acabo de descargar un código y lo quiero adaptar a mi manera. Me gustaría, que al presionar por ...
  #1 (permalink)  
Antiguo 23/02/2016, 16:00
 
Fecha de Ingreso: marzo-2014
Mensajes: 168
Antigüedad: 10 años, 9 meses
Puntos: 2
Como puedo crear otras pestañas aparte de inicio
Hola chicos, soy bastante nuevo en esto, acabo de descargar un código y lo quiero adaptar a mi manera. Me gustaría, que al presionar por ejemplo al botón about, pues que automáticamente, me entre a otra pestaña para poder añadir a mi información. Sé que no es muy díficil, pero lo quiero tener bien porque me gustan las cosas bien hechas.

inicio.html:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <!--
  3. Design by TEMPLATED
  4. http://templated.co
  5. Released for free under the Creative Commons Attribution License
  6.  
  7. Name       : GrassyGreen 
  8. Description: A two-column, fixed-width design with dark color scheme.
  9. Version    : 1.0
  10. Released   : 20140310
  11.  
  12. -->
  13. <html xmlns="http://www.w3.org/1999/xhtml">
  14. <head>
  15. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  16. <title>GrassyGreen</title>
  17. <meta name="keywords" content="" />
  18. <meta name="description" content="" />
  19. <link href="http://fonts.googleapis.com/css?family=Raleway:400,200,500,600,700,800,300" rel="stylesheet" />
  20. <link href="default.css" rel="stylesheet" type="text/css" media="all" />
  21. <link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
  22. <!--[if IE 6]>
  23. <link href="default_ie6.css" rel="stylesheet" type="text/css" />
  24. <![endif]-->
  25. </head>
  26. <body>
  27. <div id="wrapper">
  28.     <div id="menu-wrapper">
  29.         <div id="menu" class="container">
  30.             <ul>
  31.                 <li class="current_page_item"><a href="#">Homepage</a></li>
  32.                 <li><a href="#">About</a></li>
  33.                 <li><a href="#">Blog</a></li>
  34.                 <li><a href="#">Portfolio</a></li>
  35.                 <li><a href="#">Contact</a></li>
  36.             </ul>
  37.         </div>
  38.         <!-- end #menu --> 
  39.     <div id="header-wrapper">
  40.         <div id="header" class="container">
  41.             <div id="logo">
  42.                 <h1><a href="#">GrassyGreen</a></h1>
  43.                 <p>Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a></p>
  44.             </div>
  45.         </div>
  46.     </div>
  47.     </div>
  48.     <div id="banner"></div>
  49.     <div id="page" class="container">
  50.         <div id="content">
  51.             <div class="title">
  52.                 <h2>Integer sit amet aliquet</h2>
  53.                 <span class="byline">Phasellus nec erat sit amet nibh pellentesque congue</span> </div>
  54.             <p>This is <strong>GrassyGreen</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :) </p>
  55.             <p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. </p>
  56.         </div>
  57.         <div id="sidebar">
  58.             <div class="box2">
  59.                 <div class="title">
  60.                     <h2>Integer gravida</h2>
  61.                 </div>
  62.                 <ul class="style2">
  63.                     <li><a href="#">Amet turpis, feugiat et sit amet</a></li>
  64.                     <li><a href="#">Ornare in hendrerit in lectus</a></li>
  65.                     <li><a href="#">Semper mod quis eget mi dolore</a></li>
  66.                     <li><a href="#">Quam turpis feugiat sit dolor</a></li>
  67.                     <li><a href="#">Amet ornare in hendrerit in lectus</a></li>
  68.                     <li><a href="#">Quam turpis feugiat sit dolor</a></li>
  69.                     <li><a href="#">Consequat etiam lorem phasellus</a></li>
  70.                 </ul>
  71.             </div>
  72.         </div>
  73.     </div>
  74. </div>
  75.     
  76.  
  77. <div id="footer-wrapper">
  78.     <div id="footer" class="container">
  79.         <div id="box1">
  80.             <div class="title">
  81.                 <h2>Latest Post</h2>
  82.             </div>
  83.             <ul class="style1">
  84.                 <li><a href="#">Semper mod quis eget mi dolore</a></li>
  85.                 <li><a href="#">Quam turpis feugiat sit dolor</a></li>
  86.                 <li><a href="#">Amet ornare in hendrerit in lectus</a></li>
  87.                 <li><a href="#">Consequat etiam lorem phasellus</a></li>
  88.                 <li><a href="#">Amet turpis, feugiat et sit amet</a></li>
  89.                 <li><a href="#">Semper mod quisturpis nisi</a></li>
  90.             </ul>
  91.         </div>
  92.         <div id="box2">
  93.             <div class="title">
  94.                 <h2>Popular Links</h2>
  95.             </div>
  96.             <ul class="style1">
  97.                 <li><a href="#">Semper mod quis eget mi dolore</a></li>
  98.                 <li><a href="#">Quam turpis feugiat sit dolor</a></li>
  99.                 <li><a href="#">Amet ornare in hendrerit in lectus</a></li>
  100.                 <li><a href="#">Consequat etiam lorem phasellus</a></li>
  101.                 <li><a href="#">Amet turpis, feugiat et sit amet</a></li>
  102.                 <li><a href="#">Semper mod quisturpis nisi</a></li>
  103.             </ul>
  104.         </div>
  105.         <div id="box3">
  106.             <div class="title">
  107.                 <h2>Follow Us</h2>
  108.             </div>
  109.             <p>Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet magna.</p>
  110.             <ul class="contact">
  111.                 <li><a href="#" class="icon icon-twitter"><span>Twitter</span></a></li>
  112.                 <li><a href="#" class="icon icon-facebook"><span>Facebook</span></a></li>
  113.                 <li><a href="#" class="icon icon-dribbble"><span>Dribbble</span></a></li>
  114.                 <li><a href="#" class="icon icon-tumblr"><span>Tumblr</span></a></li>
  115.                 <li><a href="#" class="icon icon-rss"><span>Pinterest</span></a></li>
  116.             </ul>
  117.                 <a href="#" class="button">Read More</a> </div>
  118.         </div>
  119.     </div>
  120. <div id="copyright" class="container">
  121.     <p>&copy; Untitled. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
  122. </div>
  123. </body>
  124. </html>

Saludos, muchas gracias.
-sergi
  #2 (permalink)  
Antiguo 23/02/2016, 16:37
Avatar de Rafael
Modegráfico
  
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 9 meses
Puntos: 1826
Respuesta: Como puedo crear otras pestañas aparte de inicio
No pegues un código del que no tienes ni idea qué hace. Sólo vas a espantar a las personas que pasen a ayudarte.

Para abrir una pestaña nueva solamente pones
Código HTML: 
Ver original
  1. <a href="about.html" target="Nueva">About</a>

Pon un nombre tal vez de tu sitio. No vayas a abusar de abrir nuevas pestañas para todo. Si otra página la quieres abrir otra vez aparte usa el mismo nombre. En este caso Nueva.
  #3 (permalink)  
Antiguo 23/02/2016, 18:28
 
Fecha de Ingreso: febrero-2016
Ubicación: Buenos Aires
Mensajes: 1
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Como puedo crear otras pestañas aparte de inicio
En el <a href="#"> cambia el # por el nombre de la página al que quieras acceder. Por ejemplo, si queres acceder a la pagina about.html sería <a href="about.html">

Adicionalmente, para que al abrirla se abra en una nueva pestaña despues de la dirección (about.html) le agregas target="_blank". Quedaría así: <a href="about.html" target="_blank">
  #4 (permalink)  
Antiguo 28/02/2016, 05:58
Avatar de rodrypaladin
Moderador
  
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 8 meses
Puntos: 468
Respuesta: Como puedo crear otras pestañas aparte de inicio
Es lo que pasa cuando se intenta tomar una plantilla y modificarla sin saber HTML, te recomiendo que te leas o veas un curso de html, en youtube por ejemplo tienes muchos buenos y amenos de ver, verás como lo aprendes enseguida, y te sentirás muy satisfecho cuando uses una plantilla y entiendas todo lo que hay en ella, incluso al final tomarás el camino de hacer la tuya propia que satisfaga tus propias necesidades
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Etiquetas: css, inicio, pestañas, text
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:20.