DISEÑO DE PAGINAS WEB Servi-websting “robert” agosto, 2010 teól-informático Roberto romero • HTML (HiperText Markup Language) • El cuerpo del documento • Caracteres especiales • Imágenes • Alineación y formato de texto • Listas • Enlaces • Tablas • Formularios • Tipos de controles • Maquetación INTRODUCCIÓN AL HTML
CURSO PRACTICO Y SENCILLO PARA APRENDER EL LENGUAJE HTML, PARA APRENDICES.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
• HTML (HiperText Markup Language) • El cuerpo del documento• Caracteres especiales• Imágenes• Alineación y formato de texto• Listas• Enlaces• Tablas• Formularios • Tipos de controles• Maquetación
Etiqueta: un código que se inserta en el contenido del documento para determinar la estructura del mismo (<TAG> y </TAG>).
Atributo: aporta información adicional que modifica el comportamiento de las etiquetas (atributo="valor").
Navegador: Programa especializado en evaluar las etiquetas y el contenido de un documento HTML y de mostrarlo conforme a las posibilidades del sistema. También se encarga de solicitar nuevos documentos según HTTP.
<HTML><HEAD> <! esto es la cabecera del documento > <META NAME=valor CONTENT=contenido> <TITLE> Aquí va el titulo del documento</TITLE> <link rel="stylesheet" type="" text/css="" href="estilos/css.css“> <script language="JavaScript" type="text/javascript" src="validacion.js"> </script> </HEAD> <BODY> <! este es el cuerpo del documento > </BODY></HTML>
•En la práctica este par de etiquetas puede parecer opcional, sobre todo la de cierre, pues muchos navegadores admiten documentos sin ella, pero esto puede confundir a otros navegadores que rechazarán la página Web o la mostrarán de manera impredecible.
•Cualquier etiqueta del documento debe aparecer entre el par de etiquetas <HTML> y </HTML>.
•HTML permite definir 6 niveles de encabezados, siendo el 1 el más importante.
•Los browsers utilizan un tipo de letra mayor y más negrita para un nivel que para el siguiente.
•Un encabezado ocupa siempre una línea en exclusiva.
•Sirven para simular los títulos de capítulos, secciones, etc. pero no determinan que los párrafos que les siguen pertenezcan a capítulo o sección alguna.
•El mismo efecto se puede conseguir con <I> y <B> pero perdemos el significado estructural de que queremos enfatizar algo, quedándonos exclusivamente en la forma física final.
<OL><LI> item 1 </LI><LI> item 2 </LI>...<LI> item n </LI></OL>
•Se puede controlar el número inicial de la serie: <OL start=numero>.
•También se puede elegir el conjunto de caracteres que identifica cada item en la lista: <OL type=tipo>, con tipo a elegir entre 1 para arábico, a o A para alfabético e i o I para romano.
•Un formulario es una manera que provee HTML para interactuar con el usuario quien necesita procesar cierta información.
•Es una sección de un documento que contiene texto, etiquetas, elementos especiales llamados controles con sus etiquetas a través de los cuales se recopila la información deseada.
•Generalmente el procesamiento de la información se realiza en el servidor web, pero también se puede enviar la información a un correo electrónico.
Especifica el método utilizado para enviar los datos
Get (valor por defecto) los datos a enviar se añaden al URL (valor del atributo action) separados por el símbolo “?”, se usa generalmente cuando se desea hacer consulta del servidor.
Post los datos introducidos se incluyen en el cuerpo del formulario y se los envía. Se usa generalmente para procesos de actualización de datos.
Tipos de controles• Campos de texto o contraseña• Campos áreas de texto• Casillas de verificación (checkbox)• Botones de opción (radiobuttons)• Campo de selección (combobox )• Botones
Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.
<div style="color:#000099; font-weight:bold"> <h3>Estas etiquetas van en <i>azul y negrita</i></h3> <p> Seguimos dentro del DIV, luego permanecen los etilos </p> </div>
Estilo definido para toda una página <html><head> <title>Ejemplo de estilos para toda una página</title> <STYLE type="text/css"> <!-- H1 {text-decoration: underline; text-align:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm} // --> </STYLE></head> <body><h1>Página con estilos</h1> Bienvenidos...<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p></body> </html>
<html><head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>Página que lee estilos</title></head><body><h1>Página que lee estilos</h1>Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil.<br><br><table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td></tr> <tr> <td>La segunda fila del TD</td> </tr></table></body></html>
<html><head> <title>Ejemplo de la utilización de clases</title> <STYLE type="text/css"> .fondonegroletrasblancas {background-color:black;color:white;font-size:12;font- family:arial} .letrasverdes {color:#009900} </STYLE></head><body><h1 class=letrasverdes>Titulo 1</h1> <h1 class=fondonegroletrasblancas>Titulo 2</h1><p class=letrasverdes> Esto es un párrafo con estilo de letras verdes</p><p class=fondonegroletrasblancas> Esto es un párrafo con estilo de fondo negro y las letras blancas. Es todo!</p></body></html>
MAQUETACIÓN
DISEÑO DE PAGINAS WEB
Estilo en los enlaces<html><head> <title>Ejemplos de estilo en enlaces</title> <STYLE type="text/css"> A:link {text-decoration:none;color:#0000cc;} A:visited {text-decoration:none;color:#ffcc33;} A:active {text-decoration:none;color:#ff0000;} A:hover {text-decoration:underline;color:#999999;font-weight:bold} </STYLE></head><body><a href="http://dominioinexistente.nofunciona.com">Enlace normal</a><a href="enlaces.html">Enlace visitado</a>Pulsar este enlace para verlo activo, poner el ratón por encima para que cambie.</body></html>