Вы находитесь на странице: 1из 5

IUNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES

Licenciatura en Artes Multimediales



Informtica General 2013
Ctedra: Drelichman, Paleo, Nadel, Morales

HTML (primera parte)



Desarrollo web

Lenguaje de marcado
- HTML / XHTML / HTML5
Lenguaje de hojas de estilo
- CSS 2.1 / CSS 3
Lenguaje de programacin
- JavaScript
Imgenes y elementos multimedia

Adobe Dreamweaver

Aplicacin de diseo web.
Editor de texto para lenguajes web.

Crear un sitio

Informacin local de archivos
- Permite chequear archivos y vnculos en todo el sitio.
Informacin remota
- Para utilizar el cliente FTP y actualizar archivos en el servidor.

Crear archivos

HTML / XHTML / HTML5
- Estructura del archivo predefinida
DOCTYPE
HEAD: Codificacin
BODY
JavaScript
CSS

HTML

Lenguaje de marcas o etiquetas (tags) para la creacin de documentos de
hipertexto.
Las etiquetas definen la estructura lgica del documento.
Un documento HTML consta de texto: etiquetas y contenido.

XHTML

Tambin usa etiquetas.
Las etiquetas abren y cierran:
<etiqueta> </etiqueta>
Algunas etiquetas tienen la siguiente forma:
<etiqueta />
Se modifican usando atributos:
<etiqueta atributo1="valor1" atributo2="valor2">

Reglas de escritura XHTML

Las etiquetas siempre en minsculas.
Los atributos siempre entre comillas.
Anidamiento incorrecto:
<p> texto en <strong> negrita </p> </strong>
Anidamiento correcto:
<p> texto en <strong> negrita </strong> </p>
Cerrar todas las etiquetas.

Estructura de un documento

DOCTYPE
HTML
HEAD
Informacin sobre la pgina
(ej: ttulo, codificacin de carcteres, ...)
BODY
Contenido de la pgina
(ej: textos, imgenes, !)

DOCTYPE

Es la primera parte de un documento XHTML.
Identifica el tipo de documento.
Identifica el nivel de codificacin.

Opciones de DOCTYPE XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5

Actualizacin del HTML.
El cdigo anterior funciona en HTML5, se debe modificar el DOCTYPE:
<!doctype html>
Ms simplificado que el XHTML, se usan las mismas reglas.

HEAD

Contiene informacin que no es parte del contenido:
Ttulo
Link a hojas de estilo CSS
Scripts y links a scripts
Informacin para robots
Definicin de codificacin
Otros metadatos (palabras clave, negociacin de contenido, etc.)

Codificacin

Se refiere a la codificacin de los textos.
Va en el HEAD.
Opciones de codificacin:

Western ISO Latin 1 / Europeo Occidental
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

UNICODE
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Layout en HTML

Las etiquetas de HTML fueron originalmente pensadas para definir el contenido de
un documento. Esto es un header, Esto es un prrafo, Esto es una tabla,
utilizando las etiquetas <h1>, <p>, <table>, respectivamente. Del layout del
documento se debera ocupar el browser sin la ayuda de ninguna etiqueta de
formato.

Diseo en HTML

Para poder aplicar diseo en pginas HTML, manteniendo el contenido y la
presentacin de los documentos claramente separados, se normaliz el lenguaje
CSS.
Aplicacin de estilos: definidos en un tag XHTML utilizando el atributo style

BODY

Contenido de la pgina.
Codificacin del BODY
<body> Contenido </body>
Atributos del tag BODY
style="propiedad:valor; propiedad1:valor1; ..."

Propiedades de pgina

Fondo
background-color:#0066cc;
background-image:url(img/background.jpg);
Mrgenes
margin-left: 10px; margin-right: 10px;
margin-top: 10px; margin-bottom: 10px;
Texto
font-family: Arial, Helvetica, sans-serif;

Tipografas en la web

Se deben utilizar tipografas que estn disponibles en los distintos sistemas
operativos y que sean de buena legibilidad en pantalla
Se definen por grupos
Arial, Helvetica, sans-serif
Verdana, Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Georgia, Times New Roman, Times, serif
Courier New, Courier, monospace

BODY

Algunos tags:
<p> </p>
<br />
<h1> </h1> <h2> </h2>
<strong> </strong>
<em> </em>

Espacios en HTML
&nbsp;

Caracteres especiales

&aacute; &Aacute;
&eacute; &Eacute;
&iacute; &Iacute;
&oacute; &Oacute;
&uacute; &Uacute;
&ntilde; &Ntilde;

Texto

Prrafos
<p> Contenido del p&aacute;rrafo </p>
Ttulos
<h1> T&iacute;tulo de nivel 1 </h1>
<h2> T&iacute;tulo de nivel 2 </h2>
nfasis
<em> Importante </em>
<strong> Muy importante </strong>

Prrafo

Codificacin del tag <p>
<p> texto </p>
Atributos
id="nombre nico para el elemento"
class="clase o clases especificadas"
style="propiedad:valor; propiedad1:valor1;..."

Propiedades del prrafo

Alineacin
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
Tipografa, tamao y color
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff0000;

Salto de lnea

Codificacin del tag
<br />

Listas sin orden

<ul>
<li> elemento </li>
</ul>
Atributos
id="nombre nico para el elemento"
class="clase o clases especificadas"
style="propiedad:valor; propiedad1:valor1;..."

Listas ordenadas

<ol>
<li> elemento </li>
</ol>
Atributos
id="nombre nico para el elemento"
class="clase o clases especificadas"
style="propiedad:valor; propiedad1:valor1;..."

Propiedades de las listas ordenadas

Tipo de orden
list-style-type: decimal; (1,2,...)
list-style-type: decimal-leading-zero; (01,...)
list-style-type: lower-alpha; (a,b,c,d,e,...)
list-style-type: upper-alpha; (A,B,C,D,E,...)
list-style-type: lower-roman; (i,ii,iii,iv,v,...)
list-style-type: upper-roman; (I,II,III,IV,V,...)