ad

Friday, November 17, 2023

html unordered list



Unordered List HTML


html unordered list/output


Q. what is the  unordered list in  html?

 HTML Unordered List :-

  
                   1]   Unordered list is a Bulleted  Format.
                   2]  Unordered list starts with the <ul> tag.
                   3]  Unordered list end </ul> tag.
                   4]  Each unordered list item starts  with the <li> tag.
                   5]  Each Unordered list items end with the</li> tag.
              

Syntax :-

          <ul type=" put the list type "> 


 Que . What is the type  of unordered list in html ?

          Unordered list 4 type of bulleted format.
         
              1)    type = "disc"
              2)    type =  "circle"
              3)    type =  "square"
              4)    type =  "none"

1) disc :-

             disc is the default style.
             disc list items are maked with bullets.

Syntax :-

             <ul type="disc">

  HTML Unordered List (disc)  Example  :-           

<html>
<body>
<h1>Unordered list</h1>
    <h2> disc</h2>
    <ul type="disc">
        <li>Seeta</li>
        <li>Ram</li>
        <li>swami</li>
        <li>Mahadev</li>
    </ul>
</body>
<html>


HTML Unordered List (disc) 

Output :-

HTML Unordered List (disc) output



  









HTML Unordered List 

2) circle :- 

                  circle type is the list items are marked with circle.

Syntax :-

                 <ul type="circle">                   

HTML Unordered List(circle)  Example:-

<html>
<body>
<ul type="circle">
        <h2>Circle</h2>
        <li>Seeta</li>
        <li>Ram</li>
        <li>swami</li>
        <li>Mahadev</li>
    </ul>
</body>
<html>

HTML Unordered List(circle) 

Output :-

html unordered list( circle) output






HTML Unordered List

3) square :-

                square  items  are marked with the square.

Syntax :-

        <ul type="square">


HTML Unordered List(square) Example :-

 <html>
<body>
   <ul type="square" >  
<h2>Square</h2>
        <li>Seeta</li>
        <li>Ram</li>
        <li>swami</li>
        <li>Mahadev</li>
</body>
<html>
  

HTML Unordered List(square) 

Output :-

html unordered list(square) output








html unordered list

4) none :-

    none list item are not a marked.

Syntax : 

            <ul type="none">


html unordered list(none) Example :-

 <html>
<body>
<ul type="none" >
        <h2>None</h2>
        <li>Seeta</li>
        <li>Ram</li>
        <li>swami</li>
        <li>Mahadev</li>
    </ul>

</body>
</html>

html unordered list(none) output

html unordered list(none) output







Related Post :-

php program to print alphabet pattern C

php program check to even odd number

html description list | with example

Tuesday, November 14, 2023

html ordered list


 HTML List 

html list /output




HTML List :-

Different Type  HTML list.

                   1] Ordered HTML  List.
                  2] Unordered HTML List 
                  3] Description  HTML List



1] Ordered HTML List :-

Q. what is the ordered list in html?

  •      Ordered list is also known as  Number list or alphabetical.
  •     All ordered html list items are marked with the Number in by default.
  •     Ordered list Starts <ol> tag and closing with the </ol> tag.
  •     Ordered list each  item start with <li> tag and closing with the items </li> tag. 

   Ordered list  represent different Type

 1)  Numeric Number(1,2,3,4,5)

 2) Capital Roman Number (l ,ll , lll , lV)

 3) Small Roman Number( i, ii, iii, iv)

 4) Capital Alphabet (A,B,C, D)

 5) Small Alphabet (a, b, c, d)

Q. How to make ordered list in html.

Ordered HTML List :-

1) Numeric Number -

Ordered html list is numeric number is default type.
Numeric Number  is not defining type ="1"
.

 Example -

<!doctype html>
<html>
 body>
<h2>Ordered HTML List</h2>  
    <ol>
        <li>HTML</li>
        <li>CSS</li>
         <li>JAVASCRIPT</li>
    </ol>    
</body>
</html>


Output

ordered html list/output







2) Capital Roman Number (l ,ll , lll , lV) :-

Capital Roman Number  display list in roman number uppercase.

Capital Roman Number is  defining type ="I" .

Syntax :-

Ol type="I"

Example -

<!doctype html>
<html>
 body>
<h2>Ordered HTML List</h2>  

   <ol type ="I">
        <li>HTML</li>
        <li>CSS</li>
         <li>JAVASCRIPT</li>
    </ol>    
</body>
</html>



 Capital Roman Number  OUTPUT :-

Capital Roman Number/output







 3) Small Roman Number( i, ii, iii, iv) :-

Small Roman Number display list in roman number lowercase.
Small Roman Number is defining type ="i" 

Syntax :-

Ol  type = "i"

Example -

<html>
<body>
<h2>Ordered HTML List</h2>
 
    <ol type ="i">
        <li>HTML</li>
        <li>CSS</li>
         <li>JAVASCRIPT</li>
    </ol>  
</body>
</html>

 OUTPUT :-

lowercase html list /output






4)Capital Alphabet (A,B,C, D) :-

Capital Alphabet display list in Uppercase.
Capital Alphabet  is defining type ="A" 

Syntax :-

Ol  type = "A"

Example -

<html>
<body>
<h2>Ordered HTML List</h2>
<h3>Capital Alphabet </h3> 
    <ol type ="A">
        <li>HTML</li>
        <li>CSS</li>
         <li>JAVASCRIPT</li>
    </ol>
</body>  
 </html>

OUTPUT

capital alphabet list html/output

 5) Small Alphabet (a, b, c, d) :-


Small Alphabet display list in lowercase.

Small Alphabet is defining type ="a" 

Syntax :-

Ol  type = "a"

Example -

<html>
<body>
<h2>Ordered HTML List</h2>
    <h3>Small Alphabet </h3>
        <ol type ="a">
<!-- ordered html list syntax -->
            <li>HTML</li><!-- list tag -->
            <li>CSS</li>
             <li>JAVASCRIPT</li>
        </ol>
</html>
</body>

OUTPUT :-

output small alphabet /output








related Post :-

javascript logical operator

how to create a navigation bar

php program to print increasing triangle

Saturday, November 11, 2023

how to add background image in html.



how to insert background image in html


background image in html

Program  

 Background Image 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
content="width=device-width,
initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
background-image:url
('https://cdn.wallpapersafari.com/27/83/hGWHei
.jpg');
<!-- image path -->
height:600px; <!--height of image--> 
      width: 50%;
    }
    p{
        color: red;
        text-align: center;
    }
</style>
<body>
    <h1>Background Image</h1>
    <BR<BR><BR>
<p><BR<BR><BR><BR><BR> how to insert background
image  in html programe . <br>
    learning for the this website website.<br>
     follow this website and learning in the
HTML,CSS,
PROGRAME AND theory learn in improve your
knowledge website
https://webdesigningtheory.blogspot.com  <br>
</p>    <!--this information display
in the image -->
</body>
</html>


HTML Background Image

 The <background> image attribute in the HTML document is used.

  you can use the path of image tag value of

 background attribute. 

Syntax :-

 background-image: url('path of image');


Related post :-

php variable

css text align

javascript for loop

Thursday, November 2, 2023

How to insert image in html

 

How to insert image in html

HTML IMAGE TAG CODE




Q] What Is The  Image  Tag  In  HTML?


  1.  The  <img src="">  HTML  tag is used to display an image on a web page .
  2.  It is a self -closing tag.
  3.  which means it does not need a separate closing tag
  4.  The <img> tag use embed  image in HTML page.
  5.  Image are not technically  insert in web page.
  6.  image are linked to the web pages.
  7. The <img> tag is empty it contains attributes only and does not have a closing tag.

Syntax :-


 <img src="image_path" alt="alternative -text" >


Q] What Are Image  Tag.?

Image tagging is process of identifying and labeling the contents of an image tag 
This can be done manually by someone looking at the image and typing in description/ 
automatically using machine


Html IMG Attribute :-


 1] src :-

  •  src is use to specify the path to image.
  •  It is a necessary  attribute that describes source or path of the image.
  • It instructs the browser  look for the image on the server .
  • specifies the path to image.

 2] alt :-

  •    The alt attribute defines alternate text for  image it cant be displayed .
  •  The value of the alt attribute describe the image information the image in words.

  • The alt attribute is considered best /good SEO prospective.

   3] Width :-

  • width is an optional attribute which is used to specify the width to display the image.                                                              
  • It is used to specify width of the image.

Height :-

  •  height is use to specify the height of the image

 

Syntax:-

  <img src=" image-path" alt" image-info" width="image-width-put" 

   height=" image-height-put">

Program :-

<!DOCTYPE html>
<html>
<head>
   
    <title>image html tag</title>
</head>
<body>
   <h2>html tag </h2>
<img src=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU_
ej9ZY8Ee051iV1P0wHZhhlCLdN1nZfGZQ&usqp=CAU"
alt="nature" width="" height="">
</body>
</html>


Output:-   

img


👉👉

Related Post 

👍👍 

Wednesday, November 1, 2023

Html anchor tag


  

How to Add HTML  Anchor Tag 


anchor tag html

 

Anchor Tag 

The <a> tag define hyperlink 

 1]  Html anchor tag define hyperlink this use to link from one           page to another.

 2]  Its create hyperlink to other web page as well as files, location 

 3]  Most important attribute of<a> element is the href attribute.

 4]  when link is clicked it redirects the user to that page.

 5]  The <a> tag creates a clickable link.

 6] The href attribute sets the target page or site 

example:- webdesigningtheory.blogspot.com/

7] The target attribute specifies in what tab ,window to open the new       page.

 8]  Its href  <a>  attribute  creates a hyperlink to web page, files                 email addresses ,locations in the same page else URL address.

 9]    hyperlink its important to the website ,web page  ,or part of the          same web page to link to.

10]  In addition to the href attribute website linking to open in                  another browser tab. you just need to set  the value of the target          attribute  to blank.

 11]  <a> hyperlink is the Global attribute / event attribute =supports 

       which indicates the links destination.

default link :

 unvisited link -blue

 visited link-purple

 active  link- red


Q. What is the Anchor Tag  html?

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link. The text between the opening tag and the closing tag is either the start or destination specifies where to open the linked document.


Syntax

<a href="https://webdesigningtheory.blogspot.com
/?m=1">webdesigningtheory.blogspot</a>


 Example

<!DOCTYPE html>
<html>
<head>
   
    <title>Document</title>
</head>
<body>
<h2>visit the link</h2>
   <ul>
    <li><a
href="https://webdesigningtheory.blogspot.com
/?m=1">Website 1</a></li>
<li><a href=
"https://webdesigningtheory.blogspot.com/?m=1">
Website 2</a></li>
    <li><a href=
"https://webdesigningtheory.blogspot.com/?m=1">
Website 3</a></li>
   </ul>  
</body>  
</body>
</html>




Output :-
<a> hyperlink output


Related Post:-

inline css in html

responsive image grid html,css program

css menu design