Issuu on Google+

Taller Multimedia. html + css bรกsico!

Osvaldo Uribeโ„ข


Contenido NO es Dise単o! No los debe confundir ni a ustedes ni al usuario!


por ejemplo:

“So fuckn hard work to make that happened.™”


por ejemplo:


Entonces...

c贸mo aplico esto a internet? o a dise帽ar sitios web?


Separando el contenido del dise単o.

HTML Contenido.

+

CSS Dise単o.


Separando el contenido del dise単o.

HTML Contenido.

+

CSS Dise単o.


C贸mo escribo de forma correcta en html?


Estructura del documento: DIV isores

<div>%</div>

Heading (Títulos)

<h1>%</h1>.. <h6>%</h6>

Párrafos

<p>%</p>

Break Row (Salto de lína)

<br />

Horizontal rule (línea horizontal)

<hr />


Estructura del documento: DIV isores

<div>%</div>

Heading (Títulos)

<h1>%</h1>.. <h6>%</h6>

Párrafos

<p>%</p>

Break Row (Salto de lína)

<br />

Horizontal rule (línea horizontal)

<hr />


Estructura del documento: id (identificadores) > Únicos

<div id=""></div>

class (clases) > Grupos

<div class=""> </div>

<h1 id=””></p> <ul id=””></li>

<p class=””></p> <li class=””></li>


Valor al contenido: Strong

<strong>%</strong>

Emphasis

<em>%</em>

Blockquote

<blockquote> %</blockquote>

Deleted text

<del>%</del>

Underline

<u>%</u>


Valor al contenido: Ordered list (lista ordenada)

<ol> <li>%</li> </ol>

Unordered list (lista desordenada)

<ul> <li>%</li> </ul>

List item

<li>%</li>


Valor al contenido: Definition list (lista de definiciones)

<dl> <dt>%</dt> <dd>%</dd> </dl>

Definition Term

<dt>%</dt>

Definition Description

<dd>%</dd>


Valor al contenido: Image Source (Imagen Recurso)

<img src=""/>

Deben ser del contenido y no del dise単o!


Links: link a otro lugar. (Ancla Referencial)

<a href="">%</a>

link a un mail (Ancla Referencial)

<a href="mailto:"> %</a>


Dudas?


Yo también! porqué así? y no con tablas? o mejor aún con flash?


Por que los buscadores s贸lo saben leer en este idioma.


Separando el contenido del dise単o.

HTML Contenido.

+

CSS Dise単o.


C贸mo los vinculamos? El contenido con el dise帽o?


Ejemplo:


La cabeza y el cuerpo:


“Llámamos” al diseño!


Las Gu铆as! y la explicaci贸n!


Mรกs dudas?


HTML + CSS