• Like
Curso Html Basico
Upcoming SlideShare
Loading in...5
×

Curso Html Basico

  • 3,260 views
Uploaded on

Curso de HTML Nivel Basico por Facundo Oliva

Curso de HTML Nivel Basico por Facundo Oliva

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,260
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
155
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML Basico Por Facundo Oliva – SEO/SMO Manager Grupo BGL
  • 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. 􀂄 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. 􀂄 Estructura general <html> <head> <title>The Title of the Document</title> </head> <body> ... </body> </html>
  • 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. 􀂄 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. 􀂄 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. 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. 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. 􀂄 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. 􀂄 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. 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. 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. 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. 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. GRACIAS! Para consultas: [email_address] SEO / SMO Manager www.GrupoBGL.com 0800-888-4664