Tuesday, 28 October 2014
How to make a website using HTML
Making a website by directly coding HTML has become increasingly optional as time has moved on. Many people (including most big Web design firms) now use Content Management Systems (CMS) such as WordPress or Joomla. These handle most of the coding in the background, although it’s still possible to access it to make minor tweaks and adjustments. Even older Web development tools, such as DreamWeaver, do a reasonable job of creating HTML code from a WYSIWYG (What You See Is What You Get) interface.
Even so, a basic knowledge of HTML is useful if you are going to make any kind of website. It gives you an understanding of what’s going on “behind the scenes.”
What is HTML?
HTML stands for Hypertext Markup Language. It is a markup language for the Web that forms the building blocks of every Web page.
To understand what HTML does, you should think of webpages as files – HTML files interpreted by the browser. When you design your website using HTML (without additional more advanced Web programming in the form of PHP, ASP.NET, and the like) all your pages will be static in nature. That means they have no means of displaying dynamic content, and each must be created manually.
It is therefore easy to create a website using just HTML, as long as you do not have a large number of pages, or the need to update them regularly.
Getting started with HTML is pretty easy, as all you need to do is understand all the tags and rules used in the language.
A Basic HTML webpage
Let’s look at an example of a HTML file which will be displayed on our browser as a Web page. For a quick demo, you can copy and paste the following code into Notepad (on Windows) and save the file as demo.html. You will then be able to open this file as a web page using your web browser.
<html>
<head>
<title> Title for this web page </title>
</head>
<body>
<head>
<title> Title for this web page </title>
</head>
<body>
<h1> Heading 1, large header </h1>
<p>Hello <em> world! </em><p>
<p>Hello <em> world! </em><p>
<p> <a href =http://www.example.com/> An example link </a> </p>
<hr />
<img src=”myimage.jpg” alt=”some text” width=400 height=200 />
<br />
<p> This is how I’ll add another paragraph. <p>
</body>
</html>
<br />
<p> This is how I’ll add another paragraph. <p>
</body>
</html>
The Web page actually begins with the <html> tag. You are starting a new html file with this tag – if it’s missing, the browser won’t recognize the file as a HTML file. You must signal the end of the Web page at the bottom by closing with a </html> tag. Everything contained within these two tags forms the Web page content. As you’ll later find out, most HTML tags have an opening and closing tag.
A web page has two major sections: the head and the body. The head is declared using the tag <head> and duly closed with </head>. The title of the page is defined within this section using the <title> tag.
The other section, the body, contains the bulk of the web page elements. It is within this section of a webpage that things such as text paragraphs, sub headings, images, tables, page divisions etc. are added.
Example Tags
<h1> <h1> – Heading 1, the largest header text. Smaller header text can be defined with h2, h3 etc. down to h6, with h6 being the smallest.
<img /> – The image tag, no closing tag is applied here as all the attributes of the image are declared within the tag.
<p> </p> – Starting and closing a paragraph – any elements that need to start on a new line on the page can be included within these tags, including text blocks, images and links.
<a></a> – Adding a link. The text being linked (anchor text) is used before the closing </a> tag, while the attributes of the link, such as the web address and target are declared in the opening <a> tag.
In the screenshot below, you can see what is displayed in the browser when you load the code above. Note that the image only shows as a placeholder, as you would need to have a suitably named image on the Web server to display it.
Learning HTML
The above tags are by no means all there is to HTML. A great online resource where you can learn about all the HTML tags is one the HTMLdog website. You’ll not only find a comprehensive reference guide to all the HTML tags, but a hands-on guide on how to use them for your Web pages.
What About CSS and JavaScript?
Pages made of pure HTML are plain and static. They contain content but lack styling – as you’ve can probably see from the uninspiring screenshot above!
CSS (Cascading Style Sheets) is the language used to style Web page elements and define their layout on a Web page. JavaScript is used to add to some life to these elements – for instance a pop-up box explaining some text on the page.
With CSS, you can define, with precision, the colour of your text elements, size, position, etc. You can, for example, decide that you want all of your images to be contained in a rounded grey frame with a simple style declaration, for example:
border: 1px solid #d0d0d0; border-radius: 2px;
With JavaScript, you can add cool effects such as image slideshows, a countdown clock, moving text etc.
However, you can now do all of this and more using CMS platforms, as discussed earlier in this article. By all means learn the basics of HTML, as they will help you, but you may find advanced functionality is now best left to these well-developed systems – unless you are a serious enthusiast!
A Final Word
HTML is not “out of date.” As we said at the beginning, it still underpins every website you ever visit.
However, new tools and systems have overtaken the need to learn it in detail. If you are new to Web design, we would first recommend getting familiar with a Content Management System, and we would recommend WordPress as it is the most approachable.
Meanwhile, learning the basics of HTML in the background will give you a deeper understanding of how things fit together. Yes, you can still open Notepad and begin to program a website from scratch – but the question to ask yourself is if you truly need to?
image source: pubpages.unh.edu
Source: http://goo.gl/TIW85s
Subscribe to:
Post Comments (Atom)
.jpg)
No comments:
Post a Comment