Más contenido relacionado
Similar a Diseño de pagina web HTML y Codigos de colores
Similar a Diseño de pagina web HTML y Codigos de colores (20)
Último
Último (20)
Diseño de pagina web HTML y Codigos de colores
- 1. Diseño de página Web HTML Elaborado por: Ing. Gabriel Hernández 1 Entre las etiquetas <HTML> y</HTML> está comprendido el resto del código HTML de la página <HTML> <HEAD> <TITLE> CURSODE HTML </TITLE> </HEAD> <BODY> : : </BODY> </HTML> El cuerpo del documento contiene la información propia del documento (el texto de la página, las imágenes, los formularios, color o la imagen de fondo de la página, etc. <body bgcolor="#0000FF"> <body bgcolor="blue"> <body background="fondo.gif"> <body background="imagenes/fondo.gif"> <body text="#FF0000"> <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > ETIQUETA BODY Y SUS ATRIBUTOS Nota: 1. bgcolor sirve para cambiar el color de fondo de la página web. backcolor sirve para colocar una imagen de fondo en la página web. Text sirve para colocar color a todo el texto de la página. leftmargin, topmargin, marginwidth, marginheight para colocar márgenes a la página. Las cabeceras o encabezados se utilizan para resaltar los títulos de un párrafo y van desde H1 hasta H6. H1 es el texto más grande y H6 el texto más pequeño Listas Ordenadas Son aquellas que ordenan la lista anteponiendo números, letras o signos. Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los ítems de la misma, utilizamos la etiqueta <li>. Ejemplo Vamos a crear una lista ordenada Estructura de una página Web La cabecera de un documento HTML está delimitado por las etiquetas <HEAD> y </HEAD>, en esta se incluirán las definiciones generales que afectarán a todo el documento. Todas sus etiquetas son opcionales y se utilizarán solo en casos muy determinados, solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos. La etiqueta <TITLE>, debe ser usada dentro de las etiquetas que definen la cabecera de la siguiente forma: <HEAD> <TITLE>Titulo del documento HTML</TITLE> </HEAD> ENCABEZADOS O CABECERAS Nos definen el tamaño de un título o cabecera. <H1> nos da el tipo de letra más grande. <H6> nos da el tipo de letra más pequeño. “LAS LISTAS” Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Tenemos tres tipos de listas: Ordenadas. Desordenadas. De definición. Código <ol> <li>Naranjas</li> <li>Manzanas</li> <li>Bananas</li> </ol> Resultado 1. Naranjas 2. Manzanas 3. Bananas
- 2. Diseño de página Web HTML Elaborado por: Ing. Gabriel Hernández 2 Listas Desordenadas Exponen la lista anteponiendo un punto, cuadrado o triángulo negro. Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>. Ejemplo Dentro de cada Ítem se pueden agregar imágenes, párrafos, otras listas, etc. Código <ul> <li>Tomates</li> <li>Pepinos</li> <li>Cebollas</li> </ul> Resultado Tomates Pepinos Cebollas Listas de definición Se utilizan para definir términos. Las listas de definición se representan con la etiqueta <dl>. Los términos de las mismas con <dt>. La definición de esos términos comienza con <dd>. Ejemplo Código <dl> <dt>Chocolate</dt> <dd>Elaborado a base de cacao</dd> <dt>Caramelo</dt> <dd>Elaborado a base de azúcar</dd> </dl> Resultado Chocolate Elaborado a base de cacao Caramelo Elaborado a base de azúcar Dentro de las etiquetas <dd> se pueden agregar imágenes, párrafos, otras listas, etc. LAS IMÁGENES Para insertar imágenes en un sitio usaremos la etiqueta <img>. Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación del archivo de la imagen. El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razón, no muestre la misma. La etiqueta <img> no tiene cierre. Sintaxis <img src="/URL" alt="texto descriptivo"> Ejemplo Código <img src="/imagenes/foto1.jpg" alt="Dos niñas de la mano"> Resultado Etiquetas y atributos de las imágenes Etiquetas Atributos Valor Descripción <IMG> Alt (Requerido) text Breve descripción de la imagen. Src (Requerido) URL Dirección URL de la imagen a mostrar. align top Alínea la imagen de acuerdo al texto circundante.bottom
- 3. Diseño de página Web HTML Elaborado por: Ing. Gabriel Hernández 3 <IMG> middle left right border pixels Define el borde alrededor de la imagen. Use las propiedades de los bordes de CSS en su lugar. height pixels Define la altura de la imagen. ETIQUETA FONT Y SUS ATRIBUTOS Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta: Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor Por ejemplo, para insertar el texto: Bienvenidos a mi pagina web Habría que escribir: <FONT color="#993366" size="4" face="Arial black"> Bienvenidos a mi pagina web</FONT> LA ETIQUETA <P>, </P> Aunque no la hemos definido formalmente, la etiqueta <p> la hemos usado desde nuestra primera página web, esta etiqueta sirve para indicar el comienzo y fin de un párrafo, generalmente se usa dentro de la etiqueta <body> Atributos de la Etiqueta <p> Atributo Función align= "alineación" Señala la alineación del texto dentro de la página, esta puede ser: LEFT (para izquierda), RIGHT (para derecha) y CENTER (para centrarlo)
- 4. Diseño de página Web HTML Elaborado por: Ing. Gabriel Hernández 4 INSERTAR CARACTERES ESPECIALES Si lo que queremos es insertar caracteres especiales tales como las tildes de las vocales debemos seguir los siguientes pasos: Carácter Representación < < > > á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ ™ ™
- 5. Diseño de página Web HTML Elaborado por: Ing. Gabriel Hernández 5 COLORES HEXADECIMALES