ETIQUETAS
<HTML> y </HTML>
Contienen por completo el código HTML en el documento. Instruyen a los navegadores para que procesen el código que se encuentra dentro de estas etiquetas.
<HEAD> y <HEAD>
Etiqueta que define la sección de encabezado, y puede manipular una serie larga de valores de información especializada
<TITLE> y </TITLE>
Etiqueta de que muestra su contenido en la barra de Titulo, no hay limite para la longitud de un titulo, pero es buena practica el uso de títulos de una sola frase de 60 o menos caracteres, él titulo es el elemento que guardan los navegadores cuando el usuario crea un marcador o agrega su pagina a la carpeta de favoritos. Mas aun, los rastreadores de Red (Web crawlers) y otras herramientas de búsqueda automática utilizan los títulos para ayudar a los usuarios a localizar información en la red.
<BODY> y </BODY>
sección principal que contendrá la mayoría de los códigos HTML, tiene algunos argumentos para modificar la aparciencia del del documento como BACKGROUND=, BGCOLOR=, TEXT=, ENLACE=, ALINK=, VLINK
<BR>
Inserta una línea en blanco
<Hr>
Argumentos:
ALIGN=CENTER ALIGN=LEFT ALIGN=RIGHT
NOSHADE (Sin sombra) SIZE= # WIDTH= # (%)
COLOR= ######
Inserta una línea horizontal, (Regla horizontal)
<P> y </P>
Formatea un párrafo
<!—[Este es un comentario]-->
Inserta un comentario que no se mostrara en el explorador
<Hn> y <Hn>
Donde n es un numero de 1 a 6 y son etiquetas de Titulos
<CENTER> Y </CENTER>
Centra su contenido
<BlOCKQUOTE> Y <BLOCKQUOTE>
Cuando quiera apartar una sección de texto endentado o indicar una cita o anotación extensa, es un marcador lógico así que exploradores distintos lo pueden mostrar de manera diferente
<CITE> y </CITE>
Para encerrar anotaciones cortas u otras referencias, aparece en itálicas
<NOBR> Y </NOBR>
No Salto, evitara que el texto contenido se manipule hacia la siguiente línea en la ventana del navegador, deja completa la línea.
<BASEFONT>
Define o fija el tipo de letra implícito de su documento requiere de otros argumentos como SIZE= # COLOR= ###### FACE=ARIAL
<FONT>
Define o fija el tipo de letra implícito de su documento requiere de otros argumentos como SIZE= # COLOR= ###### FACE=ARIAL
<BIG>
Hacen crecer al texto contenido, un tamaño mayor
<SMALL>
Hacen disminuir al texto contenido, un tamaño menor
<PRE>
Ya que el texto se centra dinámicamente y las líneas se envuelven para ajustarse al tamaño de la ventana de un navegador, el texto de un documento HTML no manipula implícitamente el salto de línea ni los espacios consecutivos. Por eso debe usarse la etiqueta pre.
Usar Estilos Logicos
El propósito primario de los estilos lógicos es el de describir la función del texto contenido, es otra manera de dar formato
<ABBR>Abreviación</ABBR> <ADDRESS>Dirección</ADDRESS>
<DEL>Texto Borrado</DEL> <INS>Texto Insertado</INS>
<CODE>Mostrar como código</CODE> <EM>Enfatizar</EM>
<Q>Cita</Q> <ACRONYM>Acrónimo</ACRONYM>
<CITE>Cite a reference</CITE> <DFN>Define término contenido</DFN>
<SUB>Subscrito</SUB> <SUP>Sobrescrito</SUP>
<KBD>Text entered from keyboard</KBD>
<SAMP>Show text as a Sample output</SAMP>
<STRONG>Enfatizar Fuerte</STRONG>
<VAR>Display text as variable</VAR>
<XMP>Example (same as SAMPLE)</XMP>
<BLOCKQUOTE>Cita por Bloque</BLOCKQUOTE>
Usar Estilos Físicos
<FONT>
<BASEFONT>
<B> N e g r i l l a s </B>
<BIG> Más grande </BIG>
<I> C u r s i v a </I>
<S> T a c h a do </S>
<TT> Texto teletipo </TT>
<U> Subrayado </U>
<SMALL>Mas pequeño</SMALL>
<STYLE> Y </STYLE>
Permite dar formato a casi cualquier elemento, afinando así sus páginas, se pueden aplicar en línea, también incorporando contenedores de estilo en el <HEAD> de la pagina o en hojas de estilo externas alas que después se hace un LINK.
ESTILOS EN LINEA
<body>
<h1 STYLE="FONT-FAMILY:Tahoma;COLOR:BLUE;background:yellow;FONT-SIZE:58;">
Revisando Estilos en Línea
</h1>
<H1>OTRO TITULO DE PRUEBA SIN ESTILOS</H1>
<hr>
<p STYLE="FONT-FAMILY:Comic Sans Ms;COLOR:RED;FONT-SIZE:16;text-align:justify;">
Está página de ejemplo para probar los CSS, los puntos del curso son hojas de estilo en cascada,Diseño de talbas,Conjuntos de marcos,Vistas y sonidos, vamos a probar aqui un estilo con justificacion, para ver si funciona el aligment, estamos trabajando con Victor Cardenas
</p>
<p STYLE="FONT-FAMILY:Roman;COLOR:GREEN;FONT-SIZE:16">
Esta línea tendrá un formato diferente
</p>
<p STYLE="FONT-FAMILY:Symbol;COLOR:ORANGE;FONT-SIZE:20;z-index:3;position:absolute;top:20;left:400">
Esta línea tendrá otro formato
</p>
<p STYLE="FONT-FAMILY:Symbol;COLOR:ORANGE;FONT-SIZE:20;">
Esta línea tendrá otro formato
</p>
</body>
CONTENEDORES INCORPORADOS
<STYLE>
H1{FONT-FAMILY:Comic Sans MS;font-weight:1;FONT-SIZE:30;
COLOR:BLUE;text-align:center;}
P {Font-family:arial;font-size:16;color:green}
Hr{Color:orange;width:700;height:10}
A:LINK {COLOR:GREEN;TEXT-DECORATION:NONE}
A:VISITED{COLOR:CYAN;TEXT-DECORATION:NONE}
A:ACTIVE{COLOR:ORANGE;TEXT-DECORATION:NONE}
A:HOVER {COLOR:RED;TEXT-DECORATION:NONE;FONT-SIZE:20}
.TEXTODECORADO{COLOR:DARKCYAN;FONT-SIZE:45}
</STYLE>
HOJAS DE ESTILO EN CASCADA
<HTML>
HEAD>
<TITLE>Titulo de la Página</TITLE>
<Link rel="stylesheet" type="text/css" href="estilos.css">
</HEAD>
<UL> Y </UL>
Contiene un lista desordenada
<LI>
Cada elemento de la lista debe de ser precedido por una etiqueta de intención de línea. El atributo TYPE=”CIRCLE” TYPE=”SQUARE” TYPE=”DISK” para colocar viñetas.
Se puede poner el contenedor de una lista desordenada dentro de otro contenedor de lista para crear listas anidadas.
<OL> y </OL>
Contiene una lista ordenada, el atributo START = ## define el numero o letra con el que empieza la lista y el atributo TYPE, puede ser A, a, I, i, 1
<DL> Y </DL>
Una lista de definición, es un tipo de lista especial que le permite crear una lista de terminos e información acompañante, utiliza dentro dos etiquetas
<DT> para el termino y <DD> para la descripción del termino.
<DL>
<DT> TERMINO1
<DD> DESCRIPCIÓN DEL TERMINO1
<DT> TERMINO2
<DD> DESCRIPCIÓN DEL TERMINO2
</DL>
<IMG>
Esta etiqueta instruye al navegador donde buscar una imagen, necesita un atributo fuente (Source) SCR que le indica el nombre y ubicación del archivo de imagen por ejemplo <IMG SRC=”imágenes\picture.jpg”> y ademas puede usar otros atributos como
ALIGN=, ALT=, BORDER=, HEIGHT=, HSPACE=, LONGDESC=, VSPACE=, WIDTH=
Enlaces entre Documento
<A NAME=”ETIQUETA”>
<A HREF=”#Etiqueta”> Texto de Enlace </A>
Enlaces hacia un Documento
<A HREF.=”Nombre_del_Documento”>Texto de Enlace</A>
<A HREF.=”Nombre_del_Documento#Ancla_con_Nombre”>Texto de Enlace </A>
<A HREF=”URL”> Texto de Enlace </A>
ENLACE DE MALITO
Permite a los visitantes enviar e-mail hacia alguna dirección de correo definida simplemente al hacer clic en un hiperenlace.
<A REF.=”mailto:vcardenas@newhorizons.com.gt”>Texto de Enlace</A>
<FORM> y </FORM>
El contenedor FORM contiene todos los elementos de un formulario HTML. Para funcionar requiere de dos atributos
ACTION=Debe de Ser el URL de un manipulador de formularios, tal como, un escrito CGI; un servidor lateral que incluya lenguaje nativo para escritos; o una solución patentada, tal como Active Server Pages de Microsoft (ISAPI).
METHOD=El valor mas comun es POST, que envia toda la información por separado, METHOD=GET envia todos los datos del formulario en una cadena concatenada.
<INPUT>
Argumentos:
TYPE=TEXT Ingresa texto
TYPE=PASSWORD El texto que se ingrese se mostrara con asteriscos
TYPE=HIDDEN Ningun control hidden se mostrara, esta escondido
TYPE=CHECKBOX Es un cuadro de Seleccion, donde puede seleccionar
con un chequecito.
TYPE=RADIO Un grupo de opciones donde solo puede seleccionar
una, como los botones de un radio de auto.
TYPE=SUBMIT Es un botón, cuando un usuario haga clic los datos
seran cargados al manipulador de formularios. El
atributo VALUE=puede personalizar el texto.
TYPE=RESET Reinicia el formulario
TYPE=BUTTON Crea un boton para personalizar su accion
TYPE=FILE Carga un archivo al formulario, se requiere de
ENCTYPE=”multipart/form-data” en la etiqueta de
<FORM>
TYPE=IMAGE hace que la imagen seleccionada se comporte como un botón, se necesita del argumento SRC= para
Indicar la ubicación de la imagen.
NAME=”Nombre”
SIZE=## Ancho del cuadro de texto
VALUE= Define el texto implicito que se mostrara
MAXLENGTH= Maximo de caracteres que el usuario ingresara
<TEXTAREA> Y </TEXTAREA>
Permite definir espacio para un campo de ingreso de texto de varios renglones como otros elementos de ingreso de datos, requiere los atributos.
NAME= Para que el manipulador de formularios pueda identificar los datos
LINES= Numero de líneas visibles que mostrara el cuadro de texto
COLS= Indica la anchura visible del cuadro de texto
Si el texto tecleado por un usuario excede las dimensiones especificadas por los atrigutos COLS Y LINES se mostraran barras de desplazamiento.
WRAP=Determina la maneraen que el texto fluira en el cuadro de texto.
OFF, todo el texto se vera en una sola línea hasta que el usuario presione Enter.
SOFT, El texto pasa automatico al otro reglon, pero se carga al servidor como off.
HARD, El texto pasa automatico al otro reglon, se carga al servidor con
caracteres donde especiales para indicar donde termino la línea
No hay comentarios:
Publicar un comentario