Embed Size (px)
DESCRIPTION
NCCNJD JD SDBVOSBVUBV BV80EH374YERBV8EHVYF 8BV80EH3GGH7HRVBDVSBV HB HB8V BB8BSVB8 8BV8B 80 J 9H0BCYTR OA45JI IDS C8 DSR-50 VS MSR + L118A VS BALLISTA= MW3 VS BO2
Citation preview
Guía Básica de HTML
El lenguaje HTML (Hypertext Markup Language) se creo para que la información en la red viaje de una
manera rápida y precisa, para la construcción de páginas web.
Los navegadores de Internet (Internet Explorer, Firefox o Netscape) lo decodifican para describir la
estructura y el contenido de una página en forma de textos e imágenes.
Para comenzar, debemos saber que HTML utiliza una codificación genérica, la cual hace uso
de TAGS o etiquetas, mediante las cuales es posible separar el contenido del documento de su formato.
Las TAGS son comandos que se especifican en el cuerpo del documento, con el fin de darle las
características deseadas a la información.
Se escribe entre corchetes angulares y se definen con dos elementos:
TAGS de inicio. Son las que le indican al navegador que inicia un proceso de formato. Por ejemplo <B>
le dice al programa que las letras siguientes van en “negritas”.
TAGS de cierre: Le dicen al navegador que detenga el formato particular que venía editando. Las
etiquetas de cierre son idénticas a las de inicio excepto por un pequeño detalle: debe de incluir una /
(diagonal) inmediatamente después del primer corchete.
Por ejemplo: </B> le indica al programa que hasta ahí terminan las letras en “negritas”.
A continuación se indicarán las etiquetas de mayor uso en la creación de páginas web que te servirán
como referencia rápida:
1) Inicio de página: <html>
2) Cierre de página: </html>
3) Toda página Web debe contener la siguiente estructura:
<HTML>
<HEAD>
<TITLE>Indicar Titulo</TITLE>
</HEAD>
<BODY>Escribir contenido </BODY>
</HTML>
Todo el texto que escribamos entre la etiqueta de apertura <html> y la de cierre </html>será
considerado por el navegador como html.
La cabecera (head) tiene información del contenido de nuestra página. (Esta parte es relevante para
los motores de búsqueda y no es visible para los visitantes.). La cabecera va entre las
etiquetas: <head> </head>.
El título (title) de la página que sí podrá ver el usuario sobre la barra de información de su
navegador. (Franja azul que está situada en la parte de arriba de la ventana en la que abre el
navegador). El título va entre las etiquetas: <title> </title>.
En el cuerpo del documento (body) se colocan el texto y las imágenes. El cuerpo va entre las
etiquetas: <body> </body>.
Dentro del cuerpo (body) de tu documento html estarán todas las cosas que tus visitantes podrán ver:
texto, imágenes, tablas, colores, enlaces, etcétera.
También puedes usar otras etiquetas html para dar formato al texto o a los diferentes elementos de la
página como el color, el tipo y tamaño de letra, la alineación, entre otros, veamos algunas:
4. ETIQUETAS DE FORMATO
Negrita: <B>Texto en negrita</B>
Cursiva:<I>Texto en cursiva</I>
Subrayado: <U>Texto subrayado</U>
Preformateado: <PRE>Texto que conserva todos sus espacios y tabuladores</PRE>
5. ETIQUETAS DE ALINEACIÓN
HTML no da muchas opciones para alinear el texto. Por default el texto se alinea a la izquierda de la
página. Pero tú puedes usar la etiqueta <CENTER>para especificar que ese texto deberá ir centrado
como en el ejemplo siguiente:
<CENTER>Aquí va el texto</CENTER>
Para otras opciones de alineación, se usan las etiquetas de propiedades de estilo, las cuales te dan
cuatro opciones para alinear el texto:
<H1 STYLE=”text-align: right”>Texto alienado a la derecha</H1>
<H1 STYLE=”text-align: left”>Texto alienado a la izquierda</H1>
<H1 STYLE=”text-align: center”>Texto centrado</H1>
<H1 STYLE=”text-align: justify”>Texto justificado</H1>
6. ETIQUETAS PARA CAMBIAR LA FUENTE
HTML tiene dos etiquetas que te permite controlar las características de las fuentes: <FONT> y
<BASEFONT>.
La etiqueta <FONT> controla los cambios para un bloque de texto individual por lo que al terminar la
selección se debe cerrar con el <I>TAG</I> </FONT>
La etiqueta <BASEFONT> aplica el cambio a todo el documento y no existe etiqueta de cierre.
Los atributos más importantes para cambiar las fuentes son:
•FACE: Indica el tipo de letra, a continuación encontrarás las más comunes
ArialTimes New RomanVerdana
Ejemplo: <FONT FACE=Arial>Aquí va el texto</FONT>
•SIZE: Indica el tamaño en una escala del 1 al 7, donde 7 es la letra más grande y 1 la más pequeña.
El tamaño más utilizado es 3
Ejemplo: <FONT SIZE=5>Aquí va el texto</FONT>
•COLOR: Indica el color del texto. El lenguaje estándar de HTML maneja 14 colores que puedes usar
porque ya están predefinidos tanto por su nombre en inglés como por un número de referencia.
HTML entiende ambas opciones, sin embargo es mucho más sencillo que te los aprendas por sus
nombres.
Ejemplo: <FONT COLOR=GREEN>Aquí va el texto en color verde</FONT>
Lista de los colores incluyendo su número:
Black #000000 Silver #C0C0C0 Gray #808080
White #FFFFFF Maroon #800000 Purple #800080
Fuchsia #FF00FF Green #008000 Lime #00FF00
Olive #808000 Yellow #FFFF00 Navy#000080
Teal #008080 Aqua #00FFFF
7. ETIQUETAS PARA PÁRRAFOS
Nuevo párrafo (dos espacios): <P>
Línea horizontal: <HR>
Salto de línea (un espacio): <BR>
8. ETIQUETAS PARA GENERAR LISTAS
Las listas sirven para desplegar la información que debe ser enumerada o tabulada de una manera
organizada.
Lista numerada: Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura:
<OL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</OL>
Lista con viñetas: Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la
siguiente estructura:
<UL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</UL>
9. ETIQUETAS PARA VÍNCULOS A OTRAS DIRECCIONES INTERNAS O EXTERNAS
Permiten al usuario navegar con facilidad a través de la red, creando vínculos que lleven hacia una
misma parte del website o hacia otros sitios web.
Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>.
A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente
manera:
<A HREF="URL">Texto del vínculo</A>
El URL será la dirección completa de la página a la que se desea crear el vínculo. Ejemplo: http
://www.escuela-de-negocios.com
Vínculos de correo electrónico
La estructura es la siguiente:
<A HREF=mailto :"dirección de correo electrónico" Texto del vínculo </A>
Ejemplo:
<A HREF=mailto :"[email protected]" Sugerencias y comentarios</A>
10. ETIQUETA PARA AGREGAR IMAGENES
Para colocar una imagen en una página basta con llamarla desde el documento HTML.
Lo primero es diseñar la imagen en cualquier programa y guardarla con terminación GIF o JPEG que
son los formatos aceptados por el lenguaje HTML.
La etiqueta es la siguiente:
<IMG SRC= "Nombre del archivo" >
Donde "Nombre del archivo" es el nombre del archivo de gráfico que desea desplegar.
11. ETIQUETA PARA GENERAR TABLAS
En general las tablas pueden ser sin borde o con borde las que lleven borde deberán indicar el tamaño
del mismo.
La etiqueta para crearlas es:
<TABLE BORDER="Número entre 0 y 7">
<CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</CAPTION>
<TR>
<TD>Primera fila, primera columna</TD>
<TD>Primera fila, segunda columna</TD>
<TD>Primera fila, tercera columna</TD>
..........
</TR>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
..........
</TR>
etc...
</TABLE>
El número que se designa en la etiqueta determina el ancho del borde de la tabla. Este número puede
estar entre 0 y 7.
La etiqueta: <CAPTION ALIGN=TOP ó BOTTOM> Aquí va el texto del título</CAPTION>. Da la
posibilidad de colocarle un título a la tabla, bien sea en la parte superior (TOP) o en la parte inferior
(BOTTOM).
12. METATAGS
Las METATAGS son etiquetas dirigidas a informar a los motores de búsqueda sobre el contenido de tu
página; tienen un formato diferente a los etiquetas normales de apertura/cierre <> </>.
Las METATAGS se sitúan al principio del documento HTML.
Su estructura es la siguiente: <meta name="" content="">
<meta name=“aquí va el nombre del metatag” content=“aquí el contenido del metatag”>
Las METATAGS de descripción y palabras clave son los más importantes e imprescindibles su código
es el siguiente:
METATAG de descripción: contiene información sobre la página que muestra el motor de búsqueda
en sus resultados.
<meta name="Description" content="">
<meta name=“Description” content=“aquí pondrás una breve descripción de la página”>
METATAG de palabras clave: con él informamos al buscador cuáles consideramos que son la
principales palabras clave de nuestra página.
<meta name="Keywords" content="">
<meta name=“keywords”content=“aquí ponemos la(s) palabra(s) clave por las que queremos que se
encuentre nuestra web”>
Existen otras METATAGS opcionales que son:
<meta name="author" content="nombre del autor de la página web">
<meta name="robots" content="aquí informaremos al motor de búsqueda si queremos que registre esta
página o no">
La METATAG “robots” es importante si tenemos páginas privadas y no queremos que aparezcan en los
resultados de búsqueda, así como las páginas de información del tipo “quiénes somos”, “contáctenos”,
etcétera que no tienen mayor interés ni relación con nuestro tema.
Para que los buscadores no registren estas páginas y no sigan sus enlaces, sólo escribe “noindex”,
“nofollow”.
Para evitar que el robot de Google indexe y acceda a una página determinada de nuestra webusamos
la METATAG “robots”. Esto sirve para páginas internas, pero ¿qué hacemos si lo que no queremos es
que Google siga un enlace a una página externa? ¡muy fácil! podemos añadir al enlace un atributo que
se llama “rel=nofollow” que indica al robot de Google que no debe seguirlo.
Ejemplo: un link, quedaría de la siguiente manera:
<a href=http://www.emprendedores-de-negocio.com/articulos.html rel=”nofollow”>lea el artículo del
experto en mkt</a> esto hará que el buscador no siga el enlace, pero continuaría activo para nuestros
visitantes.
Con esto terminamos la guía rápida de HTML que te servirá como referencia al momento de que
construyas tus páginas web.
![Encuesta Creaturisme (2) (3) · 2020-05-28 · WKZ WZKs/E / ñ z WZK h dK o ï ì î u µ Z v } v } o v µ W >/ Ed z ô ñ ] À } Ç } ] À } z ð ô E µ o Ç µ o z î õ](https://img.pdfslide.es/doc/110x75/5f0a3a1c7e708231d42aa05e/encuesta-creaturisme-2-3-2020-05-28-wkz-wzkse-z-wzk-h-dk-o-.jpg)
![2020 2022...]Ú T¢ G 2-101 TEL.076-238-1411 FAX.076-238-1412 ±ï®À ¼ ³ã ç Ü ±ï®À Êy0³ã ç Ü ±ï®À GU³ã ç Ü ±ï®À ñ,³ã ç Ü ±ï®À F³ã ç Ü ±ï®ÀÚ](https://img.pdfslide.es/doc/110x75/60d69f6e5496bc10940f3b40/2020-2022-t-g-2-101-tel076-238-1411-fax076-238-1412-.jpg)
![1XWXEH Ö Á Ç Ó § ñ ñ Õ { ] 1XWXEH Ö Á Ç Ó - TELNETmia/sb/img/img315_nutube1226.pdf · 2016-12-29 · ¯ · v o O q · ¿ é ¯ · u v + Ö û z | % ¯ · v z k É \ b](https://img.pdfslide.es/doc/110x75/5fba8e2a8f27206874659153/1xwxeh-1xwxeh-telnet-miasbimgimg315nutube1226pdf.jpg)
![Clean Up | Limpieza · ... P Z v ] Ç W o ~WW X ^ u o ( } Ç o v ] ... ò í ï íE } µ o l Doble ô X ñ r r î í X ò u](https://img.pdfslide.es/doc/110x75/5b5cd5d97f8b9a65028c9c93/clean-up-limpieza-p-z-v-c-w-o-ww-x-u-o-c-o-v-o-i-i.jpg)
![Cuadernillo ingresantes 2013escuelasecundaria48-parana.edu.ar/descargas/alumnos...µ o ^ µ v ] E Ñ ð ô t µ v ] o o } ] À ] í } U Ç t î ì î ì W > v P µ Ç > ] µ t W }](https://img.pdfslide.es/doc/110x75/60de16b1346d28356533e977/cuadernillo-ingresantes-2013escuelasecundaria48-o-v-e-t.jpg)
![d¿ ô W Ì {¢¦ Ç è æ · d¿ ô W qz w× ÜÖ¢IUUQT XXX UPVTIJO PS KQ £ ´ ] °Xi^M{Ù \w d¿ ô W Ì {¢¦ Ç è æ_ {t £ æsO Ñ Ãæ ~64Ë ~ çÅ~Ñ ïÅw 7 BtmM ox Wqþz](https://img.pdfslide.es/doc/110x75/5e78ac8bbd711c174017bdfc/d-w-oe-d-w-qz-w-oeiuuqt-xxx-upvtijo-ps-kq-.jpg)