Welcome to the HTML tutorial. In this series of posts we’ll discuss about the Webpage Designing with HTML as prescribed in Computer Operator Syllabus of Public Service Commission.
In this HTML Tutorial series we’ll start with very basic concepts (for complete novice) and gradually try to cover everything required for Computer Operator Examination.
Okay! Let’s start!
HTML Tutorial – Getting Started
First of all let me think a bit about the term HTML.
HTML is the abbreviation term and its acronym is Hyper Text Markup Language.
Why Hyper? Well, this term is just to give you indication that it’s not linear or sequential.
Text? Okay, it is well understood. But here, hyper text (often written as hypertext these days) is the text displayed where you can click and jump to some other page to which it linked to.
And, Markup? Hmm… markup, to mean tagging the contents. It has labels to define what the text is about. We’ll see lots of tags soon!
Finally, Language? Obvious! A language is combination of vocabulary (words) and a well defined rule to use those vocabulary so that it delivers some meaning, isn’t it? In case of computer languages, they are the collection of commands (words) and syntax (rules) that can be used to instruct computer to do a certain task.
Okay, lots about dissecting. Let’s combine them and get some meaning.
HTML is a markup language (compare with scripting language and programming language) that is used to create web pages. It has mechanism to link pages using hyperlinks so that a web of html pages is created. You’ve heard the world wide web, don’t you?
How do HTML files look like?
Curious?
Well, html files are simply the plain text files which contain nothing more than ASCII characters (plain text). So, you can open up these files using text editors like Notepad.
What application is required to create & edit HTML pages?
As stated earlier, any text editors can easily open html files and you can edit them. Thus, to begin with, simply use Notepad to create or edit html pages.
However, there are some html editor applications. The additional benefits of using such editors is that you get syntax highlighter and automatic code formatting. We’ll talk about the HTML Editor applications or Website Design packages later. But for now, I wish to show you how syntax highlighter can be helpful. Refer the image below:
How to create HTML pages?
Creating HTML pages can be the most easiest task to the most complicated one. Let me start with the most simple instance and proceed gradually up the complexity that the candidates of Computer Operator need.
To create your first HTML Page,
- Open up your text editor (notepad)
Why not MS Word or any other editors? Well, when saving the file, those applications save much more information than you really type in. As you know, MS Word saves lots of formatting codes and settings and hidden characters along with the text you typed in the same file. On the contrary, notepad (or similar text editors) simply save your text and that is what we need for a HTML document. - In the notepad opened type following text:
This is my first html page - Save the file (Press Ctrl+S) and give it a name – firstpage.html
Note: HTML files can have .htm extension or .html extension.
Done? Did you save the file? Where did you save it? I mean, in which folder? Check the file name and extension, is it firstpage.html? Or is it firstpage.html.txt? Does the file got the icon of your browser or it is having icon of text file? If it has text file icon then the file is saved as firstpage.html.txt. Ahh! txt is the text file not HTML file, right? If it is so, rename the file.
What should you do to avoid renaming every time to remove .txt extension? Well, while saving choose ‘All Files (*.*)’ in Save As Type box. This will tell notepad not to add .txt extension automatically. - Double click the icon of firstpage.html file. It opens the browser and displays the text in it. Did it? Great! You created your first HTML file!
Wondered to see why HTML file is not different than text files? All the difference you saw till now is on file extension only, isn’t it?
Don’t get so excited. HTML files contain lot of tags and attributes – often tags and attributes are much more than the real text we need to display on browser. But relax for now. We’ll gradually learn each tags, it’s attributes and practice with examples.
Points to Remember
- HTML files are text files containing plain text. However, they store the tags, attributes and the content to display in browser.
- HTML documents are created using text editors or web page designing applications but they are viewed in web browsers.
- HTML pages are stored in internet server so that anybody connected with internet in the world can download them and view.
- Web browsers are the client applications that send request for web pages to the internet servers. They download the HTML page from server and render display it to the user.
- Web servers are internet servers that accept the web request from web browsers, look in it’s database for the requested page and send the HTML pages to the requesting browsers.
- HTML files must have the extension ‘.html’ or ‘.htm’
- Some text editors, such as Notepad, automatically save file as ‘.txt’. Check if you named HTML file with .txt extension.
- HTML file must be saved as plain text. Some editors will start new files as “Rich text”, containing lots of formatting extras, by default.
- To start with a Notepad is enough, but there are website designing applications such as Adobe Dreamweaver, Microsoft Frontpage and so on.
MCQ Questions from this chapter
Click the link above for the new HTML MCQ Questions for 2016 Exam. These question set is available exclusively in MCQ Sets & ICT Trends.
Dhrubo Nag says
this side is very helpful for every student
Kashi Nagappa says
very good and simple to understand.