Your SlideShare is downloading. ×
0
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Conceptos básicos Html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Conceptos básicos Html

4,660

Published on

Material del taller sobre Web 2.0

Material del taller sobre Web 2.0

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
4,660
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
125
Comments
1
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 > Algunos conceptos básicos Taller Web 2.0 Raymond Marquina
  • 2. ¿Porque conocer HTML? <ul><li>Todos los sistemas de publicación de contenidos asociados a la Web 2.0, utilizan medios propios en línea para la inserción y edición de los textos: barra de edición de textos </li></ul><ul><li>Aunque el código HTML es generado de forma automática e invisible para el autor, a veces es necesario corregir alguna etiqueta. </li></ul><ul><li>Para intervenir y personalizar los temas de los blogs es necesario conocer el HTML para modificar las etiquetas y atributos </li></ul><ul><li>Para modificar el tamaño de una imagen o ventana de reproducción de algún servicio Web 2.0, es necesario conocer que etiqueta modificar. </li></ul>
  • 3. ¿Porque conocer HTML? <ul><li>Todos los servicios Web 2.0 generan un script que puede ser insertado en el blog para visualizar el contenido, ejemplo de esto lo conseguimos en servicios como youtube: </li></ul><ul><li><object width=&quot;425&quot; height=&quot;355&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/kWpHhHTjpMg&rel=1&quot;></param><param name=&quot;wmode&quot; value=&quot;transparent&quot;></param><embed src=&quot;http://www.youtube.com/v/kWpHhHTjpMg&rel=1&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;355&quot;></embed></object> </li></ul><ul><li>Para insertar correctamente el video en la página web o blog, es importante conocer donde va y como se inserta este código </li></ul>
  • 4. Barra de edición de texto Texto editado con las herramientas que posee el blog (Vista visual) Código generado automáticamente por la barra de formato de texto (Vista Código)
  • 5. ¿Qué es el HTML? Es un lenguaje de scripting para crear páginas web. Es interpretado del lado del cliente (usuario final) Utiliza etiquetas pareadas: < etiqueta> Texto </etiqueta> La World Wide Web Consortium (W3C) es la organización encargada de administrar los estandares
  • 6. Los componentes del HTML Etiquetas (tags) apertura <xxx> cierre </xxx> <P> ……. </P> Atributos Modifican la funcionalidad de las tags <body BGCOLOR...> Valores Definen el valor del atributo <P ALIGN=&quot;center&quot;>...</P>
  • 7. Elementos de una pagina web HEAD Contiene las etiquetas TITLE, META; los scripts y las hojas de estilo (CSS) BODY Contiene el contenido que ve el usuario en una pagina web: textos, imágenes, tablas, enlaces, formularios. <ul><ul><li><HTML> </li></ul></ul><ul><ul><li><HEAD> </li></ul></ul><ul><ul><li><TITLE>Título de la página</TITLE> </li></ul></ul><ul><ul><li>Aquí van otras etiquetas como las META, scripts y estilos </li></ul></ul><ul><ul><li></HEAD> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li>Aquí va lo que se mostrará en pantalla del documento HTML </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></HTML> </li></ul></ul>
  • 8. Formateando el texto <ul><li>Párrafos </li></ul><ul><ul><li><P ALIGN=&quot;LEFT&quot;> ….. Alineado a la izquierda </li></ul></ul><ul><ul><li><P ALIGN=&quot;CENTER&quot;> ….. Alineado al centro </li></ul></ul><ul><ul><li><P ALIGN=&quot;RIGHT&quot;> ….. Alineado a la derecha </li></ul></ul><ul><ul><li><P ALIGN=&quot;JUSTIFY&quot;> ….. Alineado en forma justificada </li></ul></ul><ul><li>Salto de línea o retorno de carro : <BR> </li></ul><ul><li>Cabeceras </li></ul><ul><li>< H1> mayor tamaño </li></ul><ul><li><H2> </li></ul><ul><li><H3> </li></ul><ul><li><H4> </li></ul><ul><li><H5> </li></ul><ul><li><H6> menor tamaño </li></ul>
  • 9. Formateando el texto <ul><li>Estilo del texto </li></ul><ul><ul><li><B> ... </B> Pone el texto en negrita. </li></ul></ul><ul><ul><li><I> ... </I> Representa el texto en cursiva. </li></ul></ul><ul><ul><li><U> ... </U> Para subrayar algo . </li></ul></ul>
  • 10. Formateando el texto <ul><li>Líneas horizontales </li></ul><ul><ul><li><HR> </li></ul></ul><ul><ul><li>Atributos: WIDTH=x% (Anchura), ALIGN=x, x es LEFT o RIGHT . </li></ul></ul><ul><li>Etiqueta FONT : permite modificar el tamaño, color, y tipo de letra </li></ul><ul><li><FONT SIZE=4 COLOR=&quot;AA0000&quot; FACE=&quot;Arial, Verdana&quot;> .. </FONT> </li></ul>
  • 11. Enlazando las páginas <ul><li>Enlaces absolutos </li></ul><ul><ul><li><A HREF=&quot;http://www.amd.com&quot;>AMD</A> </li></ul></ul><ul><li>Enlaces relativos </li></ul><ul><li><A HREF=&quot;intro.htm&quot;>Introducción</A> </li></ul><ul><li>Enlaces con imagenes </li></ul><ul><li><A href=&quot;intro.htm&quot;><IMG src=&quot;bandera.gif&quot;><A> </li></ul><ul><li>Enlaces a archivos independientes </li></ul><ul><li><A HREF=&quot;http://www.dominio.com/archivo.zip&quot;>archivo ZIP</A> </li></ul><ul><li>Enlaces a correo electrónico </li></ul><ul><li><A href=&quot;mailto:manuel@mimail.net&quot;>Mi correo-e</A> </li></ul>
  • 12. < Editores HTML > <ul><li>En caso de ser necesario manipular un texto con un formato especial, se puede trabajar con un editor HTML, copiar el código generado y pegarlo en el blog. </li></ul>

×