CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
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.