HTML практика

1.



<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>


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


</body>
</html>


использовав эти теги, мы получаем

Page Title

This is a Heading

This is a paragraph.




2.



<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>


использовав эти теги, мы получаем

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6



3.



<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>


использовав эти теги, мы получаем

Hello World

Hello World

Hello World



4.



<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div> 

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

использовав эти теги, мы получаем 






London


London is the capital of England.


 




Paris


Paris is the capital of France.







Tokyo


Tokyo is the capital of Japan.


5.



<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>


использовав эти теги, мы получаем 




HTML Table




  

    Company
    Contact
    Country
  

  

    Alfreds Futterkiste
    Maria Anders
    Germany
  

  

    Centro comercial Moctezuma
    Francisco Chang
    Mexico
  

  

    Ernst Handel
    Roland Mendel
    Austria
  

  

    Island Trading
    Helen Bennett
    UK
  

  

    Laughing Bacchus Winecellars
    Yoshi Tannamuri
    Canada
  

  

    Magazzini Alimentari Riuniti
    Giovanni Rovelli
    Italy
Подписаться на: Комментарии (Atom)