SlideShare una empresa de Scribd logo
1 de 5
Universidad Técnica de Ambato

 Facultad de Ingeniería en Sistemas, Electrónica e
                   Industrial




      Manual de HTML




AUTOR: Andrés Tisalema
¿Qué es HTML?
HTML son las iniciales de Hiper Text MarkupLanguage.

Es un conjunto o serie de etiquetasincluidas en archivos de texto que definen la estructura

de un documento WWW y sus vínculos con otros documentos.

Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para

determinar cómo desplegar la página Web.

Lo primero es saber dónde crear el archivo texto que contendrá las instrucciones HTML

(Hipertexto), para lo cual tenemos varias opciones:

Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos citar:

       • Microsoft Front Page

       • Hot Dog

       • Microsoft Internet Assistant

       • Microsoft Office 97

Utilizar un editor de texto y crear nuestro propio código, el mismo que ya no contendría

código basura.



Páginas WEB
El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser

interpretadas por un navegador de Internet. Estas instrucciones son denominadas

Etiquetas.
Etiquetas
Una etiqueta cumple su función de la siguiente manera:

<nombre de la etiqueta>Apertura de una etiqueta siempre entre “<>”

texto/gráfico/etiquetasA la cual se aplica la etiqueta

</nombre de la etiqueta>Cierra de la etiqueta siempre entre “</ >”


Al acabar de crear un hipertexto, este se deberá grabar con la extensión .html o bien .htm.

Es bueno acotar que un archivo HTML es un archivo texto que tiene una extensión

definida. Este archivo de texto contiene etiquetas, las mismas que son expresadas como

instrucciones y el navegador WEB es quien las interpreta.



Estructura básica de una página WEB
Una página web está compuesta de 2 partes: el encabezamiento y el cuerpo de la página.

Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar

incluidas en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales

son:

<html></html> Indica al navegador que el documento texto que esta leyendo es un

documento

HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo.

<head></head>



Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de<html>.

<body></body>
Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre luego de

cerrar el encabezamiento con</head> y se extiende hasta el final de la página, cerrándose

antes de </HTML>.

Ejemplo:
<html>

       <head></head>

               <body>

                      Trabajo NTICSII

               </body>

</html>



El hipertexto será grabado con el nombre index.html en su disquete o en alguna ubicación

en eldisco duro. Al asignar la extensión .html o .html ya se crea un hipertexto.

Asegúrese de ingresar “index.html” como nombre a grabar en su bloque de notas

(incluidas las comillas) para evitar que se añada la extensión .txt.

Sin cerrar el programa de edición de texto que estamos usando, abra su navegador de

WWW. En

la pantalla de dirección WEB, introduzca la ruta completa a su archivo index.html, y usted

deberá poder ver en su pantalla su primera página WEB.



Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las

etiquetas

<body>...</body>. Esta etiqueta cuenta con los siguientes atributos:

         Bgcolor              define el color de fondo de la página
Text                   define el color del texto de la página

       Link                   define el color de los vínculos en la página

       Alink                  define el color del vínculo actual o activado en la página

       Vlink                  define el color del vínculo ya visitado

       Background             define el archivo gráfico que será desplegado como fondo

       Bgsound                define el archivo de audio que se tocará en la página.

       Bgproperties           define el movimiento vertical del fondo.



Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.




Tabla Código de Colores Básicos
:
#RRVVAA               Color                  #RRVVAA                Color

#FFFFFF               Blanco                 #000000                Negro

#FF0000               Rojo                   #00FF00                Verde

#0000FF               Azul                   #FF00FF                Magenta

#00FFFF               Cian                   #FFFF00                Amarillo

#70DB93               Agua Marino            #000080                Azul Marino

#FF7F00               Coral                  #A62A2A                Café

#C0C0C0               Plomo                  #4F2F4F                Violeta

Más contenido relacionado

La actualidad más candente (20)

Qué es html
Qué es htmlQué es html
Qué es html
 
Expo Html
Expo HtmlExpo Html
Expo Html
 
Manual html
Manual htmlManual html
Manual html
 
MANUAL BASICO EN HTML
MANUAL BASICO EN HTMLMANUAL BASICO EN HTML
MANUAL BASICO EN HTML
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
 
Intro html
Intro htmlIntro html
Intro html
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
Practico html
Practico htmlPractico html
Practico html
 
Presentaciã³n1
Presentaciã³n1Presentaciã³n1
Presentaciã³n1
 
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
 
Guía No. 2 grado 6
Guía No. 2 grado 6 Guía No. 2 grado 6
Guía No. 2 grado 6
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
como hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notascomo hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notas
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Html 121
Html 121Html 121
Html 121
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion html
 

Destacado (8)

V Estudio del CRM en España
V Estudio del CRM en EspañaV Estudio del CRM en España
V Estudio del CRM en España
 
Best Practices | Sales
Best Practices | SalesBest Practices | Sales
Best Practices | Sales
 
15 free primary education in kenya 146-154
15 free primary education in kenya 146-15415 free primary education in kenya 146-154
15 free primary education in kenya 146-154
 
Mise en espace des collections
Mise en espace des collectionsMise en espace des collections
Mise en espace des collections
 
Ppt introducción a la administración semana 4
Ppt introducción a la administración semana 4Ppt introducción a la administración semana 4
Ppt introducción a la administración semana 4
 
Evaluación 3
Evaluación 3Evaluación 3
Evaluación 3
 
Microinsurance in India
Microinsurance in IndiaMicroinsurance in India
Microinsurance in India
 
Pets vs. Cattle: The Elastic Cloud Story
Pets vs. Cattle: The Elastic Cloud StoryPets vs. Cattle: The Elastic Cloud Story
Pets vs. Cattle: The Elastic Cloud Story
 

Similar a Manual de HTML (20)

Diseño WEB 1.pptx
Diseño WEB 1.pptxDiseño WEB 1.pptx
Diseño WEB 1.pptx
 
Html111
Html111Html111
Html111
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Páginas web (1)
Páginas web (1)Páginas web (1)
Páginas web (1)
 
Conociendo mas sobre HTLM
Conociendo mas sobre HTLMConociendo mas sobre HTLM
Conociendo mas sobre HTLM
 
conociendo sobre HTLM
conociendo sobre HTLMconociendo sobre HTLM
conociendo sobre HTLM
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Qué es html
Qué es htmlQué es html
Qué es html
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
unidad 1
unidad 1unidad 1
unidad 1
 
Colegio nacional nicolas esguerra html 1
Colegio nacional nicolas esguerra html 1Colegio nacional nicolas esguerra html 1
Colegio nacional nicolas esguerra html 1
 
Colegio nicolas esguerra
Colegio nicolas esguerraColegio nicolas esguerra
Colegio nicolas esguerra
 
Guia html
Guia htmlGuia html
Guia html
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Clase 1 periodo II html
Clase 1 periodo II  htmlClase 1 periodo II  html
Clase 1 periodo II html
 
html
htmlhtml
html
 
Lenguaje HTML
  Lenguaje HTML  Lenguaje HTML
Lenguaje HTML
 

Último

PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
lupitavic
 
🦄💫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
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Francisco158360
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
patriciaines1993
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
MiNeyi1
 

Último (20)

PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
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
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
🦄💫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
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
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
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 

Manual de HTML

  • 1. Universidad Técnica de Ambato Facultad de Ingeniería en Sistemas, Electrónica e Industrial Manual de HTML AUTOR: Andrés Tisalema
  • 2. ¿Qué es HTML? HTML son las iniciales de Hiper Text MarkupLanguage. Es un conjunto o serie de etiquetasincluidas en archivos de texto que definen la estructura de un documento WWW y sus vínculos con otros documentos. Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar cómo desplegar la página Web. Lo primero es saber dónde crear el archivo texto que contendrá las instrucciones HTML (Hipertexto), para lo cual tenemos varias opciones: Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos citar: • Microsoft Front Page • Hot Dog • Microsoft Internet Assistant • Microsoft Office 97 Utilizar un editor de texto y crear nuestro propio código, el mismo que ya no contendría código basura. Páginas WEB El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por un navegador de Internet. Estas instrucciones son denominadas Etiquetas.
  • 3. Etiquetas Una etiqueta cumple su función de la siguiente manera: <nombre de la etiqueta>Apertura de una etiqueta siempre entre “<>” texto/gráfico/etiquetasA la cual se aplica la etiqueta </nombre de la etiqueta>Cierra de la etiqueta siempre entre “</ >” Al acabar de crear un hipertexto, este se deberá grabar con la extensión .html o bien .htm. Es bueno acotar que un archivo HTML es un archivo texto que tiene una extensión definida. Este archivo de texto contiene etiquetas, las mismas que son expresadas como instrucciones y el navegador WEB es quien las interpreta. Estructura básica de una página WEB Una página web está compuesta de 2 partes: el encabezamiento y el cuerpo de la página. Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son: <html></html> Indica al navegador que el documento texto que esta leyendo es un documento HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo. <head></head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de<html>. <body></body>
  • 4. Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con</head> y se extiende hasta el final de la página, cerrándose antes de </HTML>. Ejemplo: <html> <head></head> <body> Trabajo NTICSII </body> </html> El hipertexto será grabado con el nombre index.html en su disquete o en alguna ubicación en eldisco duro. Al asignar la extensión .html o .html ya se crea un hipertexto. Asegúrese de ingresar “index.html” como nombre a grabar en su bloque de notas (incluidas las comillas) para evitar que se añada la extensión .txt. Sin cerrar el programa de edición de texto que estamos usando, abra su navegador de WWW. En la pantalla de dirección WEB, introduzca la ruta completa a su archivo index.html, y usted deberá poder ver en su pantalla su primera página WEB. Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas <body>...</body>. Esta etiqueta cuenta con los siguientes atributos: Bgcolor define el color de fondo de la página
  • 5. Text define el color del texto de la página Link define el color de los vínculos en la página Alink define el color del vínculo actual o activado en la página Vlink define el color del vínculo ya visitado Background define el archivo gráfico que será desplegado como fondo Bgsound define el archivo de audio que se tocará en la página. Bgproperties define el movimiento vertical del fondo. Los atributos se incluyen en la etiqueta de apertura, separados por un espacio. Tabla Código de Colores Básicos : #RRVVAA Color #RRVVAA Color #FFFFFF Blanco #000000 Negro #FF0000 Rojo #00FF00 Verde #0000FF Azul #FF00FF Magenta #00FFFF Cian #FFFF00 Amarillo #70DB93 Agua Marino #000080 Azul Marino #FF7F00 Coral #A62A2A Café #C0C0C0 Plomo #4F2F4F Violeta