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>

<BIG> Más grande </BIG>

<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í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

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

HTML 5

<HTML> y </HTML>

<HEAD> y <HEAD>

<TITLE> y </TITLE>

<BODY> y </BODY>

<BR>

<Hr>

<P> y </P>

<!—[Este es un comentario]-->

<Hn> y <Hn>

<CENTER> Y </CENTER>

<BlOCKQUOTE> Y <BLOCKQUOTE>

<CITE> y </CITE>

<NOBR> Y </NOBR>

<BASEFONT>

<FONT>

<BIG>

<SMALL>

<PRE>

Usar Estilos Logicos

Usar Estilos Físicos

<STYLE> Y </STYLE>

ESTILOS EN LINEA

CONTENEDORES INCORPORADOS

HOJAS DE ESTILO EN CASCADA

<UL> Y </UL>

<LI>

<OL> y </OL>

<IMG>

Enlaces

Enlaces hacia un Documento

ENLACE DE MALITO

<FORM> y </FORM>

<INPUT>

<TEXTAREA> Y </TEXTAREA>

No hay comentarios:

Publicar un comentario

Páginas

Buscar este blog