SlideShare una empresa de Scribd logo
Institución Educativa San isidro - INESA NI
Montería - Córdoba
TECNOLOGIA E INFORMATICA GRADO 10
CREACION DE PAGINAS WEB CON HTML
INTRODUCCION
HTML, HyperText Markup Language (Lenguaje de marcado de hipervínculos o hipertexto), es un lenguaje
simple utilizado para crear documentos de hipertexto para WWW.
Por tanto, como hemos visto, HTML es un lenguaje muy sencillo que nos permite preparar documentos Web
insertando en el texto de los mismos una serie de marcas (tags) que controlan los diferentes aspectos de la
presentación y comportamiento de sus elementos.
En la actualidad, hay muchos programas útiles que nos ayudan en la creación y el diseño de estas páginas, de
tal modo que no hace falta conocer todas las instrucciones, pero siempre es conveniente tener una idea para
ajustar mejor algunos parámetros.
 Conceptos claves:
Antes de iniciar la temática sobre la creación de páginas web, es recomendable reconocer algunos conceptos:
 Navegador: Un navegador web o explorador web (browser) es un programa (aplicación de software)
que permite al usuario recuperar y visualizar la información que contiene una página web desde
servidores web de todo el mundo a través de Internet.
Ejemplo de navegadores: internet Explorer, Mozilla Firefox, Netscape, etc.
 Buscador o Motor de Búsqueda: es un programa o software que busca sitios web basándose en
palabras clave (keywords) designadas como términos de búsqueda y los lista a través de enlaces
para su posterior acceso.
Ejemplo de buscadores: Google, Yahoo, Altavista, etc.
 Pagina Web: Es un documento (único archivo) adaptado para la Web y que normalmente forma parte
de un sitio web, está compuesto por Texto, imágenes, videos, sonidos, etc. Su principal característica
son los hiperenlaces a otras páginas, siendo esto el fundamento de la Web.
 Sitio Web: es una colección de páginas web relacionadas y comunes a un dominio de Internet o
subdominio en la World Wide Web en Internet. Si lo comparáramos con un libro, un sitio web sería el
libro entero y una página web de ese sitio web sería cada página del libro.
 Programas para crear paginas Web:
El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser el Bloc
de Notas de Windows (o Notepad), o cualquier otro editor que admita texto sin formato como Microsoft
Wordpad,TextPad,Vim.
Existen además, otros programas para la realización de sitios Web o edición de código HTML, a los que se les
conoce como editores WYSIWYG o What You See Is What You Get (en español: “lo que ves es lo que
obtienes”), como por ejemplo Microsoft FrontPage, el cual tiene un formato básico parecido al resto de los
programas de Office. También existe el famoso software de Macromedia (que adquirió la empresa Adobe)
llamado Dreamweaver, siendo uno de los más utilizados en el ámbito de diseño y programación Web. Estos
programas son editores visuales en los cuales se va mostrando el resultado de lo que se está editando en
tiempo real a medida que se va desarrollando el documento.
Institución Educativa San isidro - INESA NI
Montería - Córdoba
 Elementos necesarios para crear una página Web:
 Un Editor de Texto: los documentos HTML están en formato de texto sencillo (también conocido
como ASCII). El editor de texto se utiliza para escribir el documento en lenguaje HTML, que será
posteriormente interpretado por el programa navegador correspondiente.
Un editor utilizado para la inserción de etiquetas es el bloc de notas.
 Un navegador en el cual se puede visualizar la pagina Web. Dentro de los más comunes, se
encuentra el Internet Explorer, Mozilla Firefox, Chrome, etc.
 Estructura de una página Web con el Lenguaje Html.
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las
cuales se determinan la forma en la que debe aparecer en su navegador el texto, así como también las
imágenes y los demás elementos, en la pantalla del ordenador.
Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información
necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y se pueda modificar más
fácilmente. Si una página Web es complicada en su diseño, habrá muy pocos que sepan dar el mantenimiento
adecuado. Abajo se muestra la estructura lógica de una página Web.
<HTML>
<HEAD>
<TITLE>Primera página</TITLE>
</HEAD>
<BODY>
AQUI VA EL RESTO DE LAS ETIQUETAS
</BODY>
</HTML>
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta
o tan larga sea la página y el contenido.
La primera instrucción <HTML> indica al explorador de Internet que ahí comienza una página Web. La siguiente
instrucción <HEAD> indica el encabezado de la página, es decir el área de la barra de título. <TITLE> indica el
título de la página propiamente dicho. <BODY> es una instrucción que indica al explorador de Internet que ahí
empieza el área de contenido de la página (es decir el cuerpo de la página).
En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al programa que las
propiedades aplicadas con esa instrucción se terminan ahí donde se pone el signo diagonal. Si el signo de
cierre (/) no se aplica convenientemente, el programa seguirá aplicando las propiedades de la instrucción
anterior a todas las líneas inferiores, hasta que se encuentre otra instrucción que modifique las propiedades
actuales.
Institución Educativa San isidro - INESA NI
Montería - Córdoba
 Guardado del archivo como página Web
Cuando se haya escrito el código de la página Web, es necesario guardar el archivo como una página Web.
Una página Web tiene la extensión HTM, la cual se debe especificar en el momento de guardar la página. Una
vez guardado el archivo con la extensión HTM, se puede crear un acceso directo para este archivo o se puede
abrir directamente desde el sitio en el que se guardó.
 Ejercicio
Abre el Bloc de notas y copia el siguiente código que se muestra. Cuando hayas terminado de capturar el
código, guárdalo con el nombre de Primera.htm ; ahora busca tu archivo y ábrelo.
<HTML>
<HEAD>
<TITLE>Página Cesumnista</TITLE>
</HEAD>
<BODY>
<H1> BIENVENIDOS A NUESTRA PAGINA CESUMNISTA </H1>
</BODY>
</HTML>
Después de haber creado y visualizado tu primera pagina web, espera las indicaciones del docente para
incrustar otras etiquetas que te permitirán centrar el texto, asignar un fondo, asignar color al texto, entre otros.
Nota: Investiga otras etiquetas básicas para dar formato al texto en el lenguaje HTML.
Actividad En Clases:
Responde en el cuaderno las siguientes preguntas:
1. ¿Cuál crees que es la importancia del HTML?
2. ¿Explica la diferencia entre navegador web y motor de búsqueda? da ejemplos de cada uno.
3. ¿Explica la diferencia entre Página Web y Sitio Web? da ejemplos de cada uno.
4. ¿Cuáles son los elementos necesarios para crear una página o sitio web?
5. ¿Escribe cual es la estructura básica de un documento HTML?
6. ¿Cuál es la extensión de archivo, que se debe utilizar al guardar un documento HTML?

Más contenido relacionado

La actualidad más candente

Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02nicolas-1996
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerranicolascristancho
 
Colegio nicolas esguerra edificamos futuro
Colegio nicolas esguerra edificamos futuroColegio nicolas esguerra edificamos futuro
Colegio nicolas esguerra edificamos futuropinillapulido
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
geralyfernandacabreraaldana
 
Qué es html
Qué es htmlQué es html
Qué es html
Cesar Sierra
 
Como desarrollar una web (mod5 diplo ust)
Como desarrollar una web (mod5 diplo ust)Como desarrollar una web (mod5 diplo ust)
Como desarrollar una web (mod5 diplo ust)
Felipe Castro
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerraGinoRomero13
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerraCarlos Parrado Roa
 

La actualidad más candente (18)

Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02
 
Cb fs
Cb fsCb fs
Cb fs
 
HTML 2
HTML 2 HTML 2
HTML 2
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
 
Colegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra htmlColegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nicolas esguerra edificamos futuro
Colegio nicolas esguerra edificamos futuroColegio nicolas esguerra edificamos futuro
Colegio nicolas esguerra edificamos futuro
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Colegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra htmlColegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra html
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Presentacion de html
Presentacion de htmlPresentacion de html
Presentacion de html
 
Qué es html
Qué es htmlQué es html
Qué es html
 
Trabajo david rocha
Trabajo david rochaTrabajo david rocha
Trabajo david rocha
 
Como desarrollar una web (mod5 diplo ust)
Como desarrollar una web (mod5 diplo ust)Como desarrollar una web (mod5 diplo ust)
Como desarrollar una web (mod5 diplo ust)
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Trabajo
TrabajoTrabajo
Trabajo
 

Similar a Guia no 1 cómo crear mi propia web

Html
HtmlHtml
Diseño de paginas y buscadores
Diseño de paginas y buscadores Diseño de paginas y buscadores
Diseño de paginas y buscadores
Santos Hau Kuyoc
 
Clase 1 de html
Clase 1 de htmlClase 1 de html
Clase 1 de html
UTLA
 
Guia html 1
Guia html 1Guia html 1
Html5
Html5Html5
Access
AccessAccess
Access
AccessAccess
PAGINA WEB paucar inga lidia
PAGINA WEB paucar inga lidiaPAGINA WEB paucar inga lidia
PAGINA WEB paucar inga lidia
WILDER VILCAHUAMAN
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
Javier Navarro
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerrajaboanlkxmndsjkc
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerraFREDY FORERO H
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerrajaboanlkxmndsjkc
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerrajaboanlkxmndsjkc
 
Clase 3 HTML
Clase 3 HTMLClase 3 HTML
Clase 3 HTML
Josué Fortis
 
Estructura de una Pagina Web en HTML
Estructura de una Pagina Web en HTMLEstructura de una Pagina Web en HTML
Estructura de una Pagina Web en HTML
Alejandra Vanegas
 
Trabajo informatica 4,periodo
Trabajo informatica 4,periodoTrabajo informatica 4,periodo
Trabajo informatica 4,periodojulian_vargas
 

Similar a Guia no 1 cómo crear mi propia web (20)

Clase 1
Clase 1Clase 1
Clase 1
 
Html
HtmlHtml
Html
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Diseño de paginas y buscadores
Diseño de paginas y buscadores Diseño de paginas y buscadores
Diseño de paginas y buscadores
 
Clase 1 de html
Clase 1 de htmlClase 1 de html
Clase 1 de html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
Html5
Html5Html5
Html5
 
Access
AccessAccess
Access
 
Access
AccessAccess
Access
 
PAGINA WEB paucar inga lidia
PAGINA WEB paucar inga lidiaPAGINA WEB paucar inga lidia
PAGINA WEB paucar inga lidia
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
 
Cb fs
Cb fsCb fs
Cb fs
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Clase 3 HTML
Clase 3 HTMLClase 3 HTML
Clase 3 HTML
 
Estructura de una Pagina Web en HTML
Estructura de una Pagina Web en HTMLEstructura de una Pagina Web en HTML
Estructura de una Pagina Web en HTML
 
Trabajo informatica 4,periodo
Trabajo informatica 4,periodoTrabajo informatica 4,periodo
Trabajo informatica 4,periodo
 

Último

ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
JAVIER SOLIS NOYOLA
 
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdfAsistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Demetrio Ccesa Rayme
 
Portafolio de servicios Centro de Educación Continua EPN
Portafolio de servicios Centro de Educación Continua EPNPortafolio de servicios Centro de Educación Continua EPN
Portafolio de servicios Centro de Educación Continua EPN
jmorales40
 
Fase 1, Lenguaje algebraico y pensamiento funcional
Fase 1, Lenguaje algebraico y pensamiento funcionalFase 1, Lenguaje algebraico y pensamiento funcional
Fase 1, Lenguaje algebraico y pensamiento funcional
YasneidyGonzalez
 
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdfFORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
El Fortí
 
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdfTexto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
ClaudiaAlcondeViadez
 
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNETPRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
CESAR MIJAEL ESPINOZA SALAZAR
 
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLAACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
JAVIER SOLIS NOYOLA
 
SESION ORDENAMOS NÚMEROS EN FORMA ASCENDENTE Y DESCENDENTE 20 DE MAYO.docx
SESION ORDENAMOS NÚMEROS EN FORMA ASCENDENTE Y DESCENDENTE 20 DE MAYO.docxSESION ORDENAMOS NÚMEROS EN FORMA ASCENDENTE Y DESCENDENTE 20 DE MAYO.docx
SESION ORDENAMOS NÚMEROS EN FORMA ASCENDENTE Y DESCENDENTE 20 DE MAYO.docx
QuispeJimenezDyuy
 
Introducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BIIntroducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BI
arleyo2006
 
Fase 3; Estudio de la Geometría Analítica
Fase 3; Estudio de la Geometría AnalíticaFase 3; Estudio de la Geometría Analítica
Fase 3; Estudio de la Geometría Analítica
YasneidyGonzalez
 
El Liberalismo económico en la sociedad y en el mundo
El Liberalismo económico en la sociedad y en el mundoEl Liberalismo económico en la sociedad y en el mundo
El Liberalismo económico en la sociedad y en el mundo
SandraBenitez52
 
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfUn libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
sandradianelly
 
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptxSemana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
LorenaCovarrubias12
 
Educar por Competencias GS2 Ccesa007.pdf
Educar por Competencias GS2 Ccesa007.pdfEducar por Competencias GS2 Ccesa007.pdf
Educar por Competencias GS2 Ccesa007.pdf
Demetrio Ccesa Rayme
 
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
rosannatasaycoyactay
 
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdfAsistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Demetrio Ccesa Rayme
 
Horarios Exámenes EVAU Ordinaria 2024 de Madrid
Horarios Exámenes EVAU Ordinaria 2024 de MadridHorarios Exámenes EVAU Ordinaria 2024 de Madrid
Horarios Exámenes EVAU Ordinaria 2024 de Madrid
20minutos
 
Semana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptxSemana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptx
LorenaCovarrubias12
 
Libro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdfLibro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdf
danitarb
 

Último (20)

ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
ROMPECABEZAS DE ECUACIONES DE PRIMER GRADO OLIMPIADA DE PARÍS 2024. Por JAVIE...
 
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdfAsistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
Asistencia Tecnica Cartilla Pedagogica DUA Ccesa007.pdf
 
Portafolio de servicios Centro de Educación Continua EPN
Portafolio de servicios Centro de Educación Continua EPNPortafolio de servicios Centro de Educación Continua EPN
Portafolio de servicios Centro de Educación Continua EPN
 
Fase 1, Lenguaje algebraico y pensamiento funcional
Fase 1, Lenguaje algebraico y pensamiento funcionalFase 1, Lenguaje algebraico y pensamiento funcional
Fase 1, Lenguaje algebraico y pensamiento funcional
 
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdfFORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
FORTI-JUNIO 2024. CIENCIA, EDUCACION, CULTURA,pdf
 
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdfTexto_de_Aprendizaje-1ro_secundaria-2024.pdf
Texto_de_Aprendizaje-1ro_secundaria-2024.pdf
 
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNETPRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
PRESENTACION DE LA SEMANA NUMERO 8 EN APLICACIONES DE INTERNET
 
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLAACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
ACERTIJO DE CARRERA OLÍMPICA DE SUMA DE LABERINTOS. Por JAVIER SOLIS NOYOLA
 
SESION ORDENAMOS NÚMEROS EN FORMA ASCENDENTE Y DESCENDENTE 20 DE MAYO.docx
SESION ORDENAMOS NÚMEROS EN FORMA ASCENDENTE Y DESCENDENTE 20 DE MAYO.docxSESION ORDENAMOS NÚMEROS EN FORMA ASCENDENTE Y DESCENDENTE 20 DE MAYO.docx
SESION ORDENAMOS NÚMEROS EN FORMA ASCENDENTE Y DESCENDENTE 20 DE MAYO.docx
 
Introducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BIIntroducción a la ciencia de datos con power BI
Introducción a la ciencia de datos con power BI
 
Fase 3; Estudio de la Geometría Analítica
Fase 3; Estudio de la Geometría AnalíticaFase 3; Estudio de la Geometría Analítica
Fase 3; Estudio de la Geometría Analítica
 
El Liberalismo económico en la sociedad y en el mundo
El Liberalismo económico en la sociedad y en el mundoEl Liberalismo económico en la sociedad y en el mundo
El Liberalismo económico en la sociedad y en el mundo
 
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdfUn libro sin recetas, para la maestra y el maestro Fase 3.pdf
Un libro sin recetas, para la maestra y el maestro Fase 3.pdf
 
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptxSemana 10-TSM-del 27 al 31 de mayo 2024.pptx
Semana 10-TSM-del 27 al 31 de mayo 2024.pptx
 
Educar por Competencias GS2 Ccesa007.pdf
Educar por Competencias GS2 Ccesa007.pdfEducar por Competencias GS2 Ccesa007.pdf
Educar por Competencias GS2 Ccesa007.pdf
 
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
3° UNIDAD 3 CUIDAMOS EL AMBIENTE RECICLANDO EN FAMILIA 933623393 PROF YESSENI...
 
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdfAsistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
Asistencia Tecnica Cultura Escolar Inclusiva Ccesa007.pdf
 
Horarios Exámenes EVAU Ordinaria 2024 de Madrid
Horarios Exámenes EVAU Ordinaria 2024 de MadridHorarios Exámenes EVAU Ordinaria 2024 de Madrid
Horarios Exámenes EVAU Ordinaria 2024 de Madrid
 
Semana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptxSemana #10-PM3 del 27 al 31 de mayo.pptx
Semana #10-PM3 del 27 al 31 de mayo.pptx
 
Libro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdfLibro infantil sapo y sepo un año entero pdf
Libro infantil sapo y sepo un año entero pdf
 

Guia no 1 cómo crear mi propia web

  • 1. Institución Educativa San isidro - INESA NI Montería - Córdoba TECNOLOGIA E INFORMATICA GRADO 10 CREACION DE PAGINAS WEB CON HTML INTRODUCCION HTML, HyperText Markup Language (Lenguaje de marcado de hipervínculos o hipertexto), es un lenguaje simple utilizado para crear documentos de hipertexto para WWW. Por tanto, como hemos visto, HTML es un lenguaje muy sencillo que nos permite preparar documentos Web insertando en el texto de los mismos una serie de marcas (tags) que controlan los diferentes aspectos de la presentación y comportamiento de sus elementos. En la actualidad, hay muchos programas útiles que nos ayudan en la creación y el diseño de estas páginas, de tal modo que no hace falta conocer todas las instrucciones, pero siempre es conveniente tener una idea para ajustar mejor algunos parámetros.  Conceptos claves: Antes de iniciar la temática sobre la creación de páginas web, es recomendable reconocer algunos conceptos:  Navegador: Un navegador web o explorador web (browser) es un programa (aplicación de software) que permite al usuario recuperar y visualizar la información que contiene una página web desde servidores web de todo el mundo a través de Internet. Ejemplo de navegadores: internet Explorer, Mozilla Firefox, Netscape, etc.  Buscador o Motor de Búsqueda: es un programa o software que busca sitios web basándose en palabras clave (keywords) designadas como términos de búsqueda y los lista a través de enlaces para su posterior acceso. Ejemplo de buscadores: Google, Yahoo, Altavista, etc.  Pagina Web: Es un documento (único archivo) adaptado para la Web y que normalmente forma parte de un sitio web, está compuesto por Texto, imágenes, videos, sonidos, etc. Su principal característica son los hiperenlaces a otras páginas, siendo esto el fundamento de la Web.  Sitio Web: es una colección de páginas web relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet. Si lo comparáramos con un libro, un sitio web sería el libro entero y una página web de ese sitio web sería cada página del libro.  Programas para crear paginas Web: El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser el Bloc de Notas de Windows (o Notepad), o cualquier otro editor que admita texto sin formato como Microsoft Wordpad,TextPad,Vim. Existen además, otros programas para la realización de sitios Web o edición de código HTML, a los que se les conoce como editores WYSIWYG o What You See Is What You Get (en español: “lo que ves es lo que obtienes”), como por ejemplo Microsoft FrontPage, el cual tiene un formato básico parecido al resto de los programas de Office. También existe el famoso software de Macromedia (que adquirió la empresa Adobe) llamado Dreamweaver, siendo uno de los más utilizados en el ámbito de diseño y programación Web. Estos programas son editores visuales en los cuales se va mostrando el resultado de lo que se está editando en tiempo real a medida que se va desarrollando el documento.
  • 2. Institución Educativa San isidro - INESA NI Montería - Córdoba  Elementos necesarios para crear una página Web:  Un Editor de Texto: los documentos HTML están en formato de texto sencillo (también conocido como ASCII). El editor de texto se utiliza para escribir el documento en lenguaje HTML, que será posteriormente interpretado por el programa navegador correspondiente. Un editor utilizado para la inserción de etiquetas es el bloc de notas.  Un navegador en el cual se puede visualizar la pagina Web. Dentro de los más comunes, se encuentra el Internet Explorer, Mozilla Firefox, Chrome, etc.  Estructura de una página Web con el Lenguaje Html. HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determinan la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador. Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y se pueda modificar más fácilmente. Si una página Web es complicada en su diseño, habrá muy pocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lógica de una página Web. <HTML> <HEAD> <TITLE>Primera página</TITLE> </HEAD> <BODY> AQUI VA EL RESTO DE LAS ETIQUETAS </BODY> </HTML> Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido. La primera instrucción <HTML> indica al explorador de Internet que ahí comienza una página Web. La siguiente instrucción <HEAD> indica el encabezado de la página, es decir el área de la barra de título. <TITLE> indica el título de la página propiamente dicho. <BODY> es una instrucción que indica al explorador de Internet que ahí empieza el área de contenido de la página (es decir el cuerpo de la página). En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al programa que las propiedades aplicadas con esa instrucción se terminan ahí donde se pone el signo diagonal. Si el signo de cierre (/) no se aplica convenientemente, el programa seguirá aplicando las propiedades de la instrucción anterior a todas las líneas inferiores, hasta que se encuentre otra instrucción que modifique las propiedades actuales.
  • 3. Institución Educativa San isidro - INESA NI Montería - Córdoba  Guardado del archivo como página Web Cuando se haya escrito el código de la página Web, es necesario guardar el archivo como una página Web. Una página Web tiene la extensión HTM, la cual se debe especificar en el momento de guardar la página. Una vez guardado el archivo con la extensión HTM, se puede crear un acceso directo para este archivo o se puede abrir directamente desde el sitio en el que se guardó.  Ejercicio Abre el Bloc de notas y copia el siguiente código que se muestra. Cuando hayas terminado de capturar el código, guárdalo con el nombre de Primera.htm ; ahora busca tu archivo y ábrelo. <HTML> <HEAD> <TITLE>Página Cesumnista</TITLE> </HEAD> <BODY> <H1> BIENVENIDOS A NUESTRA PAGINA CESUMNISTA </H1> </BODY> </HTML> Después de haber creado y visualizado tu primera pagina web, espera las indicaciones del docente para incrustar otras etiquetas que te permitirán centrar el texto, asignar un fondo, asignar color al texto, entre otros. Nota: Investiga otras etiquetas básicas para dar formato al texto en el lenguaje HTML. Actividad En Clases: Responde en el cuaderno las siguientes preguntas: 1. ¿Cuál crees que es la importancia del HTML? 2. ¿Explica la diferencia entre navegador web y motor de búsqueda? da ejemplos de cada uno. 3. ¿Explica la diferencia entre Página Web y Sitio Web? da ejemplos de cada uno. 4. ¿Cuáles son los elementos necesarios para crear una página o sitio web? 5. ¿Escribe cual es la estructura básica de un documento HTML? 6. ¿Cuál es la extensión de archivo, que se debe utilizar al guardar un documento HTML?