How Web designing using HTML?
- 570
In 1980, a markup language was developed to create documents that could be displayed consistently on computers of different hardware and operating system. It was called the Standard Generalized Markup Language or SGML on web.
HTML stands for HyperText Markup Language. It is a formatting language used to develop web pages. Web pages can be viewed in a web browser.
HTML is not a programming language. It is used to define text, graphics, audio, and video on web pages. It uses tags or markup to specify how the contents of the web page will be displayed. HTML code can be written in any text editor like Notepad.HTML or HyperText Markup language has evolved from the SGML. HTML comprises of:
Requirements to Use HTML
The following are required to design-web pages using HTML:
- Editor: An editor like Notepad is required to write HTML.
- Browser: A browser like Internet Explorer is required to view the web paged.
Note:
All examples in this introduction can be implemented by using Notepad and Internet Explorer. The web page is stored with ".htm" or ".html" extension.
Structure of HTML Document
The basic structure of an HTML document is as follows:
Heading Section
Actual text
In every HTML document,
tags indicate the beginning and end of the document. These tags inform the browser that the document is an HTML file. All other HTML tags must be written within these tags.
The HTML document can be divided into two sections:
- Header Section
- Body Section
Header Section
and tags identify the heading or title of the document. The tag ....... can appear only in this section. The text between the title tags appears as the title in the browser’s window. Its length should not be more than 60 characters.
Body Section
The body of an HTML document contains the text that is displayed on a web page. The body section is enclosed within
and tags. It gives a description of the document layout and structure.
Practice
1. Click the Start button and select the Run option. The dialog box will open.
2. Type "Notepad" in Open textbox and click OK. Notepad will open.
3. Type the following code in Notepad.
4. Save the file with "First.html" on the hard disk.
5. Double click the file. The web page will appear in the browser as follows:
Headings
Headings are very important tags in the BODY of HTML document. It is used to display different types of headings. The opening tag for a heading is
and the closing tag is where n is the size of the heading. Its value is from 1 to 6. 1 is the largest and 6 is the smallest heading size.
Example
My 1st Heading.
My 2nd Heading.
My 3rd Heading.
'
My 4th Heading.
My 5th Heading.
My 6th Heading.
Horizontal Line
Horizontal Lines are used to separating different areas of a web page. The tag for a horizontal line is
. This tag has no closing tag. You may also add certain attributes to the
tag. WIDTH=n is used to specify width with a number of pixels. WIDTH=n% is used to specify a certain percentage of the screen wide. NO SHADE is used to turn the line‘s shading off.
tag with no attributes will make the line the full width of the screen.
Example
You may also use several attributes within one tag...
Practice
My Title
Page Body
My Heading No. 3
Paragraphs
The opening tag for a paragraph is
and the closing tag is
. The closing tag for a paragraph 15 compulsory. But it is a good practice to use it.
Example
Patience is a great trait of one's personality but unfortunately, it is not common in common people. Most of them get impatient very soon.
Text Formatting
Some common text formatting tags are and for bold, and for italics and for underlined. The and tags also used to format.
Example
Hello, world….
Hello
world
of
HTML
Align Attributes
ALIGN attributes are used to align from the left margin, center, or right margin. The ALIGN attribute is placed in the opening tag before the>.
Left Align
A
left Align
Center Align
Center Align
Right Align
Right Align
Line Break
In the HTML document, the text moves to the next line automatically when the first line ends.
tag is used to move to the next lines before the first line ends. It has a losing tag.
Example
The following text will be displayed in a single line.
Sentence One.
Sentence Two.
Sentence Three
The following text will appear in three different lines.
Sentence One.
Sentence Two.
Sentence Three.
Preformatted Text
This option is used to display the text as the user has typed. The text is placed between
and
tags
Example
The following text will appear in a single line. HTML ignores extra line breaks so the text appears in a single line.
Say this city has ten million souls. Can you believe it? Nobody can believe it.
The following text will appear in the browser as it appears below:
Say this city has ten million souls. Can you believe it? Nobody can believe it.
Practice
My Title
Body goes here
Heading No. 3
Bold text is gin!
Underline is also funny
Anchored Links
. The anchored links are used to connect two locations. The tag used for this purpose is and. The contents of these two bags become underlined and colored. If the user clicks it, the browser moves to the location within the quotes.
Example
Visit IT Series
Links are also used to send an email by using mailto:user@host in place of the location.
In-line Images
You may also add images to a web page. The images in .gif or .jpg or .jpeg file formats are usually used because of their small size. The basic tag for in-line images is.
It is also recommended to add HEIGHT and WIDTH attributes to the IMG tag. It is also recommended to use the ALT=" any text. This text appears in place of the picture when the picture is still loading or they are not viewing images. The IMG tag has no closing tag.
Example
Combining Links and Images
Images can also be used as links to other locations on the Internet. This can be done by placing IMG tag within A HREF tags. You may also use the ALIGN tags with images!
Example
Practice
Title goes here
Body goes here
Headings
Simple link: Visit IT Series
Image Link.
