HTML
- 1. Diseño de una publicación digital Curso: Nuevos medios de comunicación Dra. Lyudmyla Yezers´ka
- 2. 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...)
- 3. 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.
- 4. 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
- 5. 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
- 6. 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
- 7. 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
- 8. Comandos de encabezamiento Existen 7 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 > < H7 > Nivel de encabezamiento 7 < /H7 > Más pequeño
- 9. 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>
- 10. 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.
- 11. 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>
- 12. 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
- 13. 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
- 14. Ejemplo: < OL Type = I > < LI > Introducción < LI > La Primera Página < LI > Escribir texto < /OL >
- 15. 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>
- 16. 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
- 17. 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>
- 18. 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
- 19. 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
- 20. 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
- 21. 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
- 22. 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>
- 23. 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
- 24. 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
- 25. 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
- 26. 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>
- 27. <body BACKGROUND="rt/fon.gif" BGCOLOR="F7E7DE" TEXT="#000000" LINK="#6666bb" ALINK="#0000ff" VLINK="9955566" FACE="Verdana, Arial, Helvetica"> ……………………… </body> </html>
- 28. 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
- 29. 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” >
- 30. 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