Introduction to web page
What is web page designing? How to start web page designing? When we visit the internet, we can see and scroll the pages which are called webpages. Every new screen you see is a new webpage. A webpage can include text, graphics, animation, video, sound. A webpage contains different information about particular. The first webpage was created by Tim Berner-Lee and put online on August 6, 1991.
“A webpage is a document commonly written in HTML (Hypertext Markup Language) that is accessible through the Internet using different web browsers.”
The collection of web pages is called a website. A website can have one webpage or thousands of pages or millions of pages depending on the website.
What is web page designing?
Types of web pages.
What is HTML?
HTML is a Hypertext Markup Language. It is a markup language which is a set of markup tags that are used to create web pages. HTML was developed by Tim Berners Lee of Switzerland in 1990.
Features of HTML
• HTML is easy and simple to use.
• HTML supports, controls, and navigates to read along with documents easily.
• HTML is supported by different text editors like notepad, notepad, subline, brackets, atom, visual basic, etc.
• HTML documents can execute in different web browsers such as Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera mini, etc.
• HTML supports different hyperlinks and image formats.
Basic Structure of HTML
The structure of HTML contains mainly two sections: <body> and <head>. The <head> contents title and other general information about the page. The <title> tag defines the title of a page in the title bar. <body> contains the matter that should be displayed on the page. Moreover, the comment is written anywhere in the HTML file and the tag <! –> is used for comments. Comments have no effects on HTML codes.
Basic Structure of HTML
<!DOCTYPE html> <html> <head> <title> Web page designing</title> </head> <body> This is my first webpage </body> </html>
What are HTML tags?
HTML tags are all the keyboards or commands used in HTML. They are surrounded bye angle brackets like <html>, <body>, <head>, <title>, etc. The tags tell the browser how to display document in the webpages. The HTML tags normally are in pairs like <h1> and </h1>.
Types of HTML Tags
Basically, there are categorized two types of tags in the HTML
a) Container tags (Paired tag)
A container tag is such a type of tag which has its related ending tag with start tag. Start tags are written within angular brackets and the end tags are written within angular brackets with a slash (/) in front. The text and other tags are written between the start tags and end tags. The starting tag activates the effect and the closing tag turns off the effect. Some examples of container tags are :<html>, <head>, <title>, <body>, <h1>, <b>,<i>, <u>, <p>, etc.
The basic structure of the paired tag is as follows:
<title> This is a webpage title</title>
[Start Tag] [Markup Text] [End Tag]
<p> This is a paragraph I am container tag </P>
[Start Tag] [Markup Text] [End Tag]
b) Empty tags (singular tag)
The tag which has no ending tags is called empty tags. They are called standalone or singular tags. Some examples of empty tags are <img>,<br>, <hr> etc.
The basic structure of a singular tag is as follows:
Here <img> is an empty tag that does not have its ending tag.
The attributes are keywords and characters used to provide additional information to describe the HTML elements. They are always included in the start tag of the element with some value after the equal sign. Some of the common attributes are color, height, width, or the location of the linked file.
The basic structure of a tag with its attribute is as follows:
<tag _name attribute1 =”value” attribute2 =”value”>
For example, the tag for setting the background color red is shown below.
<body bgcolor =”red”>
Here, the body is a tag, bgcolor is the attribute name and red is the attribute value.
Let us take another example,
<h1 align =”left”> This is biggest heading</h1>
Here, h1 is a tag with attribute align having the value “left”.
The tags with multiple attributes are given below.
<font align =”center” color =”green” size =”16”> My first page </font>
General rules for writing HTML tags and attributes
• space is not allowed in the beginning as well as in between the
tag name. For example <head>< head> both are incorrect.
• The value of the attribute may be written in the double quotes.
• The tags are not case sensitive, for example <head> and <HEAD>
gives the same meaning.
• The tags are surrounded by angle brackets like <html>
• The attribute values may be case-sensitive.
• The commas are not allowed between the attributes
HTML Basic Tags
<!DOCTYPE html>: The <!DOCTYPE> represents the document type and helps web browsers to display web pages correctly. It must only write once, at the top of the page (before any HTML tags).
<html>: This is the very first tag that informs the browser that the document is related to HTML. It marks the starting and end of the HTML document. All the other tags are contents of the webpage are contained within this tag.
<head>: This tag shows the starting of the head section and </head> shows the ending of the head. This tag is specially used to put some information about the HTML document.
<title> This is title of webpage</title>
<title>: This tag is used inside the head tag to keep the title of the document on the browser’s window.
How to make webpage
<body>: The<body> tag is used to include all the entire contents of HTML with in it.
HTML content goes here
Creating an HTML document or Web Page
We can create the HTML documents either by using plain text editors software like Notepad, Notepad++, subline, brackets, atom, visual studio or by using web designing software like Microsoft FrontPage or Macromedia Dreamweaver. The HTML file format has .html or the file extension. Here we will learn to create an HTML document using Notepad.
The steps to create an HTML document using a document using text editor Notepad are as follows.
Step 1: Open the Notepad.
(Click on the Start screen then, scroll left to get all installed applications to find Notepad click on the Notepad icon.)
Step 2: Type the HTML code using any text editor like Notepad.
Step 3: Save the document with the extension .html or htm.
View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).
The result will look much like this: