SlideShare uma empresa Scribd logo
1 de 12
< HTML >
Algunos conceptos básicos




                          Taller Web 2.0
                        Michael Gonzalez
¿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.
¿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
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

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

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Manual web autodministradas
Manual web autodministradasManual web autodministradas
Manual web autodministradas
 
Clase 5 lenguaje html
Clase 5  lenguaje htmlClase 5  lenguaje html
Clase 5 lenguaje html
 
Presentación janyne yepez
Presentación janyne yepezPresentación janyne yepez
Presentación janyne yepez
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 
Html
HtmlHtml
Html
 
TP 3
TP 3TP 3
TP 3
 
Lorena
LorenaLorena
Lorena
 
Conociendo nuestra nueva funcionalidad Editor Visual
Conociendo nuestra nueva funcionalidad Editor VisualConociendo nuestra nueva funcionalidad Editor Visual
Conociendo nuestra nueva funcionalidad Editor Visual
 
HTML
HTMLHTML
HTML
 
Semana 6 Estructura y Componentes
Semana 6   Estructura y ComponentesSemana 6   Estructura y Componentes
Semana 6 Estructura y Componentes
 
Colegio nacional nicolás esgerra
Colegio nacional nicolás esgerraColegio nacional nicolás esgerra
Colegio nacional nicolás esgerra
 
Julexi
JulexiJulexi
Julexi
 
Html
HtmlHtml
Html
 
Formato de entrega
Formato de entregaFormato de entrega
Formato de entrega
 
Semana 3 Maquetación CSS
Semana 3   Maquetación CSSSemana 3   Maquetación CSS
Semana 3 Maquetación CSS
 
Informatica tatiana y sheila (2) (1) (1)
Informatica tatiana y sheila (2) (1) (1)Informatica tatiana y sheila (2) (1) (1)
Informatica tatiana y sheila (2) (1) (1)
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas de código html
Etiquetas de código htmlEtiquetas de código html
Etiquetas de código html
 
Nikolivardo s.a
Nikolivardo s.aNikolivardo s.a
Nikolivardo s.a
 
presentacion html
presentacion htmlpresentacion html
presentacion html
 

Destaque

Tarlow design steps for turning your invenrion into a product!
Tarlow design   steps for turning your invenrion into a product!Tarlow design   steps for turning your invenrion into a product!
Tarlow design steps for turning your invenrion into a product!designtarlow
 
Amazing products design from tarlow design (1)
Amazing products design from tarlow design (1)Amazing products design from tarlow design (1)
Amazing products design from tarlow design (1)designtarlow
 
Hacia una escuela para todos.
Hacia una escuela para todos.Hacia una escuela para todos.
Hacia una escuela para todos.Paulina Rendon
 
Untitled Presentation
Untitled PresentationUntitled Presentation
Untitled Presentationchaleco42
 
Approach to neck pain
Approach to neck painApproach to neck pain
Approach to neck painRunal Shah
 
Endopthalmitis
EndopthalmitisEndopthalmitis
Endopthalmitisikramdr01
 
Cariculum Vitae 2016
Cariculum Vitae 2016Cariculum Vitae 2016
Cariculum Vitae 2016Ali Jamali
 
CINEMÁTICA EN EL TRAUMA SEGUNDA PARTE PROF. DR. LUIS DEL RIO DIEZ
CINEMÁTICA EN EL TRAUMA SEGUNDA PARTE PROF. DR. LUIS DEL RIO DIEZCINEMÁTICA EN EL TRAUMA SEGUNDA PARTE PROF. DR. LUIS DEL RIO DIEZ
CINEMÁTICA EN EL TRAUMA SEGUNDA PARTE PROF. DR. LUIS DEL RIO DIEZLUIS del Rio Diez
 

Destaque (11)

Tarlow design steps for turning your invenrion into a product!
Tarlow design   steps for turning your invenrion into a product!Tarlow design   steps for turning your invenrion into a product!
Tarlow design steps for turning your invenrion into a product!
 
Amazing products design from tarlow design (1)
Amazing products design from tarlow design (1)Amazing products design from tarlow design (1)
Amazing products design from tarlow design (1)
 
Hacia una escuela para todos.
Hacia una escuela para todos.Hacia una escuela para todos.
Hacia una escuela para todos.
 
Untitled Presentation
Untitled PresentationUntitled Presentation
Untitled Presentation
 
KCSE RESULT SLIP
KCSE RESULT SLIPKCSE RESULT SLIP
KCSE RESULT SLIP
 
Approach to neck pain
Approach to neck painApproach to neck pain
Approach to neck pain
 
Rubrica.
Rubrica.Rubrica.
Rubrica.
 
Endopthalmitis
EndopthalmitisEndopthalmitis
Endopthalmitis
 
Cariculum Vitae 2016
Cariculum Vitae 2016Cariculum Vitae 2016
Cariculum Vitae 2016
 
Radio funding
Radio fundingRadio funding
Radio funding
 
CINEMÁTICA EN EL TRAUMA SEGUNDA PARTE PROF. DR. LUIS DEL RIO DIEZ
CINEMÁTICA EN EL TRAUMA SEGUNDA PARTE PROF. DR. LUIS DEL RIO DIEZCINEMÁTICA EN EL TRAUMA SEGUNDA PARTE PROF. DR. LUIS DEL RIO DIEZ
CINEMÁTICA EN EL TRAUMA SEGUNDA PARTE PROF. DR. LUIS DEL RIO DIEZ
 

Semelhante a Html basico

Html creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano MazziottiAdriano Mazziotti
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTMLJONNATAN TORO
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTMLpablo3022
 
Programación básica de html5
Programación básica de html5Programación básica de html5
Programación básica de html5Coka Medel
 
Fundamentos HTML - Web 2.0
Fundamentos HTML - Web 2.0Fundamentos HTML - Web 2.0
Fundamentos HTML - Web 2.0Raymond Marquina
 
Caracteristicas de la web 2.0
Caracteristicas de la web 2.0Caracteristicas de la web 2.0
Caracteristicas de la web 2.0neycar
 
DISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdfDISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdfDanielHidalgo92
 
Estructura semantica Html5.pptx
Estructura semantica Html5.pptxEstructura semantica Html5.pptx
Estructura semantica Html5.pptxEliAlbertoMendoza1
 
Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel IItucamon
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina webkaren_malik
 

Semelhante a Html basico (20)

Etiqueta de hatml 1
Etiqueta de hatml 1Etiqueta de hatml 1
Etiqueta de hatml 1
 
Html creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano Mazziotti
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Programación básica de html5
Programación básica de html5Programación básica de html5
Programación básica de html5
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Intro html5
Intro html5Intro html5
Intro html5
 
tutorial
tutorialtutorial
tutorial
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
 
Fundamentos HTML - Web 2.0
Fundamentos HTML - Web 2.0Fundamentos HTML - Web 2.0
Fundamentos HTML - Web 2.0
 
Caracteristicas de la web 2.0
Caracteristicas de la web 2.0Caracteristicas de la web 2.0
Caracteristicas de la web 2.0
 
DISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdfDISEñO-DE-PAGINAS-CON-HTML.pdf
DISEñO-DE-PAGINAS-CON-HTML.pdf
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Estructura semantica Html5.pptx
Estructura semantica Html5.pptxEstructura semantica Html5.pptx
Estructura semantica Html5.pptx
 
Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel II
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina web
 
Html
HtmlHtml
Html
 

Último

Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxSecuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxNataliaGonzalez619348
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxRAMON EUSTAQUIO CARO BAYONA
 
Abregú, Podestá. Directores.Líderes en Acción.
Abregú, Podestá. Directores.Líderes en Acción.Abregú, Podestá. Directores.Líderes en Acción.
Abregú, Podestá. Directores.Líderes en Acción.profandrearivero
 
Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxRosabel UA
 
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfFichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfssuser50d1252
 
05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdfRAMON EUSTAQUIO CARO BAYONA
 
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdfPRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdfGabrieldeJesusLopezG
 
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOPLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOMARIBEL DIAZ
 
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfFichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfssuser50d1252
 
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfFichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfssuser50d1252
 
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxEJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxFabianValenciaJabo
 
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTESaraNolasco4
 
libro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajelibro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajeKattyMoran3
 
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2Eliseo Delgado
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALEDUCCUniversidadCatl
 
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOCUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOEveliaHernandez8
 

Último (20)

Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxSecuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
 
VISITA À PROTEÇÃO CIVIL _
VISITA À PROTEÇÃO CIVIL                  _VISITA À PROTEÇÃO CIVIL                  _
VISITA À PROTEÇÃO CIVIL _
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
 
TL/CNL – 2.ª FASE .
TL/CNL – 2.ª FASE                       .TL/CNL – 2.ª FASE                       .
TL/CNL – 2.ª FASE .
 
Abregú, Podestá. Directores.Líderes en Acción.
Abregú, Podestá. Directores.Líderes en Acción.Abregú, Podestá. Directores.Líderes en Acción.
Abregú, Podestá. Directores.Líderes en Acción.
 
Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptx
 
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdfFichas de matemática DE PRIMERO DE SECUNDARIA.pdf
Fichas de matemática DE PRIMERO DE SECUNDARIA.pdf
 
05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf
 
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdfPRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
 
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOPLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
 
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfFichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
 
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfFichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
 
Aedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptxAedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptx
 
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxEJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
 
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
 
DIA INTERNACIONAL DAS FLORESTAS .
DIA INTERNACIONAL DAS FLORESTAS         .DIA INTERNACIONAL DAS FLORESTAS         .
DIA INTERNACIONAL DAS FLORESTAS .
 
libro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguajelibro grafismo fonético guía de uso para el lenguaje
libro grafismo fonético guía de uso para el lenguaje
 
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
PÉNSUM ENFERMERIA 2024 - ECUGENIUS S.A. V2
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
 
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOCUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
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.