Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
DISENO WEB I - Introducción al HTML
79
Jorge Eduardo Marin Tobon
Docente Unitécnica
Manizales
Diseño Web I
Introducción al HTML: Reconocimiento de etiquetas básicas
<html> <head> <body> <footer> <div> <title>
PSD a DW
de Photoshop a Dreamweaver Parte1.
Para iniciar el proceso de pasar el diseño de la pagina “look gráfico” a el lenguaje html, es necesario definir las áreas de los diferentes elementos que componen mi diseño final.
- Para esto se debe tener en cuenta que cada objeto puede ir en un contenedor independiente, y este contenedor a su vez puede ir dentro de otros contenedores.
- Con esta lógica podemos agrupar varios objetos dentro de un contenedor maestro y así tener subdividida la página y sus contenidos para una mejor manipulación.
PSD a DW
de photoshop a dreamweaver
Módulo C
LOOK GRÁFICO
LOOK GRÁFICO
El Look gráfico es el diseño ya definido visualmente en un programa graficador.
Es la composición de los elementos textos, imágenes, fotos, colores, botones, iconos, logos, entre otros elementos que le dan carácter visual a la página.
DEFINIR ÁREAS
DEFINIR ÁREAS
- Analizamos las divisiones y subdivisiones posibles en el look gráfico, definiendo los objetos que contiene y asignando un área delimitada por una forma rectangular con color provisional.
- Jugamos con contenedores que pueden tener grupos de contenedores internamente, agrupando segmentos de información.
CONTENEDORES COLORES
CONTENEDORES COLORES
El esquema de colores resultado de delimitar las áreas de los elementos que componen la página con marcos de colores.
- Permite tener mayor claridad de las dimensiones de mi pagina los espacios que debo configurar en lineas de código inicialmente con las etiquetas <div> que son mis contenedores.
- Este esquema también va proporcionar información referente distancias, bordes, medidas, entre varias variables datos que me ayudaran a construir el "wireframe" (esqueleto/estructura) de la página.
WIREFRAME HTML
WIREFRAME
¿Que son las etiquetas html?
<TAG'S> Etiquetas
Módulo B
- Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML.
- Existen gran variedad de etiquetas para distintos usos y fuciones dentro de la sintaxis.
- En HTML existen etiquetas de apertura y etiquetas de cierre:
<etiqueta> es la etiqueta de apertura
</etiqueta> es la etiqueta de cierre
Estructura
Estructura de una Etiqueta
Tipos de Etiquetas
Tipos de Etiquetas
Las etiquetas dependiendo de la función que van a desempeñar tiene un nombre particular; existen etiquetas para todo tipo de elementos como imágenes, contenedores, textos, botones, entre otros.
Algunos de estas etiquetas son de uso más reiterado que otras por la función que desempeñan en el código.
Etiquetas Globales
Etiquetas Contenedores
Contenedores HTML
<div>
- El elemento <div> es un contenedor a nivel de bloque para otros elementos como otros contenedores.
- Por sí mismo, no tiene significado alguno a nivel presentacional o semántico, exceptuando que, al ser un elemento a nivel de bloque, los navegadores mostrarán un quiebre de línea antes y después de su contenido.
- Adquieren su potencial al ser usados conjuntamente con hojas de estilo CSS, ya que resultan muy útiles para asignar atributos de presentacion a bloques enteros de contenido.
- Otro uso útil para este elemento, y tal vez el más importante, es el de establecer la distribución o el diseño (layout) del documento. Establece el diseño del documento y la distribución del contenido.
div ID
id (name) /// id(nombre)
- El atributo "id" asigna un identificador al elemento asociado.
- Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).
div class
class (attribute) /// class (atributo)
- El atributo "class" asigna un nombre(s) de clase al elemento contenedor. Es usado junto con hojas de estilos CSS y le dice al navegador la clase (o clases) a las que el elemento está asociado.
- Este identificador puede ser unico o grupal en todo el documento.
Etiquetas Elementos
- En esta imagen explicaremos las diferentes etiquetas básicas que debemos conocer para iniciar nuestra programación en html.
- Cada etiqueta está explicada brevemente y se muestra su estructura para mayor claridad.
- Recuerden memorizar estos elementos para comenzar dominar la programación de estructura inicial.