Html
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Html

on

  • 1,654 views

Presentacion acerca de codigos HTML

Presentacion acerca de codigos HTML

Statistics

Views

Total Views
1,654
Views on SlideShare
1,653
Embed Views
1

Actions

Likes
1
Downloads
20
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html Presentation Transcript

  • 1. HTML Por: Antonio Pedron
  • 2. Definición
    • Viene de las siglas Hiper Text Markup Language.
    • Se usa para describir la estructura y contenido de un sitio web, se escribe entre corchetes angulares
    • Se pueden incluir atributos javascript o CSS
  • 3. Ejemplo
  • 4. <html> <head> </head> <title> Titulo </title> <body> <div align=&quot;center&quot;><font face=&quot;comic sans ms&quot; size=&quot;20&quot; color=&quot;blue&quot;> cuerpo del sitio </font></div> <marquee bgcolor=&quot;black&quot;> <font face=&quot;impact&quot; size=&quot;10&quot; color=&quot;yellow&quot;>marquesina</font></marquee> <MENU> <li type=&quot;disc&quot;> Elemento de lista 1 </li> <li type &quot;disc&quot;> Elemento de lista 2 </li> </MENU> <div align=&quot;center&quot;> <table> <tr> <th> Cabezera 1 </th> <th> Cabezera 2 </th> </tr> <tr> <td> Fila 2 </td> <td> Fila 2 </td> </tr> <tr> <td> Fila 3 </td> <td> Fila 3 </td> </tr> </table> </div> </body> </html>
  • 5.  
  • 6. ¿Como hacerlo? Para empezar un sitio en HTML es necesario usar la etiqueta <html> y para cerrarlo </html> Block de notas Programas especializados:
    • Dreamweaver
    • iWeb
    • Etc...
  • 7. Etiquetas mas comunes y basicas
  • 8. HTML
    • Es necesario para que un navegador decodifique el contenido de un sitio web, se utiliza como <html> al inicio y </html> al final del codigo, todos los demas codigos tienen que ir dentro de este para que asi sean reconocidos.
    • Ejem:
    • <html> <body> muestra </body> </html>
  • 9. HEAD
    • Decreta la cabezera de un sitio web.
    • Ejem:
    • <head> Cabezera </head>
  • 10. TITLE
    • Codigo que muestra el titulo deseado en la barra superior.
    • Ejem:
    • <title> Titulo </title>
  • 11. BODY
    • Se podria decir que es la parte mas importante del codigo, ya que aqui es donde se escribe todo el contenido del sitio web
    • Ejem:
    • <body> El cuerpo de mi sitio web </body>
  • 12.
    • Dentro del cuerpo (body) del sitio web podemos encontrar diferentes etiquetas que decretan:
    • -Formato
    • -Fuente
    • -Tamaño
    • -Color
    • -Marquesinas
    • -Etc...
  • 13. FONT
    • Decreta la fuente a usar en el contenido
    • Ejem:
    • <font face=“comic sans ms”> mi texto </font>
  • 14. Modificadores de FONT
    • face: se usa para indicar la fuente a usar, es necesario que la fuente este instalada en la computadora que visualizara el sitio web para que se vea como deseamos
    • color: decreta el color de la fuente
    • size: nos idicara el tamaño de la fuente
    Todos estos atributos se escriben entre comillas
  • 15. Lista de colores
  • 16. MARQUEE
    • Funcion de marquesina (texto que va de un lado a otro)
    • Ejem:
    • <marquee> mi marquesina </marquee>
  • 17.
    • A las marquesinas se les pueden aplicar codigos de color de fondo y tamaño, tambien se les puede insertar imagenes y cambiar el color, fuente y aspecto del texto.
    bgcolor=“yellow” nos dara un color negro de fondo de la marquesina Ejem: <marquee bgcolor=“yellow”>mi marquesina</marquee>
  • 18. LI
    • Marca el inicio de una lista “viñetada”, tiene varios modificadores:
    • -disc (circulo relleno)
    • -circle (silueta del circulo)
    • -square (cuadrado)
    • Ejem:
    • <li type=“disc”> Texto1 </li>
  • 19.
    • Puedes agregar las etiquetas que quieras de <li> siempre y cuando recuerdes que al terminar cada elemento de la lista tienes que cerrarlo con un </li>
    • Puedes aplicar formatos de texto
    • Si no agregas el comando tipe=“” quedara como lista en numeros romanos
    • Puedes agregar hipervinculos
    • Tienen que ir entre un <menu> para que se visualizen correctamente
  • 20. Ejemplo
    • <MENU>
    • <li type=&quot;disc&quot;> Elemento de lista 1 </li>
    • <li type=&quot;disc&quot;> Elemento de lista 2 </li>
    • </MENU>
  • 21. Tablas
    • Para armar una tabla hay muchos codigos, veremos la manera mas sencilla de hacerlo:
    • <table> (decreta el inicio de la tabla)
    • <tr> (marca una fila)
    • <th> (cabezera de una fila)
    • <td> (contenido de una columna
  • 22. Ejemplo
    • <table>
    • <tr>
    • <th> Cabezera 1 </th>
    • <th> Cabezera 2 </th>
    • </tr>
    • <tr>
    • <td> Fila 2 </td>
    • <td> Fila 2 </td>
    • </tr>
    • <tr>
    • <td> Fila 3 </td>
    • <td> Fila 3 </td>
    • </tr>
    • </table>