Autor Tema: Manual HTML - Incompleto  (Leído 4928 veces)

Desconectado Revancha

  • PHPero Avanzado
  • ****
  • Mensajes: 375
  • Karma: 22
  • Sexo: Masculino
    • Ver Perfil
Manual HTML - Incompleto
« en: 26 de Diciembre de 2006, 21:58:01 pm »
Índice:

  • Introducción
  • ¿Qué es HTML?
  • Estructura básica
  • Texto
  • Imágenes
  • Listas ordenadas
  • Enlaces
  • Formularios
  • Tablas
  • Caracteres especiales
« Última modificación: 28 de Diciembre de 2006, 22:30:58 pm por Revancha »

Comunidad PHPeros

Manual HTML - Incompleto
« en: 26 de Diciembre de 2006, 21:58:01 pm »

Desconectado Revancha

  • PHPero Avanzado
  • ****
  • Mensajes: 375
  • Karma: 22
  • Sexo: Masculino
    • Ver Perfil
• Introducción
« Respuesta #1 en: 26 de Diciembre de 2006, 22:34:18 pm »
• Introducción

En el siguiente manual para aprender HTML, aprenderemos todo lo necesario para crear nuestra propia página Web. Este lenguaje es mucho más fácil que el PHP.

WWW  = World Wide Web
http = HyperText Transfer Protocol - Protocolo de Transferencia de HiperTexto
URI = Universal Resource Identifier - Identificador Universal de Recursos
« Última modificación: 26 de Diciembre de 2006, 22:45:08 pm por Revancha »

Desconectado Revancha

  • PHPero Avanzado
  • ****
  • Mensajes: 375
  • Karma: 22
  • Sexo: Masculino
    • Ver Perfil
• ¿Qué es HTML?
« Respuesta #2 en: 26 de Diciembre de 2006, 22:54:13 pm »
• ¿Qué es HTML?

HTML es el acrónimo* de HyperText Markup Language. Es el lenguaje más utilizado para la presentación de textos estructurados en formato HiperTexto, estándar de las páginas Web. EL HTML es utilizado con el fin de visualizar al usuario de una página Web el contenido de la misma forma que desee el Web Master que se visualicé.

*Un acrónimo es una palabra que resulta de la unión de las letras iniciales de una o más palabras.
« Última modificación: 27 de Diciembre de 2006, 01:11:47 am por Revancha »

Desconectado Revancha

  • PHPero Avanzado
  • ****
  • Mensajes: 375
  • Karma: 22
  • Sexo: Masculino
    • Ver Perfil
• Estructura básica
« Respuesta #3 en: 27 de Diciembre de 2006, 01:08:24 am »
• Estructura básica

La estructura básica de un archivo HTML es la siguiente:

Código: [Seleccionar]
<HTML>
<HEAD>
<TITLE>Mi título</TITLE>
</HEAD>
<BODY>
contenido aquí
</BODY>
</HTML>

Explicación tags

<HTML> = El inicio de un archivo HTML. Su cierre es </HTML>
<HEAD> = La cabecera del archivo HTML. Su cierre es </HEAD>
<TITLE> = Indica el título de la barra del Navegador. Su cierre es </TITLE>
<BODY> = Indica el contenido que se visualizare en el Navegador. Su cierre es </BODY>

Atributos <BODY> </BODY>

BGCOLOR = Indica el fondo que se visualizara en la página.
Código: [Seleccionar]
<BODY BGCOLOR="#FFFFFF"> (#FFFFFF Color de fondo)
BACKGROUND = Indica la imagen que se visualizara de fondo.
Código: [Seleccionar]
<BODY BACKGROUND="imagen.ext"> (Imagen es el nombre ejemplo: logo, y ext, extensión: gif)

Estos modificadores ajustan el desvío del navegador. Dos de ellos actúan sobre Internet Explorer y los otros sobre el Navigator de Netscape.
Todos los navegadores separan las imágenes un determinado número de pixels de la esquina superior izquierda de la ventana. Estos modificadores marcan al navegador que dicho desvío será de X píxeles en horizontal e Y píxeles en vertical.

Código: [Seleccionar]
TOPMARGIN=X
LEFTMARGIN=Y
MARGINHEIGHT=X
MARGINWIDTH=Y
« Última modificación: 27 de Diciembre de 2006, 01:26:30 am por Revancha »

Desconectado Revancha

  • PHPero Avanzado
  • ****
  • Mensajes: 375
  • Karma: 22
  • Sexo: Masculino
    • Ver Perfil
• Texto
« Respuesta #4 en: 27 de Diciembre de 2006, 01:34:51 am »
• Texto

El tag <FONT> es uno de los más completos. Con sus diferentes atributos podemos visualizar varias características del texto. Su cierre es </FONT>

FACE = Indica el tipo de fuente que uno desee. El usuario debe tener instalada la fuente que seleccionamos para que se visualizara perfectamente.
Código: [Seleccionar]
<FONT FACE="verdana ">texto verdana</FONT> (verdana, es el nombre de la fuente)
COLOR = Indica el color que deseemos que se vea.
Código: [Seleccionar]
<FONT COLOR="#ff0000">texto rojo</FONT>
SIZE = Indica el tamaño del texto. Se pueden usar px y muchas más.
Código: [Seleccionar]
<FONT SIZE="1">Tamaño 1</FONT> (1 indica el tamaño del texto)
Estilos

Negrita = <B>texto en negrita</B>
Subrayado = <U>texto subrayado</U>
Cursiva = <I>texto en cursiva</I>

<Hx><Hx> = Indica el tamaño de letra. X indica el tamaño de letra, es de mayor a menor, o sea 1, es la fuente más grande y 6 la más pequeña.
Código: [Seleccionar]
<H1>TEXTO MÁS GRANDE<H2>
<BR> = Indica los saltos de linea,
Código: [Seleccionar]
Hola<br>amig@s de<br> PHPeros.Se visualiza
Código: [Seleccionar]
Hola
amig@s de
PHPeros.

Desconectado Revancha

  • PHPero Avanzado
  • ****
  • Mensajes: 375
  • Karma: 22
  • Sexo: Masculino
    • Ver Perfil
• Imágenes
« Respuesta #5 en: 27 de Diciembre de 2006, 01:55:07 am »
• Imágenes

<IMG atributo="">
Coloca una imagen el en documento.

Atributos:
SRC = Indica la ubicación de la Imagen.
Código: [Seleccionar]
<IMG SRC="nombre.ext">
ALT = Indica un texto que se muestra en los navegadores que no soportan imágenes.
Código: [Seleccionar]
<IMG ALT="tu navegador no soporta imágenes">
BORDER = Indica el ancho del borde alrededor de la imagen. Si BORDER es "0", No presenta bordes en la imagen.
Código: [Seleccionar]
<IMG BORDER="1">
LOWSRC = Indica la Dirección de la imagen que se cargará primero, antes de que la imagen sea cargada. LOWSRC usualmente se refiere a una imagen pequeña.
Código: [Seleccionar]
<IMG LOWSRC="imagen.ext">
ALIGN = Indica el alineamiento de la imagen.

Valores:
RIGHT o LEFT = Alinea a un lado especifico de la página, y todo el texto se justifica al lado de la imagen.
TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, y ABSBOTTOM-Especifica el alineamiento vertical de la imagen.
Código: [Seleccionar]
<IMG ALIGN ="LEFT">
VSPACE = Indica el espacio entre el borde de la imagen y los ítems encima o debajo de ella.
Código: [Seleccionar]
<IMG VSPACE="5">
HSPACE = Indica el espacio entre el borde de la imagen y los ítems a la derecha e izquierda.
Código: [Seleccionar]
<IMG HSPACE="5">
WIDTH = Indica el ancho de la imagen. Si el tamaño no coincide con el original se ajusta.
Código: [Seleccionar]
<IMG WIDTH="50">
HEIGHT = Indica al anterior pero con la altura.
Código: [Seleccionar]
<IMG HEIGHT="60">

Desconectado Revancha

  • PHPero Avanzado
  • ****
  • Mensajes: 375
  • Karma: 22
  • Sexo: Masculino
    • Ver Perfil
• Enlaces
« Respuesta #6 en: 27 de Diciembre de 2006, 02:29:36 am »
• Enlaces

Los enlaces se hacen mediante el tag <A>. Su cierre es </A>

HREF = Indica la URL o Dirección que deseamos.
Código: [Seleccionar]
<A HREF="archivo.html">Link</A>
Código: [Seleccionar]
<A HREF="../index.html"></A>Indica a un fichero almacenado en un directorio superior al actual. (El código "sube" una carpeta)

Código: [Seleccionar]
<A HREF="../directorio/index.html"></A>Indica a un fichero almacenado en una carpeta distinto del actual pero a un mismo nivel. (El código "sube" una carpeta y "entra" en otro).

TARGET = Especifica la ventana donde se mostrará la página. El contenido puede ser el nombre de un Frame pre-definido o alguno como sigue.

Valores:
_blank = Carga la página en una ventana en blanco.
_parent = Carga la página en la ventana del documento que lo llamó.
_self = Carga la página en la misma ventana. (Omisión)
_top = Carga la página en toda la ventana, sin importar el frame.
Código: [Seleccionar]
<A HREF="index.html" TARGET="_blank">LINK</A>
TITLE = Indica una descripción cuando uno deja el Mouse por un tiempo determinado.
Código: [Seleccionar]
<A HREF="index.html" TITLE="descripción">LINK</A>
« Última modificación: 27 de Diciembre de 2006, 02:31:46 am por Revancha »

Desconectado Revancha

  • PHPero Avanzado
  • ****
  • Mensajes: 375
  • Karma: 22
  • Sexo: Masculino
    • Ver Perfil
• Formularios
« Respuesta #7 en: 28 de Diciembre de 2006, 22:29:49 pm »
• Formularios
Código: [Seleccionar]
<FORM atributo1="..." atributo2="...">.....< /FORM>Indica un formulario. Estos se usan para enviar información a un servidor.

Atributos:
ACTION = Indica la dirección de la acción de salida.
METHOD = Indica el método usado para enviar la información. Los valores posibles son: POST o GET. Cuando se usa GET, el servido adjunta los argumentos al final de la dirección fijada en ACTION. Cuando se usa POST, La información es enviada como un formato HTTP.
TARGET = Indica la ventana donde se mostrará la información.

Valores:
_blank = Muestra el resultado en un página en blanco.
_parent = Muestra el resultado en la pagina que lo invocó.
_self = Muestra el resultado en la misma ventana. (por omisión)
_top = Muestra el resultado en la ventana actual usando todo el espacio.

Código: [Seleccionar]
<INPUT atributo1="..." atributo2="...">Indica un control o un área de entrada del formulario, con el cual la información se enviará al servidor.

Atributos:
ALIGN = Si el tipo es una imagen, especifica el alineamiento del texto alrededor de la imagen. Por ejemplo: TOP, MIDDLE, BOTTOM, LEFT, o RIGHT.
CHECKED = Usar este atributo en una caja de tipo RADIO o CHECKBOX, y será preseleccionado cuando se cargue el formulario.
MAXLENGTH = Especifica el máximo número de caracteres en la caja de entrada.
NAME = Indica el nombre del control o la caja de entrada. (Parte de la información)
SIZE = Indica el tamaño del texto que se muestra en la caja de entrada.
SRC = si es una imagen, especifica la ubicación de la imagen.
VALUE = Indica el valor que se enviará con el nombre correspondiente de la información. Especifica el texto por omisión (TEXT). Para RESET y SUBMIT, especifica el texto que se mostrará en el boton tipo 3D.
TYPE = Indica el tipo de control.

Valores:
CHECKBOX = Crea una caja de chequeo (checkbox). Si el usuario la selecciona, Se envía la información correspondiente al servidor.
HIDDEN = No se muestra nada, pero la información es enviada de todas maneras.
PASSWORD = Crea una línea de entrada tipo texto, la información aparece representada por * (No se permite visualizar).
RADIO = Crea una lista de Botones de selección (radio) de los cuáles solo uno se puede seleccionar. Las alternativas pueden tener el mismo nombre, pero pueden tener valores diferentes.
RESET = Crea un botón 3D que borra el contenido del formulario. Se puede asignar un nombre diferente a RESET con el atributo VALUE.
SUBMIT = Crea un botón 3D que envía el formulario.
IMAGE = Al igual que el tipo SUBMIT, puede enviar un formulario inmediatamente cuando el usuario seleccione la imagen. Junto con la información normal, cuando se envía seleccionando la imagen, las coordenadas del punto de selección (en píxeles desde el punto superior izquierdo) se envían también. La coordenada X se envía como "x" junto a la coordenada Y ".y" al lado del nombre.
TEXT = Crea una caja de entrada. Se puede especificar el tamaño con el atributo SIZE.

Código: [Seleccionar]
<SELECT atributo1="..." atributo2="...">< /SELECT>Crea una lista despegable (drop-down). Los elementos de la lista se definen con OPTION dentro del comando SELECT.

Atributos:
MULTIPLE = Indica que se pueden seleccionar múltiples valores.
NAME = Indica el nombre de la lista.
SIZE = Indica cuantos elementos serán visibles.

<OPTION value="...">item
Indica un elemento (Ítem) en la lista. Cualquier texto puede ser colocado dentro de este parámetro.

VALUE = Indica el valor que se retornará. (Parte de la información).
SELECTED = Indica al ítem o elemento PRE-seleccionado cuando se cargue la lista.

Código: [Seleccionar]
<TEXTAREA atributo1="..." atributo2="...">...< /TEXTAREA>Crea una caja de neutrada de varias líneas. Cualquier texto dentro de este comando se muestra como el valor por omisión. =

Atributos:
COLS="..."--Especifica la longitud del texto.
ROWS="..."--Especifica el numero de líneas.
NAME="..."--Especifica un nombre a la caja de entrada.
WRAP="..."--Especifica si el texto se truncará. Los valores posibles son "HARD", "SOFT", o "NONE".
« Última modificación: 28 de Diciembre de 2006, 22:31:44 pm por Revancha »