Introduction to HTML -Part 1

Introduction to HTML Part 1

Hypertext Markup Language is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. And today we will be talking about Introduction to HTML.

  • Hyper-Text Markup Language: the foundation of the World-Wide Web
  • Design goals:
    • Platform independence: pages can be viewed using a variety of different computers and
    • Universality: servers can store information in their own data formats, but convert it to HTML for access by
    • Convenient linking from one page to another (hypertext).
    • HTML conveys the structure of the document, not it’s precise
  • An HTML document is all plain text (no binary formatting codes). The contents can be divided into two categories:
    • Content: material which the user sees when visiting the page
    • Meta-information: information about the document: its structure, formatting,
  • Meta-information is distinguished from content by using tags. A tag is a tag-name enclosed in angle Tags usually come in pairs: an opening tag and a closing tag, which is the same tag-name preceded by a slash.
  • <tag-name> Content affected by tag </tag-name>

Tags for Document Structure

  • Some tags specify the overall structure of the document

<html> </html> encloses the entire document

<head> </head> encloses the head portion of the document. Everything in the head portion is meta-information, not content.

<body> </body> encloses the body portion of the document. The body portion contains the document’s content.

Also Read: Introduction to Web Design and Development


  • We come across all kinds of documents every day of our Newspapers, insurance forms, shop catalogs… the list goes on.
  • Many web pages act like electronic versions of these, For example, newspapers show the same stories in print as they do on websites; you can apply for insurance over the web, and stores have online catalogs and e-commerce facilities.
  • the structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document
  • In order to learn how to write web pages, it is very important to understand how to structure documents

html structure

HTML Uses Elements to Describe the Structure of Pages

Creating a Web Page on a PC

  • To create your first web page on a PC, startup
  • You can find this by going to:
  • Start All Programs (or Programs) Accessories Notepad
  • You might also like to download a free editor called Notepad++ or you can use Sublime Text.

Tags for Document Body

 Heading tags

<h1>Main heading</h1> – Formats the enclosed text as a prominent large, bold heading.

<h2>Sub-heading</h2> – Formats the enclosed text as a large, bold heading but not as prominent as for <h1>.

<h3>Sub-sub heading</h3> – Formats the enclosed text as an even less prominent heading. (levels 4 and 5 of decreasing prominence)

<h6>Minor heading</h6> – Formats the enclosed text as a minor heading, only slightly more prominent than ordinary text.

Tags for Style

 Explicit style tags

<b>Boldfaced text</b>

<i>Italicized text</i>

<u>Underlined text</u>

<tt>Typewriter-font text</tt>

 Logical style tags

<strong>Prominent text</strong> – usually bold

<em>Emphasized text</em> – usually italics

<cite>Cited text</cite> – usually italicized

<code>Computer code</code> – usually in typewriter font

  • The <font>
    • In the early days of web design, this tag was introduced to allow the web programmer to control the font family, typeface, color,
    • This tag is now Style sheets provide much better control over style and compatibility. However, many web pages still use this tag for simple effects such as text size and color.


<font size=”+1″ color=”red”>Large, red text</font>

Special characters

  • Some characters such as angle brackets are reserved for special meanings in Others are not available on many keyboards. These characters can be put into content using codes between ampersand and semicolon:

&lt; – the less-than symbol < (left angle bracket)

&gt; – the greater-than symbol > (right angle bracket)

&amp; – the ampersand sign &

&copy;  – the copyright symbol ©

  • Many more are Note that unlike tags, these codes are case-sensitive.

Organizational Tags

 Paragraphs and Layout

<p> – start of a new paragraph. The closing </p> tag is optional but

recommended, especially if the tag contains attributes.

<br> – line break. Use this where the extra line spacing of a paragraph tag is not desirable, as in an address. Never takes a closing tag.

<center>Centered text</center> – changes the justification of the enclosed text (normally left-justified) to centered.

<blockquote>Quoted text</blockquote> – for large blocks of quoted material.

<pre>Preformatted text</pre> – use this to present a block of text exactly as typed in the document, for instance, to show an interactive session with a computer.

  • To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the

 <hr />

  • If you use an abbreviation or an acronym, then the element can be A title attribute on the opening tag is used to specify the full term.
  • In HTML 4 there was a separate element for To spell out the full form of the acronym, the title attribute was used (as with the element above).
  • HTML5 just uses the element for both abbreviations and

Changes to Contents

  • The element has quite a specific use: to contain contact details for the author of the It can contain a physical address, but it does not have to.
  • For example, it may also contain a phone number or email
  • Browsers often display the content of the element in
  • <address></address>
  • The element can be used to show content that has been inserted into a document, while the element can show text that has been deleted from

<p>It was the <del>worst</del>but <ins>New</ins>Idea…..</p>