SlideShare una empresa de Scribd logo
Introduccion a programacion html
¿Qué es HTML?
El HTML es el lenguaje con el que se escriben las páginas
Web. Es un lenguaje de hipertexto, es decir, un lenguaje que
permite escribir texto de forma estructurada, y que está
compuesto por etiquetas, que marcan el inicio y el fin de cada
elemento del documento.
A hora bien lo que hace que el HTML sea un lenguaje
práctico y poderoso son los browser. Estos son programas
utilizados para visualizar las páginas Web. Los más
utilizados son el Internet Explorer y Netscape.
Los browser se encargan de interpretar el
código HTML de los documentos, y de mostrar
a los usuarios las páginas Web resultantes del
código interpretado.
1 HTML
ELEMENTOS DE UN DOCUMENTO HTML.
Los comandos de marcación son la base del lenguaje, pues estos comandos le indican al
browser que debe hacer con los elementos del documento ( escritura, formato y vínculos ),
de modo que el programa puede diagramar la página.
Un documento en HTML se define básicamente por los siguientes comandos:
Esta etiqueta se emplea siempre para iniciar un código HTML. Es la forma de
de decirle al navegador que en ese punto comienza el código.<html>
Esta etiqueta de encabezado se incluyen datos generales del documento.<head>
Etiqueta para poder colocar el titulo del documento.<title>
Finaliza la etiqueta title.</title>
Fin de la etiqueta head.</head>
Se incluyen todos los elementos que en sí hace parte del documento.<body>
Fin de la etiqueta body.</body>
Fin del documento.</html> 2 HTML
ELABORACIÓN DE UN DOCUMENTO HTML.
1.- Para poder elaborar un documento HTML debemos primero
de iniciar el “ Bloc de Notas ”, para la creación del mismo.
2.- A hora una vez abierto el Bloc de Notas anotaremos los
elementos básicos de un documento de HTML.
Nota: A hora bien anotamos todas
las etiquetas elementales que debe
de llevar un documento de HTML,
recuerden que la estructura de una
etiqueta siempre va a estar dada
por:
< nombre de la etiqueta >
Siempre va llevar esa estructura,
con paréntesis angulares < > y el
nombre de la etiqueta no importa
si se escribe con mayúscula o
minúscula:
< HEAD > ó < hEAd >
Lo que si es importante retomar es
que la etiqueta debe tener siempre
un inicio y un fin denotado por:
< HEAD > < /HEAD >
Simplemente al anexarle el signo
de división ( / ) estémosle
indicando que ahí se ha terminado
la función de esa etiqueta.
3 HTML
3.- Una vez terminado el segundo paso , lo
que procede es guardar nuestro documento:
4.- A continuación daremos paso al
guardado de nuestro documento, sin
olvidar que debe tener la extensión .HTML ó
de lo contrario solo lo guardara como
archivo de texto y no como página de
HTML.
No olvides que la extensión puede ir en
minúscula ( .html ) ó mayúscula ( . HTML ).
4 HTML
A hora observa que si al
momento de guardar el
documento sin ninguna extensión
automáticamente lo guardar
como un archivo de texto, y no
como un documento de HTML,
por ello es importante poner la
extensión “ .html “.
5 HTML
Ubicación de nuestro documento.
Encabezado al inicio de la pagina
Web. <title> Ejemplo </title>
Cuerpo del documento.
<body> Hola compañeros este es un ejemplo sencillo de HTML </body>
COMANDOS BÁSICOS.
Salto de línea.
Para poder
hacer un salto
de página en el
cuerpo de tu
documento
tendrás que
anexarle la
etiqueta:
< br> </br>.
Recuerda que
todo esto se
agrega dentro
de las etiquetas
de <body>,
</body>.
Generación del salto de página.
Apariencia del texto
• Hay varios comandos para hacer distinta la manera en que aparece el
texto. Se trata de delimitadores, que indican donde comienza y donde
termina el texto que se verá diferente.
• Estos comandos se pueden mezclar entre sí. Algunos de ellos son:
<B>Negrita (Bold)</B>
<I>Cursiva (Italic)</I>
<BLINK>Parpadeante (Blink)</BLINK>
<TT>Tamano fijo (TypeWriter)</TT>
<EM>énfasis (Emphasis)</EM>
<STRONG>Gran énfasis (Strong)</STRONG>
<U>Subrayado (Underline)</U>
FONT
• La marca FONT se emplea para formatear el tipo y tamaño del texto en
algunos puntos del documento específicos.
<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para
formatear</FONT>

Más contenido relacionado

PPTX
Presentación Introducción al lenguaje HTML
PDF
05 Introduccion a HTML
PDF
HTML ¿qué es y para que sirve?
PPT
Apuntes de HTML 1
PDF
Introducción a html
PPTX
Introducción al lenguaje HTML
DOCX
Definición de html
PPT
Html
Presentación Introducción al lenguaje HTML
05 Introduccion a HTML
HTML ¿qué es y para que sirve?
Apuntes de HTML 1
Introducción a html
Introducción al lenguaje HTML
Definición de html
Html

La actualidad más candente (20)

PPTX
HTML: Una introducción.
PPT
PresentacióN Html
PPTX
El lenguaje html
PPTX
Curso html
PPT
Introducción al HTML
ODP
DOCX
El lenguaje html
PPT
Diseño de páginas Web con HTML
PDF
Introduccion a Lenguaje HTML, Programacion Web
PPT
Conceptos básicos Html
PPSX
PDF
Aprender El Lenguaje Html
PPT
Lenguaje HTML
PPT
Html, Css y JavaScript
PPSX
Inicio al HTML
PPT
Etiquetas Diapositivas.
PPT
LENGUAJE HTML
DOC
Curso de html
HTML: Una introducción.
PresentacióN Html
El lenguaje html
Curso html
Introducción al HTML
El lenguaje html
Diseño de páginas Web con HTML
Introduccion a Lenguaje HTML, Programacion Web
Conceptos básicos Html
Aprender El Lenguaje Html
Lenguaje HTML
Html, Css y JavaScript
Inicio al HTML
Etiquetas Diapositivas.
LENGUAJE HTML
Curso de html
Publicidad

Destacado (20)

PDF
Curso HTML y CSS, parte 1
PDF
Practico html
DOCX
Html geraly fernanda cabrera aldana
PPTX
Apuntes de HTML 2
PPT
Diapositivas Html
PDF
Silabo
PDF
Curso HTML y CSS, parte 2
PPTX
Definicion "HTML"
PPTX
DOCX
Tema 1, práctica 1ª
DOC
Tarea04 Cuento Inedito Millercuaran
PPTX
Guia SEO para redacción de artículos.
PDF
Optimización On-Site para Wordpress | Wordcamp Lima 2014
DOC
3p 10cjm Millercuaran Programacion Practica01
PDF
DOC
Tarea07 3p 10programacion
DOC
Tarea06 3p 10programacion
PPTX
Ejemplos de HTML
PPTX
3 curso php
PDF
Webcongress Lima 2015 | Seo Onsite
Curso HTML y CSS, parte 1
Practico html
Html geraly fernanda cabrera aldana
Apuntes de HTML 2
Diapositivas Html
Silabo
Curso HTML y CSS, parte 2
Definicion "HTML"
Tema 1, práctica 1ª
Tarea04 Cuento Inedito Millercuaran
Guia SEO para redacción de artículos.
Optimización On-Site para Wordpress | Wordcamp Lima 2014
3p 10cjm Millercuaran Programacion Practica01
Tarea07 3p 10programacion
Tarea06 3p 10programacion
Ejemplos de HTML
3 curso php
Webcongress Lima 2015 | Seo Onsite
Publicidad

Similar a Introduccion a programacion html (20)

PDF
elaboración de páginas web utilizando HTML-11.pdf
PPT
Html concpetos
PPTX
Manual html
PPTX
evaluacion 2 párcial 2 quimestre primero bachillerato
PPTX
Unidad educativa
PPT
Clase 1
PDF
PDF
Estructurabasica
PPTX
Programación en html 1
PPTX
Temas de html
PDF
Practicas html
PPT
etiquetas HTML
PDF
Manual de-html
DOCX
Guia 1 introduccion al html inesani 2016
PPTX
MANUAL PARA CREAR PÁGINAS WEB CON HTML
DOCX
Codigo HTML.docx
PPTX
Html
PPTX
elaboración de páginas web utilizando HTML-11.pdf
Html concpetos
Manual html
evaluacion 2 párcial 2 quimestre primero bachillerato
Unidad educativa
Clase 1
Estructurabasica
Programación en html 1
Temas de html
Practicas html
etiquetas HTML
Manual de-html
Guia 1 introduccion al html inesani 2016
MANUAL PARA CREAR PÁGINAS WEB CON HTML
Codigo HTML.docx
Html

Más de Elim Aqp (20)

PPTX
Copias de seguridad
PPTX
Qué es jsp
PPTX
Formato de texto y caracteres especiales
PPT
Componentes físicos de HARWARE parte 1
PPTX
Diagrama unifilar
PPTX
Tablas en html
PPTX
Tablas en html
PPTX
Estacion de trabajo
PPTX
Extensiones de ficheros
PPTX
Imágenes html
PPTX
Seguridad en redes tcp
PPTX
Grafico estadístico
PPTX
Grafico estadístico
PPTX
Sistema electrico
PPTX
Marquesinas (marquees)
PPT
Configuracion de un servidor de archivos
PPTX
Switch case en python
PPT
Direccionamiento ip
PPTX
Ms dos basico
PPTX
Topologia de redes basico
Copias de seguridad
Qué es jsp
Formato de texto y caracteres especiales
Componentes físicos de HARWARE parte 1
Diagrama unifilar
Tablas en html
Tablas en html
Estacion de trabajo
Extensiones de ficheros
Imágenes html
Seguridad en redes tcp
Grafico estadístico
Grafico estadístico
Sistema electrico
Marquesinas (marquees)
Configuracion de un servidor de archivos
Switch case en python
Direccionamiento ip
Ms dos basico
Topologia de redes basico

Último (20)

PDF
Conecta con la Motivacion - Brian Tracy Ccesa007.pdf
PDF
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
PDF
Metodologías Activas con herramientas IAG
PDF
Guia de Tesis y Proyectos de Investigacion FS4 Ccesa007.pdf
PPTX
caso clínico iam clinica y semiología l3.pptx
PDF
Fundamentos_Educacion_a_Distancia_ABC.pdf
PDF
SESION 12 INMUNIZACIONES - CADENA DE FRÍO- SALUD FAMILIAR - PUEBLOS INDIGENAS...
PDF
ACERTIJO Súper Círculo y la clave contra el Malvado Señor de las Formas. Por ...
PDF
Unidad de Aprendizaje 5 de Educacion para el Trabajo EPT Ccesa007.pdf
PDF
Tomo 1 de biologia gratis ultra plusenmas
PDF
TRAUMA_Y_RECUPERACION consecuencias de la violencia JUDITH HERMAN
PDF
Cronograma de clases de Práctica Profesional 2 2025 UDE.pdf
PDF
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
DOCX
V UNIDAD - PRIMER GRADO. del mes de agosto
PDF
benveniste-problemas-de-linguistica-general-i-cap-6 (1)_compressed.pdf
PDF
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
PDF
Salcedo, J. et al. - Recomendaciones para la utilización del lenguaje inclusi...
PDF
OK OK UNIDAD DE APRENDIZAJE 5TO Y 6TO CORRESPONDIENTE AL MES DE AGOSTO 2025.pdf
PDF
Híper Mega Repaso Histológico Bloque 3.pdf
PDF
ciencias-1.pdf libro cuarto basico niños
Conecta con la Motivacion - Brian Tracy Ccesa007.pdf
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
Metodologías Activas con herramientas IAG
Guia de Tesis y Proyectos de Investigacion FS4 Ccesa007.pdf
caso clínico iam clinica y semiología l3.pptx
Fundamentos_Educacion_a_Distancia_ABC.pdf
SESION 12 INMUNIZACIONES - CADENA DE FRÍO- SALUD FAMILIAR - PUEBLOS INDIGENAS...
ACERTIJO Súper Círculo y la clave contra el Malvado Señor de las Formas. Por ...
Unidad de Aprendizaje 5 de Educacion para el Trabajo EPT Ccesa007.pdf
Tomo 1 de biologia gratis ultra plusenmas
TRAUMA_Y_RECUPERACION consecuencias de la violencia JUDITH HERMAN
Cronograma de clases de Práctica Profesional 2 2025 UDE.pdf
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
V UNIDAD - PRIMER GRADO. del mes de agosto
benveniste-problemas-de-linguistica-general-i-cap-6 (1)_compressed.pdf
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
Salcedo, J. et al. - Recomendaciones para la utilización del lenguaje inclusi...
OK OK UNIDAD DE APRENDIZAJE 5TO Y 6TO CORRESPONDIENTE AL MES DE AGOSTO 2025.pdf
Híper Mega Repaso Histológico Bloque 3.pdf
ciencias-1.pdf libro cuarto basico niños

Introduccion a programacion html

  • 2. ¿Qué es HTML? El HTML es el lenguaje con el que se escriben las páginas Web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. A hora bien lo que hace que el HTML sea un lenguaje práctico y poderoso son los browser. Estos son programas utilizados para visualizar las páginas Web. Los más utilizados son el Internet Explorer y Netscape. Los browser se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas Web resultantes del código interpretado. 1 HTML
  • 3. ELEMENTOS DE UN DOCUMENTO HTML. Los comandos de marcación son la base del lenguaje, pues estos comandos le indican al browser que debe hacer con los elementos del documento ( escritura, formato y vínculos ), de modo que el programa puede diagramar la página. Un documento en HTML se define básicamente por los siguientes comandos: Esta etiqueta se emplea siempre para iniciar un código HTML. Es la forma de de decirle al navegador que en ese punto comienza el código.<html> Esta etiqueta de encabezado se incluyen datos generales del documento.<head> Etiqueta para poder colocar el titulo del documento.<title> Finaliza la etiqueta title.</title> Fin de la etiqueta head.</head> Se incluyen todos los elementos que en sí hace parte del documento.<body> Fin de la etiqueta body.</body> Fin del documento.</html> 2 HTML
  • 4. ELABORACIÓN DE UN DOCUMENTO HTML. 1.- Para poder elaborar un documento HTML debemos primero de iniciar el “ Bloc de Notas ”, para la creación del mismo. 2.- A hora una vez abierto el Bloc de Notas anotaremos los elementos básicos de un documento de HTML. Nota: A hora bien anotamos todas las etiquetas elementales que debe de llevar un documento de HTML, recuerden que la estructura de una etiqueta siempre va a estar dada por: < nombre de la etiqueta > Siempre va llevar esa estructura, con paréntesis angulares < > y el nombre de la etiqueta no importa si se escribe con mayúscula o minúscula: < HEAD > ó < hEAd > Lo que si es importante retomar es que la etiqueta debe tener siempre un inicio y un fin denotado por: < HEAD > < /HEAD > Simplemente al anexarle el signo de división ( / ) estémosle indicando que ahí se ha terminado la función de esa etiqueta. 3 HTML
  • 5. 3.- Una vez terminado el segundo paso , lo que procede es guardar nuestro documento: 4.- A continuación daremos paso al guardado de nuestro documento, sin olvidar que debe tener la extensión .HTML ó de lo contrario solo lo guardara como archivo de texto y no como página de HTML. No olvides que la extensión puede ir en minúscula ( .html ) ó mayúscula ( . HTML ). 4 HTML
  • 6. A hora observa que si al momento de guardar el documento sin ninguna extensión automáticamente lo guardar como un archivo de texto, y no como un documento de HTML, por ello es importante poner la extensión “ .html “. 5 HTML
  • 7. Ubicación de nuestro documento. Encabezado al inicio de la pagina Web. <title> Ejemplo </title> Cuerpo del documento. <body> Hola compañeros este es un ejemplo sencillo de HTML </body>
  • 8. COMANDOS BÁSICOS. Salto de línea. Para poder hacer un salto de página en el cuerpo de tu documento tendrás que anexarle la etiqueta: < br> </br>. Recuerda que todo esto se agrega dentro de las etiquetas de <body>, </body>. Generación del salto de página.
  • 9. Apariencia del texto • Hay varios comandos para hacer distinta la manera en que aparece el texto. Se trata de delimitadores, que indican donde comienza y donde termina el texto que se verá diferente. • Estos comandos se pueden mezclar entre sí. Algunos de ellos son: <B>Negrita (Bold)</B> <I>Cursiva (Italic)</I> <BLINK>Parpadeante (Blink)</BLINK> <TT>Tamano fijo (TypeWriter)</TT> <EM>énfasis (Emphasis)</EM> <STRONG>Gran énfasis (Strong)</STRONG> <U>Subrayado (Underline)</U>
  • 10. FONT • La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. <FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>