Create a website using Komodo Edit


Get the Flash Player to see this player.

Mark Video Segment:
[Hide] Copy and paste this link to an email or instant message:
[Hide] Right click this link and add to bookmarks:
Dock windowSearch
Loading ...

Title:Create a website using Komodo Edit
Creator:Rebecka Embry

Need to create your e-portfolio? Are you taking INF 312? Komodo Edit is a great free tool to help you create and organize your website files and upload them to a server. This tutorial is an introduction to using Komodo Edit to do just that!

Dock windowTranscript
Hello, and welcome to the Purpleshirt tutorial on Komodo Edit.  In this tutorial, we will be using the program Komodo Edit to create a simple website that we will then upload to a server. 
So let's get started.  What we first want to do is go ahead and open up Komodo Edit.  This is a free software you can download online.  
All right.  Let's get started.  All we need to do is just close out this start page.  And then what we first want to do is go to "Edit" then "Preferences."
So, what I want to do is create a "Remote Account" that is set up with the server where I want to upload my documents.  What I'm going to do is change this information.  Now, your instructor or your TA will be able to provide you with this information about the server that they want you to use. 
I'll be using "" which is one of the main servers for the iSchool.  Then I'll enter in my iSchool username and password.  Then click "OK."
OK.  Now that I have my remote account set up I want to start creating some files so that I can create my website.  The first file that I want to create is an HTML file and I will do this by using Komodo Edit templates.  
What I'll do is go to "File," "New," and "File from Template."  Choose "All Languages" and then let's find "HTML."
I want to name it "index.html" and for right now I want to save it as a local file which saves it on my computer's hard drive.  Then, when I'm ready to publish it, I will save it to a server. 
This is ready.  And "Open."  Here we go.  Here is a basic website.  You can see that it already has some of the important information that you need for your HTML in here.  And what I want to do first is just fill in some of this information. 
Let's see.  We need a title for the website so I'm just going to insert a title in here real quick of "Tutorial."   And then I want to create some tags to put in the body and I'm just going to copy and paste these that I have already created.   
There we go.  We have a heading tag and a paragraph tag.  That looks nice.  So what I want to do now is to go ahead and save it.  This is saved on my hard drive right now.  
And let's just see what this looks like in an internet browser.  Now we can do that two ways.  You can push this world button and it will preview down here in the bottom of the screen.  
I'm just going to close that out.  I want to view it in an actual web browser.  I'll just open it up in Chrome to see how it looks in Chrome real quick.  
And as you can see, this is looking pretty good.  Here is my heading and here is my paragraph.  Here is the title of the website and you can see that it is located on my computer. 
So let's just close that out for now.  Now that I have my HTML document, what I want to do next is to create a new file from a template that will be my CSS file.  
Again, I'll go up here to "File," "New," "From a Template," and select "CSS."  I'm going to name it "stylesheet.css" and I want it to store on my computer.  Then we will go ahead and open.  As you can see, it opened a new tab in Komodo Edit.  
Here is my HTML file and then my CSS file.  Let me go ahead and copy and paste some information to my CSS real quick.  There we go.  That looks good.  
I'll go back to my HTML and we'll add the path for the CSS in here in the header.  Now my HTML knows to look for this CSS file. 
And what I want to do is save both of these documents.  I'm going to hit the "Save All Files" button right here.  Let's see what this looks like in an internet browser.  We can do the preview in Komodo Edit and you see that it changed my background.  The text of my header is now white and this text is a little bit bigger. 
We can close this out.  Again, let's see how it looks in Chrome.  All right.  That looks pretty good.  I'll just go ahead and close this out.  I'm ready to go ahead and upload it to a server so people can view it online. 
First I need to go up here to the tab and right click and "Save as other," "Remote File."  What I'm going to do is select the server account we just created.  It's going to go ahead and connect to that.  I'm going to go into my public HTML folder and save the file as "index.html". Then go ahead and click save. 
So now my index file is uploaded.  Now I just need to do my CSS file and I'll do the same thing.  "Save as other," "Remote File," "iSchool" server, and my public html folder. I'll just click "Save."
OK and let's see how this looks in a browser.  Let me open up an internet browser.  I'll be using Google Chrome.  Then I need to go to where the files are stored on the server space.  
Its stored at "[server]/~[username]/[file name]" and here we go.  This is a live site.  It is able to be viewed on the internet from any computer.  
This is the end of our tutorial.  I hope you learned how to use Komodo Edit to create a simple website.  Thank you. 
Dock windowTable of Contents
Creating a Remote Account
Creating a HTML File from a Template
Display Files Visually Using Komodo Edit
Creating a CSS File from a Template
Saving Files to a Server