HTML Basic Tags

NOTE:-All HTML Program Save One FOLDER in your Computer.

 HTML headings :-   Are defined with the <h1>  to <h6> tags.


Q1:-Write a Program Heading Tag?

<html
<head>
<title>heading tags</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 </body>

</html>

output:-



<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3> ,and so on.


Q2:-What is Paragraph Tags?

Ans.The HTML <p>  element defines a paragraph.

<html>
<body>
 
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
 
</body>
</html>

Output:-



Q3:-Subscript and Superscript tags?

Ans.

<html>

<head><title>create a sub and super scrip tag</title>

</head>

<body>

H<sup>2</sup><br><br>

H<sub>2</sub>

</body>

</html>

output:-

H2


H2

Note:- In this program used <br> tag.

  • The <br> tag inserts a single line break.
  • The <br>tag is an empty tag which means that it has no end tag.

Q4:-HTML Comments?
Ans.

  • Comments can be used to hide content.
  • This can be helpful if you hide content temporarily
  • You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->


<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html> 

Q5:-HTML Text Formatting Tags?
Ans.
1.<b> - Bold text
2.<strong> -Strong tag same work as bold  text
3.<i> - Italic text
4.<em> - Emphasized text ,(same work as italic tag)
5.<mark> - Marked text(Highlights)
6.<small> - Smaller text
7.<del> - Deleted text
8.<ins> - Inserted text
9.<U>- Underline text
10.<q>- quotation tag
11.<abbr>- Abbreviations Tag
12.<address>- The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
13.<Cite>- The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting,etc....
14.<Marquee>- This tag used for moving text 
15.<font>- Font tag used to text color change,text size,face change.
16.<hr>-Horizontal rule<hr>


#WAP Text Formatting Tags:- 

<html>
<head>
<title>formatting tag</title>
</head>
<body>
<b>Bold text</b><br>
<strong> -Strong tag same work as bold  text</strong><br>
<i>Italic text</i><br>
<em> Emphasized text ,(same work as italic tag)</em><br>
<mark> Marked text(Highlights)</mark><br>
<small> Smaller text</small><br>
<del>Deleted text</del><br>
<ins>Inserted text</ins><br>
<u>Underline text</u><br>
<q> quotation tag</q><br>
<abbr title="hyper text markup language">HTML</abbr><br>
<address>Village:-___________,<br>
                 Dist:-_____________,<br>
                 Pin code:-_________,<br>
</address><br>
<Cite>HOSHAIRPUR</cite><br>
<Marquee>INFORMATIVE</marquee> <br>
<marquee direction="up"><br><!---you can change direction like up,down-->
<hr>insert a line</hr><br>
<hr width="40%" color="red"><br>
<font color="red" size="5%" face="arial">Informative</font>
</body>
</html>


Q6.Difference between Paragraph tag and Pre Tag?
Ans:-   Paragraph Tag:-
                The <p> tag is for regular paragraphs, where spaces and line breaks are rendered as a single space.
The <p> tag defines a paragraph .

WAP:-

<html>
<head>
<title>Paragraph Tag</title>
</head>
<body>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.

You clways restore the look of your document to the original contained in your current template.

 </p>

</body>

</html>


#Pre Tag:-

The <pre> tag in HTML preserves spaces and line breaks, displaying text exactly as written in the code.

 <pre> tag defines pre-text formating.

WAP:-

<html>
<head>
<title>Pre Tag</title>
</head>
<body>
<pre>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.

You clways restore the look of your document to the original contained in your current template.

 </pre>

</body>

</html>


#Q7:-Alignments are the attribute and property of Tags....

Ans:-   Four Types of alignments like:-Align left,Align right, Align center and Align justify.

 WAP:-  Part(1)-Alignment Right
<html>
<head>
<title>Text align right</title>
</head>
<body>
<p align="right">Its a Alignment Right</p>
</body>
</html>

Part:-(2)-Alignment left
<html>
<head>
<title>Text align left</title>
</head>
<body>
<p align="left">Its a Alignment left </p>
</body>
</html>

Part:-(3)-Alignment center
<html>
<head>
<title>Text align center</title>
</head>
<body>
<p align="center">Its a Alignment center</p>
</body>
</html>

Part:-(4)-Alignmet justify

<html>
<head>
<title>Text align justify apply to the Paragraph you can anything write in p tag</title>
</head>
<body>

<p align="justify">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.

You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.

 </p>
</body>
</html>

#Q:-8 HTML  LISTS?

ANS:- Two types of list :-
1.Unorder list and
2.Order list

Example

An unordered HTML list:

  • Item
  • Item
  • Item
  • Item

An ordered HTML list:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

HTML List Tags:-

Tag

Description

<ul>

Defines an unordered list

<ol>

Defines an ordered list

<li>

Defines a list item

<dl>

Defines a description list

<dt>

Defines a term in a description list

<dd>

Describes the term in a description list

 


#Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:


WAP Unorder list:-Three types of unorder list circle,square and disc....

<html>

<body>

 <h2>An unordered HTML list</h2>

 <ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

 </body>

</html>

# Circle type

<html>

<body>

 <h2>An unordered HTML list</h2>

 <ul type="circle">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

 </body>

</html>

#square type

<html>

<body>

 <h2>An unordered HTML list</h2>

 <ul type="square">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

 </body>

</html>

#Disc type

<html>

<body>

 <h2>An unordered HTML list</h2>

 <ul>

  <li type="disc">Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

 </body>

</html>


#Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.Types of order list like 1,A,a,i,reversed alphabet ,start any number ect....

The list items will be marked with numbers by default:

1].

<html>

<body>

 <h2>An ordered HTML list Bydefault</h2>

 <ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 </body>

</html>


2].

<html>

<body>

 <h2>An ordered HTML list Capital Alphabets</h2>

 <ol type="A">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 </body>

</html>


3].

<html>

<body>

 <h2>An ordered HTML list Small Alphabets</h2>

 <ol type="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 </body>

</html>


4].

<html>

<body>

 <h2>An ordered HTML list Roman Numbers</h2>

 <ol type="i">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 </body>

</html>


5].

<html>

<body>

 <h2>An ordered HTML list Reversed alphabets</h2>

 <ol type="a" reversed>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 </body>

</html>


6].

<html>

<body>

 <h2>An ordered HTML list start any alphabets</h2>

 <ol type="a" start="7">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 </body>

</html>


7].

<html>

<body>

 <h2>An ordered HTML list start any numbers</h2>

 <ol  start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol> 

 </body>

</html>


#HTML Description Lists

HTML also supports description lists.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example:

<html>

<body>

 <h2>A Description List</h2>

 <dl>

  <dt>Computer</dt>

  <dd>computer isa electronicdevice.</dd>

  <dt>CPU</dt>

  <dd>cpu is a central processing uni.</dd>

</dl>

 </body>

</html>


#Sublists:-

<html>

<body>

 <h2>Sublist or nested list</h2>

 <ol type="1">

  <li>computer</li>

  <li>hardware</li>

  <li>software

        <ol type="a">

            <li>System software</li>

            <li>Application softwarer</li>

        </ol>

</li>

<li>CPU</li>

</ol>

</body>

</html>


Q9:-How you can change Text color,text size and face?

Ans:-Font is a tag that is used to change a text color size and face. Many types of  font face  are avaliable .WAP ............

<html>

<head>

<title>Change text color and size, face</title>

</head>

<body>

<font color="red" size="5%" face="arial">COMPUTER</font>

</body>

</html>


#HTML Symbols:-


<html>

<head>

<title>symbol and alphabets code available in internet</title>

</head>
<body>

<p>&#9830;</p>

<p>&#9829;</p>

<p> &euro;</p>
<p> &#8707;;</p>
<p> &#8721;</p>


</body>
</html>

Note: Symbols or letters that are not present on your keyboard can be added to HTML using entities.

#Using Emojis in HTML

Emojis are characters  or Emojis look like images, or

 icons :- 😄 😍 💗 🗽 👮👯👰👱👲

WAP:-

<html>
<head>
<title>Insert a emoji</title>
</head>
<body>

<h1>HTML EmojI</h1>

<h2>&#128517;</h2>
<h2>&#128512;</h2>
<h2>&#128511;</h2>
<h2>&#128515;</h2>
<h2>&#128514;</h2>
</body>
</html>


 





1 comment:

THANK YOU

Subscribe to: Posts (Atom)

Css

  CSS CSS is the language we use to style a Web page.  Q.1:- What is CSS?  Ans:- CSS stands for Cascading Style Sheets . CSS is used to defi...

  • HTML
    Html  provide a way of Displaying web pages with text and images or multi-media content. HTML is not a programming language, but a markup la...
  • Css
      CSS CSS is the language we use to style a Web page.  Q.1:- What is CSS?  Ans:- CSS stands for Cascading Style Sheets . CSS is used to defi...