Semana 5 IS454

HTML BASICO III
Desarrollo Web IS-454 Semana 5

1. Diseño responsivo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
El diseño web responsivo o adaptativo se trata de usar HTML y CSS para

*{
box-sizing: border-box;
}
cambiar el tamaño, ocultar, reducir o agrandar automáticamente un sitio

.menu {
float: left;
width: 20%;
}
web, para que se vea bien en todos los dispositivos (computadoras de es

.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
critorio, tabletas y teléfonos).

}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
@media only screen and (max-width:800px) {

/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your
physical shape.</p>
<img src="C:\Users\Sprike\Desktop\html\images\img_5terre.jpg" style="width:100%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web

design . Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
Configuración del ventana gráfica
Para crear un sitio web receptivo, agregue la siguiente <meta> etiqueta a todas sus
páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sin la meta etiqueta de la Con la meta etiqueta de l

ventana gráfica: a ventana gráfica:
Imagenes responsivas
Las imágenes receptivas son imágenes que se escalan bien para adaptarse a cualquier
tamaño de navegador.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage valu
e, the image will scale up and down when resizing the browser
window. Resize the browser window to see the effect.</p>
<img src="C:\Users\Sprike\Desktop\html\images\img_girl.jpg
" style="width:100%;">
</body>
</html>
Propiedad max-width
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-sc
ale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger t
han its original size. However, if you make the browser window
smaller, the image will still scale down.</p>
<p>Resize the browser window to see the effect.</p>
<img src="C:\Users\Sprike\Desktop\html\images\img_girl.jpg" s
tyle="max-width:100%;height:auto;">
</body>
</html>
Tamaño de texto adaptable
El tamaño del texto se puede configurar con una unidad "vw", que significa el "viewport width“ (ancho de ventana
gráfica).
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0
">
</head>
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the t

ext size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw
will set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width.

If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>
2. Guía de estilo HTML y
convenciones de codificación
Un código HTML coherente, limpio y ordenado facilita que otros lean y comprendan su código
• Declarar siempre el tipo de documento

• Usar nombres de elementos en minúsculas
• Cerrar todos los elementos HTML
• Usar nombres de atributos en minúsculas
• Usar nombres de atributos en minúsculas
• Citar siempre valores de atributo
• Especifique siempre alt, ancho y alto para las imágenes
• Espacios y signos iguales
• Nunca omita el elemento <title>
• Agregar el atributo lang
• Metadatos
• Configuración de la ventana gráfica
• Comentarios HTML
• Extensiones de archivos
Gracias

Semana 5 IS454

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Semana 5 IS454

Cargado por

Copyright:

Formatos disponibles

HTML BASICO III

Desarrollo Web IS-454 Semana 5

El diseño web responsivo o adaptativo se trata de usar HTML y CSS para

cambiar el tamaño, ocultar, reducir o agrandar automáticamente un sitio

web, para que se vea bien en todos los dispositivos (computadoras de es

critorio, tabletas y teléfonos).

@media only screen and (max-width:800px) {

<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sin la meta etiqueta de la Con la meta etiqueta de l

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the t

<p>Viewport is the browser window size. 1vw = 1% of viewport width.

• Declarar siempre el tipo de documento

También podría gustarte