SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Superación 1º - 2º - 3º                                     Esp. Jairo Segundo Inagan Rodriguez


                                          REF: 270709_4P



        Tutoriales Planos y Multimediales (TP&M)


                                                 Lección 01. Concepto de tutorial


    Nombre: Iván Darío portilla delgado                                  Grado: 10 CJM




                              Tarea 01. Clases de Tutoriales
1. En las actividades y/o tareas del año escolar se te ha solicitado diseñar un tutorial paso a
   paso utilizando un procesador de texto (Microsoft Word) y capturando pantallas, busca en
   tus archivos de usb o disco duro virtual o plataforma comatfis un archivo con un tutorial ya
   elaborado y preséntalo al profesor llenando los siguientes datos:


                            Tutorial Plano (Imprimible o paso a paso)
Nombre del                 Tutorial básico de HTML

tutorial:
Área:                      Programación

Autor:                     Iván Darío portilla

Tamaño:        475 KB       Formato:    .DOC               Fecha de creación:   04 – 08 - 2009

     1. paso
    El archivo de HTML se crea con el bloc de notas y escogemos esta herramienta que esta
    en accesorios:




I.E.M. LEMO – Pasto 2009                                                                    1
Superación 1º - 2º - 3º                                Esp. Jairo Segundo Inagan Rodriguez




    2. paso
    Una ves que se lo abre tenemos que guardarlo primero vamos a la opción guardar como
    y le colocamos por ejemplo pagina.htm y se le coloca HTML para que al darle doble clic o
    abrirlo se abra con internet.




    3. paso

    Luego escribimos los comandos principales de la pagina web, en el bloc de notas
    <HTML> <HEAD> <TITLE>pagina</title> </HEAD> <BODY> </BODY> </HTML>, en
    body escribimos el cuerpo de la pagina por ejemplo hola soy Iván Darío portilla y esta es
    mi pagina web lo guardamos.

I.E.M. LEMO – Pasto 2009                                                                  2
Superación 1º - 2º - 3º                                  Esp. Jairo Segundo Inagan Rodriguez




    4. paso

    Abrimos el documento con internet y lo que sale es el titulo de la pagina y el cuerpo:




I.E.M. LEMO – Pasto 2009                                                                     3
Superación 1º - 2º - 3º                                 Esp. Jairo Segundo Inagan Rodriguez




    5. paso

    Luego se le agrega otros códigos como      <Font color="red"> que es para el color de la
    letra. También le agrege la etiqueta <br> que sirve para dar un salto de línea, <body
    bgcolor=blue> que es el color del cuerpo de la pagina, <Font size=5> que es el tamaño
    que queremos, la etiqueta <b> que es negrita, la etiqueta <I> que es cursiva, también
    <Font face=”chiller "> que es el tipo de letra que queramos.




I.E.M. LEMO – Pasto 2009                                                                 4
Superación 1º - 2º - 3º                          Esp. Jairo Segundo Inagan Rodriguez




    6. paso

    Se abre nueva mente el documento   con internet y se mira lo que hicimos con los
    códigos anteriores.




I.E.M. LEMO – Pasto 2009                                                         5
Superación 1º - 2º - 3º                            Esp. Jairo Segundo Inagan Rodriguez




    7. paso

    A esta pagina le podemos enlazar otras paginas esto lo hacemos con la etiqueta <A
    HREF="http://lapagianquequeramos.com/">




I.E.M. LEMO – Pasto 2009                                                           6
Superación 1º - 2º - 3º                          Esp. Jairo Segundo Inagan Rodriguez




    8. paso

    Abrimos el documento HTML con internet y observamos que ya hemos enlazado otras
    páginas con el código anterior así




    Comatfis




I.E.M. LEMO – Pasto 2009                                                         7
Superación 1º - 2º - 3º    Esp. Jairo Segundo Inagan Rodriguez




    GooGle




I.E.M. LEMO – Pasto 2009                                   8
Superación 1º - 2º - 3º    Esp. Jairo Segundo Inagan Rodriguez




    :




I.E.M. LEMO – Pasto 2009                                   9

Weitere ähnliche Inhalte

Andere mochten auch

YER_Presentation_London_Scholars_Final
YER_Presentation_London_Scholars_FinalYER_Presentation_London_Scholars_Final
YER_Presentation_London_Scholars_FinalSam Masaba
 
Tarea02programacion
Tarea02programacionTarea02programacion
Tarea02programacionivan dario
 
Smbzsx Ep21
Smbzsx Ep21Smbzsx Ep21
Smbzsx Ep21vitinho9
 
LAS TICS COMO HERRAMIENTAS EN LA EDUCACION
LAS TICS COMO HERRAMIENTAS EN LA EDUCACIONLAS TICS COMO HERRAMIENTAS EN LA EDUCACION
LAS TICS COMO HERRAMIENTAS EN LA EDUCACIONEric Martinez
 
Tamkeen & AIESEC Global Internship Programme 2015
Tamkeen & AIESEC Global Internship Programme 2015Tamkeen & AIESEC Global Internship Programme 2015
Tamkeen & AIESEC Global Internship Programme 2015Zahraa Dagher, PMP
 
Smbzsx Ep29
Smbzsx Ep29Smbzsx Ep29
Smbzsx Ep29vitinho9
 
Engineers Estimate
Engineers EstimateEngineers Estimate
Engineers EstimateDavid Hall
 

Andere mochten auch (9)

YER_Presentation_London_Scholars_Final
YER_Presentation_London_Scholars_FinalYER_Presentation_London_Scholars_Final
YER_Presentation_London_Scholars_Final
 
Tarea02programacion
Tarea02programacionTarea02programacion
Tarea02programacion
 
Smbzsx Ep21
Smbzsx Ep21Smbzsx Ep21
Smbzsx Ep21
 
Martinhal gardens and resort ,Ecossistemas garden company in Algarve ,Portugal
Martinhal gardens and resort ,Ecossistemas garden company in Algarve ,PortugalMartinhal gardens and resort ,Ecossistemas garden company in Algarve ,Portugal
Martinhal gardens and resort ,Ecossistemas garden company in Algarve ,Portugal
 
LAS TICS COMO HERRAMIENTAS EN LA EDUCACION
LAS TICS COMO HERRAMIENTAS EN LA EDUCACIONLAS TICS COMO HERRAMIENTAS EN LA EDUCACION
LAS TICS COMO HERRAMIENTAS EN LA EDUCACION
 
extreme weather
extreme weatherextreme weather
extreme weather
 
Tamkeen & AIESEC Global Internship Programme 2015
Tamkeen & AIESEC Global Internship Programme 2015Tamkeen & AIESEC Global Internship Programme 2015
Tamkeen & AIESEC Global Internship Programme 2015
 
Smbzsx Ep29
Smbzsx Ep29Smbzsx Ep29
Smbzsx Ep29
 
Engineers Estimate
Engineers EstimateEngineers Estimate
Engineers Estimate
 

Ähnlich wie Tutorial HTML básico

Ähnlich wie Tutorial HTML básico (20)

Tarea06 3p 10programacion
Tarea06 3p 10programacionTarea06 3p 10programacion
Tarea06 3p 10programacion
 
Proyecto classroom
Proyecto classroomProyecto classroom
Proyecto classroom
 
jairo andres viteri
jairo andres viterijairo andres viteri
jairo andres viteri
 
jairo andres viteri
jairo andres viterijairo andres viteri
jairo andres viteri
 
Tarea07webquest dayanna
Tarea07webquest dayannaTarea07webquest dayanna
Tarea07webquest dayanna
 
jaime benavides
jaime benavidesjaime benavides
jaime benavides
 
Guia para subir archivos a blogger
Guia para subir archivos a bloggerGuia para subir archivos a blogger
Guia para subir archivos a blogger
 
Guia tic.
Guia  tic.Guia  tic.
Guia tic.
 
Libro de informática 3 eso
Libro de informática 3 esoLibro de informática 3 eso
Libro de informática 3 eso
 
Paso apaso de html
Paso apaso de htmlPaso apaso de html
Paso apaso de html
 
PROYECTO PARTE DOS
PROYECTO PARTE DOSPROYECTO PARTE DOS
PROYECTO PARTE DOS
 
Curso moodle dap
Curso moodle dapCurso moodle dap
Curso moodle dap
 
Universidad estatal de bolivar
Universidad estatal de bolivarUniversidad estatal de bolivar
Universidad estatal de bolivar
 
Informatica exposicion
Informatica exposicionInformatica exposicion
Informatica exposicion
 
Jorge Molina
Jorge MolinaJorge Molina
Jorge Molina
 
pagina html
pagina htmlpagina html
pagina html
 
Universo Google
Universo GoogleUniverso Google
Universo Google
 
PRES 3Presentation3
PRES 3Presentation3PRES 3Presentation3
PRES 3Presentation3
 
Grupo 1JB - Revista
Grupo 1JB - RevistaGrupo 1JB - Revista
Grupo 1JB - Revista
 
Tarea 1.tic
Tarea 1.ticTarea 1.tic
Tarea 1.tic
 

Mehr von ivan dario

Tarea02 Evaluacionpreguntas02snur
Tarea02 Evaluacionpreguntas02snurTarea02 Evaluacionpreguntas02snur
Tarea02 Evaluacionpreguntas02snurivan dario
 
Tarea01 Evaluacionpreguntassmur
Tarea01 EvaluacionpreguntassmurTarea01 Evaluacionpreguntassmur
Tarea01 Evaluacionpreguntassmurivan dario
 
ivan dario portilla delgado ppt
ivan dario portilla delgado pptivan dario portilla delgado ppt
ivan dario portilla delgado pptivan dario
 
ivan dario portilla delgado
ivan dario portilla delgadoivan dario portilla delgado
ivan dario portilla delgadoivan dario
 
ivan dario portilla delgado
ivan dario portilla delgadoivan dario portilla delgado
ivan dario portilla delgadoivan dario
 
ivan dario portilla delgado
ivan dario portilla delgadoivan dario portilla delgado
ivan dario portilla delgadoivan dario
 

Mehr von ivan dario (6)

Tarea02 Evaluacionpreguntas02snur
Tarea02 Evaluacionpreguntas02snurTarea02 Evaluacionpreguntas02snur
Tarea02 Evaluacionpreguntas02snur
 
Tarea01 Evaluacionpreguntassmur
Tarea01 EvaluacionpreguntassmurTarea01 Evaluacionpreguntassmur
Tarea01 Evaluacionpreguntassmur
 
ivan dario portilla delgado ppt
ivan dario portilla delgado pptivan dario portilla delgado ppt
ivan dario portilla delgado ppt
 
ivan dario portilla delgado
ivan dario portilla delgadoivan dario portilla delgado
ivan dario portilla delgado
 
ivan dario portilla delgado
ivan dario portilla delgadoivan dario portilla delgado
ivan dario portilla delgado
 
ivan dario portilla delgado
ivan dario portilla delgadoivan dario portilla delgado
ivan dario portilla delgado
 

Kürzlich hochgeladen

Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfJulian Lamprea
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxLolaBunny11
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 

Kürzlich hochgeladen (10)

Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdf
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 

Tutorial HTML básico

  • 1. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez REF: 270709_4P  Tutoriales Planos y Multimediales (TP&M) Lección 01. Concepto de tutorial Nombre: Iván Darío portilla delgado Grado: 10 CJM Tarea 01. Clases de Tutoriales 1. En las actividades y/o tareas del año escolar se te ha solicitado diseñar un tutorial paso a paso utilizando un procesador de texto (Microsoft Word) y capturando pantallas, busca en tus archivos de usb o disco duro virtual o plataforma comatfis un archivo con un tutorial ya elaborado y preséntalo al profesor llenando los siguientes datos: Tutorial Plano (Imprimible o paso a paso) Nombre del Tutorial básico de HTML tutorial: Área: Programación Autor: Iván Darío portilla Tamaño: 475 KB Formato: .DOC Fecha de creación: 04 – 08 - 2009 1. paso El archivo de HTML se crea con el bloc de notas y escogemos esta herramienta que esta en accesorios: I.E.M. LEMO – Pasto 2009 1
  • 2. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez 2. paso Una ves que se lo abre tenemos que guardarlo primero vamos a la opción guardar como y le colocamos por ejemplo pagina.htm y se le coloca HTML para que al darle doble clic o abrirlo se abra con internet. 3. paso Luego escribimos los comandos principales de la pagina web, en el bloc de notas <HTML> <HEAD> <TITLE>pagina</title> </HEAD> <BODY> </BODY> </HTML>, en body escribimos el cuerpo de la pagina por ejemplo hola soy Iván Darío portilla y esta es mi pagina web lo guardamos. I.E.M. LEMO – Pasto 2009 2
  • 3. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez 4. paso Abrimos el documento con internet y lo que sale es el titulo de la pagina y el cuerpo: I.E.M. LEMO – Pasto 2009 3
  • 4. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez 5. paso Luego se le agrega otros códigos como <Font color="red"> que es para el color de la letra. También le agrege la etiqueta <br> que sirve para dar un salto de línea, <body bgcolor=blue> que es el color del cuerpo de la pagina, <Font size=5> que es el tamaño que queremos, la etiqueta <b> que es negrita, la etiqueta <I> que es cursiva, también <Font face=”chiller "> que es el tipo de letra que queramos. I.E.M. LEMO – Pasto 2009 4
  • 5. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez 6. paso Se abre nueva mente el documento con internet y se mira lo que hicimos con los códigos anteriores. I.E.M. LEMO – Pasto 2009 5
  • 6. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez 7. paso A esta pagina le podemos enlazar otras paginas esto lo hacemos con la etiqueta <A HREF="http://lapagianquequeramos.com/"> I.E.M. LEMO – Pasto 2009 6
  • 7. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez 8. paso Abrimos el documento HTML con internet y observamos que ya hemos enlazado otras páginas con el código anterior así Comatfis I.E.M. LEMO – Pasto 2009 7
  • 8. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez GooGle I.E.M. LEMO – Pasto 2009 8
  • 9. Superación 1º - 2º - 3º Esp. Jairo Segundo Inagan Rodriguez : I.E.M. LEMO – Pasto 2009 9