HTML Todos Los Niveles

-
HTML
HTML(HyperText Markup Language)

HTML es un lenguaje de programacin que se utiliza para la creacin de pginas Web.
Por pgina entenderemos el documento que aparece en el visualizador (browser como
el MS Internet Explorer o el Netscape Navigator). Este documento es simplemente
archivo de texto (ASCII) con "tags" o etiquetas o cdigos, a los cuales el Browser de
Web, interpreta para mostrar en pantalla la informacin.
En resumen las paginas web estan hechas con HTML para que el navegador o
visualizador o cliente o web browser, como se le quiera llamar, lo interpreta, compila y
ejecuta mostrando como resultado el contenido de la pgina.
Para hacer una pgina Web solo se necesita un editor de texto (desde el block de notas
hasta programas hechos exclusivamente para editar pginas web, como el Frontpage,
Visual Interdev, Dreamweaver, etc).
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan
de la siguiente manera:
<XXX> Este es el inicio de una etiqueta.

</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en maysculas o minsculas,

indiferentemente. Lo que haya entre ambas etiquetas estar influenciada
por ellas. Por ejemplo, todo el documento HTML debe estar entre las
etiquetas
<HTML>
[Todo el documento]
</HTML>
<!DOCTYPE html>
<HTML>
[Todo el documento]
</HTML>
Para html 5
El documento en s est dividido en dos zonas principales : encabezado y cuerpo
(1)
El encabezado, comprendido entre las etiquetas <head>

Ejemplo 1 :
<html>
<HEAD> Texto</HEAD>
</html>
Ejemplo 2 :
<html>
<HEAD>
Texto
</HEAD>
</html>
TITULO de la pgina
Dentro del encabezamiento hay informacin del documento, que no se ve en el
cuerpo de la pantalla principal, principalmente el ttulo del documento o pagina.
El titulo se coloca entre las etiquetas <TITLE> poner aqu el titulo</TITLE>.
El ttulo debe ser breve y describir claramente el contenido de la pgina, pues ser lo
que vean los dems cuando aadan nuestra pgina a su bookmark (o agenda de
direcciones).
<HTML>
<HEAD>
<TITLE>Titulo de la pgina</TITLE>
</HEAD>
</HTML>
(2) El cuerpo, comprendido entre las etiquetas <body>

<HTML>
<HEAD>
</HEAD>
<BODY>
Fila 1
Fila 2
Fila 3
</BODY>
</HTML>
Dentro del cuerpo del cdigo HTML, est todo lo que queremos que aparezca en la
pantalla principal (texto, imgenes, etc.)
Estructura de una pagina HTML

<HTML>
<HEAD>
<TITLE>Titulo de la pgina</TITLE>
</HEAD>
<BODY atributos>
Contenido de la Pgina
</BODY>
</HTML>
Tags(etiquetas) mas usados

Texto en negrita
<B> . . . </B>
Ejemplo :
Texto en itlico
<I> . . . </I>
<EM> . . . </EM>
Ejemplo :
Color de Texto
<FONT color="#XXXXXX">...</FONT>
Ejemplo :
Aqua Black Blue Fuchsia Gray Green Lime Cyan

Maroon Navy Olive Purple Red Silver Teal Yellow
Control del tamao de la letra

<FONT size=xx>. . .</FONT>
Ejemplo :
Tipo de letra
<FONT face=xxxxx>. . .</FONT>
Ejemplo :
Texto subrayado
<U> . . . </U>
Ejemplo :
Comentarios ignorados por el navegador


Ejemplo :
Cambio de lnea
<BR>
Ejemplo :
Centrar
<CENTER>...</CENTER>
Ejemplo :
Prrafos con alineamiento :

<DIV align=center> ...</DIV>
Ejemplo :
Alineando parrafo a la izquierda

<DIV align=left> ...</DIV>
Ejemplo :
Alinea el elemento a la derecha

<DIV align=right> ...</DIV>
Ejemplo :
Otra forma de prrafo :
<P>...</P>
Ejemplo :
Prrafo centrado
<P align=center>...</P>
Ejemplo :
Prrafo alineado a la izquierda

<P align=left>...</P>
Ejemplo :
Prrafo alineado a la derecha
<P align=right>...</P>
Ejemplo :
Listas
Lista no numerada del Elemento de lista
<UL>
<LI>
<LI>
</UL>
Ejemplo :
Lista numerada del Elemento de lista

<OL>
<LI>
<LI>
</OL>
Ejemplo :
Raya horizontal
<HR>
Ejemplo :
Enlace hacia una pgina Web

<A href="http://...">...</ A>
Ejemplo :
Insercin de una imagen al formato Gif o Jpg

<IMG src="xyz.jpg ">
Ejemplo 1:
Ejemplo 2:
Definicin de una tabla
<TABLE border=num >...</TABLE>
Ejemplo 1:
Tabla con un borde de 20 y constituido por 1 fila por dos columnas
Ejemplo 3:
Tabla con anchura en % ( width="x% )
Ancho en
porcentaje de la
tabla
Ejemplo 4:
Tabla con anchura en pixeles ( width="x )
Ancho en pixeles
de la tabla
Ejemplo 5:
Espacio entre el borde y el texto ( cellpadding=x )
35
35
Ejemplo 7:
Espesor de la raya entre las cel das ( cellspacing=x )
35
35
Ejemplo 8:
Insertar 2 filas a la tabla
Insertar dos filas a
la tabla
Ejemplo 9:
Tabla con un borde de 10 y constituido por 1 fila y dos columnas
Insertar dos
columnas a la tabla
Ejemplo 10:
Tabla con un borde(border) de 10 y constituido por 3 filas por dos columnas
columna01 columna02
Fila 01
Fila02
Fila03
Ejemplo 11:
color de una celda (<TD bgcolor="#XXXXXX">
Ejemplo 12:
Anchura de columna en % ( width="15%"
15%
5%
Ejemplo 13:
Numero de celdas para fusionar horizonta lmente (<TD colspan=x > )
colspan = 50
Ejemplo 14:
Numero de celdas para fusionar verticalmente (rowspan=50
Define una estructura de frames

<frameset >
<frame
<frame
<frame
<frame
.
.
.
</frameset>
Ejemplo 1:
..
..
..
..
>
>
>
>
Insertar imagen en el fondo de ua pagina HTML

<BODY
background="imagen.jpg / imagen.gif"
</BODY>
Ejemplo 1:
</BODY>
>
Definicin de Formularios
Es una forma de comunicacin entre las pginas y el servidor
<form action = registro.html method = post name = frmRegistro >
... Elementos del Formulario...
</form>
Ejemplo 1:
Elementos del Formulario :

Campo de Texto
<input type=text name=identificador size=30 maxlength=30
value=Contenido >
Ejemplo 1:
Area de Texto
Define una caja donde se puede escribir un texto de multiples lineas, atributos:
<textarea name=identificador rows=3 cols=40 >
Valor del TextArea
</textarea>
Ejemplo 1:
Opcin mltiple
Para el uso de opciones mltiples tenemos:
<input type=checkbox name=identificador

Ejemplo 1:
checked >
Opcin nica
Para el uso de opciones discriminantes tenemos:
Sexo: <br>
Femenino : <input type=radio name=identificador value=F>
Ejemplo
1: : <input type=radio name=identificador value=M checked>
Masculino
Combos
Para seleccin simple, mostradas en una lista (Combos):
<select name=identificador size=20 multiple >
<option value=1 selected>valor1 </option>
<option value=2
>valor2</option>
<option value=3
>valor3</option>
</select>
Ejemplo 1:
Botones
Sirven para disparar un evento, el cual puede producir el envio de la informacin
o la realizacin de un proceso
<input type=submit name=nom del boton value=valor Boton1>

<input type=reset name=nom del boton value=valor Boton2>
<input type=button name=nom del boton value=valor Boton3>
Ejemplo 1:
Otros Controles
Existe otros controles para Ocultar Variables, Mostrar asteriscos o Mostrar el
explorador de Archivos los cuales son respectivamente:
<input type=hidden name= value=>

<input type=password name= value=>
<input type=file name= value=>
Ejercicios de HTML desarrollados

1. Realizar una pagina html que muestre la siguiente frase Bienvenido al mundo de
Java
Solucin:
2. Realizar una pagina Html que me permita mostrar un parrafo de una expresin y tiene
que estar centrado.
Solucin:
3. Realizar una pagina Html que me permita implementar una tabla de 2 filas por 2
columnas que muestre lo siguiente
Solucin:
4. Realizar una pagina Html que me permita definir dos link que vaya a la pagina de la
universidad san martin y la otra me permita acceder a mi correo electronico .
Solucin:
5. Realizar una pagina Html que me permita implementar un formulario que posea un
botn que me permita ir a otra pgina.
Solucin:
6. Realizar una pagina Html que implemente un combox que cargue tres paises de
sudamerica
Solucin:
7. Realizar una pagina Html que implemente un Lista articulos para oficina
Solucin:
8. Realizar una pagina html que me permita implementar un area de texto .
Solucin:
Tabla de colores
Color
Rojo
Cod. Color
Azul
Verde
Amarillo Magenta Negro Blanco
00FF00 0000FF FFFF00 FF00FF 000000 FFFFFF
Tabla de Codigo de los caracteres en HTML

Algunos navegadores no aceptan ciertos caracteres para lo cual el lenguaje HTML da su
equivalente en ALIAS
Por ejemplo si queremos escribir la palabra Seor tendramos que poner en el editor
Señor.
Alias
á
é
í
ó
ú
ñ
Ñ
¡
¿
<
>
&
"
Carcter obtenido
<
>
&

HTML Todos Los Niveles

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Todos Los Niveles

Enviado por

Direitos autorais:

Formatos disponíveis

-

HTML(HyperText Markup Language)

<XXX> Este es el inicio de una etiqueta.

Las letras de la etiqueta pueden estar en maysculas o minsculas,

El documento en s est dividido en dos zonas principales : encabezado y cuerpo

El encabezado, comprendido entre las etiquetas <head>

(2) El cuerpo, comprendido entre las etiquetas <body>

Estructura de una pagina HTML

Tags(etiquetas) mas usados

Aqua Black Blue Fuchsia Gray Green Lime Cyan

Control del tamao de la letra

Comentarios ignorados por el navegador

Prrafos con alineamiento :

Alineando parrafo a la izquierda

Alinea el elemento a la derecha

Otra forma de prrafo :

Prrafo alineado a la izquierda

Prrafo alineado a la derecha

Lista numerada del Elemento de lista

Enlace hacia una pgina Web

Insercin de una imagen al formato Gif o Jpg

Definicin de una tabla

<TABLE border=num >...</TABLE>

Define una estructura de frames

Insertar imagen en el fondo de ua pagina HTML

Elementos del Formulario :

<input type=checkbox name=identificador

<input type=submit name=nom del boton value=valor Boton1>

<input type=hidden name= value=>

Ejercicios de HTML desarrollados

8. Realizar una pagina html que me permita implementar un area de texto .

Tabla de Codigo de los caracteres en HTML

Você também pode gostar