Scribd
Cargar
111 vistas

02-Estructura HTML Bloques

Este documento proporciona información sobre la estructura HTML, etiquetas como <meta>, <table>, y <div>, y cómo aplicar estilos CSS a elementos como fondos, padding, margin, y bordes. Explica conceptos como box-sizing, calc, y medios CSS para adaptación a dispositivos. También incluye ejemplos de código HTML y CSS para ilustrar estas técnicas.

Cargado por

ifsj29
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
111 vistas

02-Estructura HTML Bloques

Este documento proporciona información sobre la estructura HTML, etiquetas como <meta>, <table>, y <div>, y cómo aplicar estilos CSS a elementos como fondos, padding, margin, y bordes. Explica conceptos como box-sizing, calc, y medios CSS para adaptación a dispositivos. También incluye ejemplos de código HTML y CSS para ilustrar estas técnicas.

Cargado por

ifsj29
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 27

HTML/CSS

Estructura HTML

1
Estructura HTML
La etiqueta meta define varios tipos de metadatos.
El atributo charset especifica la codificación usada en nuestra
página.
<meta charset="character_set">
<meta charset="utf-8">

2
utf-8
Charset utf-8 es la Unicode Transformation Format 8-bit representa
el código de caracteres UNICODE. Es compatible con ASCII.
Permite visualizar los caracteres de todos los idioma.

3
Caracteres especiales
Caracteres especiales: para incluir en el texto caracteres que son propias del
lenguaje HTML es necesario usar su anotación codificada:
http://dev.w3.org/html5/html-author/charref
Espacio en blanco (non-breaking space) &nbsp;
< Menor que &lt;
> Mayor que &gt;
& Ampersand &amp;
“ Comillas &quot;
‘ apóstrofo &apos;

4
Tabla HTML
Las tablas se definen con las etiquetas <table>, <tr> para cada fila y
<td> para cada columna <th> indica que una celda es la cabecera.
HTML
<table>
<tr>
<th> </th>
<th> Población </th>
<th> Hombres </th>
<th> Mujeres </th>
</tr>
<tr>
<th> Alemania </th>
<td> 82.020.578 < /td>
<td> 40.346.853 </td>
<td> 41.673.725 </td>
</tr>
<tr>
<th> Francia </th>
<td> 65.578.819 </td>
<td> 31.764.615 </td>
<td> 33.814.204 </td>
</tr>
<tr>
<th> Reino Unido </th>
<td> 63.896.071 </td>
<td> 31.423.339 </td>
<td> 32.472.732 </td>
</tr>
</table> 5
Tabla CSS
CSS
<style type="text/css">
table {
padding: 0px;
margin: 0px;
border-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333;
}
th, td {
padding: 0.5em;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
}
th {
background-color: #E2E2E2;
}
td {
background-color: #F0F0F0;
}
</style>

6
Recursos HTML
MDN: Lista de Elementos HTML5
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

W3C: HTML5 elements


http://dev.w3.org/html5/markup/elements.html

HTML5-Visual Cheat Sheet


https://docs.google.com/viewer?a=v&pid=sites&srcid=bGFuZG1hcmtzY2hvb2wu
b3JnfG1zLWNpcmFzLWNsYXNzLXdlYnNpdGV8Z3g6M2I3ZjY1NzJlMjlmNDA3Ng

7
CSS
el estilo CSS se puede añadir escribiendo directamente las
propiedades CSS en la línea, es el método más sencillo, se añade un
atributo style en el elemento concreto dentro de la página. No se
pueden reutilizar en otros elementos que comparten las mismas
propiedades.

Se escriben las propiedades del estilo en las marcas del HTML como
"nombre: valor" separadas por punto y coma.

<body style="color: red; ">

<p style="font-size: 16px; color: blue; font-family: Arial,


Helvetica, sans-serif;">
Mi primera página</p>

8
CSS - link
Lo más aconsejable para mantener la separación entre contenido y
presentación, en una hoja de estilo CSS separada del HTML, que se
importa con un elemento <link> en la cabecera.

9
CSS - media
CSS Permite adaptar la
presentación a PCs, móviles,
tabletas o impresoras con el
atributo media que activará el
estilo específico de cada
dispositivo.

<link rel="stylesheet"
type="text/css" media="screen"
href="sans-serif.css">

<link href=“estilo.css"
rel="stylesheet" type="text/css"
media="(min-width:380px)">

http://www.w3.org/TR/css3-mediaqueries/

10
Elementos HTML
Los elementos html pueden visualizarse por defecto como bloque o como en
línea.
Los elementos bloques block ocupan todo el ancho de la página y fuerzan a una
nueva línea antes y después.

<article> <aside> <canvas> <div> <footer> <h1>, <h2>,


<h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section>
<ul>…
https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

Los elementos en línea inline sólo ocupan el ancho necesario y no fuerzan


nuevas líneas.

<em> <a> <br> <img> <span> <button> <input> <select>


<textarea>…
https://developer.mozilla.org/en-US/docs/HTML/Inline_elements

11
Div HTML
DIV
El elemento <div> es un elemento de bloque que se emplea
contener en su interior otros elementos HTML. No tiene ningún
significado, es semánticamente neutro.
<div id="caja" class="card"> ……………. </div>

Atributo ID: identifica unívocamente un elemento HTML en una


página. Un elemento HTML solo debe tener un atributo ID y este
debe ser único en la página. El selector CSS #caja se refiere al
elemento con atributo id="caja”, como en #caja {color:blue}

Atributo CLASS: define una clase de elementos HTML. Un elemento


puede tener varios atributos CLASS. El selector CSS .card se refiere
a todos los elemento de la clase card (que llevan el atributo
class="card"), como en .card {color:red} 12
div CSS
Padding, margin y border
HTML
<div class="anterior"> &lt;div&gt; anterior </div>
<div class="muestra"> Contenido del div de
prueba</div>
<div class="posterior"> &lt;div&gt; posterior </div>

CSS
.muestra {
height: 300px;
width: 400px;
border: 5px solid #C00;
margin: 20px;
padding: 20px;
}
.anterior, .posterior {
height: 100px;
width: 200px;
border: 2px solid #30F;
padding: 5px;
} 13
box-sizing
Es muy difícil trabajar una estructura precisa si por defecto el ancho y alto asignado a un
elemento es la medida del contenido de la caja sin incluir ni las dimensiones del relleno
(padding) ni del borde. Con la propiedad box-sizing, podemos elegir como interpretar la
medida de la caja.

HTML
<div class="content"> box-sizing: content-box </div>
<div class="border"> box-sizing: border-box </div>

CSS
div { height: 200px;
width: 300px;
border: 5px solid #30F;
padding: 2em;
margin:1em;
}
.content { box-sizing:content-box;
}
.border { box-sizing:border-box;
}

14
calc
Es calc permite hacer cálculos para determinar un valor de una propiedad CSS, tiene la
ventaja de poder operar con diferentes unidades: width: calc(100%/2 - 2em);
Por ejemplo, dividir el espacio a ocupar, entre el número de bloques y restarles los
márgenes.

HTML
<div> caja #1 </div>
<div> caja #2 </div>
<div> caja #3 </div>

CSS
div { height: 50vh;
width: calc(100%/3 - 2em);
box-sizing:border-box;
border: 5px solid #30F;
padding: 2em;
margin:1em;
float:left;
}

15
Fondos CSS
Background

back_mantel.png

dh.png

dh_2.png

dh_3.png

ac.jpg

http://www.css3files.com/background/
16
Fondos CSS
Background

back_mantel.png

dh.png

body { background-image: url(images/ac.jpg); }


.modA { background-image: url(images/back_mantel.jpg); }
.modB { background-image: url(images/back_mantel.jpg); dh_2.png
background-clip: content-box;
}
.modC { background-image: url(images/back_mantel.jpg);
background-size:100% 100%; dh_3.png
}
.modD { background-image: url(images/back_mantel.jpg);
background-repeat:no-repeat; ac.jpg
background-size:100% 100%;
background-origin:content-box;
}http://www.css3files.com/background/
17
Fondos CSS
.modE { background-image: url(images/dh.jpg);
Background
background-repeat:no-repeat;
background-size:cover;
} back_mantel.png
.modF { background-image: url(images/dh.jpg);
background-repeat:no-repeat;
background-size:cover; dh.png
background-origin:content-box; }

dh_2.png

.modG { background-image: url(images/dh_2.jpg);


dh_3.png
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
.modH { background-image: url(images/dh_3.jpg); ac.jpg
background-repeat:no-repeat;
background-size:contain;
http://www.css3files.com/background/
background-position:center;}
18
Fondos CSS
.modI {
background: linear-gradient(to right, #d2ff52 0%, #566647 100%);
Background
}
.modJ {
background: linear-gradient(to bottom, rgba(240,183,161,1) 0%, back_mantel.png
rgba(140,51,16,1) 80%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
}
.modK { dh.png
background: linear-gradient(to top, rgba(50,116,45,1) 0%,
rgba(239,239,210,1) 100%);
}
.modL { dh_2.png
background: linear-gradient(to top, rgba(50,116,45,1) 0%,
rgba(50,116,45,0) 100%);
}
dh_3.png

ac.jpg

http://www.css3files.com/background/
19
Fondos CSS
Background ejemplo 3 imágenes
f03.png

f02.png

f01.png

div { background-color: #a4d3ff;

background: url(images/f01.png) left bottom repeat-x,


url(images/f02.png) left bottom no-repeat,
url(images/f03.png) left top repeat-x;

20
Bordes CSS
CSS3 permite añadir bordes y bordes redondeados ejemplo 4

border-radius: 24px; border-top-left-radius: 24px; border-radius: 24px 0; border-radius: 36px 12px;

border-top-right-radius: 50px 30px; border-bottom-right-radius: 50px 30px; border-radius: 50%; border-radius: 50% 50% 0 0;

border-radius: 0 20px 20px 0; border-radius: 20px 0 0 20px; border-radius: 0 50% 0 50%; border-top-left-radius: 50% 20%;
border-top-right-radius: 50% 20%;
border-bottom-left-radius: 50% 20%;
http://www.cssmatic.com/es/border-radius border-bottom-right-radius: 50% 20%;
21
Sombras CSS
CSS3 permite añadir sombras ejemplo 5
box-shadow: none|offset-x offset-y blur-radius spread-radius color |inset|initial|inherit;

box-shadow: -5px -5px #888; box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 0 5px #888; box-shadow: -5px -5px 5px 5px #888;

box-shadow: 0 0 5px #888; box-shadow: 0 0 5px 5px #888; box-shadow: inset -5px -5px #888; box-shadow: inset -5px -5px 5px #888;

box-shadow: box-shadow: box-shadow: inner 0 0 5px #888; box-shadow: inset 0 0 5px 5px #888;
inset -5px -5px 0 5px #888; inset -5px -5px 5px 5px #888;

http://dev.w3.org/csswg/css-backgrounds/

22
Estructura HTML
En HTML5, los bloques div son sustituidos por bloques semánticos
que muestran significado por si mismos.
<header>
<nav>

<section> <aside>
<article>

<footer>
23
Estructura HTML
Ejemplo de estructura de una página realizada con los bloques
semánticos HTML5
HTML
<div class="caja">
<header><h1> Cabecera: Header </h1>
</header>
<nav>
<ul>
<li><a href="#"> Opción 1 </a></li>
<li><a href="#"> Opción 2 </a></li>
<li><a href="#“> Opción 3 </a></li>
</ul>
</nav>
<div class="contenido">
<article> Contenido de la página <strong>
article &gt; section </strong></article>
<aside> Área de contenido destacado y relacionado:
<strong >aside </strong></aside>
</div>
<footer> Pie: <strong >footer </strong></footer>
</div>
+ CSS 24
Estructura HTML
La estructura HTML, debe realizarse en el sentido lógico de lectura
del documento, cuando la página se vea sin aplicar los estilos no
pierda su significado.

25
Recursos CSS
CSS3 Generator
http://css3generator.com/

CSS3 Gradient Generator


http://gradients.glrzad.com/

{CSS} Portal - on line generator


http://www.cssportal.com/css3-rounded-corner/

CSS3 MAKER:
http://www.css3maker.com

CSS3.com
http://www.css3.com/

26
HTML/CSS

27

También podría gustarte