Lesson 12 – FTP pic tutorial

 

 

 

 

 

 

 

 

 

 

Open freewah.com client area.

Also open your text editor.

 

 

 

 

 

 

 

 

 

Whatever you have your home page titled title it now simply

index.html

 

 

 

 

 

 

 

 

Enter your password.

 

 

 

 

 

 

 

 

 

Login.

 

 

 

 

 

 

 

 

 

This is the overview of control panel.

 

 

 

 

 

 

 

 

 

this is close up of right hand side of control panel where you find your FTP information to upload.

Note the purple Link in the image is what you want to click but before you do that copy the URL of your website.

 

 

 

 

 

 

 

 

 

Notice that FTP and username or both the URL for your website so paste those FTP and username.

Your FTP password is the same as your password for your client area.

 

 

 

 

 

 

 

 

 

After you enter your FTP login credentials you will be taking to this page you see below which it goes directly to your root file.

 

 

 

 

 

 

 

 

 

you don’t need to do anything with the files you see in the pic above that are pre-installed on the server. I’m just showing you these so that you know what they are and basically leave them alone.

 

 

 

 

 

 

 

 

Open a new browser window and paste URL for your website in the browser window and it will show you the following page.

 

 

 

 

 

 

 

 

leave the second browser window open displaying your website page that you just opened and go back to your FTP server.

Note: you will have to reenter all of your login information as you did in step 2 through step 5…

Yes I agree with you it’s a major pain in the ass.

Once you have logged back in through your FTP hit the upload button.

 

 

 

 

 

 

 

 

…

 

 

 

 

 

 

 

 

after you hit the upload files button you will be taking to the FTP upload page where you will see a gray button that says choose a file.

 

 

 

 

 

 

 

 

Select documents.

 

 

 

 

 

 

 

 

Open the folder on your hard drive that contains the.

index.html.

And select the file like you would any other file.

 

 

 

 

 

 

 

 

the screen in the image above will open with a message saying that the file has been uploaded to the server by FTP.

 

 

 

 

 

 

 

 

 

Click the green check mark at the top to confirm the upload.

After you have click the top green check mark you will be taken back to the server file page.

 

 

 

 

 

 

 

 

Go back to your second browser page that displays your website.

 

 

 

 

 

 

 

 

Refresh the page.

Hopefully you’re using a Chrome browser if so lookin the top right corner and open the drop-down menu… and sellect refresh… to refresh the page.

 

 

 

 

 

 

 

 

after you refresh the page you should see a homepage similar to something like what is in the image below.

 

 

 

 

 

 

 

 

if you have follow these instructions correctly you should now see the web view of the rough draft for your homepage similar to the image above.

~~Congratulations !  You have just published your first page on the web …

good job ::)))

 

In our next lesson I will show you how to access this page and edit it so that you can start hooking up your links for your images and you never gation buttons and any other modifications you wish to make.

It’s really very easy  : )

I’ll check you in the next lesson…

 

I realize that if you’ve never used FTP before you may struggle with this lesson a little bit so there is no homework assignment tonight except to get your index page on your web server and then review it through your web browser to confirm you are successful.

Lesson 11 “the index page”

~~ Assignment 1

Your assignment for this lesson is to manually copy the index page code that you see below this lesson plan into your text editor.

Once you have manually copied the example index page into your text editor, view it in your browser View.

Take note of the place holders and how they function for you images and for the link buttons and images and the header and footer.

~~ Assignment 2

Once you have viewed this example code in your browser View and understand the placeholders method for images and links;

Then your next objective is to edit the code so that it is appropriate for the website that you are specifically building for yourself.

~~ Assignment 3

Once you have edited the index page example,

Make sure to save your edited index.html page to your hard drive.

Make 6 duplicates of the index page but save them with the following file names…

Page2.html

Page3.html

Page4.html

Page5.html

Page6.html

As you may recall in earlier discussions the index page is your landing page or your homepage so technically the index page is page one on your website.

Your website in the beginning will have a total of 6 pages.

As you flesh out your website you will title these Pages cordingley to what they are intended to convey to the end user.

~~ Assignment 4

once you have edited the code below to fit the needs of your website you are to upload your edited index page via FTP client of your choice to your server on freewha hosting.

I recognize we have not gone over using an FTP client and that will be covered in the next lesson.

For the time being, try to figure it out on your own. Use your research skills. There are plenty of resources online to guide you and if you cannot figure it out on your own then hold tight because we will be covering the details of  FTP in the next lesson.

~~

<!Doctype html>
<html lang=”en”>
<head>
<meta chrset=”utf-8″>
<title>Thinking Web Developmet</title>
<meta name=”web developmet”  content=”thinking web development”>
<link rel=”stylesheet”
type=”text/css”
href=”file:///storage/emulated/0/twdfrontpage.css”>
</head>

<header>
<img src=”add pic” width=”1200″ height=“500”>
<nav>
<button>push me 1</button>
<button>push me 2</button>
<button>push me 3</button>
<button>push me 4</button>
<button>push me 5</button>
<button>push me 6</button>
</nav>
</header>

<body>

<h1>thinking web development introduction</h1>
<p>.  </p>
<p>.  </p>
<p>.  </p>

<br>

<h2>the objectives of thinking web development </h2>
<p>.  </p>
<p>.  </p>
<p>.  </p>

<footer>
<nav>
<button>push me 1</button>
<button>push me 2</button>
<button>push me 3</button>
<button>push me 4</button>
<button>push me 5</button>
<button>push me 6</button>
</nav>
img src=“add pic”width=“1200” height=“500”>

</footer>

</body>
</html>

~~

the code above is a rough draft of the actual code I’m using for my index page to build the website for this lesson plan.

it is a rough draft because as you will note in the header and footer there is an image along with a half a dozen buttons.

at this time before I upload the index page there is no file path for the images and there is no file path to any of the buttons.

I have set it up this way deliberately in the reason is because establishing file paths on my cell phone or in your case probably your laptop will be entirely different from the file paths for the same images and Pages once they’re in your server… For this reason I have set placeholders where the file path for images and links Shelby once it is all set up in the server.

it is good practice to always establish your index page first before any other page on your server.

after you have established your index page on your server you will want to set up a gallery page to store your images and then you will be adding new pages to your website to flesh it out.

once everything is on your server then you will establish your file paths to your link buttons and your images.

the reason I do it this way is because the file paths you use for your image and Link buttons will be entirely different from the server then they will be on your laptop or in my case on my cell phone so there is no reason to double work you just load everything up to your server and then set your file paths last.