HTML

Diseño de una publicación digital Curso: Nuevos medios de comunicación 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.
Firefox
Internet Explorer
Otr.

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

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

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

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

Comandos de encabezamiento
Existen 7 niveles de encabezamientos:
< H1 > Nivel de encabezamiento 1 < /H1 > Más grande
< H2 > Nivel de encabezamiento 2 < /H2 >
< H7 > Nivel de encabezamiento 7 < /H7 > Más pequeño

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)
...............
<BODY>
<BASEFONT size=4>
...........................................
</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
http://www.hypersolutions.org/pages/rgbhex.html - dirección de colores
http://www.lynda.com/ - recursos en general sobre diseño y color.

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

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

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

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

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

Imágenes
Estructura general:
< IMG src = “imagen.gif” > - archovo de imagen esta en misma carpeta que la pág. Web.
< IMG src = “subdir / imagen.gif” > - archivo de imagen esta en otra carpeta respecto la pág. Web
< IMG src = “ .. / imagen.gif” > - la pág. Web esta en otra carpeta respecto al archivo de 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 - alto de la imagen en puntos o %
width = tamaño – ancho de la imagen en puntos o %
hspace = margen – separa imagen del texto horisontalmente
vspace = margen - separa imagen del texto verticalmente

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

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

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>- celda de cabecera
Titular de tabla:
<CAPTION> Texto </CAPTION>

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

Cabecera del documento html
<html>
<head>
<meta NAME="Creator" CONTENT="Lyudmyla Yezers´ka">
<meta NAME="Subject" CONTENT="Mi Página personal">
<meta NAME="Reply-To" CONTENT="luyezer@udep.edu.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>

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

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

Frames
1. <FRAMESET> - indica como se divide ventana
<FRAMESET cols = “120, *, 100”> - subventanas verticales
<FRAMESET rows = “25%, 50%, 25%”> - subventanas horizontales
2. <FRAME> - indica propiedades de cada ventana
ej. <FRAME name=“nom” src=“mipag.html”>
name = “nombre” – indica nombre de la ventana
src = “mipag1.html” – ventana mostrara el contenido de esta página
scrolling = “yes /no / auto” – aparece o no barra de desplazamiento
border = num – indica borde que separa frames

http://cibercult.me	1035
http://iedmadrelaura.edu20.org	457
http://cibercult.wordpress.com	361
http://nmclases.pbworks.com	199
http://www.slideshare.net	9
https://si0.twimg.com	1
http://twitter.com	1
http://iedmadrelaura.madrelaura.edu20.org	1
http://translate.googleusercontent.com	1
http://www.linkedin.com	1

HTML

by Lyudmyla Yezers´ka

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 2,066

Statistics

HTML Presentation Transcript