HTML BASICS

 In this blog we will study abut some basics of HTML examples. In this we will use tags which we have not learned yet.

HTML DOCUMENTS:-

All HTML documents starts with a document declaration: <!Doctype html>. The html document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and ends with </body>. For Example-: 

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE> Declaration:- The <!Doctype> declaration represents the document type, and helps browsers to display the web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <!Doctype> declaration is not a case sensitive. The <!Doctype> declaration for HTML is-:

<!DOCTYPE html>

HTML HEADINGS:- A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags <h1>-----------</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading.
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least important heading). For example-:

  1. <h1>Heading no. 1</h1>  
  2. <h2>Heading no. 2</h2>  
  3. <h3>Heading no. 3</h3>  
  4. <h4>Heading no. 4</h4>  
  5. <h5>Heading no. 5</h5>  
  6. <h6>Heading no. 6</h6>  


HTML PARAGRAPHS:-

HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph. For Example-:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Space Inside HTML Paragraph:-

If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one. For Example-:

  1. <p>  
  2. I am  
  3. going to provide  
  4. you a tutorial on HTML  
  5. and hope that it will  
  6. be very beneficial for you.  
  7. </p>  
  8. <p>  
  9. Look, I put here a lot  
  10. of spaces                    but            I know, Browser will ignore it.  
  11. </p>  
  12. <p>  
  13. You cannot determine the display of HTML</p>  
  14. <p>because resized windows may create different result.  
  15. </p>  

OUTPUT OF ABOVE EXAMPLE-:

I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

As we can see, all the extra lines and unnecessary spaces are removed by the browser.


How to use <br> and <hr> tag with Paragraph?

An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the example to show how to use <br> with <p> element.

  1. <!DOCTYPE html>  
  2. <html>  
  3.      <head>  
  4.     </head>  
  5.   <body>  
  6.       <h2> Use of line break with pragraph tag</h2>  
  7.           <p><br>Papa and mama, and baby and Dot,  
  8.      <br>Willie and me? the whole of the lot  
  9.                <br>Of us all went over in Bimberlie's sleigh,  
  10.                  <br>To grandma's house on Christmas day.  
  11.           </p>  
  12.    </body>  
  13. </html>  



An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs. Following is the example which is showing use of <hr> tag with paragraph. 

  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.     </head>  
  5.  <body>  
  6.    <h2> Example to show a horizontal line with paragraphs</h2>  
  7.      <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will start a new paragraph.  
  8.      </p>  
  9.   </body>  
  10. </html>  

Output:


HTML <link> TAG:-

HTML <link> tag is used to specify the relationship between the current document and external source.

The <link> tag is commonly used to link the external Stylesheet for the current document, but it can also use with link site icons. It is placed on the head section of the document.

  1. <link rel="stylesheet" type="text/css" href="">  

Following are some specifications about the HTML <link> tag.

DisplayNone
Start tag/End tagBoth Start and End tag
Usagetextual

Example

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Link Tag</title>  
  5.     <link rel="stylesheet" type="text/css" href="html pages/css/link.css">  
  6. </head>  
  7. <body>  
  8.     <h2>Example of Link Tag</h2>  
  9.     <p>This is paragraph which is styled with external style sheet. </p>  
  10. </body>  
  11. </html>  

  1. body{  
  2.     background-color: #7ac5cd;  
  3.         text-align: center;}  
  4. h2{  
  5.     color: #006400;}  
  6.   
  7. p{  
  8.     color: #cd5c5c;  
  9.     font-size: 25px;  
  10.     font-style: italic;} 

Output:



Global attribute:

The <link> tag supports the global attributes in HTML

Event attribute:

The <link > tag supports the event attributes in HTML.


Comments

Post a Comment

Popular posts from this blog

HTML Images

Image
 HTML IMAGE:-    HTML img  tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. Let's see an example of HTML image. < h2 > HTML Image Example </ h2 >    < img   src = "good_morning.jpg"   alt = "Good Morning Friends" />   Attributes of HTML tags:- The src and alt are the two most important attributes of HTML image tag are given below-: (1)  ALT-:  The alt attribute defines an alternate text for the image, that can be displayed. The value of the alt attribute describes the image in words. The alt attribute is considered good for SEO prospective. (2)  SRC-: It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of the image may be on the same directory or another service. There are two ways...
Read more

Html - Text Links, Image Links, E-mail Links

Image
  HTML - TEXT LINKS   A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage. Linking Documents A link is specified using HTML tag <a>. This tag is called  anchor tag  and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag. <a href = "Document URL" ... attributes-list>Link Text</a> The target Attribute We have used  target  attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are the possible options − Sr.No Option & Description 1 _blank ...
Read more

Html - Tables

Image
 A table is an arrangement of data in rows and columns, or possibly in more complex structure.Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. Table can be used to compare two or more items in tabular form layout. Tables are used to create databases. Defining Tables In HTML An HTML table is defined with the "table" tag. Each table row is defined with "tr" tag. A table is defined with the "th" tag. By default tables heading are bolt and centered. A table data/cell  is defined with the "td" tag.  <!DOCTYPE html>  <html>  <body>  <table style="width:100%">  <tr>  <th>Firstname</th>  <th>Lastname</th>  <th>Age</th>  </tr>  <tr>  <td>Priya</td>  <td>Sharma</td>  <td...
Read more