Pagina web HTML

Pagina web HTML

Pagina web HTML

Pagina web HTML

 

Etiquetas HTML necesarias a la hora de hacer tu diseño de paginas web en HTML. También os voy a dejar una Guía de referencia rápida de estilos CSS. Descárgate los archivos gratis.

 

Pagina web HTML etiquetas necesarias.

 

DESCRIPCION INICIO FINAL COMENTARIOS
Obligatorias
Principio de

Documento

<html> </html> Toda la codificación debe estar incluida en estas etiquetas
Encabezado <head> </head> Dentro del encabezado se encontrará el título.
Título <title> </title> Es el texto que aparece en la barra de títulos del navegador
Cuerpo <body> </body> Cuerpo de la página
Para toda la página
Color de Fondo <body bgcolor=”#RRVVAA“>

 

 

Ver escala de Colores

Permite colocar un color uniforme de fondo a toda la página. Este color estará formado por 3 números hexadecimales que indiquen: RR = tonalidad de color rojo

VV = tonalidad del color verde

AA = tonalidad del color azul

Imagen de Fondo <body background=”nombreimagen.gif“> nombreimagen.gif deberá reemplazarse por el nombre de la imagen. Se recomienda utilizar formatos .gif o .jpg
Colores de texto color de enlaces enlaces visitados enlaces activos <body text=”#RRVVAA” Link =”#RRVVAA” Vlink =”#RRVVAA” Alink =”#RRVVAA

Ver escala de Colores

Permite definir los colores que se aplicarán en forma genérica para el texto como para los enlaces. El color está representado por un número hexadecimal
Estilos <style> </style> Permite definir un estilo de fuente, color, tamaño, etc para todo el

documento.

Meta <meta

name=”description” content=”comentarios” name=”keywords” content=”palabra1 palabra2 … palabran”>

</meta> Permite    definir    propiedades    internas    del     documento. Name = “description” content = ”Será el resumen con que se publicará en  el  buscador.  No  utilizar  más  de  25  palabras” Name = “keywords” content = “podrán definirse palabras claves para que nuestro documento sea encontrado por los buscadores”
Sonido <bgsound src=”xx.wav” loop=infinite/n>

<embed src=”xx.wav” width=200 height=55 autostart=”true” loop=”true” hidden=”true”>

Ejecuta un archivo de sonido.

xx.wav se debe reemplazar por el nombre del archivo; loop n indica la cantidad de veces que se repetirá.

La etiqueta Embed con sus propiedades, se utiliza por las incompatibilidades de los navegadores.

Con esta opción aparece una consola cuyas dimensiones se definen con Width o Height y que puede ocultarse con Hidden = “true”

Presentación de texto
Encabezamientos <h1><h2>.. <h6> </h1></h2>.. </h6> Opciones de formato de texto para encabezados,
Negrita Cursiva

Subrayado

<b>

<i>

<u>

</b>

</i>

</u>

Coloca el texto incluido con éstos formatos.
Parpadeo <blink> </blink> El texto estará parpadeante
Grande

Pequeña

<big>

<small>

</big>

</small>

Agranda el texto

Disminuye el texto

Subíndice

Superíndice

<sub>

<sup>

</sub>

</sup>

Representa el texto sobre el renglón o bajo el renglón.
Color del Texto <font color=”#RRVVAA”> </font> Permite colocar un color a la fuente. El color está representado por un número hexadecimal.
Tamaño del

Texto

<font size=”n”> </font> Define un tamaño de fuente específico. n repre-senta un número del

0 al 7 al que luego podrán agregarle los signos + o –

Tipo de fuente <font face=”nombre de fuente”> </font> Permite definir un nombre de Fuente específico.
Estilo de fuente <tt> </tt> Formato de fuente Courier de tamaño menor (Typewriter)
Texto

preformateado

<pre> </pre> Formato de fuente tipo Courier. Se representan los espacios en

blanco

Texto en Movimiento <marquee>(texto) </marquee> Permite que un texto tenga movimiento. Pueden agregarse atributos para dimensionar la marquesina, para alinear el texto, para modificar tamaño, fuente y color.
Línea Horizontal <hr=”n”> No utiliza etiqueta

de cierre

Traza un línea horizontal cuyo grosor está representado por “n”
Espacio en

Blanco

&nbsp No utiliza etiqueta

de cierre

Representa un espacio en blanco.
Comentario <!- comentario> -> Comentarios que no serán visibles en la pantalla.
Caracteres especiales Escribo      Para ver &lt;               <

&gt;              >

&amp;           &

&quot;           

&aacute;          á

&eacute;          é

&iacute            í

&oacute;          ó

&uacute;          ú

&Aacute;         Á

&Eacute;          É

&Iacute;           Í

&Oacute;         Ó

&Uacute;         Ú

&ntilde;           ñ

&Ntilde;          Ñ

&uuml;            ü

&Uuml;           Ü

&#191;           ¿

&#161;            ¡

Permiten que los caracteres especiales sean leídos por todos los navegadores en sus distintas versiones.

 

La escritura de cada carácter comienza con el signo ampersand (&) y debe terminar con punto y coma (;)

 

En esta tabla vemos como escribir algunos símbolos, signos, las letras Ñ y ñ, y las vocales acentuadas en mayúscula y minúscula.

 

Presentación de párrafos
Alineaciones <center>

<left>

<right>

</center>

</left>

</right>

Todo texto que se escriba entre estas etiquetas  sufrirá  esa alineación .
Sangría <blockquote> </blockquote> Se utiliza para destacar una cita.
Parrafo  

<p align= center*left*right*justify>

 

</p>

Realiza la separación entre párrafos, y la alineación de estos.
Renglones en blanco <br> Permite dejar renglones en blanco
Tratamiento de imágenes
Imagen Individual <img src=”nombreimagen.gif”> Permite insertar una imagen en la página que estamos diseñando. El archivo de la imagen deberá estar ubicado en la misma carpeta que

la página, caso contrario se deberá indicar su ruta de acceso

Texto de la imagen <img src=”nombreimagen.gif” alt=”texto”> Coloca un texto que podrá leerse al pasar el puntero del ratón sobre la imagen o cuando ésta no se carga.
Alineación del texto <img src=”nombreimagen.gif” align= top * middle * bottom> Indicará la posición en que ubicaremos al texto que acompaña a la imagen

Top Arriba * Middle Medio * Bottom Abajo

Ancho Alto <img src=”nombreimagen.gif” width=”n”

height=”n”>

Define el tamaño de la imagen

Width = ancho * height = altura n = será un valor en pixeles

Videos <img dynsrc=”archivi.avi”

loop=infinite controls start= mouseover>

Permite agregar archivos de video.
Listas
Lista numerada <ol type= A * a * I * i start=n>

<lh> título de la lista </lh>

<li> Primera opción

<li> Segunda opción

<li> Tercera opción

</ol> Se utiliza cuando las opciones deben ser numerados. La opción type representan número o letras y start indicará el número con que inicia.
Lista no ordenada <ul type=square * circle * disk>

<lh> título de la lista </lh>

<li> Primera opción

<li> Segunda opción

<li> Tercera opción

</ul> Se utiliza cuando las opciones no presentan un orden determinado. La opción type representa la viñeta.
Lista con sangrado <dl> <lh> título de la lista </lh>

<dt> Primer tema

<dd> Primer detalle

<dd> Segundo detalle

<dt> Segundo tema

<dd> Tercer detalle

<dd> Cuarto detalle

</dl> Se utiliza cuando las opciones llevan un título y una definición
Enlaces o Links
Enlace a otro URL <a href=”xxx“> yyy </a> xxx se debe reemplazar por la dirección URL destino del enlace.

yyy es el texto indicativo que se leerá en la página.

Enlace a un e-mail <a href = “mailto:dirección e-mail”> texto indicativo del enlace </a> Te permite un enlace directo a tu cliente de correo predeterminado
Marca para enlace dentro de la misma página (Ancla – Anchor) <a href=”#marca”> Texto de enlace al ancla </a> Referencia una posición a la que luego se accederá.
Localizar enlace

anterior

<a name=”marca”> texto del ancla </a> Enlaza una posición previamente marcada, dentro de la misma

página

Enlace a otra página con marca, dentro del

mismo sitio

<a href=”ab.htm#marca”> texto indicativo del enlace </a> Enlaza a la posición establecida en marca, en la página ab.htm
Enlace con imagenes <a href=”xxx“><img src=”nombreimagen.gif“> </a> xxx se debe reemplazar por la dirección URL destino del enlace. nombreimagen.gif se debe reemplazar por el nombre de imagen seleccionado

Enlaza a la dirección URL haciendo un click sobre la imagen.

Tablas
Definición <table> </table> Crea una tabla
Bordes Color de Bordes <table border=n bordercolor=”#RRVVAA”>

 

Ver escala de Colores

n = representa al grosor del borde. También se podrá especificar el color del borde
Separación entre

celdas

<table cellspacing=n> Las celdas podrán separarse por el n valor
Separación entre el borde y el

contenido

<table cellpadding=n> El contenido podrá estar separado del borde por el valor indicado en

n

Alto

ancho

<table height=n o porcentaje

width=n o porcentaje>

Se puede establecer un valor o un porcentaje para definir el tamaño

de la tabla

Color de Fondo o Imagen de Fondo <table bgcolor=”#RRVVAA” background=”imagen.gif”>

 

Ver escala de Colores

Se puede establecer un color de fondo de toda la tabla o colocar una imagen de fondo
Título <caption

align=top * bottom> texto del título

</caption> Posibilita colocar un título a la tabla alineado top=arriba o

bottom=abajo

Definición de filas <tr

align=left*center*right valign=top*middle*bottom bgcolor=”#RRVVAA”>

</tr> Por cada fila que tenga la tabla deberá utilizarse esta etiqueta: se

podrá establecer la alineación del contenido, la ubicación dentro de la fila y el color de fondo.

 

Definición de títulos <th align=left*center*right*justify*decimal

valign=top*middle*bottom*baseline bgcolor=”#RRVVAA”>

</th> Permite definir los nombres de las columnas.
Definición de datos o

contenidos

<td align=left*center*right*justify*decimal valign=top*middle*bottom*baseline

bgcolor=”#RRVVAA”>

</td> Coloca contenidos a cada celda
Celda que ocupa

muchas filas

<td rowspan=numero de filas> </td> Se puede combinar una celda para que ocupe muchas filas.
Celda que ocupa

muchas columnas

<td colspan=numero de columnas> </td> Se puede combinar una celda para que ocupe muchas columnas.
Formularios
Definición <form> Inicia un formulario. Se utiliza para la entrada o el envío de datos.
Acciones <form action=”mailto:direccion@email” method=post enctype=”text/plain”>Texto referente Envía la respuesta inmediatamente a la dirección especificada en formato de texto.
Introducción de datos <input type=”text”

name=”nombre del campo formulario” value=”asignación de un dato” size=”número”

maxlenght=”número”>

Ingresa un objeto dentro del formulario, se deberá definir el tipo de objeto, el nombre del campo formulario, el valor inicial que se le asigna, el tamaño máximo de visualización del campo y el tamaño máximo    de    caracteres    que    puede    tener    ese     campo.  Con el type = “text” no se asigna Value
Opciones de type button checkbox file hidden image password radio reset submit text checkbox = se visualiza un cuadro de verificación, si deseamos que aparezca       tildado                       agregamos    CHECKED. password   =   el   ingreso    se    representa    con    asteriscos. radio = visualiza botones de radio y permite que el usuario elija una opción entre varias. Se agregan tantos input como opciones deseamos.

reset = visualiza un botón que al hacerle click borrará los datos. submit = visualiza un botón que al hacerle click enviará los datos. text = crea un campo para ingresar caracteres alfanuméricos

Ingreso de un texto que ocupa muchas líneas <textarea

name=”nombre del campo formulario” rows=”cantidad de filas” cols=”cantidad de columnas”>

</textarea> Permite ingresar un texto extenso, por ejemplo comentarios
Ingreso por medio de un menú <select name=”nombre del campo formulario”>

<option>1º opción

<option>2º opción

<option>3º opción

</select> Permite optar por los datos de un menú
Frames o Marcos
Definición <frameset> </frameset> Inicia la definición de un frame.
Frames en columnas Frame en filas <frameset cols=”20%,80%”>

 

<frameset rows=”30%,70%>

Define dos frame en columnas ocupando uno el 20% de la pantalla y el otro                 el                 80%                    restante. Define dos frame en filas ocupando una el 30% de la pantalla y la

otra el 70% restante

Contenido de cada frame <frame src=”frame1.htm”>

<frame src=”frame2.htm” name=”principal”>

Define     en     que     frame     se     cargará     cada                página.

Se asignará un name en este caso principal para indicar que se visualicen allí los futuros enlaces

Destino del frame target=”principal” Se utiliza como atributo de un enlace e indica en que frame deberá visualizarse           ese                                                  enlace. “_ blank” = se abrirá una nueva ventanadel navegador y se visualizará                                                    en                                                                                    ella. “_self”   =   el   enlace    se    carga    en    el    propio    frame. “_top” = el enlace se carga a pantalla completa en la misma ventana, suprimiendo los otros frame.
Atributos del tag frameset  

border=0 frameborder=0 framespacing=0

Border = 0 indica que no habrá huecos de separación entre frames (para                 Netscape).

frameborder = 0 indica que no habrá borde de separación entre frames.

framespacing = 0 indica que no habrá huecos de separación entre frames (para Explorer).

Atributos del tag frame frameborder=”no” marginheight=”número” marginwidth=”número” name=”nombre del frame” noresize scrolling=”yes/no/auto” src=”dirección.htm” Frameborder  =  elimina  los  bordes  de   un   frame   marginwidth y marginheight = definen el ancho y alto de los margenes                             del                                                 frame. name = define el nombre del frame.

Noresize = indica que el fram  no  podrá  redimensionarse.  scrolling  =  inidca  si  tendrá  o  no  barra  de   desplazamiento.   src = indica el contenido del frame.

Si el frame no puede visualizarse <noframes> </noframes> Si el navegador no cuenta con la posibilidad de incluir Frames, con este tag puede definirse una dirección alternativa. Se coloca luego de los tag FRAME y llevan dentro un texto definifo entre los tag

<body> </body>

 

CSS. Guía de referencia rápida

     Propiedad / Valor                                        

 

Cajas
border (border-left, border-bottom, border-right, border-top)

border-width | border-style | border-color

 

 

 

width height

 

 

 

 

 

margin     border    padding

border-width (border-left-width; border-top-width; border-right-width; border-bottom-width)

   thin | medium | thick | longitud                                                                                                              

border-color (border-left-color; border-top-color; border-right-color; border-bottom-color)

color

border-style (border-left-style; border-top-style; border-right-style; border-bottom-style)

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

margin (margin-top; margin-right; margin-bottom; margin-left)

auto | longitud

padding (padding-top; padding-right; padding-bottom; padding-left)

longitud

 

 

list-style *

   list-style-type  | list-style-position | list-style-image                                

list-style-image *

   none | url                                                                                                

list-style-position *

   inside | outside                                                                                          

list-style-type *

none | disc | circle | square | decimal | decimal-leading-zero | lower- roman upper-roman | lower-alpha | upper-alpha | lower-greek

lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic

| hiragana | katakana | hiragana-iroha | katakana-iroha

background

background-color | background-image | background-repeat | background-

   attachment    | background-position                                                               

background-attachment

   scroll | fixed                                                                                               

background-color

   Color | transparent                                                                                   

background-image

   url | none                                                                                                

background-position

top left | top center | top right | center left | center center | center right

   | bottom left | bottom center | bottom right | x-% y-% | x-pos y-pos                        

background-repeat

repeat | repeat-x | repeat-y | no-repeat

 

Pagina web HTML

Descárgate los dos pdf.

Pagina web HTML

No Comments

Sorry, the comment form is closed at this time.