Professional Documents
Culture Documents
HTML
Es el lenguaje estndar utilizado en la web para representar informacin que es intercambiada por usuarios en forma de hipertexto. Se caracteriza por tener una serie de etiquetas que indican al navegador como interpretar y dar formato al texto que las acompaa.
Las etiquetas indican al navegador como se debe de mostrar la pagina. (Negritas, cursivas, parrafos, etc.)
Es estandar por que cualquier cliente web puede visualizar estos documentos e interpretar el HTML, esto nos da una seguridad de que cualquiera puede leerlos.
Explorer Mozilla Firefox
HTML
Las paginas web son archivos de texto y para poder crearlas, se necesita cualquier editor de textos capaz de grabar los archivos con formato de texto.
Bloc de notas Wordpad
Estructura de HTML
HTML es un lenguaje que esta basado en el uso de marcas o etiquetas.
La palabra que se encierra entre estos dos smbolos es la accin que el navegador debe de hacer para mostrar.
Estructura de HTML
Para delimitar esta accin debe de aplicarse otra etiqueta de terminacin y para eso se necesita del smbolo justo delante de la palabra.
/
Ejemplo </HTML>
Estructura de HTML
Todas las paginas web.
Empieza: <HTML> Termina: </HTML>
Cabecera
Se emplea para formar informacin acerca del documento, como el titulo, autor o fecha del mismo.
Para representarla se utilizan la etiqueta con su delimitacin.
<HEAD> </HEAD>
Cuerpo
Contiene el texto de la pagina, es decir, la informacin que se va a presentar al usuario.
Para representarla se utilizan la etiqueta con su delimitacin.
<BODY> </BODY>
Estructura bsica
<HTML> <HEAD>
Cabecera de la pagina.
</HEAD> <BODY>
Cuerpo de la pagina.
</BODY> </HTML>
Ms de la Cabecera
Esta es optativa pero es recomendable ponerle titulo a la pgina, el cual aparecer en la parte superior del navegador. Para que esto sea posible se necesitan las etiquetas:
<TITLE> </TITLE>
Todo lo que esta escrito en medio de esas dos etiquetas corresponden al titulo de la pagina que se visualizara en dicha barra del navegador.
Ejemplo
<HTML> <HEAD>
<TITLE> Titulo cualquiera </TITLE>
</HEAD> <BODY>
Cuerpo de la pagina.
</BODY> </HTML>
Ms del Cuerpo
Los comentarios son lneas que nos facilitan el entendimiento del cdigo o algo que es interesante recordar.
Para los comentarios solo se necesita una etiqueta no es necesario cerrarla ya que el cometario se escribe dentro de la misma etiqueta. Esta es representada: <! Comentario -> El navegador ignorara esa lnea para mostrar.
Ejemplo
<HTML> <HEAD>
<TITLE> Titulo cualquiera </TITLE>
</HEAD> <BODY>
<!- Cuerpo de la pagina. ->
</BODY> </HTML>
Acentos y smbolos
Algunos navegadores de internet estn desarrollados en otros lenguajes y por lo tanto el texto al aparecer nos encontramos con smbolos extraos cuando queremos poner acentos, smbolos de interrogacin o admiracin o incluso la letra .
Acentos y Smbolos
A continuacin la representacin de cada uno.
VOCAL / SIMBOLO CODIGO HTML á é í ó ú ñ ¿ ¡
Salto de lnea
En la parte BODY pone siempre todas las lneas de texto seguidas, si nosotros damos Enter a algn prrafo, el navegador no nos mostrara ese salto de lnea.
Para poder dar estos saltos necesitamos de la etiqueta: <BR> la cual no es necesario cerrar la etiqueta en ningn lado.
Prrafos o bloques
Cuando se construye una pgina en HTML el texto se construye en bloques, esto provocara que el navegador deje una lnea en blanco para separar unos bloques de otros. Para esta accin se necesita la siguiente etiqueta con su respectivo cierre: <P> </P>
El salto de lnea que produce <P> es igual a la que produce <BR> (P= BR y medio), solo que la separacin entre lneas es mayor. Aunque se pone la terminacin </P> para indicar que ha terminado el prrafo, HTML tambin identifica que ha terminado cuando encuentra otro <P>.
Prrafos o bloques
<P> y </P> llevan consigo otras funciones si el programador as lo desea, es decir, si quiere que el prrafo aparezca centrado, alineado a la izquierda o alineado hacia la derecha. <P ALIGN = alineacin> Donde alineacin corresponde a la posicin.
CENTER: Todas las lneas del prrafo aparecern centradas en la pantalla. LEFT: Todas las lneas del prrafo se alinearan a la izquierda. RIGHT: Todas las lneas del prrafo se alinearan a la derecha.
* Cabe mencionar que para centrar un texto tambien se puede utilizar las estiquetas <CENTER> texto </CENTER>
Ejemplo
<HTML> <HEAD>
<TITLE> Titulo cualquiera </TITLE>
</HEAD> <BODY>
<!- Cuerpo de la pagina. -> UPAV <BR> Noveno Cuatrimestre <P ALIGN RIGHT> Creando una p´gina web</P>
</BODY> </HTML>
Todas estas etiquetas la podemos ocupar de forma conjunta, es decir, poner negritas y subrayado al mismo tiempo, si es as se deben de ir cerrando las etiquetas en orden inverso a las colocadas en un inicio. <B><I><U> Texto </U> </I> </B>
Ejemplo
<HTML> <HEAD>
<TITLE> Titulo cualquiera </TITLE>
</HEAD> <BODY>
<!- Cuerpo de la pagina. -> UPAV <BR> <B><I><Noveno Cuatrimestre </I></B> <P ALIGN RIGHT> Creando una p´gina web</P>
</BODY> </HTML>
Ejemplo
<HTML> <HEAD>
<TITLE> Titulo cualquiera </TITLE>
</HEAD> <BODY>
<!- Cuerpo de la pagina. -> <FONT SIZE = 6>UPAV </FONT><BR> <B><I><Noveno Cuatrimestre </I></B> <P ALIGN RIGHT> Creando una p´gina web</P>
</BODY> </HTML>
Ttulos y Encabezados
Si bien para poder poner un titulo se pueden ocupar las etiquetas antes mencionadas, una forma mas sencilla para establecer los ttulos y encabezados es con la etiqueta. <H#> </H#> Donde # es el nmero del tamao, del 1 siendo el ms grande al 6 siendo el tamao menor. Esta etiqueta nos mostrara el tamao del texto ms grande. Unas ventajas de utilizar esta etiqueta es que nos ahorramos muchas ms que si utilizramos las anteriores, el codigo queda mas legible y comprensible y equivale a <P> seguido de <FONT SIZE = #> con sus respectivas terminaciones.
Tipo de Letra
La etiqueta FONT, nos sirve para emplearla en muchas formas, adems del tamao del texto me permite elegir la fuente de caracteres que utilizaremos, es decir el tipo de letra. Para poder llevarlo acabo necesitamos el atributo FACE dentro de la etiqueta FONT, siendo el cdigo de la siguiente forma: <FONT FACE = nombre de la fuente > por ejemplo. <FONT FACE =Arial> Texto <FONT> Ahora bien si combinamos FACE con SIZE quedara de la siguiente forma dentro del FONT: <FONT FACE= ARIAL size = 3> Texto </FONT>
Color a la pgina
Otra funcin de FONT es dar color al texto, para ello esta la etiqueta:
<FONT COLOR= color> Texto </FONT> Donde color es el nombre del color en ingles. <FONT COLOR= blue> Texto </FONT> <FONT COLOR= yellow> Texto </FONT>
Otra forma es con cdigos RGB donde es numeracin Hexadecimal. <FONT COLOR= #FF00FF > Texto </FONT>
Color Verde Negro Rosa Nombre Green Black Pink RGB #00FF00 #000000 #FF00FF
Color a la pgina
Para darle color al fondo de la pgina se necesita la etiqueta: <BODY BGCOLOR = color> Donde el color se puede establecer como anteriormente por ejemplo representarlo en ingles. * Se debe de tener cuidado con la eleccin del fondo ya que podra afectar la visibilidad del usuario o no distinguirse el contenido de la pagina. Para poder cambiar el color de todo el texto de la pagina se utiliza la siguiente etiqueta, solo respetara los casos donde ya hayas utilizado la etiqueta <FONT COLOR > <BODY TEXT = color> Donde el color se puede establecer como anteriormente por ejemplo representarlo en ingles.
Sangras y Alineaciones
Las sangras consisten en dejar un margen hacia los lados laterales en el texto. Para dar sangra a un texto necesitamos la etiqueta: <BLOCKQUOTE> Prrafo </BLOCKQUOTE> Esta etiqueta se puede colocar nuevamente dentro de un prrafo sin antes haber cerrado la primera, dando as un desplazado mas grande entre esta y su cierre.
Extras
Esta etiqueta respeta los saltos de lneas y espacios entre palabras. (puede reemplazar a <P> y <BR> ) <PRE> </PRE> Esta etiqueta hace que el texto parpadee. (Solo para Mozilla, Explorer no funciona) <BLINK> </BLINK> Esta etiqueta hace que se puedan establecer subndices. <SUB> </SUB> Esta etiqueta hace que se puedan establecer superndices. <SUP> </SUP>