Scribd
Cargar
32 vistas

Codigos y Explicacion de HTML

El documento proporciona una descripción de las principales etiquetas (tags) de HTML para estructurar y dar formato a una página web. Explica cómo añadir un título, color de fondo, imágenes, texto en negrita, cursiva o subrayado, encabezados, párrafos, listas ordenadas y no ordenadas, y comentarios en el código HTML.

Cargado por

pakoguti07
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
32 vistas

Codigos y Explicacion de HTML

El documento proporciona una descripción de las principales etiquetas (tags) de HTML para estructurar y dar formato a una página web. Explica cómo añadir un título, color de fondo, imágenes, texto en negrita, cursiva o subrayado, encabezados, párrafos, listas ordenadas y no ordenadas, y comentarios en el código HTML.

Cargado por

pakoguti07
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

HTML

CODIGO DESCRIPCION

Estructura básica de html

<html> </html> Apertura y Cierre


<head> </head> Cabecera
<body> </body> Cuerpo

Para agregar un titulo de la pagina web

<title>TITULO DE LA PAGINA WEB </title> Este se escribe en la cabecera.


<basefont size="tamaño"> Escribir en la cabecera

Esto se modifica en el cuerpo (body)


< body bgcolor="blue"> o
Color del fondo de la Página Web
<body bgcolor="#0000FF">
<body background="nombredelarchivo.gif">
Imagen como fondo de la Página
Web, según el formato
<body background="nombredelarchivo.jpg">
<body text="#FF0000"> o bien,
Color del texto de toda la pagina.
<body text="red">
Comentarios
Para añadir comentarios
<!-- y //-->
aclaratorios dentro del cogido
Salto de línea

<br> Salto de línea en el navegador

Separadores
Para separar secciones dentro
<hr>
de una misma página, es la
regla horizontal.
Para aumentar el tamaño o el
<size ="5">
grosor del separador
<align="left"> Alineación Izquierda
<align=" right "> Alineación Derecha
<align="center"> Alineación en el Centro
<hr align="center" size="5"> Se puede expresar todo junto:
Formato de texto
<font>
</font>
<font color="color"> Color de la letra
< font face="comic sans ms"> Tipo de letra
<font size="4"> Tamaño de la letra del 1 al 7
<font color="color" size="4" face="comic sans Se puede expresar todo junto:
ms"> TEXTO</font>
< b> NEGRITAS (Bold)</b> Letras en negrita
<i> CURSIVA (Italica)</i> Letras en cursiva
<u> SUBRAYADO (Underline)</u> Letras subrayadas
<s> TACHADO ()</s> Letras tachadas
<strong> GRAN ENFASIS o DESTACADO
(Strong)</strong>
<blink> PARPADEANTE (Blink)</blink>
<tf> TAMAÑO FIJO (TypeWhiter)</tf>

<em> ENFASIS (Emphesis)</em>

<sub>SUBINDICE</sub>
<sup>SUPERINDICE</sup>

PARRAFOS

<p> </p> Sirve para separar parrafos


Left- izquierda:
<p align="left"> TEXTO</p>

<p align="right"> TEXTO</p> Right-derecha:


<p align="center"> TEXTO.</p>
Center-centro:

<p align="justify"> TEXTO</p>


Justify-justificado:

Se utiliza para agrupar bloques


de texto, pero con la diferencia
<div></div>
de que la separación entre ellos
es menor.
<div align="center">TEXTO</div>
Alinear en el centro

ENCABEZADOS
<h1></h1> Encabezados desde h1 hasta h6.
En caso de querer alinear los
<h2 align="center">TITULO</h2>
encabezados
IMÁGENES
Para insertar imagen, no
<img src="nombre de la imagen.jpg"> olvides crear una carpeta donde
guardaras todo junto.
<img src="imagen.jpg" alt="DESCRIBIR LA
Texto alternativo
IMAGEN">
<img src="imagen.jpg" border="4"> Borde de la imagen
<div align="left"><img Alinear la imagen a la izquierda
src="imágenes/EQUIPO.JPG"></div> de la pantalla:
<div align="center"><img Alinear la imagen al centro de la
src="imágenes/EQUIPO.JPG"></div> pantalla:
<div align="right"><img Alinear la imagen a la derecha
src="imágenes/EQUIPO.JPG"></div> de la pantalla:
Reducir el tamaño:
<img src="img1.gif" width="28" height="21"
width - anchura en pixeles
alt="Tamaño original" border="3"> <br
heigth - alto en pixeles
Rellenar imágenes con texto
Este código mostrará la imagen
<div align="center"><img src="logo.gif"></div>
en el centro:
El texto tan extenso como
<p> <img src="imagen.gif" align="right">TEXTO
queramos que cubrirá la parte
SUFICIENTE PARA CUBRIR LA IMAGEN </p>
izquierda de la imagen.
El texto tan extenso como
<p> <img src="imagen.gif" align="left"> TEXTO
queramos que cubrirá la parte
SUFICIENTE PARA CUBRIR LA IMAGEN </p>
derecha de la imagen.
<br clear="left"> Saltara verticalmente hasta
encontrar el lateral izquierdo libre.
Es para saltos de línea, en lugar
<br clear="right"> Saltara verticalmente hasta
de usar un simple br, se le
encontrar el lateral derecho libre.
agrega clear.
<br clear="all"> Saltará verticalmente hasta
encontrar ambos laterales libres.
Ajusta la imagen a la parte más
alta de la línea. Esto quiere decir
top que, si hay una imagen más alta,
ambas imágenes presentaran el
borde superior a la misma altura.
Ajusta el bajo de la imagen al
bottom
texto.
Colocara el borde inferior de la
Absbottom imagen a nivel del elemento más
bajo de la línea.
Hace coincidir la base de la línea
Middle de texto con el medio vertical de
la imagen.
Ajusta la imagen al medio
absmiddle
absoluto de la línea.
Sirven para indicar el espacio
libre, en pixeles, que tiene que
Atributos vspace y hspace colocarse entre la imagen y los
otros elementos que la rodean,
como texto, otras imágenes, etc.
Con este atributo podemos
Atributo lowsrc indicar un archivo de la imagen
de baja resolución.
Listas
<ul> enlistar </ul> precedido por <li> Listas desordenadas
Ejemplo: (unordered list).
<ul> <li>Argentina <li>Perú <li>Chile </ul>
Tipo de viñeta: circle, disc,
<ul type="tipo de viñeta">
square
<ul type="square"> square
<li>Elemento 1 <li>Elemento 2 <li>Elemento 3
<li type="circle">Elemento 4 </ul> circle
<ol> </ol> Listas ordenadas
Cada elemento será igualmente precedido de (ordered list)
su etiqueta <li>.
<p>Reglas de comportamiento en el Ejemplo:
trabajo</p>
<ol> <li>El jefe siempre tiene la razón <li>En
caso de duda aplicar regla 1 </ol>
<p>Ordenamos por numeros</p> <ol type="1"> Ordenado por numeración:
<li>Elemento 1 <li> Elemento 2 </ol>
<p>Ordenamos por letras</p> <ol type="a"> Ordenado por letras:
<li>Elemento a <li> Elemento b </ol>
<p>Ordenamos por números romanos Ordenado por romanos:
empezando por el 10</p>
Ordenado por numero romano
<ol type="i" start="10"> <li>Elemento x <li>
empezando por el 10:
Elemento xi </ol>

La etiqueta principal es <dl> y </dl> (definition Listas de definición


list). Cada elemento es presentado
La etiquetas del elemento y su definición son junto con su definición.
<dt> (definition term) y <dd> (definition
definition) respectivamente.
<p>Diccionario de la Real Academia</p> Ejemplo:
<dl><dt>Bruja<dd>Señora montada en una
escoba <dt>Oreja <dd>Sesenta minutejos </dl>
Anidando listas
Ejemplo:
<p>Ciudades del mundo</p>
Ciudades del mundo
<ul> <li>Argentina
<ol> <li>Buenos Aires • Argentina
<li>Bariloche 1. Buenos Aires
</ol> <li>Uruguay 2. Bariloche
<ol> <li>Montevideo • Uruguay
<li>Punta del Este </ol> </ul>
1. Montevideo
2. Punta del Este
OTROS FORMATOS PARA LINK
Sirve para asignar el color del
Color del texto text: texto de la página. Por defecto es
el negro.
Es el color de los enlaces que no
link: han sido visitados. (por defecto
es azul clarito)
Es el color de los enlaces
vlink: visitados. Por defecto su color es
morado.
Es el color de los enlaces activos.
alink:
Un enlace está activo en el
preciso instante que se pulsa.
Vamos a ver una página donde el
color de fondo sea negro, y los
colores del texto y los enlaces
Ejemplo de color del texto
sean claros. Pondremos el color
Para ello escribiríamos la etiqueta body así:
de texto blanco y los enlaces
<body bgcolor="#000000" text="#ffffff"
amarillos, más resaltados los que
link="#ffff33" alink="#ffffcc" alink="ffff00">
no estén visitados y menos
resaltados lo que ya están
visitados.
Márgenes ESCRIBIR
Para indicar el margen a los
leftmargin: lados de la página. Válido para
internet explorer.
Para indicar el margen arriba y
topmargin: debajo de la página. Para internet
explorer.
La contrapartida de leftmargin
marginwidth: para Netscape. (Margen a los
lados)
Igual que topmargin, pero para
marginheight: Netscape. (Margen arriba y
abajo)
Ejemplo:
<body topmargin=0 leftmargin=0 Esta página tiene el fondo blanco
marginheight=0 marginwidth=0 bgcolor="ffffff"> y dentro una tabla con el fondo
<table width=100% bgcolor=ff6666><tr><td> rojo. En la página podremos ver
<h1>Hola amigos</h1> <br> <br> Gracias por que la tabla ocupa el espacio en
visitarme! </td></tr></table> </body> la página sin dejar sitio para
ningún tipo de margen.
Enlaces en HTML
etiquetas <a> y </a>
<a href="destino">contenido</a> Sintaxis

Enlaces internos
<a href="#abajo">Ir abajo</a> Son los enlaces que apuntan a
un lugar diferente dentro de la
misma página.
<a name="abajo"></a> Generar un enlace en el destino.
Este enlace llevara el mismo
nombre para distinguirlo de los
otros posibles enlaces realizados
dentro de la misma página. La
etiqueta que escribiremos será
ésta:

Enlaces locales
<a href="archivo.html">contenido</a> Un sitio web está constituido de
páginas interconexas.

También podría gustarte