Html basico
- 1. < HTML > Algunos conceptos básicos Taller Web 2.0 Michael Gonzalez
- 2. ¿Porque conocer HTML? • 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 • Aunque el código HTML es generado de forma automática e invisible para el autor, a veces es necesario corregir alguna etiqueta. • Para intervenir y personalizar los temas de los blogs es necesario conocer el HTML para modificar las etiquetas y atributos • 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.
- 3. ¿Porque conocer HTML? • 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: <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/kWpHhHTjpMg&rel=1"></param><p aram name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/kWpHhHTjpMg&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object> • Para insertar correctamente el video en la página web o blog, es importante conocer donde va y como se inserta este código
- 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 apertura <xxx> cierre </xxx> Etiquetas (tags) <P> ……. </P> Modifican la funcionalidad de las tags Atributos <body BGCOLOR...> Definen el valor del atributo Valores <P ALIGN="center">...</P>
- 7. Elementos de una pagina web Contiene las etiquetas TITLE, META; los HEAD scripts y las hojas de estilo (CSS) Contiene el contenido que ve el usuario en BODY una pagina web: textos, imágenes, tablas, enlaces, formularios. <HTML> <HEAD> <TITLE>Título de la página</TITLE> Aquí van otras etiquetas como las META, scripts y estilos </HEAD> <body> Aquí va lo que se mostrará en pantalla del documento HTML </body> </HTML>
- 8. Formateando el texto Párrafos – <P ALIGN="LEFT"> ….. Alineado a la izquierda – <P ALIGN="CENTER"> ….. Alineado al centro – <P ALIGN="RIGHT"> ….. Alineado a la derecha – <P ALIGN="JUSTIFY"> ….. Alineado en forma justificada Salto de línea o retorno de carro: <BR> Cabeceras <H1> mayor tamaño <H2> <H3> <H4> <H5> <H6> menor tamaño
- 9. Formateando el texto Estilo del texto – <B> ... </B> Pone el texto en negrita. – <I> ... </I> Representa el texto en cursiva. – <U> ... </U> Para subrayar algo.
- 10. Formateando el texto Líneas horizontales – <HR> – Atributos: WIDTH=x% (Anchura), ALIGN=x, x es LEFT o RIGHT. Etiqueta FONT : permite modificar el tamaño, color, y tipo de letra <FONT SIZE=4 COLOR="AA0000" FACE="Arial, Verdana"> .. </FONT>
- 11. Enlazando las páginas Enlaces absolutos <A HREF="http://www.amd.com">AMD</A> Enlaces relativos <A HREF="intro.htm">Introducción</A> Enlaces con imagenes <A href="intro.htm"><IMG src="bandera.gif"><A> Enlaces a archivos independientes <A HREF="http://www.dominio.com/archivo.zip">archivo ZIP</A> Enlaces a correo electrónico <A href="mailto:manuel@mimail.net">Mi correo-e</A>
- 12. < Editores HTML > • 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.