It is a fact that every one of us lives at least a small part of our daily life on the internet. Many among us also have the need to make a website for a living, to run a business, or as a portfolio site. 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 two major aspects of website building:
- Coding
- Web designing
Further we will have a detailed understanding of the coding techniques and designing approaches.
Web development Adelaide – how to?
To start with, we will discuss about 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 etc. 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 text which don’t have any styling as bold or italics or varying sizes etc. These are simply letters, symbols, and numbers we use to create HTML codes.
HTML is basically 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. Similarly to make the text bold, you have to use tags like <b> as opening tag and </b> as closing tag to make the text in between bold. The tags are also used to input a bunch of different attributes. Attributes are things like src=”” & height=”” etc., which contain more information about the tags.
The ‘src’ attribute may specify an image file we are trying to display as ‘image1.jpg’. As we list just the file name, 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 like ‘height=’ specifies the height and width of the images to be displayed on web pages. If you don’t specify the height and width of the images, but just give reference of 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. ‘HEAD’ tag will include information which may not be directly displayed on the web page. It is usually the page title which shows up at the window title of the web browser, this may also include some metadata and the CSS styles for the browser to understand.
BODY tag usually includes the information such as what to display on the page as the text, images, and media. This 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 and the H6 will remain the smallest.
Styling with CSS
CSS means Cascading Style Sheets, which also comes under coding, which needs to be handled by an expert developer. CSS language will help browsers to interpret how the designing elements of a web page should be presented to the user. CSS is a pretty easy programming language to understand. You can define specific CSS properties while doing the coding, which will cover everything ranging from the dimensions of the elements such as height, width of text, font used, style, color of text etc. It also covers aspects like position to margins and paddings to be used.
If you call HTML the bone or the structure of your website, then you can call 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. eg: ‘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 can be of help to move CSS to external files too with .css extension. Many times you may have to use external style sheets to meet situations 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 a lot of things to do in terms of styling also, which is done by an expert designer.
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 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 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 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, use attributes as;
Font: Times New Roman
Style: Bold
Size: 25pt
Color: #0e5d7a
- Adding main content
You can add styles to the content under h2, h3 etc. by using the below styles as;
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, 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 optimized 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. In depth discussion about the coding practices and various design attributes will be done in the forthcoming articles of this series.
Guest post courtesy of Barrack Diego