|
Esta sección es un esbozo en construcción. Se aprecian tus aportes y paciencia |
Manual Basico de HTML
El siguiente manual se divide en tres partes , el aprendizaje del lenguaje HTML ,la utilizaciòn del lenguaje y por ultimo la fundamentaciòn y utilizaciòn de este para nuestras paginas.
Introducciòn
Antes que todo debemos saber que es HTML , para que sirve , como se aplica y que cosas puedo hacer con el .
*- Que es HTML -> dirijase a http://es.wikipedia.org/wiki/HTML
*- Para que sirve ->HTML es un lenguaje, que sirve para estructurar contenidos, orientado a la presentacion web .
*-Como se Aplica -> Se aplica con herramientas rusticas y medias,en realidad solo es necesario tener.
*-Gedit / Emacs entre otro editores de texto o compiladores web de html.
*-Un navegador cualquiera como mozilla/firefox/iceweasel entre otros para ejecutar nuestros archivos .html o .htm .
Estructura del Lenguaje
El lenguaje HTML esta dividido en 2 segmentos de programacion dentro de la estructura del lenguaje asi .
<HTML> -> Etiqueta de entrada para abrir la estructura del documento HTML
<HEAD>
-> Dentro de este segmento se peden hacer llamado de hojas de estilo .css , colocar titulo de la pagina en el navegador como el usos de etiquetas meta y autor para las busquedas y firma del autor de la pagina. """ Este Lugar es llamado la cabecera o cabeza por la etiqueta HEAD"""""
</HEAD>
<BODY>
-> Dentro de este segmento se coloca todo el codigo html y todo el contenido entre etiquetas como titulos , alineaciones, listas, formularios , colores , imagenes , videos , sonido en fin es el 99% de muestra web programada.""" este lugar es llamado el cuerpo por la etiqueta BODY """"
</BODY>
</HTML> -> Etiqueta de salida para cerrar la estructura del documento HTML
El lenguaje HTML , es un lenguaje que usa etiquetas de entrada y salida ,las cuales se pueden utilizar en diferentes tipos de niveles como principales o anidadas siempre y cuando estan vayas cerradas.
Ejemplo : Para la etiqueta de titulo en este caso se utiliza <title>, esta la podemos utilizar en la segemetación de <HEAD> o <BODY>. dependiendo del titulo que quiera hacer, si el titulo lo quiero hacer dentro de mi pagina web lo haria en BODY y si lo quiero tener en la barra del navegador utilizaria HEAD.
<HEAD> <title> Mi pagina Personal </title> </HEAD>
Explicacion ->
<title> al colocar esta etiqueta abro la sentencia de titulo </title> al colocar esta etiqueta cierro la sentencia de titulo de manera que cada etiqueta la debo cerrar para que cumpla la funcion y no aparescan errores , solo al cerrar se le coloca el "/"
Etiquetas Principales
A continuacion colocare el diccionario de etiquetas con su uso .
Etiquetas de Texto y alineaciòn
Las etiquetas de texto y alineaciòn , son las etiquetas que nos sirven para estructurar nuestros textos y aplicarles alineaciòn a estos.
Etiqueta |
Función |
<B> </B> |
Esta etiqueta colocaria nuestro texto en negrilla |
<BIG></BIG> |
Esta etiqueta hace que los caracteres se vean mas grandes |
<BLINK></BLINK> |
Esta etiqueta sirve para colocar el texto parpadeante (Nota:solopodemos ver este efecto en navegadores netscape, o mozilla. ) |
<EM></EM> o <I></I> |
Estas dos etiquetas colocarian nuestro texto en tipo italica /podemos utilizar alguna de estas dos. |
<FONT color="#XXXXXX"></FONT> |
Colocar nuestro texto en el color que queremos tomando en cuenta que "#XXXXXX" es el codigo del color que quiera. |
<FONT size="X"></FONT> |
Esta etiqueta coloca nuestro texto al tamaño que queremos teniendo en cuenta que "X" es un valor de 1 - 7 donde 1 es el mayor tamaño y 7 el menor tamaño. |
<PRE></PRE> |
Si queremos ver nuestro texto bien formateado , en tipos de espacios y puntos. |
<SMALL></SMALL> |
Si queremos colocar nuestro texto mas pequeño . |
<STRONG></STRONG> |
Aparte de utilizar <B> para colocarle negrilla a nuestros textos esta tambien lo hace o la podemos utilizar para resaltar. |
<SUB></SUB> |
Si queremos hacer expresiones matematicas este sirve para la base. |
<SUP></SUP> |
Este sirve para la Exponente |
<U></U> |
Si quieres subrayar el texto. |
<BR> |
Si quieres hacer espacios entre lineas Nota: esta etiqueta no se cierra |
<BLOCKQUOTE> </BLOCKQUOTE> |
Si quieres hacer un bloque de texto tipo comentario . |
<CENTER></CENTER> |
Si quieres centrar cualquier tipo de texto. |
<DIV align=center> </DIV> |
Si quieres centrar todo dentro de alguna tabla o cuadro transparente. |
<DIV align=left> </DIV> |
si quieres alienar el texto a tu izquierda. |
<DIV align=right> </DIV> |
Si quieres alinear el texto a tu derecha. |
<Hx></Hx> |
si quieres crear un titulo o subtitulo a tu tamaño utiliza en x un valor de 1 - 7 donde 1 es el tamaño mas grande . |
<Hx align=center></Hx> |
Si quieres un titulo centrado , colocandole el valor que desees entre 1-7 |
<Hx align=left></Hx> |
Si quieres un titulo a tu izquierda , colocandole el valor que desees entre 1-7 |
<Hx align=right></Hx> |
Si quieres un tituloa tu derecha , colocandole el valor que desees entre 1-7 |
<P></P> |
Si quieres hacer un parrafo de texto. |
<P align=center></P> |
Si quieres hacer un parrafo centrado |
<P align=justify></P> |
Si quieres hacer un parrafo justificado |
<P align=left></P> |
Si quieres hacer un parrafo a la izquierda |
<P align=right> </P> |
Si quieres hacer un parrafo a la derecha |
<!-- --> |
Si queremos comentar nuestro codigo lo podemos hacer con esta etiqueta , introduciendo el texto, asi <!-- comentario --> |
despues de los manejos de los textos, tambien podemos manejar los tipos de letras y tamaños como combinarlas con las anteriores .
Etiquetas de Multimedia
Las etiquetas multimedia las podemos utilizar para llamar archivos de video , sonido , imagenes y todo tipo de archivos que contengan imagen, video y sonido.
Etiquetas de Sonido
Para colocarle sonido a nuestra pagina solo utilizamos la etiqueta bgsound <bgsound parametros ...> </bg sound>
src="nombredelarchivo.algo" |
como en todas la setencias de insercion SRC es el atributo en donde le damos la ruta del archivo para que el lo llame y lo inserte en nuestra pagina. |
loop="l" |
Loop es el atributo en donde tu decides darle un valor entero de 1 a x para reproducir ese numero de veces el archivo en cada entrada o al contrario puedes utilizar la sentencia "infinite" para que lo haga todo el tiempo . |
balance="x" |
Puedes equilibrar el sonido dandole valores entre -10.0000_+10.000, donde 0 es sonido equilibrado |
volume="X" |
Puedes darle el valor de x entre -10.000 y 0 para el volumen del sonido de tu pagina -10,000 _ 0 +. |
Etiquetas de Video
La etiqueta <embed> es utilizada para insertar videos o musica en tu web desde cualquier lugar donde los tengas.
src="nombre del fichero .algo" |
Para llamar el fichero en donde se encuentre solo localmente. |
loop="n/true/false" |
loop lo utilizas igual que bgsound o con valores logicos. |
type="tipo_fichero" |
type es la etiqueta utilizada para identificar eltipo de archivo a nuestro navegador en formatos como "midi", "wav","ogg" entre otros. Ejemplo: type="audio/"aqui colocamos la extension"" = type="audio/ogg" |
autostart="true/false" |
con esta etiqueta tu defines si quieres que tu archivo se inicia a la entrada a tu pagina o no. |
pluginspage="URL" |
Suele ocurrir que nuestro usuarios no tiene le plugin para ver estos archivos de video , pues podemos colocarles el link para que descarguen el programa que necesiten. |
name="nombre de la etiqueta" |
es una utilidad para tus etiquetas las puedas identificar , y es una buena tactica para identar la programacion de tu pagina. |
volume="X" |
en embed cob diferencia a la etiqueta bgsound , solo le puedes dar a x valores de 0 a 100, para tu volumen. |
Ejemplo de utilización:
<embed src= "lugar donde este el archivo/nombre dle archivo.algo"
type="audio/algo" autostart="true"
->>> tambien podemos utilizar la etiquetas de tamaño para adecuar la resolucion de nuestro video. >>>> width="165" height="140">
</embed>
Etiquetas de imagenes
Bueno si a tu pagina quieres colocarle tu foto o imagnes para decorarla puedes utilizar las siquientes etiquetas para insertarlas, darle tamaños y colocarlas en el lugar que desees.
<IMG src="xyz.algo"> |
si queremos insertar una imagen en nuestra pagina utilizamosla siguiente etiqueta en donde xyz.gif es el archivo , teniendo en cuenta que podemos insertar imagenes .gif .bmp .jpg .png ..entre otras, teneiendo en cuenta que en src"aqui va la ruta de donde esta nuestra imagen " Ejemplo :/home/kal/imagen.algo |
<IMG src"xyz.algo " width=x height=y> |
si aparte de llamar nuestra imagen , queremos modificar su tamaño lo hacemos con Width que es Ancho y height que es Alto y en x le damos valores de 1 hasta lo queremos y lo mismo con height. |
<IMG _______ border=x> |
si queremos colocarle un marco o borde a la imagen lo podemos hacer colocandole un valor en x de 1 hasta donde queremos. |
<IMG _______ alt="xxxxxx"> |
si nuestra imagen no se muestra en el navegador , nosotros podemos colocarle un mensaje o nombre a la imagen, donde xxxxxx es la palabra , nombre o mensaje que le podemos dar ala imagen, puedes probarla quitandole una letra a la ruta de donde se encuentra nuestra imagen. |
<IMG ________ align=bottom> |
con esta etiqueta puedes ubicar o alinear la imagen en la parte inferior de tu pagina. |
<IMG _______ align=middle> |
Coloca tu imagen centrada |
<IMG _______ align=top> |
Coloca tu imagen en la parte superior |
<IMG ________ align=left> |
Coloca tu imagen a tu lado izquierdo |
<IMG _________ align=right> |
Coloca tu imagen al lado derecho |
<IMG _________ hspace=x> |
Si tienes texto al lado de tus imagenes y queda muy pegado , y quieres alejarlo utiliza esta etiqueta en donde x es un valor de 1 hasta el valor que desees alejarlo de tu imagen horizontalmente. |
<IMG ________ vspace=y> |
Esta etiqueta igual que hspace pero verticalmente por eso es vspace. |
Teniendo en cuenta que ______________ es donde hay mas etiquetas o valores de la etiqueta <IMG ___________ > .
Etiquetas de archivos o enlaces
Con estas etiquetas podemos crear enlaces o accesos a otras paginas o a paginas locales como lugares a una red y colocar accesos a descargas de nuestros archivos u otros.
Los accesos que podemos crear con las siguientes herramientas no solo pueden ser texto, si no tambien imagenes , animaciones o otro tipo de multimedia como botones que nos llevan a otro documento o pagina.
<A HREF="Aqui colocamos la direcion "> Enlace a mi pagina 2 </A>. Ejemplo de Dirección: La dirección seria "http://www.mipagina.com/misegundapagina.htm"
Etiquetas para nuestros enlaces.
*-Para utilizar nuestro enlace con texto y imagen Ir al índice <A HREF="direcion del enlace.htm"> <img src="imagen.algo"> </A>.
*-Direccionar a un correo *-Direccionar a un ftp *-Direccionar a otros protocolos
Etiquetas colores
Con estas etiquetas podemos darle color a nuestras paginas , textos y fondos, como utilizarlas en estilos , como .ccs , los usos de estas etiquetas son muy faciles pero tambien practicos de insertar.
Antes de colocar el listado que como insertarle color, doy una recomendacion o una herramienta muy facil a la hora de hacerlo con html, 1. podemos insertar colores invocandolos en ingles Ejemplo Si queremos colocarle color rojo a nuestra letra lo podriamos hacer asi: FONT COLOR="red"> ROJO </FONT> y asi lo podemos hacer con los demas colores
"blue" |
AZUL |
"green" |
VERDE |
"yellow" |
AMARILLO |
"lime" |
LIMA |
"magenta" |
MAGENTA |
"purple" |
PURPURA |
"cyan" |
CYAN |
"black" |
NEGRO |
"gray" |
GRIS |
"brown" |
MARRON |
"white" |
BLANCO |
"olive" |
OLIVA |
2. Podemos insertar colores con codigos predefinidos del lenguaje. como los codigos RGB que hacen la mezcla de (RED/GREEN/BLUE) osea rojo/verde/azul, los cuales toman tonalidas con sus mezclas y forman muchos mas tipos de colores.
Existen dos tipos de mezclas los RGB y Los CMY que serian los (CIAN/MAGENTA/YELLOW)algo asi como Amarillo/Azul/rojo que son los colores primarios. Con estos dos tipos de mezclas podemos insertar mas de 16 millones de colores en el web .
- Negro #000000
- Blanco #FFFFFF
*-Colores Aditivos Saturados
- Rojo: #FF0000 -> cada F representa un campo nulo que da una tonalidad al color al igual que el 0
- Verde: #00FF00
- Azul: #0000FF
Teniendo en cuenta estos tres colores pordriamos ir dandole valores numericos y letras para darle tonalidades a nuestra pagina .
*-Colores Sustractivos Nulos
- Cyan #00FFFF -
- Magenta #FF00FF
- Amarillo #FFFF00
Colores Secundarios y Terciarios
- Gris #808080
- Rosa #FF8080
- Violeta #800080
- Celeste #80FFFF
- Marron #800000
- Naranja #FF8000
- Lavanda #8000FF
- Turquesa #00FF80
- Oro #BBBB20
Si queremos alguna ayuda sobre estos colores o sobre el tema de mezclas tonalidades y otros [1] http://es.wikipedia.org/wiki/Colores_HTML.
Etiquetas de Marcos , Tablas , capas
Hojas de estilo
Formularios
Integracion de tecnologias cliente - servidor
HTML de otra forma
Pagina esta siendo Alimentada por KaL