Codigo html

Estructura básica para html: EQUITECAS

Ejemplo 1: Abre un documento de texto en el escritorio y copia el siguiente
código.

<html>
<head> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>

Dale click derecho sobre el documento y guardalo con el nombre index.html

Ve a la internet Explorer y copia la dirección de la ubicación de documento
con index.html para sabe la ubicación dale clic derecho en el documento y
dale en propiedades hay aparece la ubicación.

Etiqueta: <title> </title> (va en la parte del encabezamiento de la página
web).

Ejemplo2: En el documento de texto que creo de index.html copia la
intreccion <title> guarda y dale actualizar a la páginae de web.

<html>
<head> <title>Curso de HTML</title> </head>
<body>
</body>
</html>

Etiqueta <body> </body>(Todo el texto, las imágenes y el formato visibles
al usuario deben encontrarse entre las etiquetas)
Bgcolor define el color de fondo de la página
Text define el color del texto de la página
Link define el color de los vínculos en la página
Alink define el color del vínculo actual o activado en la página
Vlink define el color del vínculo ya visitado
Background define el archivo gráfico que será desplegado como
fondo
Bgsound define el archivo de audio que se tocará en la página.IE
Bgproperties define el movimiento vertical del fondo

Ejemplo3:

Los colores se puede colocar de dos formas con el nombre del color en
ingles o mediante números hexadecimales

Ejemplos de Colores:
#RRVVAA Color Color #RRVVAA Color
#FFFFFF withe Blanco #000000 Negro
#FF0000 red Rojo #00FF00 Verde
#0000FF blue Azul #FF00FF Magente
#00FFFF Cyan #FFFF00 Amarillo
#70DB93 Agua #000080 Azul Marino
#FF7F00 Coral #A62A2A Café
#C0C0C0 Plomo #4F2F4F Violeta

<html>
<body bgcolor=”#C0D9D9” text=”red”>
</body>
</html>

Etiqueta <br> inserte un salto de línea en un documento

Etiqueta <hr>dibuja de manera predeterminada una regla horizontal
alineada
Automáticamente, esta etiqueta tiene se utiliza con las siguiente atributos.

Align establece que la regla se alinee a la izquierda, centro o derecha
LEFT(Izquierda),CENTER(centro) o RIGHT(derecha)
NOSHADE quita el sombreado predeterminado de la regla
WIDTH permite especificar el ancho de la regla (en pixeles o
porcentaje)
SIZE permite especificar el alto de la regla (en pixeles)

Ejemplo 4

<html>
<body bgcolor="#C0D9D9" text="#000000">

Bienvenidos al curso de HTML<br>
<hr align=center width=50%><br>
Cuando la temperatura es menor a 15°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de página WEB :)<br>
</body>
</html>

Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1..6”) son
encabezados del cuerpo del texto

Ejemplo 5
<html>
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
<h2>Bienvenidos</h2>
bastante frío.<br>
Este es un ejemplo de página WEB :)<br>
</body>
</html>

Etiqueta <center> </center>
Se utiliza para centrar el texto/imagen o datos que se encuentren entre la
apertura y el cierre.
Etiqueta <b> </b>
Esta es la etiqueta que nos posibilita un texto con negrillas.
Etiqueta <u> </u>
Etiqueta que posibilita resaltar un texto con subrayado.
Etiqueta <i> </i>
Etiqueta que permite resaltar el texto con inclinación itálica.

Ejemplo 6
<html>

<h1 align="center">
bastante frío.<br>
Este es un ejemplo de página WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>
<i>Este texto esta con inclinación itálica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>
</body>
</html>

Etiqueta <font> </font>

Esta etiqueta proporciona al autor un medio de personalizar el texto con
respecto al tipo de
fuente, tamaño y color. Atributos:
• Color determina el color que se aplica al texto
• Size determina el tamaño relativo del texto. Los tamaños válidos son del 1
al 7,
siendo el predeterminado el 3 y el más grande el 1.
• Face asigna una fuente o tipo de letra.

Ejemplo 7

<html>
<h1 align="center">
bastante frío.<br>
Este es un ejemplo de página WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>

<i>Este texto esta con inclinación itálica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>
<font color="red"><font size=7>B</font>o</font><font color="yellow">
li</font><font color="green">via</font><br>
</body>
</html>

Imágenes en HTML

Etiqueta <img> Los únicos formatos, que por ahora soportan los
visualizadores son: *.gif y *.jpg o *.jpeg.

El formato básico para incluir un gráfico es:
<img src=”imagen.ext”>

Ejemplo 8:

Busque una imagen y péguela en el escritorio con las extensión de arriba

<html>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Información General</h2>
Este curso muestra los conceptos básicos del uso de
etiquetas e instrucciones en la elaboración de
documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gráficos y combinar
de buena manera los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una página WEB es muy importante, pues provee a nuestro
trabajo una ventana al mundo.<br>
</body>
</html>

Para el tamaño

• Src identifica la imagen que se desplegará.

• Height para redimensionamiento de gráfico (en pixeles o en porcentaje)
• Width para redimensionamiento de gráfico (en pixeles o en porcentaje)

SEGUNDA PARTE DE HTML.

Tablas
En HTML también podemos incluir arreglos de tablas. Se deben utilizar
varias etiquetas:
Etiqueta <table></table>
Señala el inicio y final de una tabla. Sus atributos son:
Align Establece la alineación de la tabla o texto mediante
ALIGN=LEFT o ALIGN=RIGHT
Bgcolor Establece el color de fondo de las celdas de la tabla
Border Determina el ancho del borde en pixeles
BorderColor Asigna un color al borde
BorderDark Determina el color de la parte oscura de un borde de 3
dimensiones
BorderLight Asigna el color de la parte clara de un borde de 3
dimensiones
Caption Especifica el titulo para la tabla
Cellpadding Establece la cantidad de espacio libre junto al contenido
de
una celda
Cellspacing Asigna la cantidad de espacio entre las celdas de una
tabla
Width Determina el ancho de la tabla en pixeles o en un porcentaje

Etiqueta <th> </th>
Indica al navegador cliente que exhiba el texto como un encabezado en la
primera fila de unatabla. Atributos principales:
Colspan especifica el número de celdas que cubre el encabezado
Align Determina la posición del texto del titilo
Etiqueta <tr> </tr>
Indica al navegador que exhiba el texto dentro de una fila; puede también
interpretarse como la
etiqueta que define filas.
Align Alineación del texto/objetos en toda la fila

Etiqueta <td> </td>
La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas
específicas de una
tabla. Atributos principales:
• Align Alineación del texto/objeto de la celda
• Bgcolor Color de fondo de la celda
• Background imagen de fondo de una celda
• Width Ancho de la celda/columna con respecto al ancho de la tabla
Solo precisa definir el ancho en la primera celda de la columna.
Recuerde que dentro de una celda, usted puede insertar desde texto o un
gráfico hasta una tabla
entera.
Ejemplo 10:
<html>
<center><h1>
<hr width=50%><br>
<h2>Información General</h2>
Este curso muestra los conceptos básicos del uso de
etiquetas e instrucciones en la elaboración de
documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gráficos y combinar
de buena manera los colores para brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una página WEB es muy importante, pues provee a nuestro
trabajo una ventana al mundo.<br>
<br><center>
<table width=80% align=center border=3>
<tr><th colspan=3>Directorio Telefónico</th></tr>
<tr align=center>
<td width=40% bgcolor="#C0C0C0">
Nombre
</td>
Teléfono
</td>

E-Mail
</td>
</tr>
<tr>
<td>
José Rodríguez
</td>
<td>
223454
</td>
<td>jose@prueba.com.bo</td>
</tr>
<tr>
<td>
Carolina Nuñez
</td>
<td>
453444
</td>
<td>carolina@prueba.com.bo</td>
</tr>
</table>
<br></center>
</body>
</html>
Grabe este archivo con el nombre pag2.html sobre escribiendo el archivo
anterior.
Consejo:
Puede usar tablas sin borde (usando BORDER=0 en la sentencia <table>)
para ubicar gráficos y
texto de forma elegante.
Numeración y viñetas
En HTML todo es posible, y tal cual en un editor de texto podemos trabajar
con numeración y
viñetas, lo podemos hacer acá.
Etiqueta <ul> </ul>
Indica al navegador que cree una lista con viñetas no ordenada.
No solamente usada para fines de numeraciones y viñetas, sino también
para fines de sangría u
tabulaciones.
Etiqueta <ol> </ol>

Listas ordenadas, esta etiqueta predeterminada indica al navegador que
numera la lista de
elementos comprendidos dentro de las etiquetas <ol>
Etiqueta <li> </li>
Se usa para indicar al navegador que exhiba el texto que le sigue como un
elemento de línea en
una lista. Atributos:
• Type Especifica el tipo para listas ordenadas Type=A Usa letras
mayusculas, TYPE=a emplea letras minúsculas, Type=I Usa
números romanos grandes, Type=i usa números romanos pequeños
y Type=1 usa números arábigos.
Type también puede servir para definir la forma de la viñeta en las
listas no ordenadas. Type=DISC, CIRCLE y SQUARE son las
opciones disponibles.
• Value Indica que se inicie la numeración a partir del número especificado.
Creamos una nueva página para el siguiente ejemplo:

Ejemplo 11:
<html>
<center><h1>
<hr width=50%><br>
<h2>Debemos a comprar</h2><br>
<ul>
<li>Camisas para José</li>
<li>Loción para Daniel</li>
</ul><br>
<h2>Estudiar para mañana</h2><br>
<ol>
<li type=a>Geometría</li>
<li>ciencias Sociales</li>
</ol><br>
<h2>Actividades de la semana</h2><br>
<ol>
<li type=i>Asistir a la Universidad</li>
<li>Comprar Disco</li>

<li>Llevar el auto al mecánico</li>
</ol><br>
<h1>Objetivos</h1>
<ul>El uso de estas etiquetas también puede ayudar a mover
el texto en base a tabulaciones o sangrías de texto, para
diferenciar parrafos o textos de los encabezamientos.
</ul>
</body>
</html>
Grabamos el nuevo ejemplo con el nombre “pag3.html”. Hasta este punto
tenemos 3 páginas
HTML.
Hipervínculos
Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos
lleva a otra dirección
URL, página WEB o recurso.
Etiqueta <A> </A>
La etiqueta <A> que viene de “ancla”, denota el inicio y el final de una
instrucción que contiene
alguna forma de vínculo o hipervínculo. Esta etiqueta permite al usuario
vincularse a otra
ubicación dentro del mismo documento HTML, a otro sitio WEB, a un
servidor FTP, enlace de
correo electrónico, ... Atributos:
• HREF Recurso al cual se hace referencia el hipervínculo
• NAME Especifica el nombre de la posición a donde apuntar
• TARGET Destino del enlace (generalmente para páginas con Frames)
Por ejemplo, desde una nueva página, que llamaremos pag4.html,
crearemos enlaces a las 3 páginas anteriores y además otros enlaces
importantes. En este ejemplo, aplicaremos también los atributos para
colores de los vínculos de la etiqueta Body.

Ejemplo 12:
<html>
<head> <title>Página de enlaces</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"
link="#000080" vlink="magenta" alink="black">
<center><h1>
<a name="tope"></a>
Enlaces</h1><br>
<img src="foto.jpg" alt="Foto de Claudia"><br><br>
<a href="index.html">Página Principal
o

Página Uno</a><br>
<a href="pag2.html">Página Dos</a><br>
<a href="pag3.html">Página Tres</a><br>
<br>
<a href="http://www.bolivia-internet.com/">Bolivia en Internet</a><br>
<a href="ftp://ftp.microsoft.com/pub/">FTP de Microsoft</a><br>
<a href="mailto:cae@bolivia-internet.com">Envía comentarios
sobre este manual por E-Mail</a><br>
<br><br>
<a href="#tope">De vuelta arriba</a>
</center>
</body>
</html>
Podrá notar que los enlaces de la parte inferior hacen referencia a recursos
que se encuentran en Internet. Reemplazando la dirección E-Mail del ultimo
enlace, podrá crear un enlace a su E-Mail. El último enlace hace referencia
a una porción de la misma página, que fue definida al inicio de la página
HTML. Esta parte es útil para accesos a partes diversas de una sola página.

Frames
Ofrece la posibilidad de utilizar marcos y varias páginas en una sola.
Etiqueta <frameset> </frameset>
Define la disposición gráfica de los marcos en la pantalla.
Atributos:
• Rows Determina el alto de las filas
• Cols Determina el ancho de las columnas.
• Framespacing Espacio entre frames
Una vez que cargue la nueva página frames.html podrá ver los marcos que
se crearon.
Notará que los enlaces del marco derecho aparecen en el mismo marco, lo
que debemos hacer es
redireccionar estos enlaces usando el atributo target en el ejemplo
pag4.html que quedaría de
esta manera:
Etiqueta de comentarios 
Se trata de una etiqueta que puede ser introducida en cualquier parte del
código y que es utilizada
para realizar acotaciones y/o comentarios.
Sintaxis de Ejemplo:

Etiqueta de comentarios <comment> </comment>
Se trata de una etiqueta que puede ser introducida en cualquier parte del
código y que es utilizada

para realizar acotaciones y/o comentarios.
Sintaxis de Ejemplo:
<comment>Los comentarios se introducen de esta manera</comment>
Etiqueta <address></address>
Ofrece una manera de dr formato a un pequeño cuerpo de texto que se
asemeje a la rotulación de
una carta convencional.
Sintaxis de ejemplo:
<address>Roberto Rojas<br>
POBOX 2282<br>
La Paz – Bolivia</address>
Etiqueta <cite> </cite>
El texto dentro de la etiqueta <cite> aparece en cursivas para representar
una cita
<cite>Este texto estará inclinado</cite>
Etiqueta <code> </code>
El texto dentro de la etiqueta <code> aparece en una fuente con caracteres
mono espaciados
cuando se visualiza a través de un navegador.
<code>Este texto aparece con tipo de letra especial</code>
Etiqueta <credit> </credit>
Esta etiqueta se emplea para indicar los créditos por el material incluido en
un documento. A
menudo se asignan créditos para las fuentes e individuos que se citan en
forma directa.
<credit>Foto usada bajo permiso de Carlos Aníbarro</credit>
Manual Básico de HTML
Página 25
Etiqueta <em> </em>
Indica que se debe dar énfasis al texto que se contiene. EL navegador
resaltará este texto con
negrillas e inclinación italica.
<em>Texto resaltado</em>
Etiqueta <kbd> </kbd>
La etiqueta <kbd> indica al navegador que interprete el texto especificado
en una fuente en
negritas de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar
una entrada del
teclado hecha por el usuario.

<kbd>Teclee su mensaje acá:</kbd>
Etiqueta <nobr> </nobr>
La etiqueta <nobr> impide que el navegador inserte un salto de línea,
incluso cuando es
adecuado el ajuste de texto. Algunas cadenas de texto no deberían
romperse bajo ninguna
circunstancia. Un buen ejemplo de una cadena de texto que debe
permanecer sin cortes es un
URL extenso.
No deseo que esta dirección URL larga sea cortada:
<nobr>http://www.bolivia-internet.com/irc</nobr>
Etiqueta <p> </p>
La etiqueta <p> o de párrafo, indica el inicio y el final de oraciones a exhibir
con un solo párrafo.
<p>a partir de ahora definimos párrafos de esta manera.</p>
<p align=”center”>Párrafo en el centro</p>
<p align=”left”>Párrafo a la izquierda</p>
<p align=”right”>Párrafo a la derecha</p>

Etiqueta <pre> </pre>
La etiqueta <pre> significa texto “preformateado” y se usa para conservar
espacios y saltos de línea en cuerpos de texto. Esta etiqueta resulta útil en
el formateo de un párrafo completo que elautor quisiera que el navegador
cliente lo exhibiese palabra por palabra.
<pre>El texto que usted ve.
Aparecerá tal cual, incluidos los retornos de carro</pre>
Etiqueta <s> </s> o <strike> </strike>
Instruye al navegador que tache el texto incluido entre las etiquetas.
<strike>Este texto esta tachado</strike>
Etiqueta <strong> </strong>
Hace que el navegador exhiba el texto en negritas. Algunos navegadores
muestran el texto en
cursivas.
<strong>Este texto esta sobre saltado</strong>
Etiqueta <sub> </sub>
Instruye al navegador que exhiba el texto especificado como subíndice.

Agua: H<sub>2</sub>0
Etiqueta <sup> </sup>
Indica al navegador exhibir el texto especificado como super índice
Mate: 2*2 = 2<sup>2</sup>.
Etiqueta <tt> </tt>
Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en
una fuente de ancho
fijo.
<tt>Este es un tipo de letra de teletipo</tt>
Etiqueta <var> </var>
Indica al navegador que exhiba el texto especificado en una fuente más
pequeña, de ancho fijo.
<var>Este texto será mas pequeño y de formato especial</var>
Atributo bgproperties=”fixed ” del BODY
Indica a su navegador Internet Explorer que mantenga el fondo constante y
no móvil de forma
vertical.
<body text=”#FFFFFF” bgcolor=”#000000” background=”fondo.gif”
bgproperties=”fixed”>

<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />

La etiqueta AUDIO de HTML 5 permite los siguientes atributos:

autobuffer : permite la carga automática del archivo, y los valores posibles
son “true” o “false”
autoplay : reproduce automáticamente el audio
controls : muestra los controles de reproducción
height : define la altura del reproductor (en píxeles)
loop : ejecuta la reproducción en bucle, cuando finaliza vuelve a empezar
src : URL del archivo o fuente a reproducir
type : tipo de archivo o fuente (audio/mp3, video/ogg, video/mp4, …)
width : define el ancho del reproductor (en píxeles)

Para insertar vídeo en HTML 5, haríamos lo siguiente (es muy similar al
caso del audio):

<video src=”video.avi controls autoplay />

Codigo html

Más contenido relacionado

La actualidad más candente (20)

Destacado (8)

Similar a Codigo html (20)

Más de alexander314 (20)

Codigo html