1. LENGUAJE HTML
CONCEPTO:
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado
predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de
texto, así como para complementar el texto con objetos tales como imágenes.
HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir,
hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual
puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
ESTRUCTURA BASICA
Para comenzar a escribir un documento en HTML, debes saber que todo lo que escribas debes hacerlo dentro
de los signos “<” para empezar a escribir un comando y “>” para cerrar el la escritura del comando escrito.
Ejemplo: <html>.
La mayoría de los comandos sedeben abrir y cerrar, para cerrar usaremos el signo “/”. Esto quiere decir que
siempre usaremos el mismo comando pero de dos formas, uno abierto y otro cerrado.Ejemplo: “<html>” para
empezar a escribir el documento y “</html>” para cerrar y terminar de escribir el documento.
La estructura básica quecompone un documento y que debemos saberlo de memoria es la siguiente:
HTML> ----Seescribeparacomenzarlapagina.
<HEAD> -- Se escribe paracomenzarel encabezadoque se mostraraenla parte superiorde la
página.
<TITLE> -------este comandose utilizaparaescribirel titulo. El titulose muestradentrodel
encabezado.
</TITLE>----- Este comandocierrael tituloylo diferenciadel restodel documento.
</HEAD>----- Este comandosirve paracerrar el encabezado.
<BODY> --- Este comandopermite empezaraescribirtodoloque formará parte del documento.
</BODY> -- Este comandopermite terminarde escribirel contenidodel documentoyse
utilizaparacerrar la escrituradel contenido.
</HTML> --- Se utilizaparaterminarde escribirel documento.
Ejemplo:
<HTML>
<HEAD>
<TITLE>TITULO DE LA PAGINA</TITLE>
</HEAD>
<BODY>
HOLA, ESTA ES MI NUEVA PAGINA.
</BODY>
</HTML>
Para escribir un documento HTML solo tienes que usar el programa “Bloc de notas” de Windows y al
finalizar guardar el documento con el nombre que quieras pero con la extensión “.html” Ejemplo: Joel.html
Para ver como queda tu pagina escrita debes abrir el documento que guardaste con extensión “.html” y
notaras que ahora aparece con el icono del navegador Internet explorer o con el icono de otro navegador.
Solo dale doble clic y el documento se abrirá.
Si deseas modificar y agregar o quitar algo al documento, solo tienes que escribirlo en el documento de bloc
de notas que lo tienes abierto.En caso de haber cerrado el documento de bloc de notas,debes hacer clic en
el menú “Ver” y luego en “Codigo fuente” y lo modificas a tu gusto. No olvides de guardar los cambios que
hagas en el bloc de notas en el menú “Archivo” y luego en “Guardar”.
2. PRINCIPALES COMANDOS
<P> </P> Sirve paraescribirpárrafosy separarlosunode otro.
<BR> Sirve para cambiar delínea,para que se vea el texto debajo de otro. Por ejemplo lo podemos usar
cuando escribimos versos.
<HR> Sirve para crear líneas en la pagina.Tiene algunos atributos como:
WIDTH, permite determinar el ancho que ocupará la línea en la página.Ejm:
<HR WIDTH=80%>, no te olvides que se pone en porcentaje.
SIZE, permite determinar el grosor de la línea. Ejemplo: <HR SIZE=10>.
También pueden escribirsedentro de una sola etiqueta: <HR WIDTH=50% SIZE=10>
<BLOCKQUOTE> Permite crear espacios detabulación (Dejar un pequeño espacio en blanco) al inicio del texto
escrito.Al final debes cerrar esta etiqueta con </BLOCKQUOTE>.
<PRE> Permite mostrar en la pantalla el texto tal como lo escribiste.
Para dar formato al texto:
<FONT> Permite modificar el formato del texto. Ejemplo:
<FONT SIZE="2" COLOR="red" FACE="Arial">, Define tipo de letra (Face), tamaño
(Size) y color (Color) a tu gusto. No te olvides de cerrar </FONT> al final
para que no modifique a los demás textos que escribas.
<B> Sirvepara poner en negritael texto escrito.
<I> Sirvepara poner en cursiva el texto escrito.
<U> Sirve para subrayar el texto escrito.
<STRIKE> Sirve para Tacharel texto escrito.
<H1> Se utiliza para escribir títulos y resaltarlo deforma rápida.Ejem: <H1> Bienvenido</H1>, <H2></H2>,
<H3></H3><H4></H4><H5></H5><H6></H6>. Esta etiqueta modifica el tamaño del titulo de mayor a menor. <H1>
indica mayor tamaño y <H6> indica menor tamaño.
Para alineación de párrafos:
Como ya se dijo anteriormente, para escribir párrafosseutiliza la etiqueta <P>, pero a esta etiqueta le podemos
agregar algunos atributos como ALIGN=”LEFT” para poder alinear la posición queocupará el párrafo en la pagina.
Ejemplo:
<P ALIGN="LEFT">, alinea el texto hacia la Izquierda
<P ALIGN="RIGHT">Alinea el texto escrito hacia la Derecha
<P ALIGN="CENTER"> Alinea el texto escrito hacia el centro.
3. COLOR DE FONDO DE PÁGINA
El colorde fondode páginapor defecto(Automáticamente) esde colorblanco,perolopodemoscambiar
y utilizarel colorque creamosconveniente.Paracambiar el fondo tenemosque agregardentrode la
etiquetaBodyel comandoBgcolor=”Escribirel nombre del color”.Ejemplo:
<BODY BGCOLOR=”RED”> Esto permitiráverel fondode colorrojo.
Tambiénesposible ponerunaimagencomofondode nuestrapagina,paraelloagregaremos el comando
Backgrounddentrode la etiquetabody.Ejemplo:
<BODY BACKGROUND=”FLOR.JPG”>
OJO: Para crear una páginacon una imagende fondo,necesariamente debescrearunacarpetay dentro
de ellaguardar laimagenque vasa utilizarytambiénlapáginaque estaselaborando.
TABLAS
Las tablasson unode loselementosmásinteresantesde HTML. Permiten,porejemplo,escribirtextoen
variascolumnas,hacerlistasde equivalencias,tablaspropiamentedichas,etc.
Para iniciarunatabla debemosusarlaetiquetaTABLE,ytambiénpodemosindicarle el grosordel borde
con el comandoBORDER. Ejemplo:
<TABLE BORDER=1>
Despuésde haberindicadoel iniciode latabla,debemosindicarel iniciode unanuevafila,paraello
utilizaremoslaetiqueta<TR> y para indicaral menosunaceldadentrode la filautilizaremoslaetiqueta
><TD>. Ejemplo:
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
Ejemplocompletode una tabla con dosfilas y cuatro celdas:
<body>
<TABLE BORDER=1>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>
</body>
JPG esla extensióndel dibujooimagenque estas
poniendo,sinocopiaslaextensión,simplementeno
se mostrara el dibujoenel fondo. TambiénPuedes
usar imágenesconextensiónGIF.
Nombre
del dibujo
Inicio
de fila
Fin de
fila
Inicio de
la Primera
celda.
Fin de la
Primera celda.
Inicio dela
segunda
celda.
Fin de la segunda
celda.