HTML5: GUIA TURISTICA

1. Hola Mundo

hola.html
<html>
 <header>
  <title> Mi Primer Código HTML </title>
 </header>
 <body>
  <h1> Hola Mundo! </h1>
 </body>
</html>

2. Guía Turística (v1)

guia01.html
<html>
 <head>
   <meta charset="utf-8">
   <title>Primer Programa</title>
   <link rel="stylesheet" type="text/css" href="guia01.css" />
 </head>
 <body>
   <div class="barra">Guía Turística</div>
   <div class="destinos">
	<div class="atraccion">El Teatro</div>
	<div class="atraccion">Hotel California</div>
	<div class="atraccion">Los Adobes</div>
   </div>
 </body>
</html>
guia01.css
/*
	guia.css: Estilo para la guia Turistica
*/
 
body {
  font:bold 10pt Arial;
  margin:0;
  padding:0;
}
 
.barra {
  background-color:#777777;
  color:white;
  text-align:center;
  height:24px;
  padding-top:6px;
  background-image: -webkit-gradient(linear,
	left top,left bottom,from(#ccc),to(#999));
}
 
.destinos {
  background-color:white;
  color:black;
}
 
.atraccion {
  padding: 4px 16px 4px 32px;
  border: 1px solid black;
}

3. Guía Turística (v2)

guia02.html
<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width;
     initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
   <title>Primer Programa</title>
   <link rel="stylesheet" type="text/css" href="guia02.css" />
 </head>
 <body>
   <div class="barra">Guía Turística</div>
   <div class="destinos">
	<div class="atraccion"><a href="http://m.google.com.mx">El Teatro</a></div>
	<div class="atraccion"><a href="http://m.google.com.mx">Hotel California</a></div>
	<div class="atraccion"><a href="http://m.google.com.mx">Restaurant 'Los Adobes'</a></div>
   </div>
 </body>
</html>
guia02.css
/*
	guia.css: Estilo para la guia Turistica
*/
 
body {
  font:bold 10pt Arial;
  margin:0;
  padding:0;
  width:320px;
}
 
.barra {
  color:black;
  width:100%;
  margin:0; 
  text-align:center;
  height:24px;
  padding-top:6px;
  text-shadow:0 1px 0 white;
  border-bottom:1px solid #333;
  background-image: -webkit-gradient(linear, left top, left bottom,
    from(#c9c9c9), to(#848484), color-stop(0.6,#A1A1A1));
}
 
.destinos {
  background-color:white;
  color:black;
}
 
.atraccion {
  border-bottom: 1px solid #444;
  font:normal 9pt Arial;
  line-height:24px;
}
 
.atraccion a {
  text-decoration: none;
  color:#444;
  display:block;
  padding-left:32px;
}

4. Guía Turística (v3)

guia03.css
/*
	guia.css: Estilo para la guia Turistica
*/
 
body {
  font:bold 12pt Arial;
  margin:0;
  padding:0;
  width:320px;
  background-color:silver;
  background-image: -webkit-gradient(linear, left top,
  right top, color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .1)));
  -webkit-background-size: 7px;
}
 
.barra {
  color:black;
  width:100%;
  margin:0; 
  text-align:center;
  height:24px;
  padding-top:6px;
  text-shadow:0 1px 0 white;
  border-bottom:1px solid #333;
  background-image: -webkit-gradient(linear, left top, left bottom,
    from(#c9c9c9), to(#848484), color-stop(0.6,#A1A1A1));
}
 
.destinos {
  background-color:white;
  color:black;
}
 
.atraccion {
  border-bottom: 1px solid #444;
  font:normal 11pt Arial;
  line-height:24px;
}
 
.atraccion a {
  text-decoration: none;
  color:#444;
  display:block;
  padding: 0 0 0 5px;
  line-height:22px;
  alignment-adjust:middle;
}
 
.atraccion a img {
  vertical-align:middle;
  padding:5px;
  width:21px;
}
 
.info {
  background-color:white;
  margin:10px;
  padding:12px;
  border:1px solid black;
  -webkit-border-radius:16px;
  font:normal 12pt/18pt Helvetica;
}
 
.atras { /* etiqueta a */
  margin:0;
  padding:0;
  text-decoration: none;
}
 
.regresar {
  margin:0;
  padding:0;
  position: absolute;
  top: 4px;
  left: 11px;
  width:58px;
  height:22px;
  z-index:4;
}
 
.back {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 7px;
  left: 24px;
  font-size: 13px;
  color: white;
  text-shadow: rgba(0,0,0,0.6) 0 -1px 0;
  z-index: 5;
}
guia03.html
<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width;
     initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
   <title>Guía Turismo BCS</title>
   <link rel="stylesheet" type="text/css" href="guia03.css" />
 </head>
 <body>
   <div class="barra">Guía Turística</div>
   <div class="destinos">
	<div class="atraccion">
	 <a href="teatro.html">
	  <img src="mosaico.png" /> El Teatro
	 </a>
	</div>
	<div class="atraccion">
	 <a href="http://m.google.com.mx">
	  <img src="mosaico.png" /> Hotel California
	 </a>
	</div>
	<div class="atraccion">
	 <a href="http://m.google.com.mx">
	  <img src="mosaico.png" /> Restaurant 'Los Adobes'
	 </a>
	</div>
   </div>
 </body>
</html>
teatro.html
<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width;
     initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
   <title>Guía Turismo BCS</title>
   <link rel="stylesheet" type="text/css" href="guia03.css" />
 </head>
 <body>
   <div class="barra">
      El Teatro
   </div>
    <a href="guia04.html" class="atras">
     <img class="regresar" src="back.png" />
      <span class="back">Volver</span>
    </a>
   <div class="info">
    Teatro-cine donde se exhiben peliculas de época y muy ricas palomitas. En febrero inicia un Festival de Cine Ecológico 2012.
   </div>
 </body>
</html>

5. Guía Turística con jQuery

guia-jquery.html
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
	<title>Guía Turística</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
        <script type="text/javascript">
            $.mobile.page.prototype.options.addBackBtn = true; // Activa botón 'back'
        </script>
    </head> 
<body> 
 
<section id="home" data-role="page">
	<div data-role="header">
	    <h1>Guía Turística</h1>
	</div>
	<ul data-role="listview">
	    <li> La Paz
        	<ul data-role="listview" data-count-theme="b">
                    <!-- li data-role="divider"><a data-role="button" data-icon="home" href="#home">Inicio</a></li-->
                    <li>
                        <a href="#"><img src="restaurant.png" class="ui-li-icon"/>Restaurants</a>
                        <span class="ui-li-count">3</span>
                        <ul data-role="listview" data-inset="false">
                            <li>
                                <h3>La Terraza</h3> <!-- Ejemplo completo -->
                                <p><strong>Restaurant-Bar frente al Mar</strong></p>
                                <p>Hotel Perla. Malecón Alvaro Obregón No. 1570</p>
                                <p class="ui-li-aside"><strong>(612) 122 07 77</strong></p>
                            </li>
                            <li>Las Brisas</li>
                            <li>Bismarcito</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><img src="hotel.png" class="ui-li-icon"/>Hoteles</a>
                        <span class="ui-li-count">3</span>
                    </li>
                    <li><a href="#"><img src="playa.gif" class="ui-li-icon"/>Playas</a>
                        <span class="ui-li-count">2</span>
                    </li>
                </ul>
            </li>
	    <li> Todos Santos
        	<ul data-role="listview">
                    <li>Restaurants</li>
                    <li>Hoteles</li>
                </ul>
            </li>
	</ul>
</section>
</body>
</html>
html5_-_guia_turistica.txt · Última modificación: 2012/03/24 01:51 por apacheco
 
Excepto donde se indique lo contrario, el contenido de esta wiki se autoriza bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki