Web Development And Design #1: Lets talk about HTML, Shall We?
You probably have used a text-editing software before. Let’s assume you haven’t.
Now think of a newspaper or a magazine. Every article is divided into headings, subheadings and content. The content is, often times, further divided into paragraphs.
That is structure. A hierarchy of information.
HTML describes the structure of web pages. It is an acronym that stands for hypertext markup language. Dont let the grammar deter you. Remember? We have a goal here - to transform you into a web developer. Lets continue.
Html is a very simple language and very easy to learn. The terms and grammar are just, well, formalities. I am trying to give you a general idea of the core concepts before we venture into the real business - the fun part.
Now lets break down the acronym a little bit further.
Hypertext. When you visit the url “https//facebook.com”. You will be taken to the Facebook’s landing page. Now, just a quick glance at the page and you will find a login button. On clicking that button, it takes you to another page where you get to enter your login credentials. That, my friend, is a simple demonstration of the hyperlinking capability of html. Is that too much to gulp down? Just hold on.
Web pages are full of hyperlinks. They are the reason you can comfortably navigate from one page to another. From the word 'hyper', you can easily guess that a hyperlink is nonlinear. That is, clicking a link on the twitter web app can take you to another web app, say a blogging site. You can go from any web page to any other web page on the world wide web.
Hat's off, hyperlinks.
Markup. HTML is made up of elements. An element begins with an opening tag(<>) and ends with a closing tag(</>). Within the tags, you have your text which, with the help of HTML, we markup. For example, lets take a simple text like, 'I love html’. Wrapping the word 'love' with <i> and </i> in this way - '<i>love </i>’, will automatically italicise it.
We just marked 'love' as an italicised type of text.
Language. This is self-explanatory. It is a computer language because it has code words and syntax like any other language.
Elements.
Above, I briefly talked about elements. Lets dive deeper. As stated earlier, HTML code is made up of texts that sit within tags — these are referred to as HTML elements. A tag is a character sitting within angled brackets. The characters in the brackets indicate whether it is a paragraph, a link etc.
Elements are made up of two tags: an opening tag and a closing tag. The opening tag and closing tag are slightly different in that the closing tag has an extra forward slash in it.
HTML uses elements to describe the structure of pages.
Attributes.
An attribute is made up of two parts: a name and a value, seperated by an equals sign.
The attribute name tells us what extra information you are supplying about the element’s content. Its written in lower case. The value is, as the name suggests, the information about the attribute. Its placed in single or double quotes. In the above diagram, the attribute “lang” is used to indicate the language used in the element.
Body, Head And Title.
Body, Head and Title are the most common elements in HTML. They are found in almost every web page. Everything inside the <body> tag will be shown inside the main browser. Just before the <body> tag is the <head> tag. The <head> tag contains information about the page. The < title> tag sits within the <head> tag. It houses the title of a web page. Anything written in the <title> tags will appear in the title bar.
Let’s look at the sample HTML code below. It is a very simple web page.
Every web page is expected to start with an opening html tag and end with a closing html tag. Every other HTML code is expected to sit within the HTML tag. We, then, have the body which, in turn, has the title in it. The body comes after the head. It houses the various elements that structure the main content.
Lets Create Our First Web Page.
We are going to create a web page. We will run this web page in a browser. What do we need for this? Notepad. To start the notepad application, go to Start->All Programs(or Programs)->Accessories->Notepad. Within some few seconds, you should have the notepad window open on your screen.
If you dont use windows, you can use any other text-editing software supported by your preferred operating system.
Now copy and paste the above code. Click the File Menu. From the drop down, click Save As. Save the file as hello-world.html making sure that save as option has All Files selected.
Start your preferred browser. Go to the File Menu and select Open. Navigate to where you saved hello-world.html and select it. Now click on the open button.
What you see should look something like this.
Congratulations. You just built your first web page.
