Here is a special offer for the first 50 bloggers. Blogspot/Blogger and WordPress.com are good, free platforms for blogging. But because they are free it also means that you have very limited control over it.
Have you considered getting your own domain and hosting but thought it would be too expensive? Or maybe the one you are currently using is expensive? Here is an offer that may help you decide.
Velcomsnetwork is offering a special web hosting package for bloggers which will allow you to pay on a monthly basis.
Starter hosting package
1 Gb space
10 Gb bandwidth
Price: P35/month or P400/annual
Advance hosting package
10 Gb space
50 Gb bandwidth
Price: P125/month or P1,500/annual
For those who have large websites and may need more space or if you have more than 1 site and you want to combine them into 1 hosting, here are the packages for you:
Other services available such as server colocation, dedicated server, VPS, Dedicated Internet
You may also acquire your domain from them. Prices vary depending on what domain you get. Domains are paid on an annual basis.
Migrating your site is also easy and seamless and Velcomsnetwork can assist you. There won’t even be any downtime. All databases, including followers, can be migrated, especially if you started from a WordPress platform.
There are two easy ways to upload web files to your hosting server: via FTP (which I discussed in a previous post) and via cpanel. From personal experience, FTP is still the most efficient way but there are times when FTP fails (such as when the internet servers where you are at have blocked FTP). This leaves us with one alternative … CPANEL.
Note: With both FTP and cPanel you need to be online to be able to access your hosting server.
Here are the steps to uploading web files via cpanel
Go to your File Explorer (on Windows) or Finder (on Mac) and make sure you are at the folder containing your web files.
Select the files you want to upload and compress them into a zip file.
If you are only uploading one file then there is no need to compress.
If you are uploading a folder then you need to compress the entire folder, not just its content.
Open your web browser.
Go to yourdomain/cpanel (ex. www.slvrdlphn.com/cpanel) or, alternately you can go to yourdomain:2083 (ex. www.slvrdlphn.com:2083). This may lead you to a page that will ask you if you are behind a firewall or not. In most cases you can just wait and it will bring you to the login page.
In the boxes provided input your username and password. These credentials should have been emailed to you by your hosting provider.
Click on Log In. If your credentials are correct you will see LOGIN SUCCESSFUL appear on top of the cPanel word in the screen and it will open your cPanel.
Click on File Manager.
Once File Manager is open double click on public_html. This is where ALL web files are supposed to go.
If you are opening this for the first time it will look like this:
Click on UPLOAD on the menu bar on top. Select the file you want to upload to “/home/name of server/public_html” (ex. /home/slvrdlphn/public_html).
Once the upload reaches 100% you can click on GO BACK located at the bottom and public_html will look like this:
Click ONCE on the zipped file. Note, you are just want to select the file, not open it. Once selected the file will turn blue to indicate it is selected.
Click on EXTRACT on the toolbar. In the box, make sure that the path says public_html. If you extract your files here it will place the web files in the root folder. If your web content is supposed to be in a subfolder then type that path. For example, if your project is called “hotel” and it is supposed to be in a subfolder then your path should be public_html/hotel. Click on EXTRACT FILE.
Once successful it will display the extraction results. Click on CLOSE.
All that is left is to delete the zipped file and you’re done!
Filezilla is a very useful web tool that I have found is often taken for granted. Filezilla is an FTP software used generally for uploading and downloading web files. It uses the same credentials as cPanel to login and, in my personal opinion, is easier to use and just takes a moment to set up.
When you are on a public terminal such as at an internet cafe it is always best to just use the QUICKCONNECT option. Quickconnect does not save usernames and passwords which makes it ideal in this scenario.
Fill it in as follows:
HOST: ftp.yourdomain.extension (type FTP followed by your domain)
USERNAME: type in the username provided by your hosting provider.
PASSWORD: type in the password provided by your hosting provider
Your username and password are the same as those you use to login to your hosting site’s cPanel. Now Click CONNECT.
Look at the transfer window and wait for it to say STATUS: DIRECTORY LISTING SUCCESSFUL.
Setting up Filezilla on a private computer
If you are working from your own computer it is advisable to just set it up so that you don’t have to type everything again each time you need to access your server. What do you need to do?
Click on the SITE MANAGER icon on the toolbar or go to File > Site Manager or … just press CTRL+S. This will open the Site Manager.
Once there click on NEW SITE and customize it.
In the GENERAL tab:
input your host
change logon type to normal
type in your username
type in your password.
Go to he ADVANCED tab:
In default local directory point it to the folder of your website
In the default remote directory point it to public_html
CONNECT.
Look at the transfer window and wait for it to say STATUS: DIRECTORY LISTING SUCCESSFUL.
Uploading your site or part of your site to your server
On the left you will see the window for the local site, clickthrough until you reach the folder that contains your web project.
Click on the file/s or folder/s you want to upload.
On the right go to PUBLIC_HTML … this is where you will upload your website.
When uploading for the first time simply right-click the folder of your website then click on UPLOAD SITE.
And you’re done!
Downloading your site or part of your site to your server
When downloading from your server do it in reverse.
On the remote server on your right make sure you are in PUBLIC_HTML.
On the left (the local site) make sure you are in the folder containing the folder of your website (if you want to download the entire site) or within the website folder (if you want to download parts of the site only).
And that’s it! It’s that easy! The only thing left to do is monitor the transfers window in case there are any failed transfers so you could process them again.
The favicon is, perhaps, one of the most neglected web element by most students learning how to design/develop websites. I guess the first thing we need to do is define what a favicon is. When there is no favicon all we see on the browser tab is a file icon.
What is a favicon?
In simple terms it is that tiny icon you see on the tab of your browser when you visit a website. It is the logo of your site but in a very small format. Here on my site it looks like this. See how tiny it is? But how do we make such a tiny image?
What is the file extension of a favicon?
Once upon a time the only extension to identify a graphic as a favicon was .ico. Nowadays, though, we can also use .png.
How do we make/create a favicon?
There are many online apps available that you could use to make a favicon but you don’t really need any of them so long as you have a graphic software installed in your computer such as Adobe Photoshop.
Here are my recommendations on how to make/create a favicon:
Make sure your image is a square.
Start with a large image. Even though your final output is small there is no need to design small. It is easy enough to make it small later. At the very least I would say 100×100. Personally I usually start at 144×144 or 300×300.
Keep in mind that the favicon includes the ENTIRE image, including the space you put between the icon itself and the edges. Therefore, maximize the space. To illustrate, I have placed a border around my image. In actual execution there is no border.
Once you’ve completed the design for your favicon go to FILE > EXPORT > Save for Web (legacy).
On the upper right choose PNG-24.
On the dimensions below change your height or width to either 16×16 or 25×25. Click on SAVE.
Save the file to the root folder of your website with the filename favicon.png. If you prefer to use a .ico file then you can just change the file extension from the Finder (on Mac) or File Explorer (on Windows).
It’s that simple! So simple you really shouldn’t forget to do it. 🙂 If you have any further questions on the topic feel free to leave me a message below.
In the 90s we designed websites with tables. It was chunky but as web layout tools go it worked. It helped in making sure that all the elements of the website were organized. Today tables are still in use but not as a layout tool for websites. Tables are usually used for organizing tabular data instead … which is what it was created for in the first place.
The trend now, in web design, is to create web layouts with the use of a GRID.
Grid layout
A grid supports arranging views into rows and columns. Rows and columns can be set to have proportional sizes or absolute sizes. The Grid layout should not be confused with traditional tables and is not intended to present tabular data. The grid does not have the concept of the row, column, or cell formatting. Unlike HTML tables, Grid is purely intended for laying out content. (original source: Xamarin.com)
Think of a web page as a pie and each slice of a pie is the specific content of your website. It could be an image, a video, or text content. It could be a map or even an ad. Whatever it is, at the end of the day, we assign a size to this element and we also assign a place for it on our page.
How do we create a grid?
There are two ways to create a grid … fixed measurements like pixels (px) and variable measurements like percent (%). Let’s take a look at the table below.
Col or span
Width (px)
Width (%)
Gutter (px)
Gutter (%)
Offset
Margin-left
1
30
6.25%
10
1.0416666667%
1
8.3333333%
2
140
14.5833333333%
10
1.0416666667%
2
16.6666667%
3
220
22.9166666667%
10
1.0416666667%
3
25%
4
300
31.25%
10
1.0416666667%
4
33.3333333%
5
380
39.5833333333%
10
1.0416666667%
5
41.6666667%
6
460
47.9166666667%
10
1.0416666667%
6
50%
7
540
56.25%
10
1.0416666667%
7
58.3333333%
8
620
64.5833333333%
10
1.0416666667%
8
66.6666667%
9
700
72.9166666667%
10
1.0416666667%
9
75%
10
780
81.25%
10
1.0416666667%
10
83.3333333%
11
860
89.5833333333%
10
1.0416666667%
11
91.6666667%
12
940
97.9166666667%
10
1.0416666667%
12
100%
The left part illustrates the widths, the middle part, the gutter, and the part on the right the offset or indent.
Don’t let the math scare you! After all, we’ve already done all the computations for you. 🙂 But if you are curious about how we came up with those numbers, here is how each one was computed.
What is the basis for the maximum width? Shouldn’t it just be 100%?
It starts off with the premise that we are designing for a standard resolution of 1024×768 and that we will not be utilizing the entire screen. Therefore, 100% of the container will be 960.
Why 960?
It is the biggest number closest to 1024 which is divisible by 12.
Why is the gutter 10px (or 1.0416666667% in percent)?
In my opinion, the reason is that 10px has been an industry standard for minimum measurement since the beginning, whether it is font size or margins, or padding. Another reason though had to do with the equal distribution of elements. 🙂
Why are there 2 kinds of measurements – in pixels and percent?
Widths defined in pixels (px) are what we call fixed widths. This means that no matter what size screen (or device) is used the size will remain constant. Therefore, there may be times when an element would be too big or too small for the screen.
Widths defined in percent (%) are called variable widths. This means that the width of the element will adjust to the size of the screen or device when viewed.
How wide can an element be?
Visualize your webpage in your head. Now let’s focus on just one straight horizontal line. Now divide that line into 12 parts but put some space in between each part. Do you see it yet?
12 columns in a row
In the picture above take note of the blue border. That is what we refer to as the GUTTER. It is the designated space separating each element of your website that you will use. In the table above the gutter is equivalent to 10px (1.0416666667%).
Let’s do some math
How did we come up with those numbers? Here’s how it was computed
the grid layout
col1 (or span1)
(960/12)=80-20 (this is the gutter on the left and right side)=60;
therefore, (60/960)x100=6.25%
col2 (or span2)
col1 (or span1)x2=160-20=140;
therefore, (140/960)x100=14.5833333333%
col3 (or span3)
col1 (or span1)x3=240-20=220;
therefore, (220/960)x100=22.9166666667%
col4 (or span4)
col1 (or span1)x4=320-20=300;
therefore, (300/960)x100=31.25%
col5 (or span5)
col1 (or span1)x5=400-20=380;
therefore, (380/960)x100=39.5833333333%
col6 (or span6)
col1 (or span1)x6=480-20=460;
therefore, (460/960)x100=47.9166666667%
col7 (or span7)
col1 (or span1)x7=560-20=540;
therefore, (540/960)x100=56.25%
col8 (or span8)
col1 (or span1)x8=640-20=620;
therefore, (620/960)x100=64.5833333333%
col9 (or span9)
col1 (or span1)x9=720-20=700;
therefore, (700/960)x100=72.9166666667%
col10 (or span10)
col1 (or span1)x10=800-20=780;
therefore, (780/960)x100=81.25%
col11 (or span11)
col1 (or span1)x11=880-20=860;
therefore, (860/960)x100=89.5833333333%
col12 (or span12)
960-20=940;
therefore, (940/960)x100=97.9166666667%
The same principle applies to the gutter … (10/960)x100=1.0416666667%
Oh, headache! So much math!
Keep calm. We already did the math for you, all you need to do is apply the widths to your elements as classes. 🙂 Since these measurements are most likely to be used over and over, we will use them as classes in our CSS and will be written down like this:
In the code above I applied float: left on all the classes since float: left is usually applied to elements using this selector anyway. You can always delete it from your code or use float: none selectively.
How do we use it?
Just keep in mind one thing … the total width of 1 line (in parts). Therefore, you can keep adding div classes of different sizes (widths) until you reach 12 without going over. If you do, the last element will go to the next line. For example:
Given the sample above your HTML will look something like this:
Since 1, 2, 3, and 4 are short of making up 12, they were able to stand side by side. But with the addition of 5, it already exceeded 12, therefore, the div went to the next line.
Offset layout
Many get confused by this. What is offset in web design? Simply put, let’s call it an INDENT. According to the Oxford Dictionary indent means to … “Start (a line of text) or position (a block of text, table, etc.) further from the margin than the main part of the text.”
In other words, it is like saying you push an element in from the left side to a position you designate.
So how far can we push it? Just like in the grid layout, we can also divide this into 12 equal parts. This time, though, there is no gutter to think about and the only thing we need to think about it is the value in percent, not in pixels.
Time for some math again, just to show you how it was computed.
offset1: (1/12)*100=8.3333333%
offset2: (2/12)*100=16.6666667%
offset3: (3/12)*100=25%
offset4: (4/12)*100=33.3333333%
offset5: (5/12)*100=41.6666667%
offset6: (6/12)*100=50%
offset7: (7/12)*100=58.3333333%
offset8: (8/12)*100=66.6666667%
offset9: (9/12)*100=75%
offset10: (10/12)*100=83.3333333%
offset11: (11/12)*100=91.6666667%
offset12: (12/12)*100=100%
In plain English it means … if you want to indent an element by 8.33% then apply offset1, if you want to indent an element by 16.67% you apply offset2, if you want to indent an element by 25% then apply offset3, etc.
Velcomsnetwork is offering a special web hosting package for bloggers which will allow you to pay on a monthly basis.
You must be logged in to post a comment.