html

12
*HTML* 1) DEFINICIÓN: El HTML (Hyper Text MarkupLanguage) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado. 2) NAVEGADORES: Un navegador o navegador web (del inglés, web browser) es una aplicación que opera a través de Internet, interpretando la información de archivos y sitios web para que podamos ser capaces de leerla (ya se encuentre ésta alojada en un servidor dentro de la World Wide Web o en un servidor local). El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos. La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).

Upload: david-enciso

Post on 20-Jul-2015

125 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Html

*HTML*

1) DEFINICIÓN: El HTML (Hyper Text MarkupLanguage) es el lenguaje

con el que se escriben las páginas web. Es un lenguaje de hipertexto, es

decir, un lenguaje que permite escribir texto de forma estructurada, y que está

compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del

documento.

Un documento hipertexto no sólo se compone de texto, puede contener

imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse

como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que

puedan ser visualizados en los navegadores (programas que permiten

visualizar las páginas web).

Los navegadores se encargan de interpretar el código HTML de los

documentos, y de mostrar a los usuarios las páginas web resultantes del

código interpretado.

2) NAVEGADORES:

Un navegador o navegador web (del inglés, web browser) es una aplicación que opera a través de Internet, interpretando la información de archivos y sitios web para que podamos ser capaces de leerla (ya se encuentre ésta alojada en un servidor dentro de la World Wide Web o en un servidor local).

El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.

La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).

Page 2: Html

Tales documentos, comúnmente denominados páginas web, poseen hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a la Internet, se llama navegación, de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza, a la cual también se le llama cibernauta). Por otro lado, hojeador es una traducción literal del original en inglés, browser, aunque su uso es minoritario.

EJEMPLOS DE NAVEGADORES:

Page 3: Html

3) EDITORES:

Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite ganar rapidez.

Estos editores visuales pueden generar en ocasiones código basura, es decir, código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML para poder depurar el código de nuestra páginas.

Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjectsFusion, CutePage, HotDogProffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos.

En aulaClic puedes encontrar los cursos de Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores más usados hoy en día.

Es aconsejable comenzar utilizando una herramienta lo más sencilla posible, para tener que insertar nosotros mismos el código HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual posteriormente, y depurar el código cuando fuera necesario.

Para crear páginas web escribiendodirectamente el código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.

EJEMPLOS:

Macromedia Dreamweaver

Page 5: Html

4) ETIQUETAS:

Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: <identificadoratributo1 atributo2 ...>

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, ovalores HTML predefinidos.

La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>

Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.

A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font></p>

Este código daría como resultado el siguiente texto:

Bienvenidos a www.aulaclic.com

Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta<p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>.

Page 6: Html

EJEMPLOS:

Apertura Acción Atributos Cierre

< ! Comentario. Ninguno -->

<A> Hipervínculo. HREF, NAME, REL,

REV, TITLE </A>

<ADDRESS> Formato para

dirección del autor. Ninguno </ADDRESS>

<BASE>

Url del autor;

contexto del

documento.

HREF </BASE>

<BASEFONT

SIZE>

Tamaño de la

fuente base. Ninguno NO

<BGSOUND> Sonido de fondo. SRC, LOOP. NO - Internet

Explorer

<BIG> Aumenta el

tamaño. Ninguno </BIG>

<BLINK> Hace parpadear el

texto. Ninguno

</BLINK> -

Netscape

<BLOCKQUOTE>

Da formato con

sangría a un

párrafo

Ninguno </BLOCKQUOTE>

<BODY> Cuerpo del

documento.

BGCOLOR,

BACKGROUND,

TEXT, LINK, VLINK,

ALINK

</BODY>

<BR> Retorno de línea.

CLEAR: Se utiliza en

combinación con

ALIGN de IMAGE.

NO

<CAPTION>

Posición de la

leyenda en una

tabla.

ALIGN:

TOP/BOTTOM.

Internet Explorer:

LEFT, RIGHT,

CENTER

</CAPTION>

<CENTER> Centrar. Ninguno </CENTER>

Page 7: Html

<CITE> Formato para citas

en itálicas. Ninguno </CITE>

<CODE> Formato en tipo

código. Ninguno </CODE>

<DD>

Definiciones

marcadas, para

Lista de

Definiciones

<DL>.

Ninguno NO

<DFN< Formato en itálica. Internet Explorer </DFN<

<DIR>

Lista de directorio,

con elementos

marcados con

<LI>.

Ninguno </DIR>

<DL>

Lista de

Definiciones, con

términos marcados

con <DT> y

definiciones

marcadas con

<DD>.

Ninguno </DL>

<DT>

Términos

marcados, para

Lista de

Definiciones

<DL>.

Ninguno NO

<EM> Formato enfatizado

en itálica. Ninguno </EM>

<EMBED> Sonido de Fondo.

SRC, WIDTH,

HEIGHT,

AUTOSTART, LOOP.

NO - Netscape

<FONT> Definición de la

fuente.

SIZE, COLOR. Internet

Explorer: FACE. </FONT>

<FORM>

Para ingreso de

datos del usuario

en un formulario.

ACTION, METHOD </FORM>

<H1 ...H6> Tamaño de letras HTML 3.0: LEFT, </H1 .../H6>

Page 8: Html

del 1 al 6. CENTER, RIGHT

<HEAD> Encabezamiento

del documento.

BASE, TITLE,

ISINDEX, NEXTID,

META

</HEAD>

<HR> Línea horizontal.

NOSHADE, SIZE,

WIDTH, ALIGN.

Internet Explorer:

COLOR

NO

<HTML>

Al principio y al

fin de todo

documento.

HEAD, BODY </HTML>

<I> Itálica (Cursiva). Ninguno </I>

<IMG> Cargar imágenes.

ALIGN, SRC, ALT,

ISMAP, WIDTH,

HEIGHT, VSPACE,

HSPACE

NO

<INPUT>

Define un objeto

de ingreso en un

formulario.

TYPE, NAME,

VALUE, SIZE,

MAXLENGHT,

ALIGN, SRC,

CHECKED

</INPUT>

<ISINDEX>

Indica que existe

un index en el

server para el

documento.

Netscape: PROMPT NO

<ISMAP>

Activa la selección

de imágenes para

el usuario.

Ninguno NO

<KBD> Formato

monoespaciado. Ninguno </KBD>

<LI> Ítem de lista. Netscape: VALUE,

TYPE NO

<LISTING> Listados Ninguno. Obsoleto. </LISTING>

<LIT>

Literal. Como

PRE, pero usa letra

proporcional.

Ninguno </LIT>

Page 9: Html

<MARQUEE> Marquesina.

ALIGN, BEHAVIOR,

BGCOLOR,

DIRECTION, HEIGHT,

WIDTH, HSPACE,

VSPACE, LOOP,

SCROLLAMOUNT,

SCROLLDELAY.

</MARQUEE> -

Internet Explorer

<MENU> Lista menú. Ninguno </MENU>

<META> Metainformación

ubicada en HEAD.

EQUIV, CONTENT,

NAME NO

<NEXTID>

Es un parámetro

que identifica al

documento.

NO NO

<NOBR> Elimina los saltos

de líneas. Ninguno NO

<OL>

Lista ordenada,

con elementos

marcados con

<LI>.

TYPE, START,

VALUE. </OL>

<OPTION>

Opción de

selección dentro de

un formulario.

VALUE, SELECTED

VALUE NO

<P> Retorno de línea,

con un espacio. Ninguno NO

<P ALIGN> Alineación de

texto.

LEFT, CENTER,

RIGHT </P>

<PLAINTEXT> Pasaje de texto

plano. Ninguno. Obsoleto. </PLAINTEXT>

<PRE>

Visualiza el texto

en su formato

original.

WIDTH </PRE>

<S> Texto tachado. Ninguno </S>

<SAMP> Formato tipo

ejemplo. Ninguno </SAMP>

<SELECT> Para selección de NAME, SIZE, </SELECT>

Page 10: Html

opciones dentro de

un formulario.

MULTIPLE

<SMALL> Disminuye el

tamaño. Ninguno </SMALL>

<STRONG>

Formato enfatizado

más fuerte que

<EM>.

Ninguno </STRONG>

<SUB> Subíndice. Ninguno </SUB>

<SUP> Superíndice. Ninguno </SUP>

<TABLE> Tabla.

BORDER,

CELLPADDING,

CELLSPACING,

HEIGTH, WIDTH.

Internet Explorer:

COLOR

</TABLE>

<TD>

Celdas de una fila

en una tabla,

dentro de <TR>.

ALIGN, VALIGN,

NOWRAP, COLSPAN,

ROWSPAN, HEIGTH,

WIDTH

</TD>

<TEXTAREA>

Área para ingreso

de texto dentro de

un formulario.

NAME, ROWS, COLS. </TEXTAREA>

<TH> Título de Tabla.

ROWSPAN,

COLSPAN, ALIGN,

VALIGN, NOWRAP,

HEIGHT, WIDTH

</TH>

<TITLE> Título dentro de

HEAD. Ninguno </TITLE>

<TR> Fila de una Tabla. ALIGN, VALIGN </TR>

<TT> Formato tipo

máquina. Ninguno </TT>

<UL>

Lista no ordenada,

con elementos

marcados con

<LI> .

COMPACT, TYPE </UL>

Page 11: Html

<VAR> Formato tipo

variable. Ninguno </VAR>

<WBR>

Se usa con NOBR

para una sección

que deba ser

separada.

Ninguno NO

<XMP> Similar a PRE. Ninguno </XMP>

Color Hexadecimal (HTML):

FFF

FFF

CCC

CCC

999

999

666

666

333

333

000

000

FFC

C00

FF9

900

FF6

600

FF3

300

99C

C00

CC9

900

FFC

C33

FFC

C66

FF9

966

FF6

633

CC3

300

CC0

033

CCF

F00

CCF

F33

333

300

666

600

999

900

CCC

C00

FFF

F00

CC9

933

CC6

633

330

000

660

000

990

000

CC0

000

FF0

000

FF3

366

FF0

033

99F

F00

CCF

F66

99C

C33

666

633

999

933

CCC

C33

FFF

F33

996

600

993

300

663

333

993

333

CC3

333

FF3

333

CC3

366

FF6

699

FF0

066

66F

F00

99F

F66

66C

C33

669

900

999

966

CCC

C66

FFF

F66

996

633

663

300

996

666

CC6

666

FF6

666

990

033

CC3

399

FF6

6CC

FF0

099

33F

F00

66F

F33

339

900

66C

C00

99F

F33

CCC

C99

FFF

F99

CC9

966

CC6

600

CC9

999

FF9

999

FF3

399

CC0

066

990

066

FF3

3CC

FF0

0CC

00C

C00

33C

C00

336

600

669

933

99C

C66

CCF

F99

FFF

FCC

FFC

C99

FF9

933

FFC

CCC

FF9

9CC

CC6

699

993

366

660

033

CC0

099

330

033

33C

C33

66C

C66

00F

F00

33F

F33

66F

F66

99F

F99

CCF

FCC

CC9

9CC

996

699

993

399

990

099

663

366

660

066

006

600

336

633

009

900

339

933

669

966

99C

C99

FFC

CFF

FF9

9FF

FF6

6FF

FF3

3FF

FF0

0FF

CC6

6CC

CC3

3CC

003

300

00C

C33

006

633

339

966

66C

C99

99F

FCC

CCF

FFF

339

9FF

99C

CFF

CCC

CFF

CC9

9FF

996

6CC

663

399

330

066

990

0CC

CC0

0CC

00F

F33

33F

F66

009

933

00C

C66

33F

F99

99F

FFF

99C

CCC

006

6CC

669

9CC

999

9FF

999

9CC

993

3FF

660

0CC

660

099

CC3

3FF

CC0

0FF

00F 66F 33C 009 66F 66C 669 003 336 666 666 666 330 993 CC6 990

Page 12: Html

F66 F99 C66 966 FFF CCC 999 366 699 6FF 6CC 699 099 3CC 6FF 0FF

00F

F99

66F

FCC

33C

C99

33F

FFF

33C

CCC

339

999

336

666

006

699

003

399

333

3FF

333

3CC

333

399

333

366

663

3CC

996

6FF

660

0FF

00F

FCC

33F

FCC

00F

FFF

00C

CCC

009

999

006

666

003

333

339

9CC

336

6CC

000

0FF

000

0CC

000

099

000

066

000

033

663

3FF

330

0FF

00C

C99

009

9CC

33C

CFF

66C

CFF

669

9FF

336

6FF

003

3CC

330

0CC

00C

CFF

009

9FF

006

6FF

003

3FF

MI PRIMER PÁGINA WEB c;