Create your first web page with HTML and CSS on your own is not as difficult as most people think.
Some people want to start coding by themselves by making changes to the page. This is a great idea if you want to create custom websites on your own. However, they get so intimidated when they get started to touch those coding things. They think those coding are very daunting.
It is true that creating a web page by hard code is not that easy, but as long as you have the gut to start coding on your own and know about coding one thing or two, you will be at least confident to make some simple changes to your pages by directly coding in HTML and CSS.
To create a web page of your own, you need to learn the most standard in website design: HTML.
HTML
Web pages are written in HTML (HyperText Markup Language). It instructs browsers how to display contents of a web page based on specific instructions called tags. These tags tell browsers to create headings, signal the start and end of one paragraph and the beginning of the next, italicize a word, create line break, and display a video or picture, etc.
For example, to create a paragraph, you should write some codes like this on your favorite text editor:
<p>I am studying HTML now</p>
In this example, the tag <p> tells browsers where to start the sentence “ I am studying HTML now”, and the tag</p> instructs browsers where to end this sentence. Please note that each tag has both beginning tag and closing tag. In this case, <p> is the starting tag and </p> is the closing tag.
In the HTML, there are so many tags; I just list some of them.
<p>-Paragraph tag
<h1>-Heading tag
<a>-link tag
<body>-body tag
<div>-division or a section tag.
To create web pages on your own, you need to get familiar with this family of tags, as each web page you build along the way will be HTML document.
However, HTML document describes only the structure of your web page, it cannot style the appearance of your web page. To give your web page a hot look, you need to learn about CSS (Cascading Style Sheets).
CSS
CSS (Cascading Style Sheets) is a technique for defining how to display HTML elements on a web page. This technique allows you to dress up your web page with different color, headlines, font size, links, borders, paddings, margins, etc. You have flexible control over the layout and design of your web pages.
When you apply CSS in your web page, web browsers interpret both the page’s HTML file and its style sheet rules. Browsers then use those rules to structure the pages.
For example, after you put the sentence “I am studying HTML now” on your page, you want to change its color to red. To do this, you can add CSS codes like this:
P { color: red;}
Then the sentence will turn into red color in the web browsers.
Basic structure of a web page
Now that you have got some basic knowledge about HTML and CSS, you are ready to learn the basic structure of a HTML document.
The basic structure of a HTML document includes three parts:
- <html>
- <head>
- <body>
These three parts work together to create the basic structure of your web page. Here is their right display, the only one correct way, with doctype at the beginning of the page:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Each web page applies this basic arrangement. The ellipsis (…) indicates where you can add additional codes. To put my html codes and style rules together and create a true web page, you need to put the following codes on your page:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
P { color: red;}
</style>
</head>
<body>
<p>I am studying HTML now</p>
</body>
</html>
Now you have created a simple web page on your own. You can tweak this by changing to different color, different font size and family or different position. You can re-open this html file with a web browser like Firefox or IE and enjoy it!
Choosing your tools
If you are going to be working on your website by coding directly in HTML, you really need a fully functional editor.
However, it is better not to use high-powered HTML text editor such as Dreamweaver at the beginning of your learning. When you begin to study coding, you should use some basic text editors like Notepad or TextEdit to hard code manually. In this way, you can understand every part of your web page. Later on, when you have mastered the basics and are prepared to create more complicated web pages, you will probably want to switch to other text editors, as listed in my Resource Page.
In summery
This article only helps you catch a glimpse of the basics of a web page. The best way for learning coding is to just start something. By tweaking the coding by yourself, you can improve your skills and make changes to the page as you go.
