Making of a website: Overview of coding and web designing essentials

It is a fact that we live at least a small part of our daily life on the Internet. Many of us also have the need to make a website for a living, to run a business, or showcase a certain portfolio. For those who are looking forward to making a website with the help of others or planning to try developing one on their own by learning web development, it is essential to know the all the vital aspects of website building. So here we are making things easier for you.

Any website that exists in today’s Web world has two major components:

Coding

Web designing

Further, we need to have a detailed understanding of different coding techniques and designing approaches.

Web development – how to?

To start with, we need to discuss how to create a basic HTML page.

To do this, you may need:

• A text editor to write HTML codes
• An adequate web browser to test HTML

There are many text editors such as Textmate, which will cost you something, but there are also great free options like Notepad++ (for Windows), Kod (for Mac) and Sublime Text for Windows or Mac.

There are a lot of other text editors too which you can use based on your comfort. When we say plain text editors, it basically describes platforms to put in the text which do not have any styling as bold or italics or varying sizes. These are simply letters, symbols and numbers we use to create HTML codes.

HTML works as a bunch of text formed in a document type, which a browser can identify and interpret as various components of a web page. On using an image the web page, it can also be referenced as a simple text on the HTML file. HTML does this by encapsulating the page’s text in different tags.

Using HTML tags

Tags are used to specify various elements on a page so that web browsers know how to render each. The entire HTML code goes inside different types of tags. All these tags start with the ‘<’ – less than symbol and end with ‘>’ greater than symbol.

In the closing tag, you need to include the symbol ‘/’ also to specify it as the closing tag.

For instance, to make the text bold, you have to use tags like <b> as an opening tag and </b> works as a closing tag and helps you make the text in between bold. The HTML tags are also being used to input a bunch of different attributes. Attributes are things like src=”” & height=”” that contain more information about the tags.

The ‘src’ attribute may specify an image file that we are trying to display as ‘image1.jpg’. As we list just the file name, the browser will naturally assume that the developer has kept the image file in the same location as an HTML document. If the need is to load the image from an external site, you can just use the full URL to the image location to display it.

The attribute ‘height=’, on the other hand, specifies the height and width of the images to be displayed on web pages. If you do not specify the height and width of the pictures but have just given a  reference to the image with ‘src’ attribute, the browser will not be able to interpret how much space to be kept for the image to be loaded. This may end up in a weird output to the users, so always specify the height and width of the image.

Structure of an HTML document

Next, you may notice that inside the opening and closing HTML tags to specify and HTML code to be rendered, there are tags like ‘Head’ and the ‘Body’. The ‘Head’ tag is designed to include information which may not be directly displayed on the web page. It is usually the page title which shows up in the window title of the web browser. This may also include some metadata and the CSS styles for the browser to understand.

Likewise, the ‘Body’ tag usually includes the information such as what to display on the page as the text, images and media. This tag renders the resultant HTML to be opened on a web browser. Header texts use the tags like H1, H2, H3, H4, H5 and H6, in which H1 may be the largest header while the H6 will remain the smallest.

Styling with CSS

Just like HTML, CSS (Cascading Style Sheets) also comes under coding and that needs to be handled by an expert developer. CSS language helps browsers to interpret how the designing elements of a web page should be presented to the user. Moreover, CSS is a pretty easy programming language to understand.

You can define specific CSS properties while doing the coding, which covers everything ranging from the dimensions of the elements such as height, the width of text, font used, style and color of text. It also includes aspects like position to margins and paddings to be used.

If you call HTML the bone or the structure of your website, then you should consider CSS as the dressing up of your site which will help to make it look nice. If you want to add a specific color to a section of text, the direct CSS property to work on is color. To define this properly, you can simply type color and the declared style after a colon and the code ending up with a semicolon to render it. For example, you can use ‘color:red;’ to make your text red.

Applying CSS styling

Inline styles: This is the quickest method for styling if you want to add one element at a time as inline styles to any of the element, i.e., <p style=”color:red;”>text to be displayed as red.</p>

Another example is, <p style=”color:red; font-family:Times New Roman; font-size:18px;”>test to be displayed as 20-pixels wide with font as Times New Roman<p>

Internal style sheets: This often comes inside the head with which one can define the styles for various elements in the web page using some selectors. The internal style sheets may look like below;

<code><style type=”text/css”>
h2 {
color:blue;
font-family:Times New Roman;
font-size:18px;
}
</style>

In this example, h3 is the selector, and all H3 elements in this particular page will show the defined style.

External style sheets: These style sheets can be of help to move CSS to external files too with a .css extension. Many times you may have to use external style sheets to meet certain needs in which the element selectors may help. If you want all h2 elements to be at 20 pixels, then you can add the following CSS code as:

<code>h2 {
font-size:20px;
}

ID selectors: In this, you have to define CSS by preceding hash ‘#’ sign. This will help keep all your styling elements at one place and will provide an easy way to adjust the styles. IDs are also very effective while using JavaScript. If there is a need for a 500×300 pixel div and to have a green background, the code will look like:

<code>#my_red_div {
width:500px;
height:300px;
background:green;
}

Designing using Photoshop

From the layout to highlighting and navigation, there are several things to do in terms of styling also, which is done by an expert designer.

Getting started with Photoshop

A new Photoshop document needs to be opened. It is ideal to keep at a bigger size like 1000px x 1200px, which we can crop later.

Putting header

Use the rectangle tool to first draw a plain box on the top in blue, say about 170px high and color it like #23b6eb. Also, draw a thin dark gray at the optimum top of the page, say #5d5a5a.

Highlight

To add a lighting effect to the header portion, create a clipping mask on the blue layer and use the soft brush, i.e. 400px wide, and then choose a lighter color than the background. Set the screen to the blending mode.

Navigation bar

Add another bar just beneath the header bar, and mark it with a different color. Add a gradient overlay to it. From the layer styles pane you can add a gradient ranging from;

#e2e3e4 to #bebdbd at about 90 degrees.

Footer

Draw another gray box at the bottom, which can be marked with a color lightly greater than the gray.

Logo

To add a logo, draw a rectangle and add an anchor point at the end of it to be dragged out to the side. Do option click on that point to get rid of rounding.

To make the text big and bold, use the following attributes.

Font: Ariel
Style: Bold
Size: 60px
Color: #e4dfdf

To add more depth, add an inner shadow with:

8e
8f

Tagline

To add a short tagline, use properties like:

Font: Time New Roman
Style: Bold
Size: 25pt
Color: #36809a

Navigation

Create a nice and easily visible navigation link and spread it out by evenly spacing in between, using attributes as:

Font: Times New Roman
Style: Bold
Size: 25pt
Color: #0e5d7a

Adding main content

You can add styles to the content under h2 and h3 by using the below styles.

h2 Header:
Font: Times New Roman
Style: Bold
Size: 38pt
Color: #676666

h3 Header:

Font: Times New Roman
Style: Bold
Size: 28pt
Color: #595858

Paragraph:

Font: Times New Roman
Style: Bold
Size: 18pt
Color: #444444

Sidebar

Draw a rectangle over the sidebar region with attributes like #d4d6d3 and a 2px stroke of #bebdbd. Fill up sidebar with content.

Button

Next, a ‘call to action’ button can be added. Draw another rectangle beneath the text with the same gradient as of the logo and a 2px stroke color as c7c7c7. The text can be styled as:

Font: Arial
Style: Bold
Size: 28pt
Color: #e0e2e2

Footer

Finally, the footer can be added with another skinny rectangle at the bottom. Fond styling can be.

Font: Arial
Style: Bold
Size: 18pt
Color: #434343

This almost makes a simple sample page design. Once you have your complete PSD, you can next chop it into pieces to use it in a customized manner. You can use the slice tool in Photoshop to do this. Once if you are ready with all the sliced up and optimised jpegs, save them to the images folder.

In fact, in the above excerpt, we were trying to give you an overview of the major aspects of web coding and design. Hope you find it useful.