Pular para o conteúdo principal

Se você está vendo esta mensagem, significa que estamos tendo problemas para carregar recursos externos em nosso website.

Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.

Transcrição de Editing webpages in a desktop editor

  • 0:00- [Voiceover] Alright so I'm editing this webpage
  • 0:02on Kahn Academy,
  • 0:04and of course it's All about rabbits.
  • 0:06I've decided I wanna edit it
  • 0:08inside my desktop editor instead.
  • 0:11So what I will do is select all of it,
  • 0:15and then copy it,
  • 0:17and then head on over to my desktop editor.
  • 0:21I'm using Sublime Text, but you could be using
  • 0:23some other editor.
  • 0:26Next I'm going to paste in that html,
  • 0:29and see that it all came out very nice.
  • 0:32Now you'll notice the syntax highlighting,
  • 0:35so we got all the colors showing us
  • 0:36the structure of our html.
  • 0:38The colors in my editor are actually different
  • 0:41from the colors on Kahn Academy.
  • 0:43And this is just the particular theme that I picked,
  • 0:46you can pick whatever theme you like best
  • 0:49in your editor.
  • 0:51Alright so now I'm going to save this file,
  • 0:55and I'll save it as allaboutrabbits.html.
  • 0:59So generally you wanna save your file names
  • 1:01with no spaces, all lower case.
  • 1:04It's a nice file name.
  • 1:06Okay, now I'll go on over to my browser,
  • 1:10open a new tab,
  • 1:12and then Open File,
  • 1:16and find where I saved it on the desktop,
  • 1:19open that up.
  • 1:22Here we go, we've got it.
  • 1:24So it's showing the file from my file system,
  • 1:28but now I wanna edit it.
  • 1:31For that, I'm going to go back to my page,
  • 1:34change it to adorable widdle bunny rabbits!
  • 1:39And I'll save it,
  • 1:41and then I go back over and I reload the page,
  • 1:45and here's my change.
  • 1:47Now when I reloaded the page,
  • 1:49I did what's called a hard reload,
  • 1:52using the keyboard shortcut command shift r,
  • 1:55for the Mac.
  • 1:56A hard reload, both reloads a page
  • 1:58and tells the browser to ignore
  • 2:01whatever it has cached locally.
  • 2:03Browsers often like to hold on to old versions of web pages
  • 2:07so that they can deliver them faster,
  • 2:09but when you're debugging,
  • 2:10you really wanna have the very latest version.
  • 2:13So you wanna do a hard reload,
  • 2:15command shift r.
  • 2:17Okay, so then if we wanna make another change,
  • 2:20make the change, command save,
  • 2:22come on over, reload, ta-da.
  • 2:25And that's generally the cycle
  • 2:26when you're using a desktop editor,
  • 2:28is you're going to make the change, save,
  • 2:30go back over to your browser, reload,
  • 2:34and you just get used to doing that pretty quickly.
  • 2:38Now you could even get lucky and find that you're editor
  • 2:41has a tool for like preview,
  • 2:44in which case your editing cycle gets even faster.
  • 2:48You'll just have to explore whatever editor
  • 2:50you decide to use,
  • 2:51and see what functionality it has.