Este documento ofrece instrucciones para crear una página web, incluyendo elegir una plantilla, agregar contenido como texto e imágenes, crear enlaces, y publicar la página en Internet. Explica los pasos iniciales como elegir un editor de páginas web y un servidor, y destaca la importancia de la estructura y navegación del sitio.
Monitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptx
Como hacer una pagina web
1. COMO HACER UNACOMO HACER UNA
PAGINA WEBPAGINA WEB
AYLLEN SANCHEZAYLLEN SANCHEZ
11°E11°E
ANALIDA CARVAJALANALIDA CARVAJAL
ESCUELA NORMAL SUPERIOR DEL DISTRITO DEESCUELA NORMAL SUPERIOR DEL DISTRITO DE
BARRANQUILLABARRANQUILLA
2. COMO CREAR UNA PAGINA WEBCOMO CREAR UNA PAGINA WEB
El primer paso para saber cómo hacer una página web consiste enEl primer paso para saber cómo hacer una página web consiste en
elegir una plantilla, o lo que es lo mismo, la imagen de tu páginaelegir una plantilla, o lo que es lo mismo, la imagen de tu página
web. Puedes elegir entre una gran variedad de plantillas conweb. Puedes elegir entre una gran variedad de plantillas con
diseños predefinidos que te permitirán empezar con una páginadiseños predefinidos que te permitirán empezar con una página
web ya casi lista, pues sólo tendrás que personalizarla y completarlaweb ya casi lista, pues sólo tendrás que personalizarla y completarla
con tu contenido para hacerla única. Además, en BaseKitcon tu contenido para hacerla única. Además, en BaseKit
encontrarás el diseño perfecto para tu web, ya que contamos conencontrarás el diseño perfecto para tu web, ya que contamos con
una gran galería de plantillas web para negocios de todo tipo,una gran galería de plantillas web para negocios de todo tipo,
plantillas para fotógrafos, plantillas para diseñadores... Elige la queplantillas para fotógrafos, plantillas para diseñadores... Elige la que
más te guste sin preocuparte por nada, ya que podrás modificar elmás te guste sin preocuparte por nada, ya que podrás modificar el
fondo, los colores, las formas, etc.fondo, los colores, las formas, etc.
3. NECESITAMOS PARA EMPEZAR:NECESITAMOS PARA EMPEZAR:
• Una computadora PC o Macintosh.Una computadora PC o Macintosh.
Preferiblemente una PC con Windows 98Preferiblemente una PC con Windows 98
• Un programa editor de paginas WEB.Un programa editor de paginas WEB.
Si su computadora tiene InternetSi su computadora tiene Internet
Explorer de Microsoft ustedes yaExplorer de Microsoft ustedes ya
tienen un editor en su máquina ,estetienen un editor en su máquina ,este
programa se llama Front Page Express,programa se llama Front Page Express,
Otros editores son Netscape ComposerOtros editores son Netscape Composer
incluido con la versión gratis deincluido con la versión gratis de
Netscape Communicator, programasNetscape Communicator, programas
mas avanzados son Front Page de MS,mas avanzados son Front Page de MS,
Dreamveaver, Homesite, Adobe PageDreamveaver, Homesite, Adobe Page
Mill, Net Objetcs Fusion etc., estos yMill, Net Objetcs Fusion etc., estos y
muchos otros se pueden bajar en estamuchos otros se pueden bajar en esta
dirección:dirección: httphttp://://
winfiles.cnet.com/apps/98/html-ag.htmlwinfiles.cnet.com/apps/98/html-ag.html,,
• Un servidor con una dirección para guardar susUn servidor con una dirección para guardar sus
páginas.páginas.
Su proveedor de servicio de Internet le proporcionaSu proveedor de servicio de Internet le proporciona
este espacio. Si su proveedor no le facilita esteeste espacio. Si su proveedor no le facilita este
espacio, usted puede encontrar en el Internetespacio, usted puede encontrar en el Internet
muchos sitios donde otorgan espacio para colocarmuchos sitios donde otorgan espacio para colocar
sus páginas WEB gratis. Por ejemplo aquí:sus páginas WEB gratis. Por ejemplo aquí:
http://espanol.geocities.yahoo.comhttp://espanol.geocities.yahoo.com//. Para sitios. Para sitios
profesionales se recomienda seleccionar unprofesionales se recomienda seleccionar un
proveedor de hospedaje de acuerdo a susproveedor de hospedaje de acuerdo a sus
necesidades, recuerda que lo barato en muchasnecesidades, recuerda que lo barato en muchas
ocasiones sale caro.ocasiones sale caro.
• Un programa editor de archivos gráficos.Un programa editor de archivos gráficos.
En caso que ustedes quieran utilizar fotos, graficasEn caso que ustedes quieran utilizar fotos, graficas
etc. Un programa fácil de usar el paint shop proetc. Un programa fácil de usar el paint shop pro
por ejemplo, este y otros están disponibles aquí:por ejemplo, este y otros están disponibles aquí:
http://http://
winfiles.cnet.com/apps/98/graph-editors.htmlwinfiles.cnet.com/apps/98/graph-editors.html..
4.
5. AGREGAR CONTENIDO:AGREGAR CONTENIDO:
• Agregar Texto.Agregar Texto.
Con los mencionados WYSIWIG editors podemos agregar textos en la misma forma como en losCon los mencionados WYSIWIG editors podemos agregar textos en la misma forma como en los
procesadores de texto (word etc) sin preocuparnos mucho por el lenguaje HTML (Hyper textprocesadores de texto (word etc) sin preocuparnos mucho por el lenguaje HTML (Hyper text
markup language) Para una buena presentación gráfica de las páginas se usan en muchos casosmarkup language) Para una buena presentación gráfica de las páginas se usan en muchos casos
tablas para la mejor distribución de los textos y/o graficas, estas tablas pueden tener los bordestablas para la mejor distribución de los textos y/o graficas, estas tablas pueden tener los bordes
visibles o invisibles, entre otras características. Vea mas sobre esto aquí:visibles o invisibles, entre otras características. Vea mas sobre esto aquí: http://http://
htmlgoodies.earthweb.com/primers/primer_3.htmlhtmlgoodies.earthweb.com/primers/primer_3.html..
• Agregar Graficas.Agregar Graficas.
De la misma forma insertamos graficas y las archivamos en el mismo folder. Los formatos para lasDe la misma forma insertamos graficas y las archivamos en el mismo folder. Los formatos para las
graficas mas usados son .gif y .jpeg. Tratamos siempre de comprimir estos archivos al máximograficas mas usados son .gif y .jpeg. Tratamos siempre de comprimir estos archivos al máximo
para evitar demora en bajar las páginas. Por la misma razón, se recomienda usar un númeropara evitar demora en bajar las páginas. Por la misma razón, se recomienda usar un número
razonable de graficas. Mas aquí:razonable de graficas. Mas aquí: http://http://htmlgoodies.earthweb.com/primers/primer_3.htmlhtmlgoodies.earthweb.com/primers/primer_3.html..
• Hacer Links.Hacer Links.
Con la ayuda podemos enlazar (link) texto y graficas hacia otras partes del mismo documento, haciaCon la ayuda podemos enlazar (link) texto y graficas hacia otras partes del mismo documento, hacia
otras páginas y/o hacia páginas en otros sitios del internet. Vea mas sobre este tema aquí:otras páginas y/o hacia páginas en otros sitios del internet. Vea mas sobre este tema aquí: http://http://
htmlgoodies.earthweb.com/primers/primer_4.htmlhtmlgoodies.earthweb.com/primers/primer_4.html..
6. • Agregar Formularios.Agregar Formularios.
Estos editores nos permiten también integrarEstos editores nos permiten también integrar
formularios para coleccionar información yformularios para coleccionar información y
para hacer las páginas interactivas. Maspara hacer las páginas interactivas. Mas
detalles sobre este tema vea esta página:detalles sobre este tema vea esta página:
http://http://
htmlgoodies.earthweb.com/tutors/fm.htmlhtmlgoodies.earthweb.com/tutors/fm.html..
• Agregar efectos especiales.Agregar efectos especiales.
Existe un gran número de efectos especialesExiste un gran número de efectos especiales
que podemos agregar utilizando java applets,que podemos agregar utilizando java applets,
java scripts, flash, dhtml, entre otros. Veajava scripts, flash, dhtml, entre otros. Vea
algunos aquí:algunos aquí: http://www.dynamicdrive.comhttp://www.dynamicdrive.com//
..
7. Una vez hayas elegido tu plantilla deUna vez hayas elegido tu plantilla de
diseño predefinido, el siguiente pasodiseño predefinido, el siguiente paso
para crear tu web es completar tupara crear tu web es completar tu
página con tu contenido y hacerlapágina con tu contenido y hacerla
única. Podrás añadir o eliminar páginasúnica. Podrás añadir o eliminar páginas
en tu web, cambiar los textos de tuen tu web, cambiar los textos de tu
plantilla con sólo hacer clic sobre ellos,plantilla con sólo hacer clic sobre ellos,
añadir tus imágenes, añadir tus vídeosañadir tus imágenes, añadir tus vídeos
o incrustarlos directamente desdeo incrustarlos directamente desde
YouTube o Vimeo, incorporar iconos deYouTube o Vimeo, incorporar iconos de
redes sociales tipo Facebook, Twitter oredes sociales tipo Facebook, Twitter o
Flickr para que los usuarios de tu webFlickr para que los usuarios de tu web
puedan compartir tu contenido porpuedan compartir tu contenido por
internet, incluir mapas de Google Mapsinternet, incluir mapas de Google Maps
para poder localizar tu negociopara poder localizar tu negocio
fácilmente, crear formularios enfácilmente, crear formularios en
segundos y mucho más, simplementesegundos y mucho más, simplemente
con ‘arrastrar y soltar’ los elementoscon ‘arrastrar y soltar’ los elementos
que quieras en tu página.que quieras en tu página.
9. • Ejemplo 1.Ejemplo 1.
• En este caso veamos un sitio con un total de 6 páginas, la primera página ( El HomeEn este caso veamos un sitio con un total de 6 páginas, la primera página ( El Home
Page) siempre se debe llamar index.html , de esta forma si nuestro sitio esta ubicado enPage) siempre se debe llamar index.html , de esta forma si nuestro sitio esta ubicado en
el la dirección (llamado también URL = Uniform resource locator) por ejemploel la dirección (llamado también URL = Uniform resource locator) por ejemplo
www.deloitte.com.pa el browser automáticamente busca awww.deloitte.com.pa el browser automáticamente busca a
www.deloitte.com.pa/index.htmwww.deloitte.com.pa/index.htm. o en un subdirectorio como. o en un subdirectorio como
http://www.deloitte.com.pa/spanish/index.htm.http://www.deloitte.com.pa/spanish/index.htm.
• Archivamos todas las páginas y graficas en un mismo folder si hay pocas o en variosArchivamos todas las páginas y graficas en un mismo folder si hay pocas o en varios
para ordenarlos mejor, si hay muchos archivos.para ordenarlos mejor, si hay muchos archivos.
• Preparamos antes de hacer el sitio un pequeño organigrama como en este ejemplo paraPreparamos antes de hacer el sitio un pequeño organigrama como en este ejemplo para
visualizar la estructura del sitio que construimos.visualizar la estructura del sitio que construimos.
• Navegación.Navegación. Tenemos que utilizar links de texto o graficas para enlazar las páginas yTenemos que utilizar links de texto o graficas para enlazar las páginas y
que sea fácil de navegar para que el visitante encuentre la información buscada. Veaque sea fácil de navegar para que el visitante encuentre la información buscada. Vea
mas sobre este tema aquí: http://www.htmltricks.com/navigation.htm.mas sobre este tema aquí: http://www.htmltricks.com/navigation.htm.
• Los Meta Tags.Los Meta Tags. El encabezado (head) de la página (visible solamente en html mode)El encabezado (head) de la página (visible solamente en html mode)
contiene varios componentes que podemos agregar; el mas importante es el título,contiene varios componentes que podemos agregar; el mas importante es el título,
luego la descripción y los keywords entre ortos. Estos son algunos de los elementosluego la descripción y los keywords entre ortos. Estos son algunos de los elementos
importantes para los search engines, vea mas sobre este tema aquí:importantes para los search engines, vea mas sobre este tema aquí:
http://www.htmltricks.com/setricks.htm.http://www.htmltricks.com/setricks.htm.
10. ¿CÓMO PONGO MI PÁGINA EN INTERNET?¿CÓMO PONGO MI PÁGINA EN INTERNET?
No te preocupes, BaseKit se encarga de todo el proceso queNo te preocupes, BaseKit se encarga de todo el proceso que
conlleva colgar tu página para que se vea en internet y la genteconlleva colgar tu página para que se vea en internet y la gente
pueda entrar en ella. Tú sólo tienes que hacer click en el botónpueda entrar en ella. Tú sólo tienes que hacer click en el botón
‘publicar’ que encontrarás en tu editor web y ¡listo! Tu página estará‘publicar’ que encontrarás en tu editor web y ¡listo! Tu página estará
en internet inmediatamente y podrá verse genial en cualquieren internet inmediatamente y podrá verse genial en cualquier
ordenador, y también en móviles y tablets (incluidos iPhone yordenador, y también en móviles y tablets (incluidos iPhone y
iPads). Además, tu dominio y tu alojamiento estarán incluidos en eliPads). Además, tu dominio y tu alojamiento estarán incluidos en el
plan de BaseKit que elijas para hacer tu página web, para que así túplan de BaseKit que elijas para hacer tu página web, para que así tú
no tengas que preocuparte de nada. Además, ten en cuenta queno tengas que preocuparte de nada. Además, ten en cuenta que
siempre que quieras podrás acceder a tu editor web y modificar elsiempre que quieras podrás acceder a tu editor web y modificar el
diseño de tu página, cambiar textos, añadir imágenes y mucho más.diseño de tu página, cambiar textos, añadir imágenes y mucho más.