HTML/CSS/Basic Tags/hr

Материал из Web эксперт
Перейти к: навигация, поиск

Horizontal rule

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Horizontal rule</title>
</head>
<body>
  <h2>Customer feedback</h2>
  <p>Our loyal customers.</p>
  <hr />
  <h2>Reviews</h2>

</body>
</html>



Horizontal Rule Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Horizontal Rule Example</TITLE>
</HEAD>
<BODY>
<P>HR with size of 10</P>
<HR SIZE="10">
<P>HR with width of 50% and no shading</P>
<HR WIDTH="50%" NOSHADE>
<P>Width of 200 pixels, size of 3 pixels, and no shade</P>
<HR WIDTH="200" SIZE="3" NOSHADE>
<P>Width of 100, aligned right</P>
<HR ALIGN=RIGHT WIDTH="100">
<P>Width of 100, aligned left</P>
<HR ALIGN="LEFT" WIDTH="100">
<P>Width of 100, aligned center</P>
<HR ALIGN="CENTER" WIDTH="100">
</BODY>
</HTML>



Horizontal Rule with image

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .hr {
  height: 40px;
  width: 200px;
  margin: 0 auto 0 auto;
  border: 0;
  background: url("http://www.wbex.ru/style/logo.png") repeat-x left center;
  line-height: 1px;
  font-size: 1px;
}
* .hr hr {
  display: none;
}
</style>
</head>
<body>
    <div class="hr"><hr /></div> 
</body>
</html>



"hr" creates a horizontal rule

    
<html>
<head>
<title>hr element example</title>
</head>
<body>Text
     <hr id="firstRule" noshade color="blue">
     Text
     <hr id="firstRule" color="blue">
     <br>
     <br>
     <br>
     <br>
     <br>
     <br>
     www.wbex.ru
     <hr>
</body>
</html>



Set background color for

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
hr {
 width: 10px;
 height: 10px;
 background-color: #777;
}
</style>
</head>
<body>
<hr/>
  <p>This is a text</p>
  
  
</body>
</html>



Set line width, size and shade together

<html>
<body>
<hr width=50% size=10 noshade>
</body>
</html>



Set width and height for

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
hr {
 width: 10px;
 height: 10px;
 background-color: #777;
}
</style>
</head>
<body>
<hr/>
  <p>This is a text</p>
  
  
</body>
</html>



The hr tag defines a horizontal rule

<html>
<body>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
</body>
</html>