AdNow

loading...

Diseño web sensible a HTML

-

Diseño web sensible a HTML

❮ AnteriorSiguiente ❯

¿Qué es el diseño web receptivo?

El diseño web adaptable hace que su página web se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).
Responsive Web Design consiste en utilizar CSS y HTML para cambiar el tamaño, ocultar, reducir, ampliar o mover el contenido para que se vea bien en cualquier pantalla:
Nota: ¡ Una página web debe verse bien y ser fácil de usar, independientemente del dispositivo!

Crea tu propio diseño receptivo

Una forma de crear un diseño receptivo es crearlo usted mismo:

Ejemplo

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    max-width: 300px;
    height: 300px;
    border: 1px solid black;} </style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
  <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.</p>
</div>

<div class="city">
  <h2>New York</h2>
  <p>The City of New York is the most populous city in the United States.</p>
  <p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.</p>
</div>

</body>
</html>
Pruebelo usted mismo »
Para obtener más información sobre Diseño Web Adaptable, lea nuestro Tutorial RWD .

Usando W3.CSS

Otra forma de crear un diseño receptivo es usar una hoja de estilo receptiva, como W3.CSS
W3.CSS facilita el desarrollo de sitios que se ven bien en cualquier tamaño; computadora de escritorio, computadora portátil, tableta o teléfono:

Demostración de W3.CSS

Cambiar el tamaño de esta página sensible!

Londres

Londres es la capital de Inglaterra.
Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.

París

París es la capital de Francia.
El área de París es uno de los centros de población más grandes de Europa, con más de 12 millones de habitantes.

Tokio

Tokio es la capital de Japón.
Es el centro del área metropolitana de Tokio y el área metropolitana más poblada del mundo.

Ejemplo

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-orange">
  <h1>W3.CSS Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>

<div class="w3-row-padding">

<div class="w3-third">
  <h2>London</h2>
  <p>London is the capital of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

</div>

</body>
</html>
Pruebelo usted mismo »
Para obtener más información sobre W3.CSS, lea nuestro Tutorial de W3.CSS .

❮ AnteriorSiguiente ❯

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

-
Imagen
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime  www.saime.gob.ve  y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa  da cumplimiento a la sép...
Leer más

Etiqueta HTML < abbr >

-
Etiqueta  HTML  <abbr> ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The  < abbr  title ="World Health Organization" > WHO < /abbr >  was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia:  una abreviatura y un acrónimo son versiones abreviadas de otra cosa.  Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo:  El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
Leer más

HTML < a > tag

-
HTML  <a>  día ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Un enlace a W3Schools.com: < a  href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia:  los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo:  Normalmente,...
Leer más

Visitas a este blog