You are familiar with the web page in the previous chapter. HTML is used to develop the web page. Web pages created by HTML are static web pages. Static web pages contain text, hyperlinks, and images. So in this post, we will discuss the following:
|Computer Applications – HTML Basics|
What is HTML?
- H: H stands for Hyper, which means something which is active.
- T: T stands for Text, command written with the help of alphabets, known as tags
- M: M for markup, helps to render a portion enclosed in a specific tag
- L: L for language, simple English language to identify the codes
- HTML is needed to develop a web page or website.
- If you are looking for a career in web designing or web development in the future, HTML is the first step.
- To understands search engine and landing information.
- It helps to understand the scripting language, which is very important for web designers or web developers.
- It helps to create design templates and themes for different websites.
So now let’s talk about what are the requirements of HTML?
Requirements of HTML
For learning requirement you need to understand the following:
- The structure of a page or document with its elements header, footer, document body, titles, margins, etc.
- Formatting commands like fonts, bold, italics, underline, and so on.
For writing code and display results you need to understand the following:
- Text editor: A software that is used to write the code. For example, Notepad, vim editor, notepad++, etc.
- Web browser: A web browser is a program that is used to display the web page. It works as a platform for HTML that compiles your code and displays the output. For example google chrome, Mozilla Firefox, internet explorer, etc.
So for HTML, we will use notepad as a text editor and any chrome browser for the result display.
Writing HTML code
- Text editor
- Folder window where you save your files
Remembers these short cut keys for quick navigation and helpful during writing HTML and viewing results.
- Alt + Tab ↣ Navigate in different windows
- Ctrl + S ↣ Save the file
- F12 ↣ Save as
- F5: Refresh the browser
So now to write HTML code you need to understand the structure of the HTML page.
Structure of HTML page
- Head: Contains the information related to your page heading which is mostly not visible to users but useful for search web browser and WWW
- Body: Contains the information or original contents to be displayed on your web page
An HTML page structure has few tags. These tags must be written for each and every page.
Basic tags of HTML structure
- Container: A tag that contains starting as well as ending tag is known as a container tag.
- Empty: A tag doesn’t have an ending tag with / mark is known as an empty tag.
- HTML: Every page starts with <HTML> and ends with </HTML>. The entire HTML code must be written in between these two tags.
- HEAD: It specifies the head or header of the page. Most part of this tag is not directly visible to the user. It plays an important role in a web page. It helps to divide the page, write different scripts, writing styles, and link different external documents for the HTML web page.
- TITLE: It displays a page title on title bar the web browser and very important for the search engines to display information on WWW.
- BODY: It is the main area of the page. Whatever you want to display on the page, you must write in this section.
Now be ready for your first HTML page is here with a single line output:
<HTML> <HEAD> <TITLE> My First web page. </TITLE> </HEAD> <body> Welcome to HTML. </body> </HTML>
- When you write a starting tag, immediately press enter and write ending tag as well if your tag is a container tag. Then write the required tags or code in between.
- HTML is case insensitive language. It means that whether you write a tag in capital letters or small letters everything is accepted without error. You can check in my code, as I wrote a few HTML tags in the capital, few in small letters.
- Whatever content you want in a specific block or under the tag that must be written in a proper sequence. Means if you write anything after </html> or </body> it has no meaning.
Type above code in notepad, don’t try to do copy paste as you are learning. Type the code. If possible try to give indentation for tags to write as blocks like this:
<html> <head> <title>Your Tile </title>> </head> <body>Your page contents </body> </html>
Saving HTML file
- Click on File ➡️Save option. A save dialog box appears.
Save file as html
- Don’t forget to write .html at the end of file.
- Then click on the Save button.
Rendering your HTML File
- Select the file.
- Right-click on that
- Select open with option
- Choose notepad
Or open notepad and use open command. Select all files in all files option available next to the filename in the file open dialog box.