Introduction to HTML

Introduction

This article is mainly intended for beginners. In which I will explain what actually HTML and HTML5 is. I will explain how you can create your own HTML website using HTML.
 
In this article, Part 1 of the HTML for Beginners series, we will cover the following topics:
  • How people interact with the web
  • How the web works
  • Introduction to HTML
  • What HTML attributes and values are
  • Head, Title and Body tags in HTML
  • HTML Headings 
  • Paragraphs
  • Bold, Italic, Underline, Strong and Mark
  • Super-Script and Sub-Script
  • Line Breaks and Horizontal Rule
  • Quotations 
  • Abbreviations and Acronyms 
  • Citations and Definitions 
  • Address
  • Insert, Strike and Delete

How Everyone Accesses The Web

Before explaining HTML it is very important to understand how people interact with the web and clarify some terminologies.
  1. Web Browser: A web browser is just software people use to access websites. Some of the most popular web browsers are Google Chrome, Firefox, Internet Explorer, Safari and Opera. To view a webpage a user might type a web address or an IP address into their browser, he can access using links or using bookmarks.

  2. Web Server: When you type a web address into your web browser, the request is sent across the internet to a special computer known as a web server that hosts the website. Some of the big companies have their own web server. But we commonly use the service of a web hosting company that charges a fee to host your site on their server. Some of the most common web hosting companies are GoDaddy, HostGator, DreamHost, Blue Host, NearlyFreeSpeech.NET, 1&1 and A Small Orange.

  3. Devices: Devices are nothing but a system in which many web browsers and other software exist for accessing the internet. It includes desktop computers, laptops, tablets and mobile phones.
How The Web Works

When you visit a website, the website could be hosted anywhere in this world and every web server has an IP address so by using that you can visit a site, but we cannot remember the IP addresses of all the websites so to find the location of the webserver. Your browser will first connect to a Domain Name System (DNS). 
 
Introduction to HTML

Hyper Text Markup Language (HTML) is a markup language that describes web documents. HTML describes the structure of the web pages.
 
To understand the structure of the webpages let's use an example and don't yet worry about what the code means. I will explain all the code below.
 


In HTML the code (the colorful text) in angle brackets are called HTML elements. Elements are usually made up of two tags, an opening tag and a closing tag. In the closing tag an extra forward slash is available. An element is a part of a webpage or document. An element can contain text or images or links. Each element has special meaning for the browser. Mainly HTML pages use elements to describe the structure of the page.  
 
Structure of an HTML Page

To explain the structure of an HTML document I am taking the preceding example. And in the preceding code there are various elements and every element has opening and closing tags. Look at the following diagram that will explain everything about the structure:
 
 
HTML Tags / Elements

HTML tags or elements are keywords or reserved words that are surrounded by angle brackets. HTML tags normally come in pairs of opening and closing tags.
 
 
 
HTML Attribute

Attributes describe more about an element. They provide something additional about the contents of an element. HTML attributes always appear with an opening tag and consist of a name and value. In the attribute the name and value are separated by an equals sign.
 
 
  
Every HTML page has only two tags inside the HTML tag, Head and Body.
 
Head and Title tag
  • Head: The HTML Head Element (<head>) provides general information (metadata) about the document, including its title and links to or definitions of scripts and style sheets.
  • Title: The HTML <title> tag (HTML Title Element) defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted. You can see the HTML title in either the top of the browser or on the tab for that page (if your browser uses tabs to view multiple pages at the same time). One of the important things to remember is that the title always comes in the Head section.
Example

    

Output

     
 
Body Tag

Inside the <body> tag is anything that you write that will be shown in the main browser window. In other words a <body> tag represents the contents of a HTML document. One thing to remember is that there is always only one <body> tag in a document.

Example

 
The output of the preceding code is:
 
 
How to create your own HTML page
 
If you are new to HTML then you might think, how can I write my own HTML code? In other words, what tools exist?  You can actually write HTML code using Notepad or any text editor. There are also many text editors and IDEs that support writing HTML code. Some of the most commonly used tools are the following:
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
  • Microsoft Web-Matrix 
But I suggest that if you are new and you want to learn HTML perfectly than use Notepad (Windows) or TextEdit (Mac). 
 
Write your HTML code in a text editor and save that file with a .html or .htm extension. Then go to your browser and type the path of the HTML file as the URL and hit Enter. Your page will be shown.

For example, use the following procedure to create a HTML file.
 
Open Notepad and type the following code:
  1. <html>  
  2.   <head>  
  3.     <title>Home Page</title>  
  4.   </head>  
  5.   <body>  
  6.      Hello C-Sharp Corner...  
  7.   </body>  
  8. </html>  
Now save this file using a file name and .html or .htm extension, for example Example.html. Open a web browser and type the file location into the URL and see your output as in the following:
 


HTML Text Formatting Elements

Now we understand how to add markup to the text and how to format our HTML text using text formatting markups. In this section we will learn the following topics:
  • Headings
  • Paragraph
  • Bold, Italic, Underline, Strong and Mark
  • Super-Script and Sub-Script 
  • Line Breaks and Horizontal Rules 
  • Quotations 
  • Abbreviations and Acronyms
  • Citations and Definitions
  • Address
  • Insert, Strike and Delete 
Heading: HTML has 6 levels of headings. <h1> to <h6> defines HTML heading.

Example: HTML Code.



The following is the output of the preceding code:

 
 
Note: We can control the color, size and fonts of a heading using CSS.
 
Paragraph: A paragraph in HTML can be defined using a <p> tag. Text inside <p> (opening) and </p> (closing) define a paragraph. By default browsers automatically show some space between subsequent paragraphs.

Example: 
  1. <html>  
  2.   <head>  
  3.     <title>Paragraph in HTML</title>  
  4.   </head>  
  5.   <body>  
  6.     <h1>C# Language</h1>  
  7.     <p>C# syntax is highly expressive, yet it is also simple and easy to learn. The curly-brace syntax of C# will be instantly recognizable to anyone familiar with C, C++ or Java. Developers who know any of these languages are typically able to begin to work productively in C# within a very short time. C# syntax simplifies many of the complexities of C++ and provides powerful features such as nullable value types, enumerations, delegates, lambda expressions and direct memory access, which are not found in Java. C# supports generic methods and types, which provide increased type safety and performance, and iterators, which enable implementers of collection classes to define custom iteration behaviors that are simple to use by client code. Language-Integrated Query (LINQ) expressions make the strongly-typed query a first-class language construct.  
  8.     </p>  
  9.     <p>  
  10.      As an object-oriented language, C# supports the concepts of encapsulation, inheritance, and polymorphism. All variables and methods, including the Main method, the application's entry point, are encapsulated within class definitions. A class may inherit directly from one parent class, but it may implement any number of interfaces. Methods that override virtual methods in a parent class require the override keyword as a way to avoid accidental redefinition. In C#, a struct is like a lightweight class; it is a stack-allocated type that can implement interfaces but does not support inheritance.  
  11.     </p>     
  12.   </body>  
  13. </html>  
The following is the output of the preceding code:
 
 
Bold, Italic, Underline, Strong, Emphasis and Mark

Bold: By enclosing text in the <b> and </b> tags we can make text bold. The <b> element represents a span of text stylistically different from the normal text, without conveying any spacial importance or relevance.

Example
  1. <p>This is the Example of <b>Bold</b></p>   
Output

 
Italic
By enclosing text in <i> and </i> tags we can make text italicized. The <i> element represents a span of text stylistically different from the normal text, without conveying any spacial importance or relevance.

Example
  1. <p>This is the Example of <i>Italic</i></p>   
Output

 
Underline

By enclosing text in the <u> and </u> tags we can make text underlined.

Example
  1. <p>This is the Example of <u>Underline</u></p> 
Output

Strong: You can use <strong> if you want some text to be bold. That means it's an important piece of information. The strong tag surrounds the emphasised word/phrase. You can use CSS to make nested tags appear stronger.

Example
  1. This is <strong>important</strong>. It <strong>really is important. <strong>And this is even more important!</strong></strong>   
Output



Emphasis
 
The HTML <em> tag is used to indicate emphasis. The <em> tag surrounds the word/term being emphasised. When you use the <em> tag then inside the <em> and </em> tag the text will be italicized unless modified by CSS.

Example
  1. I can <em>not</em> emphasise this enough!   
Output

 
 
Question: Now a question is, what is the difference between <b> and <strong> and between <i> and <em>?
 
Answer: <b> and <i> refer to styles. Use <b> to make the text bold purely for stylistic reasons. The same goes for <i>. If you use that code, in other words you want the text to be italicized purely for stylistic reasons.

However, you would use <strong> if you wantethat bit of text to look bold and have emphasis. That means it's an important piece of information. So why is there a difference ?

There is no visual difference in the aparance of the page. The main difference comes with text-to-speech programs, often used by blind people. When blind people look at a website, all the text is spoken to them. When you use strong instead of <b> tag, then the voice program might speak the text differently, with emphasis or in a different tone of voice. This is done to convey to the blind person that the text is important in some way. The same goes for using <em>.

Also, using <strong> instead of <b> means you're using Semantic Markup that is the best practice these days. 
 
Mark: The HTML mark element represents highlighted text, for reference purposes, due to its relevance in another context.

It is important to understand the intended purpose of this tag. According to the HTML 5 specification:

When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but that has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but that is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.

Example
  1. <p>The <mark> element is used to <mark>highlight</mark> text</p>   
Output

Superscript and Subscript: <sup> is used to contain text that should be superscript and <sub> and is used to contain text that should be subscript. Subscript is commonly used with footnotes or chemical formulas.

Example
  1. <h1>Superscript Example</h1>    
  2.    <p>Rohan is in 12<sup>th</sup> standard</p>    
  3.    <p>(a+b)<sup>3</sup>=a<sup>3</sup> + 3a<sup>2</sup>b + 3ab<sup>2</sup> + b<sup>3</sup> </p>    
  4.     
  5. <h1>Subscript Example</h1>    
  6. <p>    
  7.    When H<sub>2</sub>SO<sub>4</sub> reacts with NaOH then it forms Na<sub>2</sub>SO<sub>4</sub> and H<sub>2</sub>O.    
  8. </p>    
  9. <p>    
  10.     H<sub>2</sub>SO<sub>4</sub> + 2NaOH ====> Na<sub>2</sub>SO<sub>4</sub> + H<sub>2</sub>O.    
  11. </p>  
Output of the preceding code

 
 
Line Breaks and Horizontal Rules:

Line Break: The HTML <br> tag is used for specifying a break between lines. It is useful for writing a poem or an address, where the division of lines are significant. The HTML <br> tag is an empty tag, in other words a HTML <br> has no end tag.
  1. <p>A million stars up in the sky<br>    
  2.    one shines brighter I can't deny<br>    
  3.    A love so precious a love so true<br>    
  4.    a love that comes from me to you<br>    
  5.    The angels sing when you are near<br>    
  6.    within your arms I have nothing to fear<br>    
  7.    You always know just what to say <br>    
  8.    just talking to you makes my day<br>    
  9.    I love you honey with all of my heart<br>    
  10.    together forever and never to part.
  11. </p>  
Output



Note: Please remember one thing; do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element.

Horizontal Rules: The HTML <hr> tag is used for specifying a paragraph-level thematic break in an HTML document. A a paragraph-level thematic break could be a scene change in a story, play and drama, or a transition to another topic within a section of a reference book.

Example
  1. <p>This is paragraph 1</p>    
  2.    <hr>    
  3. <p>This is paragraph 2</p>   
Output

 
Quotations: In the HTML there are two elements commonly used for marking up quotations that are <q> and <blockquote>. <q>  is used for shorter quotes. A browser normally inserts quotations marks around the text. And the <blockquote> tag is normally used for longer quotes rendered visually by indentation. A URL for the source of the quotation may be given using cite attribute, whereas a text representation of the source can be given using the <cite> element.

Example
  1. <p><q>Google Glass</q> is a type of wearable technology with an <q>optical head-mounted display (OHMD)</q></p>    
  2. <blockquote cite="http://www.quotationspage.com/quote/24948.html">    
  3.     <p>    
  4.         If A is success in life, then A = x + y + z. Work is x; y is play; and z is keeping your mouth shut.    
  5.    </p>     
  6. </blockquote> 
Output



Abbreviations and Acronyms: If you use abbreviations then you should use the <abbr> tag and for Acronyms use <acronym>. The use of these tags are mainly for SEO. Maybe some person searches with shortened forms of words and some search will the full forms so it is very important to always use <abbr> and <acronym> tags. Both tags use a title attribute to spell out the full form. When your mouse hovers over the abbreviation or acronym then the title will be shown.

Example
  1. <p>     
  2.      <abbr title="Professor">Prof.</abbr> Seeger is an expert in optical sensor technologies.    
  3. </p>     
  4.     
  5. <p>    
  6.   <acronym title="National Aeronautics and Space Administration">NASA</acronym> just launched a new app (3d View app) for students. So student can get good knowledge about space science...    
  7. </p>   
Output

Citations: HTML uses the <cite> tag to represent the title of a work.

Example
  1. <p>    
  2.    <cite>The Ramcharitmanas</cite> is written by goswami tulsidas.    
  3. </p>  
Output of the preceding code

 
Definitions: HTML uses the <dfn> tag to represent the defining instance of the terms. The first time you explain a new terminology in the document you can use <dfn>. This can also contain the title.

Example
  1. <p>    
  2.     <dfn><abbr title="Asynchronous JavaScript and XML">AJAX</abbr></dfn> is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.      
  3. </p>  
Output

Address
 
HTML has the <address> tag to define contact information of an author or owner of a document or article. If the <address> tag is inside <body> then it shows the information about that document and if it exists in an <article> then it represents contact information for that article.

Example
  1. <address>    
  2.    <a href="mailto:[email protected]"><b>Sourabh Somani</b></a><br>     
  3.    Website:<br>    
  4.    sourabhsomani.com<br>    
  5.    Chittorgarh, <br>    
  6.    Rajasthan    
  7. </address>  
Output



Insert and Delete: The <ins> element can be used to show content that has been inserted into a document, whereas the <del> element shows text that has been deleted from the document.

Example
  1. <p>Application Form Submission Date:<del>30 Sept 2015</del> <ins>8 Oct 2015</ins></p> 
Output

 
Strike: The <s> tag in HTML defines a strike that specifies text that is no longer correct or relevant. The difference between <del> and <s> is <del> is used when text has been replaced or deleted.

Example
  1. <p><b>Latest Version of Android:</b></p>    
  2. <p><s>Android 1.6 – Donut</s></p>    
  3. <p><s>Android 2.0 – Eclair</s></p>    
  4. <p><s>Android 2.2 – Froyo</s></p>    
  5. <p><s>Android 2.3 – Gingerbread</s></p>    
  6. <p><s>Android 3.0 – Honeycomb</s></p>    
  7. <p><s>Android 4.0 – Ice Cream Sandwich</s></p>    
  8. <p><s>Android 4.1 – Jelly Bean</s></p>    
  9. <p><s>Android 4.4 – KitKat</s></p>    
  10. <p>Android 5.0 – Lollipop</p>  
Output



Summary
  1. HTML pages are text documents.

  2. HTML uses tags that have some spacial meaning. HTML tags are keywords, in other words reserved words.

  3. HTML tags are also called HTML elements.

  4. A HTML element may contain attributes that provides more about the element and attributes always exist as name and value pairs.
  5. A HTML element describes a HTML page structure.
  6. HTML has many text formatting tags, like <h1>...<h6>, <p>, <b>, <i>, <u>, <strong>, <sup>, <sub>, <br>, <hr>, <blockquote>, <q>, <abbr>, <acronym>, <address>, <ins>, <del>, <s> and so on.
In the next part of this series you will learn more about:
  • Images in HTML
  • Links 
  • Lists
  • Tables
Author
Praveen Moosad
Praveen Moosad
Admin 48.3k 8.4m