Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tutorial html

235 views

Published on

Universidad Tecnica de Ambato
F.I.S.E.I.
Tutorial HTML
by: Ricardo Pazmiño
Segundo Sistemas "A"

Published in: Education
  • Be the first to comment

  • Be the first to like this

Tutorial html

  1. 1. Estructura de un documento HTMLLos documentos escritos en HTML están estructurados en dos partesdiferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>).Entre las marcas del elemento <HEAD> se podrán utilizar los siguienteselementos:<TITLE> para dar nombre al documento;<META> para forzar a la página activa a ser cargada cada cierto tiempo.<BASE> para prefijar la dirección base de los documentos referenciadosmediante un URL relativo.
  2. 2. HEAD, TITLE, META, BASELa cabecera se emplea para facilitar información acerca del documento y estádelimitada por <HEAD> prólogo </HEAD>. Normalmente esta información no seve cuando se navega por el documento.A continuación se muestra un ejemplo del formato mínimo de la cabecera. <HTML> <HEAD> <TITLE> Aqui va el nombre del documento </TITLE> </HEAD> Cuerpo del documento ... </HTML>
  3. 3. BODYEl resto del documento, o sea, todo aquello que no pertenezca a la cabecera,residirá entre <BODY> y </BODY>. Esta es la estructura mínima que debeposeer todo documento HTML: <HTML> <HEAD> <TITLE>Estructura mínima de un documento HTML</TITLE> </HEAD> <BODY> Documento ... </BODY> </HTML>
  4. 4. ComentariosEn el código fuente de una página HTM, los comentarios se introduciránentre las marcas: <!-- y -->. Todo texto situado entre dichas marcas seráignorado por el browser, y por tanto no será visible.Ejemplo:<!-- Esto es una línea de comentarios -->
  5. 5. Separadores de bloques de texto Párrafos <P> Saltos de línea <BR> Bloques tabulados <BLOCKQUOTE> Línea horizontal <HR> Divisiones <DIV> Texto prefomateado <PRE> Direcciones <ADDRESS> Centrado de bloques <CENTER>
  6. 6. Tipos de letras Cabeceras <Hn> Tamaño, color y tipo de letra <FONT> Tamaño por defecto de la letra <BASEFONT> Estilos de caracteres
  7. 7. Colores Texto de colores <FONT> Colores del entorno (fondo, texto y enlaces) <BODY> Tabla de códigos de colores
  8. 8. Hiperenlaces Explicaciones sobre los hiperenlaces Definición de ancla <A> Ancla de partida El atributo HREF Ancla de llegada El atributo NAME Apertura de una nueva ventana El atributo TARGET Enlaces a puntos internos a un documento Aplicación a notas al pie de página Aclaraciones sobre los enlaces Servicios de Internet (otros URL)
  9. 9. Tablas Definición de la tabla <TABLE> Marca de comienzo de una nueva fila <TR> Marca de comienzo de una nueva celda <TD> Celdas con texto de cabecera <TH> Tablas con título <CAPTION> Ejemplos I Ejemplos II Pequeño tutorial de tablas
  10. 10. Formularios Introducción Atributos comunes Marca de comienzo y fin <FORM> Campos de entrada de texto y botones <INPUT> Listas de selección <SELECT> Ventanas de texto con barras de desplazamiento <TEXTAREA> Ejemplo Tabla de códigos hexadecimales del Netscape para Windows
  11. 11. Imágenes Introducción Inserción de imágenes <IMG> Alineación de imágenes El atributo ALIGN Extensiones del Netscape para la alineación de imágenes Imágenes como fondo de página <BODY> Imágenes como marcas de una lista <IMG> <DL> Animaciones Imágenes y enlaces <IMG> <A> Imágenes mapeadas <IMG> <MAP> <AREA>
  12. 12. Símbolos ¿Por qué hay que usar códigos? Tabla de símbolos

×