Comandos Básicos de HTML

Empezando por su definicin, consideramos una pgina web a un documento disponible en Internet, o World Wide Web (www), codificado
segn sus estndares y con un lenguaje espcfico conocido como HTML. Es algo a lo que estamos acostumbrados a acceder si leemos este artculo pero no todos conocen realmente su funcionamiento. A estos sitios se puede llegar a travs de los navegadores de Internet, que reciben la informacin del documento interpretando su cdigo y entregando al usuario la informacin de manera visual. Estos suelen ofrecer textos, imgenes y enlaces a otros sitios, as como animaciones, sonidos u otros. Una pgina web necesita un lugar donde alojarse para que cuando el usuario solicite la informacin desde su navegador, la informacin que esta contiene se cargue y aparezca en el ordenador. Es por ello que los sitios web se encuentran en un servidor web o host, que podra definirse a grandes rasgos como un gran ordenador que entrega el contenido cuando se solicita por la red. Este mismo servicio de almacenamiento se conoce como hosting. Tipos de pgina web Bsicamente existen dos tipos de pginas web: estticas y dinmicas. Las estticas forman parte de pocas anteriores, puesto que son de contenido fijo y no son aptas a actualizaciones constantes. En el caso de las dinmicas, pueden ser construidas en HTML o en otra extensin, como por ejemplo PHP. En este ltimo caso se permite la interaccin en tiempo real, apto para algunas pginas web con estas necesidades especficas, como pueden ser los foros. Elementos principales de una pgina web Los elementos principales en una pgina web son:

Texto: a veces redactado por un nico autor y otras veces por los usuarios de la misma en el caso de algunas pginas dinmicas con lenguaje como php. Imgenes: gif, jpg y png son los tres formantos que suelen utilizarse normalmente. Audio y vdeo: suele utilizar las extensiones midi, wav o mp3. Tambin se utilizan las incrustaciones de archivos almacenados en otros sitios, como por ejemplo se hace al aadir vdeos de Youtube. Otros: existen adems otros elementos que han ido aumentando y evolucionando tambin con el paso de los aos y las nuevas tecnologas. Estos son Adobe Flash, Adobe Shockwave, Java o enlaces (tambin llamados hipervnculos), por ejemplo.
Qu se necesita para crear un sitio web? Para crear un sitio web se necesita un editor de html o texto. Algunos editores conocidos para esta funcin son Microsoft Frontpage y Dreamweaver, parecidos a Microsoft Word en su uso pero con su funcin especfica. Por otro lado, existen proveedores que permiten crear pginas sencillas, como es el caso de Wordpress con la creacin de blogs y tambin de pginas web en funcin de la plantilla que se utilice. Este es un recurso gratuito y sencillo para cualquier usuario. En segundo lugar se necesita un cliente FTP que permita cargar la informacin a un servidor (en el caso de Wordpress o Blogger no es necesario puesto que es posible alojar la pgina en sus propios servidores). Los ms usados son SmartFTP, aunque es de pago, y los gratuitos Filezilla y OpenSource. Y por ltimo, para acceder a estas pginas web, se necesitan los navegadores. Entre los ms utilizados se encuentra Firefox, Safari o Internet Explorer. Este ltimo viene por defecto instalado en los equipos con sistema operativo Microsoft, al igual que ocurre con Safari y los dispositivos de Apple.
Comandos Bsicos de HTML

<HTML> Inicio de un documento hipertext </HTML> Final de un documento hipertext <HEAD> Inicio del encabezamiento </HEAD> Final del encabezamiento <TITLE> Inicio del ttulo de pagina </TITLE> Final del ttulo de pagina <BODY> Inicio del cuerpo del programa de la pagina </BODY> Final del cuerpo del programa de la pagina <BODY BGCOLOR=XXXXXX> Fijar el color del fondo de la pagina, que se indica con un codigo de 6 dgitos (X) <B> Inicio del texto en negrita </B> Final del texto en negrita <I> Inicio del texto en cursiva
</I> Final del texto en cursiva <BLINK> Inicio del texto parpadeante </BLINK> Final del texto parpadeante <H1> Inicio de texto ttulo </H1> Final de texto ttulo <BR> Canvio de parrafo <CENTER> Inicio de centraje de un objeto </CENTER> Final de centraje de un objeto <HR> Genra una linea de separacin <AHREF> Conexin hipermedia con otros recursos ( marcadores de la misma pagina, paginas web,...) </A> Final conexin hipermedia <IMG SRC="fichero de imagen"> Presenta una imagen, un grafico. Admite formatos GIF y JPG
Estructura
La estructura de un programa de una pagina es la siguiente: <HTML> Inicio de la pagina con codigo HTML <HEAD> Inicio encabezamiento <TITLE> </TITLE> Comando para indicar el nombre de la pagina en el navegador </HEAD> Final del encabezamiento
<BODY> Inicio del cuerpo de comandos y de informacin </BODY> Final del cuerpo </HTML> Final del codigo de la pagina HTML La escritura de la pagina y el codigo se tienen que realizar con un editor de texto, como el Bloc de notas, Libreta o Notepad de Windows, que estan en el menu de accesorios, y a la hora de guardar el fichero hace falta poner la extension .htm (tienes que guardarlo en formato htm, por ejemplo:" Prueva.htm" Para poder crear una pagina web, necesitamos crear una carpeta que se llame "Web" y alojarla en el Disco duro (C:/Web/Prueva1), que es donde trabajaremos y alojaremos las paginas webs, yo en mi caso llamare a la pagina "Prueva1"
<html>
<head><tilte>Pagina Web</tilte></head> <body bgcolor="red"> Tablas <br> <table border="2"> <tr> <td>fila 1 columna 1</td> <td>fila 1 columna 2</td> </tr> <tr> <td>fila 2 columna 1</td> <td>fila 2 columna 2</td> </tr> </table> <br>
video desde youtube<br> <iframe width="420" height="315" src="http://www.youtube.com/embed/j8roWX... frameborder="0" allowfullscreen></iframe> <br> flash, musica y video(agregar el archivo en el codigo html)<br> <embed src="aqui escribe tu el nombre de la pelicula flash o de tu musica o de video">
</body> </html>
Para crear una pgina web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3. Otra forma de disear un archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mnimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje. A continuacin les mostraremos las etiquetas mas comunes que deben aprenderse para hacer una pagina Web. Estructura de los documentos de HTML Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en comn. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrar el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD>
cabeza y <BODY> cuerpo. La cabecera puede contener informacin y siempre contiene el titulo del documento encerrado por el elemento <TITLE>. En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imgenes, sonidos, hipervnculos, etc. Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden:
Ejemplo: <HTML> <HEAD> <TITLE> Ttulo de mi pgina de Internet </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera pagina </CENTER> </H1> <HR> Esta es mi primera pagina, aunque todava es muy sencilla. Como el lenguaje HTML no es difcil, pronto estaremos en condiciones de hacer cosas mas interesantes. <P> Aqu va un segundo prrafo. </BODY> </HTML>
Para escribir ttulos se usa la etiqueta <Hx></Hx> en donde x es un nmero. Ejemplo: <h1>Titulo principal</h1> <h2>Titulo secundario</h2> <h3>Titulo terciario</h3> <h4>Titulo cuarto nivel</h4> <h5>Titulo quinto</h5>
<h6>Titulo sexto</h6> Quedara mas o menos as: Titulo principal Titulo secundario Titulo terciario Titulo cuarto nivel Titulo quinto Titulo sexto 5. Etiquetas de prrafo Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy til debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma lnea. Para alinear un prrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes: <p align="left"> Prrafo... </p> Alinea a la izquierda. <p align="center"> Prrafo... </p> Realiza un centrado. <p align="right"> Prrafo... </p> Alinea a la derecha. Cuando nosotros queremos que lo que
escribimos aparezca en otra lnea utilizamos el comando <BR>. Al terminar de escribir un prrafo es conveniente y esttico utilizar el comando para separar un prrafo de otro que es <HR> Etiquetas para darle formato al texto: Para el tamao y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres atributos: tamao (Size), Tipo de letra o fuente (face) y color Formato: <B> y </B> Sirve para colocar un texto en Negrita. <U> y < /U> Sirve para subrayar un texto <STRIKE> y </STRIKE> Sirve para tachar un texto. <STRONG> y </STRONG> Cumple la misma funcin que <B> <I> y <I> Para colocar un texto en cursiva. <EM>texto con nfasis</EM> texto con nfasis <CITE>citacin</CITE> citacin <DFN>definicin</DFN> definicin <KBD>teclado</KBD> teclado <SAMP>ejemplo</SAMP> ejemplo SIZE: Regula el tamao de los
caracteres. Ejemplo:<font> texto... </FONT>. FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc.
Ejemplo: <FONT> texto</FACE> Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML: 1. Mediante la especificacin de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul) 2. Mediante la especificacin del nombre del color en ingle
s
Ejemplos: <FONT COLOR="WHITE">Blanco</FONT>
Blanco
#FFFFFF <FONT COLOR="BLACK">Negro</FONT>
Negro
#000000 <FONT COLOR="RED">Rojo</FONT>
Rojo
#FF0000 <FONT COLOR="GREEN">Verde</FONT>
Verde
#00FF00 <FONT COLOR="BLUE">Azul</FONT>
Azul
#0000FF <FONT COLOR="YELLOW">Amarillo</FONT>
Amarillo
#FFFF00 <FONT COLOR="CYAN">Cyan</FONT>
Cyan
#00FFFF <FONT COLOR="MAGENTA">Magenta</FONT>
Magenta
#FF00FF Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la
libertad de utilizar 16,7 millones de colores. De esta manera trabajamos independientemente de los navegadores Web. Si especificamos el nombre del color, podemos evitar la definicin del color en forma hexadecimal que es un poco ms difcil. Actualmente estn estandarizados tan slo 16 colores. Existen colores adicionales los cuales son dependientes de los navegadores Web. Primero que todo debe escribir un smbolo #. A continuacin siguen las 6 cifras para la definicin del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor verde y las 2 ltimas el valor azul. Las cifras hexadecimales son: 0 (0000) 1 (0001) 2 (0010)
3 (0011) 4 (0100) 5 (0101) 6 (0110) 7 (0111) 8 (1000) 9 (1001) A (1010) B (1011) C (1100) D (1101) E (1110) F (1111)
Para ponerle color de fondo a la pgina escribir: <body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro. Colocar mal los colores de fondo en nuestras pginas puede provocar
problemas. Qu ocurra con los links o enlaces si colocramos un fondo de color azul?. Puesto que los links son azules cuando todava no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo. Se puede imaginar todava un caso peor si decidiramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la informacin que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes: * text="#nmero" Para el color del texto. * link="#nmero" Para el color de los enlaces. * vlink="#nmero" El color con que aparecern los enlaces ya visitados.
* alink="#nmero" Color del enlace cuando lo pulsamos. Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num"> Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta: background="localizacin de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo: <body background="/documentos/html/gifs/dra gonball.gif"> Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina.
Etiquetas META Son usadas para poner meta-informacin del documento. Esta "directiva" indica al visor de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la pgina en sus bases de datos. Ejemplo: <META NAME = "Pagina de Pablo" content = "Mi pagina personal de Sailor Moon"> Indica al visor el nombre de la pgina y sus contenidos principales. <META NAME="Author" content="Pablo Ravioli"> Indica el nombre de la persona que elabora la pagina WEB <META NAME = "keywords" content = "Informacin de Sailor Moon">
Indica al visor las palabras clave para los buscadores de Internet. Para hacer listas: Las listas se definen de forma muy sencilla: se dice dnde empieza la lista, dnde empieza cada punto y dnde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de lnea, o al menos sin texto por delante (slo espacios o tabulaciones). Las listas pueden ser: Lista desordenada, <UL> (Unordered List). Lista ordenada, <OL> (Ordered List). Ejemplos de diferentes tipos de listas: Lista con nmeros romanos: <ol> <li type=I>Manzana <li type=I>Zanahoria <li type=I>Lechuga
<li type=I>Tomate </ol> Manzana Zanahoria Lechuga Tomate Lista numerada: <ol> <li>Manzana <li>Zanahoria <li>Lechuga <li>Tomate </ol> Manzana Zanahoria Lechuga Tomate Lista con puntos: <ul>
<li> Manzana <li> Zanahoria <li> Lechuga <li>Tomate </ul> Manzana Zanahoria Lechuga Tomate Lista con crculos: <ul> <li type=circle> Manzana <li type=circle> Zanahoria <li type=circle> Lechuga <li type=circle> Tomate </ul> Manzana Zanahoria Lechuga Tomate
Lista con cuadrados: <ul> <li type=square> Manzana <li type=square> Zanahoria <li type=square> Lechuga <li type=square> Tomate </ul> Manzana Zanahoria Lechuga Tomate 6. Como insertar una imagen A la hora de crear una pgina Web podemos introducir grficos de forma muy sencilla, slo hay que tener en cuenta que las imgenes deben tener formato Gif o JPEG. La etiqueta utilizada para agregar imgenes a una pgina Web es <IMG> y va
acompaada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar. Es decir: <IMG SRC="lugar donde guardo la imagen"> Supongamos que tenemos la imagen dragonball.gif, que est presente en el mismo directorio en donde est la pgina y que la queremos insertar. La etiqueta apropiada sera: <IMG SRC="dragonball.gif"> Y el usuario ver en el browser: Para poner la imagen en la izquierda escribir: <IMG ALIGN=LEFT SRC=" dragonball.gif "> A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif"> Y si se quiere poner la imagen en el centro:
<P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P> Hiperenlaces, Hyperlinks, Anclas o Links Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parmetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y despus cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aqu para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML: <a href="http://www.nasa.gov/">Pulse aqu para visitar a la NASA</a> Que se vera de esta forma: Pulse aqu para visitar a la NASA Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir: <a href="imagen.gif">Foto</a> entonces
al hacer clic en el texto Foto nos abrir la imagen.gif. Tambin se puede ir a otro enlace por medio de una imagen. Lo nico que se debe hacer es cambiar el texto por una imagen: <a href="http://www.altavista.com"><img src="Logo.jpg"></a> Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del Logo.jpg (que podra ser el logo del Altavista) y se convierta en una "manito", al hacer clic nos enve al buscador Altavista. Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: <a href="mailto:pfravioli[arroba]fibertel.com .ar">Mandame un Email</a> Entonces cuando se haga clic sobre esta
palabra Mandame un Email se abrir (por defecto) el Microsoft Outlook Express con la direccin del destinatario ya escrita. Caracteres especiales Existe una razn evidente que impide que podamos escribir ciertos smbolos directamente en un texto HTML, como por ejemplo el <: dichos smbolos tienen un significado en HTML, y es necesario diferenciar claramente cundo poseen ese significado y cundo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusin, en este caso <. Los smbolos afectados por esta limitacin, y la forma de escribirlos, se detallan a continuacin: * < (Menor que): <
* >(Mayor que): > * & (smbolo de and, o ampersand): & * " (comillas dobles): " Es decir, que para escribir <"hola"> en nuestro texto HTML original debemos poner <"hola">. El otro caso especial se da cuando en un texto HTML se quiere escribir una ee, por ejemplo. Existe una forma fcil de hacerlo, que consiste en utilizar cdigos como las que antes se presentaron para escribir ciertos smbolos. Los cdigos comienzan siempre con el smbolo &, y terminan con un punto y coma (. Entre medias va un identificador del carcter que queremos que se escriba. Los cdigos necesarias en nuestro idioma son: * : á * : é * : í
* : ó * : ú * : Á * : É * : Í * : Ó * : Ú * : ü * : Ü * : ñ * : Ñ * : ¿ * : ¡ * ?: ? * !: ! * @: @
Por lo tanto la palabra pgina la podramos escribir como : pgina página Otro ejemplo: En qu ao
estamos? Sera: &#191En qué año estamos? Es por ello que si deseamos que cualquier visor de pginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes cdigos para representarlas. Recuerden que las etiquetas se pueden escribir en maysculas o en minsculas, es lo mismo poner <HTML>, <html> o <HtmL>. Una vez que terminamos de escribir todo nuestro documento, lo guardamos ponindole un nombre, y necesariamente lo debemos guardar con la extensin .HTM o
.HTML. Para ir visualizando lo que hemos estado haciendo tendramos que abrir nuestro browser (Netscape o Internet Explorer), hacemos click en la opcin FILE o ARCHIVO, estando all seleccionamos OPEN o ABRIR, le damos BROWSE o EXAMINAR, seleccionamos el archivo y le damos OPEN. Luego le damos ACEPTAR, e inmediatamente se abrir nuestra pagina.
http://www.youtube.com/watch?v=gI1JA3YG5QM http://www.youtube.com/watch?v=lMVy6SKn5vE
full
http://www.youtube.com/watch?v=5YpDRG8eAqw

Comandos Básicos de HTML

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Comandos Básicos de HTML

Caricato da

Copyright:

Formati disponibili

Empezando por su definicin, consideramos una pgina web a un documento disponible en Internet, o World Wide Web (www), codificado

Comandos Bsicos de HTML

Ejemplos: <FONT COLOR="WHITE">Blanco</FONT>

#FFFFFF <FONT COLOR="BLACK">Negro</FONT>

#000000 <FONT COLOR="RED">Rojo</FONT>

#FF0000 <FONT COLOR="GREEN">Verde</FONT>

#00FF00 <FONT COLOR="BLUE">Azul</FONT>

#0000FF <FONT COLOR="YELLOW">Amarillo</FONT>

#FFFF00 <FONT COLOR="CYAN">Cyan</FONT>

#00FFFF <FONT COLOR="MAGENTA">Magenta</FONT>

#FF00FF Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la

Potrebbero piacerti anche