Diseño Web

DISEÑO WEB
PAGINA ADOBE KULER
HTML CSS JS(JAVASCRIPT)
-Contenido de -Todas las reglas de JQuery = mas fácil

pagina apariencia o diseño, de programar
-estructura color, sombra etc -Comportamiento
CLIENTE CLIENTE CLIENTE
1. Primero probar en 2 o 3 navegadores la pagina realizada, los navegadores tiene un

motor que lee el LENGUAJE html, Es un lenguaje declarativo ,java script.
a. <nombre>contenido,texto,imagen</nombre>
b. <nombre/>
REGLA 1.-LA PRIMERA ETIQUETA EN ABRIR ES LA ULTIMA EN CERRAR Y LA ULTIMA ES

EL PRIMERO EN ABRIR.
<html>
<head> encabezado(etiqueta principal van los títulos, etiquetas meta = IDIOMAS, los
scripts = funciones de java scripts que tienen el comportamiento, etiquetas link)
</head>
<body> cuerpo (todo lo que los usuarios van a ver)
</body>
</html> etiqueta principal
REGLA 2 .- NINGUN TEXTO DEBE DE IR SIN ETIQUETA
</p>para especificar
<h1> hasta <h6> encabezados
<h1> hasta <h6>encabezados solo se utiliza una vez el h1
<br/> es un enter o línea abajo hace que el siguiente texto este abajo
<hr/> línea divisor
< a href “computación.html”> para crear enlaces, al archivo al que a a ir </a>
Href = ATRIBUTO
Sitio web = conjunto de archivos que van a contener archivos html, JavaScript,
imágenes, archivos, css.
DREAMWEAVER
REGLA1 = PRIMERO GUARDAR EL ARCHIVO
REGLA2 = TODOS LOS NOMBRES DEBE DE ESTAR EN LETRAS MINUSCULAS
Index.html = la primera que se va a cargar de la pagina
ENLACES
1. ENLACES ENTRE PAGINAS DEL MISMO SITIO
SitioWeb= debe tener imágenes-css-js….html
RUTAS ABSOLUTAS CUANDO ESTA TODA LA DIRECCION DESDE LA CARPETA ORIGINAL
RUTAS RELATIVAS PORQUE HACE REFERENCIA EN EL MISMO SITIO WEB
ALT = sirve para los buscadores y pueda encontrar mas rápida la búsqueda
INSERTAR ANCLAJE CON NOMBRE
Nombre alternativo dela imagenCrea un atributo alfa importante para para que
el buscador en el navegador lo busque mas rápido de una manera mas censilla
<p Align = “Justify”/p> = para justificar el parrafo
<strong> = para que el texto este negrita
<ol type=”A”> por letras y “1”para números
<target> = en donde se abrirá el archivo descargara
<li> texto</li>
</ol> = lista ordenada orden list
width:50%; //tamaño que se mirara en la pagina
font-family: TIPO DE LETRA
CSS
HOJAS DE ESTILO EN CASCADA
FORMAS PARA CREAR REGLAS CSS
1. EN LINEA : si quiero ponerle un color de fondo de pagina modifico al
cuerpo <body style="background-color:#09F"> es un exadecimal; esto se
aplica dentro del cuerpo en línea.
2. INCRUSTADO EN EL DOCUMENTO HTML esTas reglas css se pone dentro
del encabezado del DOCUMENTO html <head>
<style type="text/css">
</style> ESTO ES COMO UN CONTENEDOR NO ES UNA REGLA
body {
background-color:#9FF;
}
</style>
Selector {
Propiedad 1: valor;
Propiedad 2:valor;
….etc
}
Desventajas
demora en cargar
Demora en hacer el mantenimiento
3. EN UN ARCHIVO CSS tienes que decir el archivo index.html tus reglas

css están en otro archivo para lo cual tenemos vincular con el archivo css
<link href="estilo.css" rel="stylesheet"> este es el codigo de vinculo
VENTAJAS
facil de modificar entendible
facil de hacer un mantenimiento de la pagina
<meta charset="utf-8"> = EL IDIOMA DE NOSOTROS EN HTML 5
Style = “margin:20px” para crear el margen del texto
TIPOS DE SELECTORES
1. TIPO ETIQUETA:
2. TIPO ID: es un identificador que no se puede repetir en el cual se le
antepone el “#” y este tipo es el que prevalece y se utiliza en un solo
elemento
.
3. SELECTOR DE TIPO CLASE: siempre se le antepone el “ ” Y se puede utilizar
en varios elementos
MARGENES
Entre un elemento y otro cuanto de espacio hay separación entre objetos
Cuando trabajamos con bordes el código css funciona como una cajita y al
comportarse como una cajitta tiene lados izquierda arriba derecho abajo
p{
border-width:1px 5px 10px 20px;
border-style:solid dotted groove ridge;
border-color:#039 #00FF99 #FF0099 #9933FF;
}
</style>
O TAMBIEN SE PUEDE APLICAR ASI PARA LOS CUATRO LADOS
p{
border-width:1px;
border-style:solid;
border-color:#039;
margin:0px; es aplicable a muchos objetos a tablas etc
hay en el parrafo
}
</style>
CADA UNO DE LOS ELEMENTOS TRABAJA COMO CAJAS y es independiente cada uno
de ellos
PADDING:
Paddin:15px; separación entre el contenido y el espacio que hay en la caja
Top: afecta el alto de la caja y tenemos que quitar al width el numero de pixeles
Cuando una etiqueta <a> no funciona como caja aparte de poner su alto y su
ancho debemos poner:
display: block Que se visualice como caja
TABLAS EN HTML
<table>
<tr> columnas
<td> </td> filas
</td></td>
</tr>
<tr>
<td></td>
</tr>

Diseño Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Web

Cargado por

Copyright:

Formatos disponibles

DISEÑO WEB

PAGINA ADOBE KULER

HTML CSS JS(JAVASCRIPT)

-Contenido de -Todas las reglas de JQuery = mas fácil

-estructura color, sombra etc -Comportamiento

CLIENTE CLIENTE CLIENTE

1. Primero probar en 2 o 3 navegadores la pagina realizada, los navegadores tiene un

REGLA 1.-LA PRIMERA ETIQUETA EN ABRIR ES LA ULTIMA EN CERRAR Y LA ULTIMA ES

<body> cuerpo (todo lo que los usuarios van a ver)

</html> etiqueta principal

REGLA 2 .- NINGUN TEXTO DEBE DE IR SIN ETIQUETA

<h1> hasta <h6> encabezados

<h1> hasta <h6>encabezados solo se utiliza una vez el h1

<hr/> línea divisor

< a href “computación.html”> para crear enlaces, al archivo al que a a ir </a>

</style> ESTO ES COMO UN CONTENEDOR NO ES UNA REGLA

3. EN UN ARCHIVO CSS tienes que decir el archivo index.html tus reglas

display: block Que se visualice como caja

También podría gustarte