Introducción HTML

INSTITUTO SUPERIOR JUJUY Laboratorio de Programacin La esencia de la web: el HTML
2 AO Prof. Valeriano
Antes de comenzar con las pautas, usted primero debe saber qu es HTML (hyperText Markup Language). HTML es el cdigo en el que est escrita cualquier pgina que se encuentra en la web. Bsicamente, se trata de un formato de texto comn y corriente, dentro del cual se incluyen determinados comandos, conocidos como tags. Cada tags, cuya sintaxis est dada por un smbolo menor que , un comando y un smbolo mayor que, esto es < comando > , efecta una determinada accin. Para finalizar tal accin es necesario declarar un tag con el mismo comando y anteponerle una barra </ comando>.
ESTRUCTURA BASICA DE UNA PAGINA HTML

Los documentos HTML o pginas web deben r espetar cierta estructura bsica y es la siguiente:
< ! -- comentarios, autor, detalles de la pgina, etc. -- > < html > < head > < title > mi pagina < / title> < / head > < body > ... ... ... < / body > < / html >
Los puntos suspensivos indican que ah, va el contenido de la pgina. Existen algunos comandos que no necesitan ser cancelados como por ejemplo:
< br > genera un retorno de carro, salto de lnea. < hr > crea una lnea divisoria horizontal. < p > inicio de prrafo comn. ...Etc.
CONOZCA LOS PRINCIPALES ASPECTOS DE ESTA DISCIPLINA Detrs del armado de pginas web se esconden tcnicas de diseo convencional, conceptos como tablas y frames, palabras raras como HTML, y miles de detalles ms que debe conocer quien desee desempearse con xito en esta disciplina DIEZ CONSEJOS UTILES 1. Grabe un mismo grfico en GIF y JPEG, vea cul de ellos ocupa menos espacio y utilice se. 2. Antes de mostrar imgenes de gran tamao en una pgina, dele la posibilidad al visitante de ver una versin reducida para que l determine si quiere verla o no. 3. Trate de no reducir el tamao del texto de la pgina a niveles que slo puedan leerse con muy buena vista. Si lo hace para ganar espacio, es preferible que coloque menos texto y lo distribuya en ms pginas.
INSTITUTO SUPERIOR JUJUY Laboratorio de Programacin
4. Evite agregar secciones al sitio que an no estn listas colocando en su defecto el famoso y pesado cartel EN CONSTRUCCION. Esto es lo mismo que nada. Este tipo de situaciones juegan ms en contra que a favor. 5. Controle que los links que aparezcan en sus pginas no estn desactualizados. Ya sea porque usted ha modificado el nombre de algunas de sus pginas, o porque uno de los sitios de los que tena asociado ha desaparecido. Esto frustrar a los visitantes. 6. Haga de su sitio algo ms que la copia de un folleto, un artculo, o cosa parecida. Proporcione maneras de interactuar: encuestas, concursos, foros, teleconferencias, etc. 7. No abuse de la utilizacin de artilugios en las pginas slo porque esta de onda . Por ejemplo, si existe una manera de evitar el uso de frames reemplazndolos por tablas, use estas ltimas. Lo mismo se aplica al caso de elaborar un formulario con una amplia caja de texto solo para recibir mensajes, cuando es ms efectivo suministrar una direccin de correo electrnico. 8. Si decide que el sitio requerir extensiones (plug-ins) del navegador para que se vea su contenido, sepa que como mnimo tendr que indicarle a los visitantes donde bajar esa extensin y como instalarla. An as, muchos no lo harn, ya sea porque utilizan otro navegador, o porque les parece que no se justifica gastar tiempo en agregar algo para ver slo su sitio. En resumen: prescinda del uso de extensiones. 9. Sabiendo que no todos acceden de la misma manera a Internet, asegrese de facilitar la compatibilidad de su sitio. Para ello puede generar distintas versiones del sitio, cada una diseada para un determinado navegador (obviamente, para los ms utilizados). 10.Procure que todos los tags que defina en las pginas estn declarados lo ms completos posibles (con la mayor cantidad de parmetros que se puedan especificar). Eso reducir parte de los clculos que debe hacer el navegador para presentar el contenido de la pgina. COMANDOS HTML ESTRUCTURA ESQUELETO DE LA PGINA
<HTML> <HEAD> <TITLE> Tipee aqu su impresionante titulo </TITLE> </HEAD> <BODY> ... aqu va todo lo dems ... ... </BODY> </HTML> <!---> comentarios
PRRAFOS Y TTULOS
ETIQUETAS PARA PARRAFOS Y COSAS PARECIDAS

<P> <HR> <BR> <H1> .. .. <H6> Nuevo prrafo Lnea horizontal Salto de lnea Encabezados ( el ms grande )
(el ms pequeo)

FORMATO DE TEXTO
ADORNE TODO CON ETIQUETAS

Negritas Cursivas Subrayado <B> texto en negritas </B> <I> texto en cursivas </I> <U> texto en modo subrayado </U>
Monoespaciado <TT> ... </TT> texto que se ver como si hubiera sido escrito en una mquina de escribir. Preformateado <PRE> ... </PRE> texto que conservar todos sus espacios y tabuladores. Tamao de fuente <FONT SIZE = tamao> aqu va el texto afectado </FONT> Color del texto <BODY TEXT = "#nnnnnn"> Color de fondo <BODY BGCOLOR ="#nnnnnn"> Centrar prrafos <CENTER> aqu van los encabezados, textos, y grficos que desea centrar </CENTER>
VIETAS
UN MONTON DE ETIQUETAS DE LISTA

Lista numerada: <OL> <LI> Primer objeto <LI> Segundo objeto ..etc. </OL> Lista con vietas: <UL> <LI> Primera vieta <LI> Segunda vieta ..etc. </UL> Lista de definicin: <DL> <DT> Primer trmino <DD> Primera definicin <DT> Segundo trmino <DD> Segunda definicin ..etc. Estilo de lista enumerada <OL TYPE = tipo> 3

Estilo de lista con vietas <UL TYPE = tipo>
IMAGENES
ETIQUETAS DE IMAGEN
Imagen bsica <IMG SRC = "nombre de archivo"> Imagen alineada con la parte superior del texto <IMG SRC = "nombre de archivo" ALIGN = TOP> Imagen alineada al centro del texto <IMG SRC = "nombre de archivo" ALIGN = MIDDLE> Imagen alineada con la parte inferior del texto <IMG SRC = "nombre de archivo" ALIGN = BOTTOM> Imagen con texto opcional <IMG SRC = "nombre de archivo" ALT = "texto opcional"> Dimensiones de imagen <IMG SRC = "nombre de archivo" WIDTH = x
HEIGHT = y>
HIPERVINCULO
PARA SALTAR: ETIQUETAS DE VINCULO

Vnculo externo <A HREF = "URL"> texto de vnculos </A> Vnculo interno <A HREF = "#nombre del ancla"> texto de vnculos </A> Ancla <A NAME = "nombre del ancla"> texto de ancla </A> Correo electrnico <A HREF = "mailto:direccin de correo electrnico"> texto de vnculos </A> FTP archivo <A HREF="ftp://anfitrin/directorio/nombre de archivo"> texto de vnculos </A>
TABLAS
ETIQUETAS DE TABLA
Una tabla bsica: <TABLE BORDER> <CAPTION ALIGN = TOP | BOTTOM> texto del ttulo </CAPTION>

<TR> <TD> primera fila , primera columna </TD> <TD> primera fila , segunda columna </TD> <TD> primera fila , tercera columna </TD> </TR> <TR> <TD> segunda fila , primera columna </TD> <TD> segunda fila , segunda columna </TD> <TD> segunda fila , tercera columna </TD> </TR> ...etc. </TABLE> Encabezados: <TR> <TH> encabezado de primera columna </TH> <TH> encabezado de segunda columna </TH> <TH> y as sucesivamente ... </TH> </TR> Alineacin horizontal: <TD ALIGN = LEFT | CENTER | RIGHT> <TH ALIGN = LEFT | CENTER | RIGHT> Alineacin vertical: <TD VALIGN = TOP | MIDDLE | RIGHT> <TH VALIGN = TOP | MIDDLE | RIGHT> Extender columnas: <TD COLSPAN = nmero de columnas> <TH COLSPAN = nmero de columnas> Extender filas: <TD ROWSPAN = nmero de filas> <TH ROWSPAN = nmero de filas>
Tamao de borde de tabla <TABLE BORDER = tamao> Ancho de tabla <TABLE WIDTH = ancho> Espaciado de celda de tabla <TABLE CELLSPACING = espaciado> Relleno de celda de tabla <TABLE CELLPADDING = relleno>
MUSICA EN HTML
Establecer msica de fondo <BGSOUND SRC = "musica.mid" LOOP = infinite>

Introducción HTML

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introducción HTML

Încărcat de

Drepturi de autor:

Formate disponibile

INSTITUTO SUPERIOR JUJUY Laboratorio de Programacin La esencia de la web: el HTML

ESTRUCTURA BASICA DE UNA PAGINA HTML

INSTITUTO SUPERIOR JUJUY Laboratorio de Programacin

ETIQUETAS PARA PARRAFOS Y COSAS PARECIDAS

INSTITUTO SUPERIOR JUJUY Laboratorio de Programacin

ADORNE TODO CON ETIQUETAS

UN MONTON DE ETIQUETAS DE LISTA

INSTITUTO SUPERIOR JUJUY Laboratorio de Programacin

PARA SALTAR: ETIQUETAS DE VINCULO

INSTITUTO SUPERIOR JUJUY Laboratorio de Programacin

S-ar putea să vă placă și