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 comandos (tags o marcas) se escriben en los símbolos Los interpretes HTML no toman en cuenta: – Las tabulaciones – Los saltos de línea – Los espacios en blanco 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. Internet Explorer Google
Estructura de un documento HTML Título Texto y gráficos Nombre autor, organización, Fecha, etc... Cabecera Pie Cuerpo
Elementos compositivos de la web Elementos textuales Elementos gráficosRecursos visuales Títulos Subtítulos Encabezados Entradillas Enlaces Recursos multimedia Infografía Dibujos Galerías Fotos Vídeo Audio Frames Tablas Mapas Formularios
Formato de los caracteres Formatos físicos: –... Negrita –... Cursiva –... Subrayado –... Tachado –... Subíndice –... Superíndice –... Máquina escribir
Formato de los caracteres Formatos lógicos: –... texto con formato cita –... texto formato definición –... texto con formato código –... texto con formato teclado –... texto con formato ejemplo –... texto con formato variable –... texto con formato importante –... texto con formato énfasis – … texto preformateado
Características de párrafo Etiquetas más frecuentes: – Salto de párrafo – Salto de línea – Línea de separación –   Espacio en blanco extra entre palabras
Comandos de encabezamiento Existen 6 niveles de encabezamientos: – Nivel de encabezamiento 1 Más grande – Nivel de encabezamiento 2 – Nivel de encabezamiento 3 – Nivel de encabezamiento 4 – Nivel de encabezamiento 5 – Nivel de encabezamiento 6 Más pequeño
Etiqueta Size – atributo de tamaño de fuente – Directo: El tamaño de letra es 4 – Por incremento: Size= +n o size= -n Tamaño será 5 (3+2) – Tamaño base del documento (por defecto 3)
Etiqueta Color – atributo de color de fuente Frase de color azul Ejemplo: Frase de color rojo Códigos hexadecimales de colores básicos: Blanco:# FFFFFFAzul:#0000FF Negro:# Violeta:#9900DD Amarillo: #FFFF00Rosa:#FFDDFF Rojo:#FF0000 Verde:#00FF00
Etiqueta Face – atributo de tipo de fuente – Tipos de fuente Colores del documento en la etiqueta
Alineación de texto preformateado. Respeta espacios, saltos de línea y los retornos utilizados Separadores horizontales - cambiar ancho - alineación - espesor
Practicar:
Listas Ordenadas Introducción Primer capítulo <LI Segundo capítulo Resultado: 1. Introducción 2. Primer capítulo 3. Segundo capítulo Atributos: - inicio de la lista del número distinto de 1 - 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: Introducción La Primera Página Escribir texto
Listas No-Ordenadas Introducción Primer capítulo Segundo capítulo <UL Type = “square” <UL Type = “Circle” Listas anidadas: Mamíferos Peces Sardina Bacalao Aves
Listas de Definición Ejemplo: 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 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: yyy – xxx – destino, “target” – URL de otra página o ruta/nombre de la página – yyy – ancla “anchor” – (texto o objeto gráfico) 1. Ir a otra página en mismo proyecto 2. Ir al Yahoo 3. Ir a la marca Mi 5. Pulsa aquí para llevar manual
Imágenes Estructura general: 1. - archivo de imagen esta en la misma carpeta que la pág. Web archivo de imagen esta en otra carpeta respecto la pág. Web 3. - 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: yyy destinoancla 1. Enlace a otra página 2. Enlace imagen con otra imagen 3. Texto para enlazar con una imagen un paraíso tropical Recursos para Web:
Atributos de tag Color de fondo de Web : Imagen de fondo Color de texto 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: y Tabla esta compuesta por: – Filas que se definan: y – Celdas que se definan: y -celda normal – Celdas: y - celda de cabecera Titular de tabla: – Texto
Ejemplo Fila1 Col1 Fila1Col2 Fila2 Col1 Fila2 Col2 Fila1 Col1Fila1 Col2 Fila2 Col1Fila2 Col2
Atributos de la directiva 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 y 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 Currículo de Lyudmyla Yezerska
………………………
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 3. Insertar instrucción en la etiqueta de la imagen