html
TRANSCRIPT
*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).
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:
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
Microsoft Frontpage
Adobe Pagemill
NetObjectsFusion
Netscape Composer y Arachnophilia
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..>.
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>
<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>
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>
<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>
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>
<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
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;