html basico
TRANSCRIPT
![Page 1: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/1.jpg)
< HTML >< HTML >Algunos conceptos básicosAlgunos conceptos básicos
Taller Web 2.0Taller Web 2.0Michael GonzalezMichael Gonzalez
![Page 2: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/2.jpg)
¿Porque conocer HTML?¿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.
![Page 3: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/3.jpg)
¿Porque conocer HTML?¿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><param 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
![Page 4: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/4.jpg)
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)
![Page 5: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/5.jpg)
¿Qué es el HTML?¿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
![Page 6: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/6.jpg)
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="center">...</P>
![Page 7: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/7.jpg)
Elementos de una pagina web
HEAD Contiene las etiquetas TITLE, META; los scripts y las hojas de estilo (CSS)
BODYContiene el contenido que ve el usuario en 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>
![Page 8: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/8.jpg)
Formateando el textoFormateando el texto
PárrafosPá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 Cabeceras <<H1> mayor tamaño <H2> <H3><H4><H5> <H6> menor tamaño
![Page 9: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/9.jpg)
Formateando el textoFormateando el texto
Estilo del textoEstilo del texto
– <B> ... </B> Pone el texto en negrita. – <I> ... </I> Representa el texto en cursiva. – <U> ... </U> Para subrayar algo.
![Page 10: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/10.jpg)
Formateando el textoFormateando el texto
Líneas horizontalesLíneas horizontales– <HR>– Atributos: WIDTH=x% (Anchura), ALIGN=x, x es LEFT o RIGHT.
Etiqueta FONT : Etiqueta FONT : permite modificar el tamaño, color, y tipo de letra
<FONT SIZE=4 COLOR="AA0000" FACE="Arial, Verdana"> .. </FONT>
![Page 11: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/11.jpg)
Enlazando las páginasEnlazando las páginas
Enlaces absolutosEnlaces absolutos<A HREF="http://www.amd.com">AMD</A>
Enlaces relativos Enlaces relativos <A HREF="intro.htm">Introducción</A>
Enlaces con imagenes Enlaces con imagenes <A href="intro.htm"><IMG src="bandera.gif"><A>
Enlaces a archivos independientesEnlaces a archivos independientes<A HREF="http://www.dominio.com/archivo.zip">archivo ZIP</A>
Enlaces a correo electrónico Enlaces a correo electrónico <A href="mailto:[email protected]">Mi correo-e</A>
![Page 12: Html basico](https://reader036.vdocumento.com/reader036/viewer/2022070514/587c2b111a28aba0118b548f/html5/thumbnails/12.jpg)
< 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.