Curso Html Basico

HTML Basico Por Facundo Oliva – SEO/SMO Manager Grupo BGL

HTML (HyperText Markup Language) 􀂄 Creado en 1989 por el físico nuclear TIM BERNERS-LEE 􀂄 Se elaboró un protocolo para soportar el envío de información por la red. HTTP (Hyper Text Transfer Protocol)

􀂄 Lenguaje que permite definir un formato a documentos de texto. 􀂄 Define sintaxis y ubicación de imágenes, texto, instrucciones y objetos del navegador. 􀂄 Posibilidad de conectar un documento con otros o con distintos recursos de internet. Hiperlinks 􀂄 URL: Uniform Resource Locator 􀂉 Dirección de un objeto en el Web

􀂄 Estructura general <html> <head> <title>The Title of the Document</title> </head> <body> ... </body> </html>

􀂄 Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo: <meta name="description" content=“xxx"> <meta name="keywords" content=“abc,def,"> <meta http-equiv="Content-Type“ content="text/html; charset=ISO-8859-1"> 􀂄 En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.

􀂄 La cabecera es la sección comprendida entre <head> y </head>. 􀂉 Dentro de la cabecera también se suele incluir código en JavaScript, y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas <script language="JavaScript"> <!– Aquí iría el código // --> </script> < link href="estilo.css" rel="stylesheet" type="text/css">

􀂄 El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc. 􀂄 Atributos de “body” 􀂉 BGCOLOR - color de fondo de la página. Formato: #rrggbb 􀂄 <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue> 􀂉 TEXT - color del texto por omisión. Defecto: negro 􀂉 BACKGROUND - ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento.

Titulos Los títulos o encabezados se emplean al comienzo de una sección. Las etiquetas que se usan son: 􀂉 <h1> Título </h1> 􀂉 .. 􀂉 <h6> Titulo H6 </h6> Estilos de fuentes – algunos de los existentes son: 􀂉 <B>Texto en Negrita</b> 􀂉 <I>Itálica</i> 􀂉 <B><I>Negrita e Itálica</i></b> 􀂉 <U>Subrayado</u> 􀂉 <EM>Enfatizado</em> 􀂉 <STRONG>Fuerte</strong> 􀂉 <BIG>Texto grande</big> 􀂉 <SMALL>Texto pequeño</small> 􀂉 <SUB>Subindice</SUB> 􀂉 <SUP>Superíndice</SUP> 􀂉 <BLINK> Texto intermitente</blink> 􀂉 <STRIKE>Texto tachado</STRIKE>

Tamaños de fuentes – dos maneras número del 1 al 7 (de más pequeño a más grande) 􀂄 <font size=1> Esta es la letra más pequeña que se puede conseguir </font> 􀂉 referencia relativa (tamaño por defecto 3) 􀂄 <font size="+1"> Esto es igual que poner size=4 </font> Tipos de fuentes 􀂉 <font face="Courier">Eso se verá en la fuente Courier</font>

􀂄 Parrafos y bloques 􀂉 <P> Se utiliza para que los párrafos queden separados por una línea en blanco. 􀂄 Atributos: ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" 􀂉 <BR> punto y aparte. No tiene etiqueta de cierre 􀂉 <PRE> texto visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML 􀂉 <ADDRESS> empleada para indicar que un texto representa una dirección o una firma. Se presenta en cursiva y tabulado. 􀂉 <BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. 􀂉 <HR> Se emplea para representar una línea horizontal (no tiene cierre) 􀂄 ALIGN="left“ 􀂄 WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxels 􀂄 COLOR="#0000FF" , para especificar el color

􀂄 Listas con viñetas <ul> <li>Primer término de la lista <li>Segundo término <li>Tercer término </ul> 􀂄 Primer término de la lista 􀂄 Segundo término 􀂄 Tercer término

Enlaces (links) 􀂉 <A HREF="URL"> Texto del enlace </A> 􀂉 El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde redirecciona el pedido 􀂉 Tipos: 􀂄 Enlace a otro lugar del mismo documento 􀂉 <A HREF="#inicio"> Ir al Inicio </A> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="inicio"> </A> 􀂄 Enlace a otra página local 􀂉 <a href="pagina2.htm">Ir a pagina2</a> 􀂄 Enlace a una dirección de Internet 􀂉 <A HREF="http://www.grupobgl.com/">Grupo BGL</A>

Enlaces (links) 􀂉 Usando imágenes como enlaces 􀂄 <A HREF=" #inicio"><img src="gifs/imagen.gif"></A> 􀂉 Enlace con una dirección de correo 􀂄 <A HREF="mailto: leli@grupobgl.com"> leli@grupobgl.com </A> 􀂄 Imágenes 􀂉 <IMG SRC="URL"> (no tiene etiqueta de cierre) 􀂉 <IMG SRC="http://www.grupobgl.com/logo.jpg"> 􀂉 Atributos: 􀂄 ALT=" Texto que aparece al situar el cursor sobre la imagen" 􀂄 ALIGN 􀂄 WIDTH=80, HEIGTH=100 - Indican la anchura y altura de la imagen en píxels 􀂄 BORDER=2 - Añade un borde, a modo de marco, a la imagen 􀂄 HSPACE=10 , VSPACE=15 - Especifican el espacio horizontal y vertical que separa la imagen del texto 􀂉 Formatos: BMP, TIFF, DIB, WMF. 􀂄 Los mas utilizados: GIF, JPG y PNG en entorno Web

Tablas <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla 􀂄 <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) 􀂄 <TD> y </TD> señalan una celda. Ejemplo: <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>

Tablas – Atributos 􀂉 BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde 􀂉 WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible) 􀂉 CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2 􀂉 CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1 􀂉 ALIGN=" left", "right", "center". 􀂄 Atributos de las etiquetas de fila y celda 􀂉 WIDTH="30". Ancho de toda la fila o celda. También se puede dar en % 􀂉 ALIGN=" left", "right", "center". 􀂉 VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo 􀂉 BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila 􀂉 COLSPAN=3. Especifica el número de columnas que abarca la fila 􀂉 ROWSPAN=2. Especifica el número de filas que abarca la columna

GRACIAS! Para consultas: [email_address] SEO / SMO Manager www.GrupoBGL.com 0800-888-4664

Curso Html Basico

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a Curso Html Basico

Semelhante a Curso Html Basico (20)

Último

Último (14)

Curso Html Basico