Examples

Rashmi Mishra
1 minute read
0

 Examples

Example  HTML Elements:

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html> 

Output:

 

Attributes

Examole 1( href Attribute)

<!DOCTYPE html>

<html>

<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.w3schools.com">Visit W3Schools</a>

</body>

</html>

 

Output:

 

Examole 2( src Attribute) 

<!DOCTYPE html>

<html>

<body>

<h2>The src Attribute</h2>

<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>

</html> 

Output:

 

 

Examole 3( width and height Attribute) 

<!DOCTYPE html>

<html>

<body>

<h2>Width and Height Attributes</h2>

<p>The width and height attributes of the img tag, defines the width and height of the image:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>

</html>

Output:

 

Examole 4( alt  Attribute) 

<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get an understanding of what the image contains:</p>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
</body>
</html>

Output:

 

 

Examole 5( style Attribute)

 <!DOCTYPE html>

<html>

<body>

<h2>The style Attribute</h2>

<p>The style attribute is used to add styles to an element, such as color:</p>

<p style="color:red;">This is a red paragraph.</p>

</body>

</html> 

Output:

 

 

Examole 6( style Attribute) 

<!DOCTYPE html>

<html>

<body> 

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>

 </body>

</html>

Output:

Example 7( style Attribute) 

Background color is set with style attribute.

<!DOCTYPE html>

<html>

<body style="background-color:powderblue;"> 

<h1>This is a heading</h1>

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

</body>

</html>

Output:

 

Example 8( style Attribute) 

Set background color for two different elements: 

<!DOCTYPE html>

<html>

<body> 

<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>

 </body>

</html>

Output:

 

Example 9: The CSS color property defines the text color for an HTML element:

<!DOCTYPE html>

<html>

<body>

 

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>

</html>

 Output:


Example 10 : The CSS font-family property defines the font to be used for an HTML element

<!DOCTYPE html>

<html>

<body>

 

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

 

</body>

</html>


Output:


Example 11:The CSS font-size property defines the text size for an HTML element:

<!DOCTYPE html>

<html>

<body> 

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

 </body>

</html>

Output:


Example 11:The CSS text-align property defines the horizontal text alignment for an HTML element:

<!DOCTYPE html>

<html>

<body>

 

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

 </body>

</html>

 Output:


Post a Comment

0Comments

Post a Comment (0)