Diseño de una publicación digital

Curso: Medios digitales
Dra. Lyudmyla Yezers´ka

Lenguaje HTML


HTML – Hyper Text Markup Lenguage – Lenguaje de Marcas
para Hipertexto
Documento HTML – es un archivo de texto
Los interpretes HTML no toman en cuenta:



Las tabulaciones
Los saltos de línea
Los espacios en blanco

Los comandos (tags o marcas) se escriben en los símbolos < >
Símbolo & se usa para escribir caracteres especiales (símbolos
matemáticos, comerciales, acentos...)

Lenguaje HTML

Para empezar el diseño de un site:

Tener una idea de lo que quieres hacer

¿ Que necesitas ?

Un editor de textos simple – Bloc de Notas – para escribir código
HTML
Un navegador de Internet (Browser) para visualizar la Página Web.


Netscape
Internet Explorer
Otr.

................. </ADDRESS> </BODY> </HTML> Pie .Estructura de un documento HTML <HTML> Cabecera <HEAD> <TITLE> Título </TITLE> </HEAD> Cuerpo <BODY> Texto y gráficos . Fecha... etc.. organización.. <ADDRESS> Nombre autor.

Elementos compositivos de la web Elementos textuales Títulos Subtítulos Encabezados Entradillas Elementos gráficos Recursos visuales Enlaces Infografía Recursos multimedia Frames Fotos Tablas Galerías Mapas Dibujos Formularios Audio Vídeo .

... < /TT > Máquina escribir .Formato de los caracteres  Formatos físicos: – – – – – – – < B > ... < /U > Subrayado < S > .. < /SUB > Subíndice < SUP > ...< /B > Negrita < I > ... < /SUP > Superíndice < TT > .... < /S > Tachado < SUB > .. < /I > Cursiva < U > .

. < /CODE > texto con formato código < KBD > .< / CITE > texto con formato cita < DFN > ... < /VAR > texto con formato variable < STRONG > ... < /ADDRESS > texto con formato énfasis <PRE> … </PRE> texto preformateado .......... < /KBD > texto con formato teclado < SAMP > .Formato de los caracteres  Formatos lógicos: – – – – – – – – – – < CITE > . < /STRONG > texto con formato importante < EM > . < /DFN > texto formato definición < CODE > . < /EM > texto con formato énfasis < ADDRESS > ... < /SAMP > texto con formato ejemplo < VAR > ...

Características de párrafo  Etiquetas más frecuentes: – <P> Salto de párrafo – < BR > Salto de línea – < HR > Línea de separación – &nbsp Espacio en blanco extra entre palabras .

Comandos de encabezamiento  Existen 6 niveles de encabezamientos: – – – – – – < H1 > Nivel de encabezamiento 1 < /H1 > Más grande < H2 > Nivel de encabezamiento 2 < /H2 > < H3 > Nivel de encabezamiento 3 < /H3 > < H4 > Nivel de encabezamiento 4 < /H4 > < H5 > Nivel de encabezamiento 5 < /H5 > < H6 > Nivel de encabezamiento 6 < /H6 > Más pequeño .

......... <BODY> <BASEFONT size=4> ............................Etiqueta <FONT>  Size – atributo de tamaño de fuente – – Directo: <FONT size=4> El tamaño de letra es 4 </FONT> Por incremento: Size= +n o size= -n  – <FONT size=+2> Tamaño será 5 (3+2) </FONT> Tamaño base del documento (por defecto 3) ............... </BASEFONT> </BODY> .......

Etiqueta <FONT>  Color – atributo de color de fuente <FONT color = “blue”> Frase de color azul </FONT> <FONT color = “#0000FF”> Frase de color azul </FONT> Ejemplo: <FONT color = “red” size=5 > Frase de color rojo </FONT> Códigos hexadecimales de colores básicos: Blanco: # FFFFFF Azul: #0000FF Negro: # 000000 Violeta: #9900DD Amarillo: #FFFF00 Rosa: #FFDDFF Rojo: #FF0000 Verde: #00FF00 .

Extraer colores de una Web http://webcolourdata.com/ .

Extraer colores de una Web Extensión de Chrome: ColorZilla .

Color Encyclopedia http://www.colorhexa.com/ .

.......Etiqueta <FONT>  Face – atributo de tipo de fuente –  <FONT face = “Comic Sans MS.... Helverica”> Tipos de fuente </FONT> Colores del documento en la etiqueta <BODY> <BODY BGCOLOR = “#FFFFFF” TEXT = “#FF0000” LINK = “#00AEFF” > . </BODY> .. Arial....

</P> <P ALIGN = CENTER> ........cambiar ancho <HR WIDTH = 50% ALIGN = LEFT> .alineación <HR SIZE = 20 > . Respeta espacios... </P> <CENTER> ....espesor ...Alineación de texto       <P ALIGN = LEFT> .. saltos de línea y los retornos utilizados Separadores horizontales <HR WIDTH = 75%> . </CENTER> <pre> preformateado... </P> <P ALIGN = RIGHT> .

Listas Ordenadas <OL> <LI> Introducción <LI> Primer capítulo <LI Segundo capítulo </OL>  1. Romana minúsculas A – letras mayúsculas a – letras minúsculas  . Romana mayúsculas i – numer.numeración romana Valores para TYPE: I – numer. 2. Resultado: Introducción Primer capítulo Segundo capítulo Atributos: <OL START= 4> . 3.inicio de la lista del número distinto de 1 <OL TYPE = I > .

 Ejemplo: < OL Type = I > < LI > Introducción < LI > La Primera Página < LI > Escribir texto < /OL > .

Listas No-Ordenadas <UL> <LI> Introducción <LI> Primer capítulo <LI> Segundo capítulo </UL>   <UL Type = “square” <UL Type = “Circle” Listas anidadas: <UL> <LI> Mamíferos <LI> Peces <UL> <LI> Sardina <LI> Bacalao </UL> <LI> Aves </UL>  .

Listas de Definición Ejemplo: <DL> <DT> Introducción <DD> Breve introducción al lenguaje <DT> La primera página <DD> Como hacer la primera página <DT> Escribir texto <DD> Empieza a dar formato al texto </DL> Resultado: Introducción Breve introducción al lenguaje La primera página Como hacer la primera página Escribir texto Empieza a dar formato al texto .

.... 5... xxx – destino. 2.. 4.. <A Name= “marca”> </A> <A HREF= “mailto: luyezer@gmail..zip”> Pulsa aquí para llevar manual </A> ...........html”>Ir a otra página en mismo proyecto</A> <A HREF= “http://www. “target=“_blank” | “_self” – URL de otra página o ruta/nombre de la página yyy – ancla “anchor” – (texto o objeto gráfico) <A HREF= “otrapag....com”> Mi E-Mail </A> <A HREF= “manual.......com”>Ir al Yahoo</A> <A HREF= “#marca”>Ir a la marca</A> .. 3..Enlaces Estructura general:<A HREF = “xxx” > yyy </A>  – – 1.yahoo.

< IMG src = “ . Estructura general: < IMG src = “imagen.. Web.la pág.Imágenes  1. Web esta en otra carpeta respecto al archivo de imagen .gif” > .gif” > .archivo de imagen esta en la misma carpeta que la pág.archivo de imagen esta en otra carpeta respecto la pág.gif” > . 2. Web 3. < IMG src = “subdir/imagen. / imagen.

Atributos de Imágenes        alt = “Texto” – mostrar texto de ayuda al poner mouse align = TOP / MIDDLE / BOTTOM – alinea texto border = tamaño – tamaño del borde height = tamaño .separa imagen del texto verticalmente .alto de la imagen en puntos o % width = tamaño – ancho de la imagen en puntos o % hspace = margen – separa imagen del texto horizontalmente vspace = margen .

areas.gif”> </A> 2.html” > yyy </A> destino ancla 1.Ejemplos: <A HREF = “xxx.net/colorvivo/home. Enlace imagen con otra imagen  < A HREF = “casa.htm . Enlace a otra página  <A HREF = “mipag2.jpg” > <IMG SRC = “casa.gif” > </A> 3.gif” > un paraíso tropical </A> Recursos para Web: http://www. Texto para enlazar con una imagen  < A HREF = “isla.html”> <IMG SRC = “isla.

.  </BODY> Imagen de fondo <BODY background = “image.....Atributos de tag <BODY>  Color de fondo de Web: <BODY bgcolor = “aqua” > ......gif” > .... Color de enlaces LINK = “color” – color de vinculo VLINK = “color” – color de vínculos visitados ALINK = “color” – color de vínculos activos  </BODY> .....  </BODY> Color de texto <BODY bgcolor = “aqua” text = “orange” > ..

celda de cabecera Titular de tabla: – <CAPTION> Texto </CAPTION> .Tablas   Para insertar la Tabla: <TABLE> y </TABLE> Tabla esta compuesta por: – – –  Filas que se definan: <TR> y </TR> Celdas que se definan: <TD> y </TD>-celda normal Celdas: <TH> y </TH>.

Ejemplo <TABLE > <TR> <TD>Fila1 Col1</TD> <TD>Fila1Col2</TD> </TR> <TR> <TD >Fila2 Col1</TD> <TD> Fila2 Col2</TD> </TR> </TABLE> Fila1 Col1 Fila1 Col2 Fila2 Col1 Fila2 Col2 .

Atributos de la directiva <TABLE> border = num – ancho de borde de la tabla en puntos cellspacing = num – espacio en puntos que separa las celdas que estan dentro de la tabla cellpadding = num – espacio en puntos que separa el borde de la celda y el contenido width = num o % – anchura de la tabla height = num o % – altura de la tabla bgcolor = código de color – color de fondo de la tabla .

Atributos de las directivas <TD>y <TH> align = LEFT / CENTER / RIGHT / JUSTIFY – alineación horizontal del contenido de la celda valign = TOP / MIDDLE / BOTTOM – alineación vertical del contenido de la celda rowspan = num – número de filas que ocupará la celda colspan = num – número de columnas que ocupará la celda width = num o % – anchura de la columna height = num o % – altura de la columna bgcolor = código de color – color de fondo de elemento de la tabla .

pe"> <meta NAME="Publisher" CONTENT="Facultad de Comunicacion. UDEP"> <meta NAME="keywords" CONTENT="palabras clave para el buscador "> <title> Currículo de Lyudmyla Yezerska </title> </head> .Cabecera del documento html <html> <head> <meta NAME="Creator" CONTENT="Lyudmyla Yezerska"> <meta NAME="Subject" CONTENT="Mi Página personal"> <meta NAME="Reply-To" CONTENT="luyezer@udep.edu.

Helvetica"> ……………………… </body> </html> . Arial.gif" BGCOLOR="F7E7DE" TEXT="#000000" LINK="#6666bb" ALINK="#0000ff" VLINK="9955566" FACE="Verdana.<body BACKGROUND="rt/fon.

y3 x1.0 x1. y1 x2.jpg 0.Mapas Para transformar una imagen en mapa sensible. y1 x2. y2 x1. y4 . y1 x4. Reconocer las coordenadas interns de los sectores activos de la imágen menu. y2 radio x3. hay que hacer 3 tareas: 1.

Definición de zonas. luego de < body > <MAP name = “mi_mapa”> <AREA shape = “rect” coords = “21. 101. 138” href= “rectan. 28.jpg” USERMAP = “ # mi_mapa” > . 62.Mapas 2. 21” href= “circ. 1” href= “polig.html” > <AREA shape = “circle” coords = “80.html”> < / MAP> 3. 76. Confección de “mapa” de direcciones. 57. 62. Insertar instrucción en la etiqueta de la imagen <IMG src = “ menu.html” > <AREA shape = “poly” coords = “2. (Al principio del documento. 35.