SlideShare ist ein Scribd-Unternehmen logo
1 von 14
NOMBRE:CHRISTIAN CAICEDO
CURSO :SEGUNDO “A” SISTEMAS
 HTML    (HyperText Markup Language) o
  "Lenguaje para Marcado de Hipertexto".
 Los   archivos HTML deben tener una
  extensión htm o html.
 Para crear un archivo HTML solo hace falta
  un editor de texto.
 Un    archivo     HTML   está    compuesto
  poretiquetas.
 Las etiquetas le dicen al navegador(Ej:
  Internet
  Explorer, Firefox, Mozilla, etc.) como
  mostrar la página.
Escribe en el mismo, el siguiente texto:

    <html>
    <head>
    <title>Mi primera página Web</title>
    </head>
    <body>
    Hola a todos.
    </body>
    </html>


    Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el
    mismo significado y nos indican que se trata de un archivo HTML).

    Abre el navegador Internet(Internet Explorer, Firefox, Opera, etc.).
   Selecciona "File" y luego "Open".
   Se abrirá una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar
    -"pagina1.html"- elígelo y presiona "Open".
   Ahora tú ves la dirección, por ejemplo "C:My Documentspagina1.html". Presiona
    "OK" y el navegador mostrará la página.
   La primera etiqueta del archivo es <html>. Esto le indica al
    navegador que se trata de un archivo HTML. Para cerrar el
    archivo usamos </html>. Todo lo que se encuentra entre las dos
    etiquetas es el código HTML de la página.
    Luego vemos la etiqueta <head>. Lo que sigue a continuación
    hasta su cierre </head>, es la cabecera del documento y no se
    muestra en la pantalla. Aquí colocamos información tal como el
    título de la página(<title>Mi primera página
    Web</title>), palabras claves para los motores de búsqueda, una
    descripción de la página y otros datos del documento.
    Entre las etiquetas <body> y </body> se encuentra el cuerpo del
    documento y el contenido que se coloque en esta sección es el
    que veremos en pantalla, como por ejemplo, "Hola a todos.".
    Nota: observa que todas las etiquetas de cierre se diferencian de
    las de apertura por llevar"/" antes del nombre.
   Los elementos son declaraciones para visualizar o dar
    forma a una página Web.
    Las etiquetas(en inglés: tags) son marcas insertadas
    en un documento HTML para proporcionar
    información sobre una unidad o contenido.

    Reglas básicas
   Las etiquetas están encerradas entre los signos "<" y
    ">".
   Generalmente vienen en pares <p> y<⁄p>.
   La primera es de apertura y la segunda de cierre.
   El texto que se encuentra entre dos etiquetas es
    el contenido del elemento.
   Las etiquetas no son sensibles a las mayúsculas y
    minúsculas, o sea <b> es lo mismo que <B>.
   Veamos un ejemplo.

    <html>
    <head>
    <title>Una página Web</title>
    </head>
    <body>
    Hola a todos. <b>Este texto es en negrita</b>
    </body>
    </html>


    Esta es una etiqueta HTML:

    <b>Este texto es en negrita.</b>

    El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita).
   El contenido de dicho elemento es: Este texto es en negrita.
   El fin del elemento HTML es con la etiqueta de cierre </b>.

    Otro elemento HTML en el ejemplo es:

    <body>
    Hola a todos. <b>Este texto es en negrita</b>
    </body>


    EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento).
   El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</b>.
   El fin del elemento HTML es con la etiqueta de cierre </body>.

   Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos
    HTML.
   Los atributos siempre van con la estructura: nombre="valor".
   Los atributos siempre van en la etiqueta de apertura.
   Los valores siempre hay que ponerlos entre comillas.

    Un ejemplo de los atributos sería:

    Código

    <body bgcolor="#FFFF00">
    Hola a todos. <b>Este texto es en negrita</b>
    </body>

   Resultado
    Hola a todos. Este texto es en negrita

    En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el
    valor"#FFFF00"(representa el color amarillo en hexadecimal).
   Esto quiere decir que el color de fondo de la página será amarillo.

    Un consejo con respecto al uso de minúsculas.
   Si bien HTML acepta tanto etiquetas en mayúscula <B> como en minúscula <b>, el World Wide Web
    Consortium (W3C) recomienda el uso de minúsculas. Además XHTML (la siguiente versión de HTML)
    acepta solo minúsculas.
   Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas sus códigos HTML.
   La etiqueta <!-- ... --> se utiliza para insertar un
    comentario dentro del código que estamos
    escribiendo. El mismo es ignorado por el
    navegador al momento de leerlo. Los
    comentarios nos sirven para explicar mejor el
    código y son de gran ayuda en el momento que
    necesitemos editarlo.

    <!-- Esto es un comentario. -->

    * Nota que el signo de exclamación se coloca
    solo al principio del código.

 Elsalto de línea está definido con la
 etiqueta <br>. Es utilizado cuando queremos
 terminar una línea sin necesidad de terminar
 con el párrafo. La etiqueta <br> obliga a
 saltar de línea dondequiera que la
 ubiquemos.
 La etiqueta <hr> nos permite trazar una
  línea horizontal como las que separan las
  distintas secciones de este tutorial.
 La etiqueta <hr> no tiene cierre.
Manual html

Weitere ähnliche Inhalte

Was ist angesagt?

Qué es html
Qué es htmlQué es html
Qué es html
edujoso
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
duberlisg
 
Codigos html y como crear una pagina Web
Codigos html y como crear una pagina WebCodigos html y como crear una pagina Web
Codigos html y como crear una pagina Web
Joshi Tüsa
 
Practico html
Practico htmlPractico html
Practico html
lucascen
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
asdi
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
joraloca
 

Was ist angesagt? (20)

Qué es html
Qué es htmlQué es html
Qué es html
 
Pagina web en html
Pagina web en htmlPagina web en html
Pagina web en html
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
Html concpetos
Html concpetosHtml concpetos
Html concpetos
 
Introducion a HTML5
Introducion a HTML5Introducion a HTML5
Introducion a HTML5
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
Mi Primera Pagina
Mi Primera PaginaMi Primera Pagina
Mi Primera Pagina
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
 
Codigos html y como crear una pagina Web
Codigos html y como crear una pagina WebCodigos html y como crear una pagina Web
Codigos html y como crear una pagina Web
 
Presentación html
Presentación htmlPresentación html
Presentación html
 
Etiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parteEtiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parte
 
Etiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parteEtiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parte
 
Practico html
Practico htmlPractico html
Practico html
 
PAGINA WEB 1
PAGINA WEB 1PAGINA WEB 1
PAGINA WEB 1
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
 
Producto 3
Producto 3Producto 3
Producto 3
 
Html
HtmlHtml
Html
 
Aplicaciones en la red
Aplicaciones en la redAplicaciones en la red
Aplicaciones en la red
 

Ähnlich wie Manual html (20)

Html guia
Html guiaHtml guia
Html guia
 
Html111
Html111Html111
Html111
 
Html
HtmlHtml
Html
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Html
HtmlHtml
Html
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Practico html
Practico htmlPractico html
Practico html
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
 
Programación para web
Programación para webProgramación para web
Programación para web
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Clase 1
Clase 1Clase 1
Clase 1
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
HTML HyperText Markup Language
HTML HyperText Markup LanguageHTML HyperText Markup Language
HTML HyperText Markup Language
 

Kürzlich hochgeladen

5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
MiNeyi1
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
EliaHernndez7
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
UPTAIDELTACHIRA
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
RigoTito
 

Kürzlich hochgeladen (20)

PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 

Manual html

  • 2.  HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".  Los archivos HTML deben tener una extensión htm o html.  Para crear un archivo HTML solo hace falta un editor de texto.  Un archivo HTML está compuesto poretiquetas.  Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Mozilla, etc.) como mostrar la página.
  • 3. Escribe en el mismo, el siguiente texto:  <html> <head> <title>Mi primera página Web</title> </head> <body> Hola a todos. </body> </html>  Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).  Abre el navegador Internet(Internet Explorer, Firefox, Opera, etc.).  Selecciona "File" y luego "Open".  Se abrirá una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar -"pagina1.html"- elígelo y presiona "Open".  Ahora tú ves la dirección, por ejemplo "C:My Documentspagina1.html". Presiona "OK" y el navegador mostrará la página.
  • 4. La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página. Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página(<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento. Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.". Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar"/" antes del nombre.
  • 5.
  • 6. Los elementos son declaraciones para visualizar o dar forma a una página Web. Las etiquetas(en inglés: tags) son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.  Reglas básicas  Las etiquetas están encerradas entre los signos "<" y ">".  Generalmente vienen en pares <p> y<⁄p>.  La primera es de apertura y la segunda de cierre.  El texto que se encuentra entre dos etiquetas es el contenido del elemento.  Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.
  • 7. Veamos un ejemplo.  <html> <head> <title>Una página Web</title> </head> <body> Hola a todos. <b>Este texto es en negrita</b> </body> </html>  Esta es una etiqueta HTML:  <b>Este texto es en negrita.</b>  El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita).  El contenido de dicho elemento es: Este texto es en negrita.  El fin del elemento HTML es con la etiqueta de cierre </b>.  Otro elemento HTML en el ejemplo es:  <body> Hola a todos. <b>Este texto es en negrita</b> </body>  EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento).  El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</b>.  El fin del elemento HTML es con la etiqueta de cierre </body>. 
  • 8. Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.  Los atributos siempre van con la estructura: nombre="valor".  Los atributos siempre van en la etiqueta de apertura.  Los valores siempre hay que ponerlos entre comillas.  Un ejemplo de los atributos sería:  Código  <body bgcolor="#FFFF00"> Hola a todos. <b>Este texto es en negrita</b> </body>  Resultado Hola a todos. Este texto es en negrita  En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el valor"#FFFF00"(representa el color amarillo en hexadecimal).  Esto quiere decir que el color de fondo de la página será amarillo.  Un consejo con respecto al uso de minúsculas.  Si bien HTML acepta tanto etiquetas en mayúscula <B> como en minúscula <b>, el World Wide Web Consortium (W3C) recomienda el uso de minúsculas. Además XHTML (la siguiente versión de HTML) acepta solo minúsculas.  Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas sus códigos HTML.
  • 9.
  • 10.
  • 11. La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.  <!-- Esto es un comentario. -->  * Nota que el signo de exclamación se coloca solo al principio del código. 
  • 12.  Elsalto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.
  • 13.  La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.  La etiqueta <hr> no tiene cierre.