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 ...
􀂄  Lenguaje que permite definir un formato a documentos de texto. 􀂄  Define sintaxis y ubicación de imágenes, texto, instr...
􀂄  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=&quot;description&...
􀂄  La  cabecera es la sección comprendida entre <head> y </head>. 􀂉  Dentro de la cabecera también se suele incluir código...
􀂄  El  cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nu...
Titulos Los títulos o encabezados se emplean al comienzo de una sección. Las etiquetas que se usan son: 􀂉  <h1> Título </h...
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 peq...
􀂄  Parrafos y bloques 􀂉  <P> Se utiliza para que los párrafos queden separados por una línea en blanco. 􀂄  Atributos: ALIG...
􀂄  Listas con viñetas <ul> <li>Primer término de la lista <li>Segundo término <li>Tercer término </ul> 􀂄  Primer término d...
Enlaces (links) 􀂉  <A HREF=&quot;URL&quot;>  Texto del enlace  </A> 􀂉  El texto del enlace es lo que se visualizará en el ...
Enlaces (links) 􀂉  Usando imágenes como enlaces 􀂄  <A HREF=&quot; #inicio&quot;><img src=&quot;gifs/imagen.gif&quot;></A> ...
Tablas <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla 􀂄  <TR> y </TR> son las etiquetas que indican el...
Tablas – Atributos 􀂉  BORDER=&quot;4&quot;. Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada car...
GRACIAS! Para consultas: [email_address] SEO / SMO Manager www.GrupoBGL.com 0800-888-4664
Próxima SlideShare
Cargando en…5
×

Curso Html Basico

3.558 visualizaciones

Publicado el

Curso de HTML Nivel Basico por Facundo Oliva

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
3.558
En SlideShare
0
De insertados
0
Número de insertados
278
Acciones
Compartido
0
Descargas
163
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Curso Html Basico

  1. 1. HTML Basico Por Facundo Oliva – SEO/SMO Manager Grupo BGL
  2. 2. 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)
  3. 3. 􀂄 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
  4. 4. 􀂄 Estructura general <html> <head> <title>The Title of the Document</title> </head> <body> ... </body> </html>
  5. 5. 􀂄 Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo: <meta name=&quot;description&quot; content=“xxx&quot;> <meta name=&quot;keywords&quot; content=“abc,def,&quot;> <meta http-equiv=&quot;Content-Type“ content=&quot;text/html; charset=ISO-8859-1&quot;> 􀂄 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.
  6. 6. 􀂄 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=&quot;JavaScript&quot;> <!– Aquí iría el código // --> </script> < link href=&quot;estilo.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>
  7. 7. 􀂄 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.
  8. 8. 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>
  9. 9. 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=&quot;+1&quot;> Esto es igual que poner size=4 </font> Tipos de fuentes 􀂉 <font face=&quot;Courier&quot;>Eso se verá en la fuente Courier</font>
  10. 10. 􀂄 Parrafos y bloques 􀂉 <P> Se utiliza para que los párrafos queden separados por una línea en blanco. 􀂄 Atributos: ALIGN=&quot;left&quot; , ALIGN=&quot;right&quot; , ALIGN=&quot;center&quot; y ALIGN=&quot;justify&quot; 􀂉 <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=&quot;left“ 􀂄 WIDTH=&quot;66%&quot; SIZE=&quot;3&quot;, para especificar el ancho en % y el alto en píxels 􀂄 COLOR=&quot;#0000FF&quot; , para especificar el color
  11. 11. 􀂄 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
  12. 12. Enlaces (links) 􀂉 <A HREF=&quot;URL&quot;> 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=&quot;#inicio&quot;> Ir al Inicio </A> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A NAME=&quot;inicio&quot;> </A> 􀂄 Enlace a otra página local 􀂉 <a href=&quot;pagina2.htm&quot;>Ir a pagina2</a> 􀂄 Enlace a una dirección de Internet 􀂉 <A HREF=&quot;http://www.grupobgl.com/&quot;>Grupo BGL</A>
  13. 13. Enlaces (links) 􀂉 Usando imágenes como enlaces 􀂄 <A HREF=&quot; #inicio&quot;><img src=&quot;gifs/imagen.gif&quot;></A> 􀂉 Enlace con una dirección de correo 􀂄 <A HREF=&quot;mailto: leli@grupobgl.com&quot;> leli@grupobgl.com </A> 􀂄 Imágenes 􀂉 <IMG SRC=&quot;URL&quot;> (no tiene etiqueta de cierre) 􀂉 <IMG SRC=&quot;http://www.grupobgl.com/logo.jpg&quot;> 􀂉 Atributos: 􀂄 ALT=&quot; Texto que aparece al situar el cursor sobre la imagen&quot; 􀂄 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
  14. 14. 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>
  15. 15. Tablas – Atributos 􀂉 BORDER=&quot;4&quot;. Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde 􀂉 WIDTH=&quot;5&quot; o WIDTH=&quot;50%&quot;. Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible) 􀂉 CELLSPACING=&quot;2&quot;. Es el espacio entre las celdas, por defecto es 2 􀂉 CELLPADDING=&quot;5&quot;. Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1 􀂉 ALIGN=&quot; left&quot;, &quot;right&quot;, &quot;center&quot;. 􀂄 Atributos de las etiquetas de fila y celda 􀂉 WIDTH=&quot;30&quot;. Ancho de toda la fila o celda. También se puede dar en % 􀂉 ALIGN=&quot; left&quot;, &quot;right&quot;, &quot;center&quot;. 􀂉 VALIGN=&quot;top&quot; , &quot;middle&quot; o &quot;bottom&quot;. Alinea el contenido verticalmente arriba, en medio o abajo 􀂉 BGCOLOR=&quot;#AACCEE&quot;. 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
  16. 16. GRACIAS! Para consultas: [email_address] SEO / SMO Manager www.GrupoBGL.com 0800-888-4664

×