Apunte Informática General IUNA Multimedial 2013

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

Caracteres especiales

á Á
é É
í Í
ó Ó
ú Ú
ñ Ñ

Texto

Prrafos
<p> Contenido del párrafo </p>
Ttulos
<h1> Título de nivel 1 </h1>
<h2> Tí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

Listas ordenadas

<ol>
<li> elemento </li>
</ol>
Atributos

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,...)

Apunte Informática General IUNA Multimedial 2013

Cargado por

Copyright:

Formatos disponibles

Apunte Informática General IUNA Multimedial 2013

Cargado por

Información del documento

Descripción original:

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

Apunte Informática General IUNA Multimedial 2013

Cargado por

Copyright:

Formatos disponibles

IUNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES

Licenciatura en Artes Multimediales

También podría gustarte