Monday, July 31, 2023

Background image with text

  Background image with text in HTML and CSS




OUTPUT



background img with text






















Program

 


<html>

<head>

<title>backgrouns  image </title>

<style>

h1
{
text-align:center;
color:red;
}
.color
{
background-color:blue;
}
.center{
text-align:center;
color:magenta;

}

body{
background-repeat:"no-repeat";
background-size:100%180%;

}
.css {
text-align:left;
}
#css{
color: orange;

}
img{
align:center;
}

</style>

</head>


<body background="https://wallpapers.com/images/

featured/nature-2ygv7ssy2k0lxlzu.jpg" alt="image computer">


<h1><b>computer</b></h1>
<h3><p class="center"><b>a computer us an electronic >A computer is an electronic device that manipulates information pr data. 
it has the ability to store, retrieve and process data. you may alread know 
that you can use a computer to type document send email, play games and browse tha web. you can 
also use it to edit ot create spreadsheets presentation
 and even videos.</b></p></h3>

<div class="color"<h1 class="css"><b>What is CSS</b></h1>
<p id="css"><b>Cascading  style sheets is a style sheet language used for describing the presentation of a document.
css is a computer language for laying out and structuring web page html or xml this language contains coding elements and  is 
composed.</b></p></div>

<center>
<img src="E:\New folder\MCA1\web technology program\htmldevo.jpg" alt="html developer" width="90px" height="30%">
</center>

<p style=""color:gold" ><b> htmlthe first version of the html was written by<b> tim berners-lee in1993</b>.support linking among online resources. conputer with other digital formats used primarily textual 
document HTML tags are keywork which defines that how web browser will format and display the content. 
with the help pf tags a web browser can display the content. with the help of tags.</b></p>

</body>
</html>

VISIT THE LINK


css in combinators web

hoe to apply image tag in html

split screen into two sections html

image tag html

  

 



on No comments:
Labels:

Saturday, July 29, 2023

HTML ID Attribute

 

HTML id Attribute


Information



1]  The id attribute specifies a unique id for HTML element. 

2] The id attribute is used to point to a specific style declaration in a style sheet.

3] The syntax for id write a hash character (#)

 4] Then, define the CSS properties within curly braces {}



1] <h1> element that points to the id name "myHeader".

2] <h1>element will be styled according to the #myHeader style definition in the head section


PROGRAM

<!doctype html>

<html>

<head>

<title>id attribute</title>

<style>

#myid{

 background-color:yellow;

 color:red;

  text-align:center;

padding:20px;

}

</style>

</head>

<body>

<h2>ID ATTRIBUTE USE </h2>

<p>Google is one of a third-party vendor on our site. It also uses cookies,

 known as DART cookies, to serve ads to our site visitors based upon their 

visit to www.website.com and other sites on the internet. However, 

visitors may choose to decline the use of DART cookies by visiting 

the Google ad and content network Privacy Policy at the following

 URL – <a href="webdesigningtheory.blogspot.com"</a></p>

<h2 id="myid">ID ATTRIBUTE</h2>

<h2 id="myid">ID ATTRIBUTE USE</h2>

</body>

</html>

OUTPUT


id attribute


VISIT link 
And
your extra information




on No comments:
Labels:

html id attribute

      HTML ID Attribute


 Information

1] The id attribute specifies a unique id for HTML element. 

2 The id attribute is used to point to a specific style declaration in a style sheet.

3] The syntax for id write a hash character (#)

 4] Then, define the CSS properties within curly braces {}

5] <h1> element that points to the id name "myHeader".

6]<h1>element will be styled according to the #myHeader style definition in the head                section


Program


<!doctype html>
<html>
<head>
<title>id Attribute</title>
<style>
#myid {
background-color:lightblue;
color:red;
padding:40px;
text-align:center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>web designing follows a standard procedure of using log files.
 These files log visitors when they visit websites.
 All hosting companies do this and a part of hosting services' analytics. 
The information collected by log files include internet protocol (IP) addresses,
 browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages,
 and possibly the number of clicks. These are not linked to any information that is personally identifiable. 
The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website,
 and gathering demographic information.</p>
<h1 id="myid"> ID ATTRIBUTE</H1>
</body>
</html>

OUTPUT


id attribute


  Visit Link 



on No comments:
Labels:

Friday, July 28, 2023

html class attribute

 Html Class Atribute

Information

      1] The html class attrubute is used to specify a class
             for an html element 
      2] Class attribute is use to point to class name in style sheep .

      3]Three <div> element with a class attrubute with value city

 Program


<!doctype html>
<html>
<head>
<title> class attribute use</title>
<style>
.satara{
background-color:purple;
color:white;
border:2px;
margin:20px;
padding:19px;
}

.mumbai{
background-color:pink;
color:white;
border:2px;
margin:20px;
padding:19px;
}
.pune{
background-color:red;
color:white;
border:2px;
margin:20px;
padding:19px;
}
</style>
</head>
<body>
<div class="satara">
<h2>Satara special food kandi pedhe</h2>
</div>

<div class="mumbai">
<h2>Mumbaispecial food vada pav</h2>
</div>

<div class="pune">
<h2>pune special Mava jalebi</h2>
</div>

</body>
</html>

OUTPUT

class attribute use


2] Program


<!doctype html>

<html>

<head>

<title> class attribute use</title>

<style>

.satara{

background-color:purple;

color:white;

border:2px;

margin:20px;

padding:19px;

}

.mumbai {

background-color:pink;

color:white;

border:2px;

margin:20px;

padding:19px;

}

.pune{

background-color:red;

color:white;

border:2px;

margin:20px;

padding:19px;

}

</style>

</head>

<body>

<div class="satara">

<h2>Satara special food kandi pedhe</h2>

</div>

<div class="mumbai">

<h2>Mumbaispecial food vada pav</h2>

</div>

<div class="pune">

<h2>pune special Mava jalebi</h2>

</div>

</body>

</html>


OUTPUT

class attribute use



VISIT link 
And
your extra information


https://webdesigningtheory.blogspot.com/2023/05/html-table-program.html 

https://webdesigningtheory.blogspot.com/2022/12/horizontal-navigation-bar-web-designing.html

on No comments:
Labels:

Thursday, July 27, 2023

html block and inline element

 HTML block and inline element


Information

 1] Block leval element always starts a new line and browsers automatically
 2] Add some  space a margin befor and after element
 3] The <h2>  element defines a heading in html document.
 4] The <div> element defines a division or a section in an html document
 5] <h1>Privacy Policy for web designing </h1>


Program

<!doctype html>
<html>

<head>
<title></title>
</head>

<body> <H1>HTML BLOCK AND LNLINE ELEMENT</H1>

<p style="border:1px solid black">Hii friend</p>
<div style="border:1px solid pink">Hii friend</div>
<p>Third-party ad servers or ad networks uses technologies like cookies,
 JavaScript, or Web Beacons that are used in their respective advertisements
 and links that appear on web designing, which are sent directly to users' 
browser. They automatically receive your IP address when this occurs. 
These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.</p>
</body>

</html>


OUTPUT

html block and lnline element


VISIT link 
And
your extra information


on No comments:
Labels:

Responsive image Grid html,css program

 Responsive image Grid html,Css program


responsive image



Program


<!doctype html>

<html>
<head>
<title></title>
</head>
<style>
*{
box-sizing:border-box;
}
header{
margin:0;
font-family:arial;
}
</style>
<body>
<div class="header">
<h1>Responsive image grid</h1>
<h2>Responsive effect</h2>
<div class="row">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRepCoPVhIXI3rEUss3pxeNaHcqwHHgVHZTeQ&usqp=CAU"
 style="width:100%">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTigzv3Ag525N1qTfA9lY-nsPVpjhTiS5S_gmJO92heCE2stfydnceBGsziZeHQxz2TCVM&usqp=CAU"
style="width:100%">
 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFMHzPwwHx8j_oxFE-8RHC3eq7Jn2qgV1ap9TqkEt3fIcbNmbq2xKYiRS1sx-_Z0FQsF8&usqp=CAU"
style="width:100%">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIgn8Q7sPVVVd33OdTN2P9t_spzVwPFP71Aw&usqp=CAU"
  style="width:100%">
</div>
</body>
</html>

Output


on No comments:
Labels: ,

Wednesday, July 26, 2023

how to the apply background image in text in table

                    Background image in Table







Program


<!doctype html>
<html>
<head>
<title>background image with css</title>
<style>
body{
background-image:url('https://wallpapers.com/images/featured/nature-2ygv7ssy2k0lxlzu.jpg');
}
table{
color:red;
margin:auto;
padding:10px;
}
</style>
</head>
<body>
<center> 
<table border="2" height="100px" width="140">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</center>
</table>
</body>
</html>

















































Output

backgroundimg




VISIT link 
And
your extra information



background color program
HTML FORM
 How to apply css background colour

on No comments:
Labels: ,

background image html program

Background image


background img

Information

The <background> attribute in the HTML document is used to specify the background image on a HTML page


Program

<!DOCTYPE html>
<html>


<head>
<title>Welcome To GFG</title>
</head>

<body background="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR--ezbIfR7wOHrezjEfSvSS1U9HMm_YsqjuA&usqp=CAU">
<h2>Image add to page</h2>
<p> <img src=""> IMG tag. use</p>


</body>
</html>


OUTPUT


background img

   VISIT link 👇👇👌👍👍

                And
  your extra information

line break html

drop down button

create easy webpage

create menu card

css column gap property

registration form html


on No comments:
Labels:

how to apply Image tag in html

                           IMAGE  TAG 



Information

 1)  HTML <img > tag is insert image into a web document.image path define/declare  inside    <img > tag.
  2)  <img > tag is empty tag, that mean's no closing tag.
  3) <img > tag have some attributes are use for display image on web page.
  4) The src attribute, src stands for source, that is path of image URL.
  5) Alt Attribute used to define an "alternate text" for an image
  6) This specifies text to be  identified in the image name.
  7) Width and Height specifies the size of image to display on webpage.


Image tag 

 1] display your Image 


Program :-


<!DOCTYPE html>
<html>

<head>
 <title>image tag</title>
</head>

<body>
 <h2>Image add to page</h2>
 <p> <img src=""> IMG tag. use</p>
 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnJ5y4eWr_oeyFSCSpcbMm6Bji0vB1zcutSw&usqp=CAU">
</body>

</html>

OUTPUT



img tag use

2] Fullscreen image in html

Program

<!DOCTYPE html>
<html>

<head>
 <title>image tag</title>
</head>

<body>
<h2>fullscreen img add to the webpage</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScTVw2vhdhhCW71rliHz-OcweYyJDl-Zup5Q&usqp=CAU"
width="900"  height="300" alt="nature">

</body>

</html>

OUTPUT

fullscreen img in web page


VISIT link 
And
your extra information


how to create table in html

split-screen-into-two-or-more-color

css-column-gap-property

on No comments:
Labels: ,
Subscribe to: Posts (Atom)