HTML 5

HTML BÁSICO 
 
ANTES DE EMPEZAR HTML 5, HABLEMOS DE LAS ETIQUETAS BÁSICAS HTML 4

ETIQUETAS BÁSICAS

 

 

 

<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 límite para la longitud de un título, pero es buena práctica el uso de títulos de una sola frase de 60 o menos caracteres, él título es el elemento que guardan los navegadores cuando el usuario crea un marcador o agrega su página a la carpeta de favoritos. Más 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 apariencia 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 página 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 justificación, para ver si funciona el aligment, estamos trabajando con Victor Cárdenas
</p>
<p STYLE="FONT-FAMILY:Roman;COLOR:GREEN;FONT-SIZE:16">
 Esta l&iacute;nea tendr&aacute; 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&iacute;nea tendr&aacute; otro formato
</p>
<p STYLE="FONT-FAMILY:Symbol;COLOR:ORANGE;FONT-SIZE:20;">
 Esta l&iacute;nea tendr&aacute; 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

 

ENLACE DENTRO DEL 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 botón para personalizar su acción
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 implícito que se mostrara
MAXLENGTH=                             Máximo 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= Número 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 atributos COLS Y LINES se mostraran barras de desplazamiento.
WRAP=Determina la manera en que el texto fluirá en el cuadro de texto.
OFF,  todo el texto se verá en una sola línea hasta que el usuario presione Enter.
SOFT, El texto pasa automático al otro reglón, pero se carga al servidor como off.
HARD, El texto pasa automático al otro reglón, se carga al servidor con
   caracteres  donde especiales para indicar donde termino la línea


INSTRUCCIONES PARA CREAR TABLAS
 




 
 
 
 
 


 
 
 
 
 
 
 
 
 
 
 

No hay comentarios:

Publicar un comentario