Fundamentos HTML - Web 2.0

67 %
33 %
Information about Fundamentos HTML - Web 2.0

Published on January 28, 2008

Author: raymarq

Source: slideshare.net

Description

Algunos conceptos básicos para aprovechar las zonas de edición de contenidos de las herramientas we 2.0

< HTML > Algunos conceptos básicos Taller Web 2.0 Raymond Marquina

¿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.

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.

¿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=&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> Para insertar correctamente el video en la página web o blog, es importante conocer donde va y como se inserta este código

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=&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>

Para insertar correctamente el video en la página web o blog, es importante conocer donde va y como se inserta este código

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)

¿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

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>

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. <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>

<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>

Formateando el texto Párrafos <P ALIGN=&quot;LEFT&quot;> ….. Alineado a la izquierda <P ALIGN=&quot;CENTER&quot;> ….. Alineado al centro <P ALIGN=&quot;RIGHT&quot;> ….. Alineado a la derecha <P ALIGN=&quot;JUSTIFY&quot;> ….. 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

Párrafos

<P ALIGN=&quot;LEFT&quot;> ….. Alineado a la izquierda

<P ALIGN=&quot;CENTER&quot;> ….. Alineado al centro

<P ALIGN=&quot;RIGHT&quot;> ….. Alineado a la derecha

<P ALIGN=&quot;JUSTIFY&quot;> ….. 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

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 .

Estilo del texto

<B> ... </B> Pone el texto en negrita.

<I> ... </I> Representa el texto en cursiva.

<U> ... </U> Para subrayar algo .

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=&quot;AA0000&quot; FACE=&quot;Arial, Verdana&quot;> .. </FONT>

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=&quot;AA0000&quot; FACE=&quot;Arial, Verdana&quot;> .. </FONT>

Enlazando las páginas Enlaces absolutos <A HREF=&quot;http://www.amd.com&quot;>AMD</A> Enlaces relativos <A HREF=&quot;intro.htm&quot;>Introducción</A> Enlaces con imagenes <A href=&quot;intro.htm&quot;><IMG src=&quot;bandera.gif&quot;><A> Enlaces a archivos independientes <A HREF=&quot;http://www.dominio.com/archivo.zip&quot;>archivo ZIP</A> Enlaces a correo electrónico <A href=&quot;mailto:manuel@mimail.net&quot;>Mi correo-e</A>

Enlaces absolutos

<A HREF=&quot;http://www.amd.com&quot;>AMD</A>

Enlaces relativos

<A HREF=&quot;intro.htm&quot;>Introducción</A>

Enlaces con imagenes

<A href=&quot;intro.htm&quot;><IMG src=&quot;bandera.gif&quot;><A>

Enlaces a archivos independientes

<A HREF=&quot;http://www.dominio.com/archivo.zip&quot;>archivo ZIP</A>

Enlaces a correo electrónico

<A href=&quot;mailto:manuel@mimail.net&quot;>Mi correo-e</A>

< 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.

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.

Add a comment

Related pages

Fundamentos Web 2006

Fundamentos Web 2006 es un congreso celebrado ... Web no hay más que una... y a ... Many have made thoughtful inferences based on work relevant to HTML ...
Read more

Web Fundamentals | Web | Google Developers

Web Fundamentals Web Push Notifications, ... and code samples are licensed under the Apache 2.0 License.
Read more

Symfony and HTTP Fundamentals (current)

... you're also learning the fundamentals of the web. ... rendering HTML pages and protecting content with security. ... Symfony 3.2.0 released ...
Read more

Character Model for the World Wide Web 1.0: Fundamentals

... and content developers with a common reference for interoperable text manipulation on the World Wide Web, ... Web formats HTML, ... 2.0 is defined by ...
Read more

Fundamentos de Web Design - Aula 01 - YouTube

Video aula sobre Fundamentos de Web-Design para interdisciplinar. ... 2 0. Don't like this ... Java Web Fundamentos - JSP, ...
Read more

Guía metodológica para poder utilizar los servicios Web 2 ...

Guía metodológica para poder utilizar los servicios Web 2.0 ... La Web 2.0: La revolución ... Como crear una pagina web completa en HTML ...
Read more

FUNDAMENTOS INFORMÁTICOS - Mind42

Mind map: FUNDAMENTOS INFORMÁTICOS -> FUNDAMENTOS DEL SOFTWARE (El Software del sistema incluyendo el sistema operativo, ... etc. ), WEB 2.0 ...
Read more

Images | Web | Google Developers

Web Fundamentals Fundamentals ... or be created with the HTML canvas element. ... and code samples are licensed under the Apache 2.0 License.
Read more

Ajax Workshop - QuirksMode

Ajax Workshop Peter-Paul Koch (ppk ... Fundamentos del Web, 28 October 2008 Hell is other browsers - Sartre. Ajax Workshop ...

  • Web 2.0 ...
    Read more

    Archiv der Veranstaltungen zum Thema Barrierefreiheit in ...

    Im Zuge von Web 2.0 steht die ... The second edition of Fundamentos Web brings together ... Dieser Kurs richtet sich speziell an Frauen mit HTML ...
    Read more