How to create a website: Part 3

website

After buying the domain name(your website name) and hosting space we can start the coding of the website. All websites are based on HTML, the web programming. Everyone starts web coding by learning HTML.

If you don’t have any programming experience and want to create a website without any coding , use Website builders. One of the best website builders is Xara Web Designer. It comes with many templates to choose from. Also we can create our on templates from scratch.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML is used to build static websites, not blogs. We will discuss about blogs in other articles.

Check 5 Best books for learning HTML

Use Notepad or Sublime Text editor to write HTML. Save the files with .html extension. I use Sublime Text editor because it is user friendly and has many features. It is free to download. Look at an HTML example:

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title> <!-- Title of web page -->
</head>
<body>

<h1>My First Web page</h1> <!-- Heading -->
<p>Hello world. This is my first webpage</p> <!-- Paragraph -->

</body>
</html>

Copy this code into a text editor and save it as hello.html and open it with any browser to see the results. Creating a folder like mywebsite and placing all HTML and CSS files in it will be useful in the later stage when there are many web pages.

After learning some HTML we can learn some CSS. It is the second technology we should start learning after HTML.

What is CSS?

Cascading Style Sheet (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts. With CSS we can save the time used for styling our website. For example, we can can give same font, size or color to all paragraphs in all web pages in our website.

Check Best 5 Best books for learning CSS

We put CSS code in the head section (<head></head>) of HTML or create a new file like style.css and put all CSS in it.  Both methods will have same results.

Consider the example of writing css in head section.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title> <!-- Title of web page -->

<style>
	p{ 
	font-family: Arial;
	font-size: 14px;
	text-align: justify;
	color: black;
	} /*Style for all paragraphs*/
</style>

</head>
<body>

<h1>My First Web page</h1> <!-- Heading -->
<p>Hello world. This is my first webpage</p> <!-- Paragraph -->

</body>
</html>

Consider the example of writing CSS in a seperate file named style.css and linking the file to web page.

	p{ 
	font-family: Arial;
	font-size: 14px;
	text-align: justify;
	color: black;
	} /*Style for all paragraphs*/

Now we need to specify where the CSS file style.css is located in the head section. Writing CSS in a seperate file will be useful when there are many web pages.

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title> <!-- Title of web page -->

<link rel="stylesheet" href="style.css"> <!-- link to style.css file-->

</head>
<body>

<h1>My First Web page</h1> <!-- Heading -->
<p>Hello world. This is my first webpage</p> <!-- Paragraph -->

</body>
</html>

With some basic knowledge and some reference from books and internet we can build our own web pages.