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>

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

………………………

</body>

</html>

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

HTML

0 comments

Notes on slide 1

1 Favorite

HTML - Presentation Transcript

More by user

More info about this document

Categories

Tags

HTML

0 comments

Notes on slide 1

1 Favorite

HTML - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories

Tags