Maintain

How to upload website using FileZilla

EAZY WAY TO UPLOAD YOUR WEBSITE TO YOUR WEBHOST.
FileZilla is open source FTP (File Transfer Protocol) software that lets you manage your website files as any files on your operating system. To get FileZilla you need to download it from filezilla-project.org. There are download links for Client and Server. You need the Client one.
Once you have installed and opened FileZilla you see there are six sections. The one you need is the one on the right side saying Filename.
First you add your Host, Username and Password in the top bar. You got those from your web host. Once you wrote them click enter and FileZilla connects to your web host. After successful connection find your public_html file from right bottom section. Double click it open and drag the contents from your website folder there. That's it folks.



How to update your HTML website

EAZY WAY TO CHANGE YOUR TEXT AND IMAGE CONTENTS.
Before any changes on your website it is recommended to make back up copy of your website folder. Copy and paste it and name the copy as backup.
Once you have backup done open the website folder. There are folders like css, js, images etc and html files that are your website. File called index.html is your front page and other pages you probably know by their names what they are. File extension can also be php instead of html. In that case there might be folder called parts where you find parts of your website too.
To make changes open HTML/PHP file in text editor (WordPad, TextEdit, Notepad++, Atom...)

Text:

Note! Do not change any tags (text between these < >) if you don't know what you are doing.
Basically the only tags you need to know for making changes in text contents are:
  • <b> bold </b>
  • <i> italic </i>
  • <small> small </small>
  • <u> underline </u>
  • <strike> strike </strike>
  • <br> line break (no closing tag)
  • <h2> header </h2> (h1 is biggest and h6 is smallest. Header does line break automatically.)
  • <sup> superscript </sup>
  • <sub> subscript </sub>
You only need to scroll the HTML or PHP file through and find the parts you want to edit. After you're done save changes and replace the corresponding file/files with FileZilla. You can simply drag and drop new file in the right bottom section. (FileZilla asks if you'd like to replace existing files.)

Images:

You find your images from images folder. The easiest way to change existing image is to replace image in images folder with new image with same name and format (jpg, png, gif). To be sure new image fits in right you can make it same size and proportions as the old image.

In HTML images are marked like this:
<img src="images/my_nice_photo.jpg">
Use only English letters and lower case in image names.

Easy way to add new photos is to make their width 100% in HTML. This is not officially supported in HTML5 but it still works (The right way is to do it with CSS). Using the previous example our code would look like this:
<img src="images/my_nice_photo.jpg" width="100%">
100% width makes sure images don't overlap other content or break in any other way the structure.

One more things to add in your image tag are the alt attribute and title. This is part of SEO (Search Engine Optimization).
Alt attribute and title look like this:
<img src="images/my_nice_photo.jpg" width="100%" alt="The Most Beautiful Sunrise" title="Sunny Morning">
Think about what words your target audience would use when they are searching internet. Do not spam here because modern search engines notice that. Just couple simple phrases.

Before you upload new versions of your files in internet check them first offline by opening edited HTML files in web browser. This works straight away only with HTML files.



CSS

MAGIC THAT MAKES THE VISUAL LAYOUT OF YOUR SITE.
In HTML or PHP file you found lot of tags saying div. Div tags define parts of your website. It's almost like a puzzle made of div elements. Div is kind of generic term that can include any kind material. Then there are parts like nav, section, article, aside, table, details, header and footer which have their specific purposes. Each of these parts can have id or class that assign their name. Same id can be used only for one element and class can be used for multiple elements in one HTML/PHP file.
On top of HTML file there is element called head where you see listed CSS files that are linked to your HTML file. CSS mark up for ids and classes of divs, navs, sections, tables etc can be found from these CSS files.
CSS mark up for id is # and for class it is dot. For example <div id="upper_container"> has CSS mark up #upper_container and <div class="wrapper"> has .wrapper. Hash tag for id and dot for class. If for example table does not have neither id or class it can be marked up as table in CSS file. Same goes to any other tags too. This way you can make global CSS rules for all table elements in HTML file.

In CSS file you can set layout, fonts, colors, background images etc. CSS can also be included in HTML file but usually it is in its own file for the sake of clarity.

I list here few of the most used CSS properties:
  • background: Can include background color or background image
  • margin: Empty space around element
  • padding: Empty space between element's outlines and inner contents
  • width: Element's width
  • height: Element's height
  • color: Text color
  • font-family: Font
  • border: Element's border thickness, color and style
Before any changes remember back up your files.



WordPress

PHP ENGINE BETWEEN YOU AND YOUR WEBSITE.
WordPress is open source PHP based content management system (CMS) that offers you interface for website handling.
In WordPress environment you are dealing with plugins, themes and MySQL databases among the languages like PHP, CSS and HTML.
If you want content management system WordPress can be option for you. Also with WordPress you can get really cheap website based on already existing themes.



SSL

ENCRYPTION METHOD TO KEEP SENSITIVE DATA SAFE.
SSL encrypted website means that the data from web host gets encrypted and visitor's web browser opens the encrypted data as website. This keeps passwords, bank identifiers, personal data and posts in social media a bit more safe side. If you have login system, web store or for example contact form* on your website SSL is little extra cost to gain your visitors trust. You know website has SSL certificate when its address starts with https (which stands for Secure Hyper Text Transport Protocol).
You can get SSL certificate that has warranty for few bucks per month.
In case there is nothing confidential data moving through your website you can still use free SSL certificate from Let's Encrypt. Search engines like more SSL certificated sites.

*Third party contact forms are running from SSL certificated sites anyway so with them you don't necessarily need to buy SSL certificate.