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)
<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>
</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>
</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>
</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>
</html>