ایچ تی ام ال بروض

ਵੈੱਬਸਾਈਟ ਅਕਸਰ ਬਹੁ-ਸਤਰਾ (ਮੈਗਜ਼ੀਨ ਅਤੇ ਅਖ਼ਬਾਰ ਵਰਗੇ) ਵਿੱਚ ਸਮੱਗਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀਆਂ ਹਨ。

HTML ਵਿੱਚ <div> ਈਲੈਮੈਂਟ ਦੀ ਵਰਤੋਂ

ਨੋਟਸ:<div> ਈਲੈਮੈਂਟ ਮੋਢੇ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਸ ਨਾਲ ਸੁਲੈਸ਼ਨ ਨਾਲ CSS ਰਾਹੀਂ ਇਸ ਨੂੰ ਸਥਾਨਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

ਇਹ ਉਦਾਹਰਣ ਚਾਰ <div> ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਹੁ-ਸਤਰਾ ਬੈਂਕਾਈ ਬਣਾਉਂਦਾ ਹੈ:

ਇੱਕ ਉਦਾਹਰਣ

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
ਲੰਡਨ ਇੰਗਲੈਂਡ ਦੀ ਰਾਜਧਾਨੀ ਹੈ। ਇਹ ਯੂਨਾਈਟਿਡ ਕਿੰਗਡਮ ਦਾ ਸਭ ਤੋਂ ਅਧਿਕ ਜਨਸੰਖਿਆ ਵਾਲਾ ਸ਼ਹਿਰ ਹੈ,
13 ਮਿਲੀਅਨ ਤੋਂ ਵੱਧ ਨਿਵਾਸੀਆਂ ਵਾਲੇ ਮੈਟਰੋਪੋਲਿਟਨ ਖੇਤਰ ਨਾਲ.
</p>
<p>
ਥਾਮਸ ਨਦੀ ਦੇ ਉੱਪਰ ਸਥਿਤ, ਲੰਡਨ ਦੋ ਸਦੀਆਂ ਤੋਂ ਇੱਕ ਪ੍ਰਮੁੱਖ ਬਸਤੀ ਰਹਿ ਗਿਆ ਹੈ,
ਇਸ ਦੀ ਇਤਿਹਾਸ ਰੋਮਾਂ ਦੇ ਨਾਮ ਦੇ ਰਾਹੀਂ ਸ਼ੁਰੂ ਹੋਈ ਹੈ, ਜਿਸ ਨੂੰ ਲੰਡਨੀਅਮ ਕਿਹਾ ਗਿਆ ਸੀ.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS：

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

HTML5 ਦੀ ਵਰਤੋਂ ਵਾਲੀ ਵੈਬਸਾਈਟ ਦਾ ਬੈਂਕਾਈ

HTML5 ਦੇ ਨਵੇਂ ਸੈਮੈਂਟਿਕ ਤੱਤ ਵੈਬਸਾਈਟ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਦਾ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ:

ایچ تی ام ال5 معنوی عناصر

header ਦਸਤਾਵੇਜ਼ ਜਾਂ ਖੇਤਰ ਦੇ ਹੈਡਰ ਨਿਰਧਾਰਿਤ ਕਰੋ
nav ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕ ਦੇ ਕੰਟੇਨਰ ਨਿਰਧਾਰਿਤ ਕਰੋ
section ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਖੇਤਰ ਨਿਰਧਾਰਿਤ ਕਰੋ
article ਸਵੈਨਿਰਧਾਰੀ ਅਲੱਗ ਅਤੇ ਸਮਾਵੇਸ਼ੀ ਲੇਖ ਨਿਰਧਾਰਿਤ ਕਰੋ
aside ਸਮੱਗਰੀ ਤੋਂ ਬਾਹਰ ਦੇ ਵੇਰਵੇ ਨਿਰਧਾਰਿਤ ਕਰੋ (ਉਦਾਹਰਣ ਵਜੋਂ ਪਾਰਸਪਰਿਕ ਪੱਟੀ)
footer ਦਸਤਾਵੇਜ਼ ਜਾਂ ਖੇਤਰ ਦੇ ਪੇਜਫੂੱਟ ਨਿਰਧਾਰਿਤ ਕਰੋ
details ਅਤਿਰਿਕਤ ਵੇਰਵੇ ਨਿਰਧਾਰਿਤ ਕਰੋ
summary details ਤੱਤ ਦੀ ਟਾਈਟਲ ਨਿਰਧਾਰਿਤ ਕਰੋ

ਇਹ ਉਦਾਹਰਣ <header>, <nav>, <section>, ਅਤੇ <footer> ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਹੁ-ਸਤਰਾ ਬੈਂਕਾਈ ਬਣਾਉਂਦਾ ਹੈ:

ਇੱਕ ਉਦਾਹਰਣ

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
ਲੰਡਨ ਇੰਗਲੈਂਡ ਦੀ ਰਾਜਧਾਨੀ ਹੈ। ਇਹ ਯੂਨਾਈਟਿਡ ਕਿੰਗਡਮ ਦਾ ਸਭ ਤੋਂ ਅਧਿਕ ਜਨਸੰਖਿਆ ਵਾਲਾ ਸ਼ਹਿਰ ਹੈ,
13 ਮਿਲੀਅਨ ਤੋਂ ਵੱਧ ਨਿਵਾਸੀਆਂ ਵਾਲੇ ਮੈਟਰੋਪੋਲਿਟਨ ਖੇਤਰ ਨਾਲ.
</p>
<p>
ਥਾਮਸ ਨਦੀ ਦੇ ਉੱਪਰ ਸਥਿਤ, ਲੰਡਨ ਦੋ ਸਦੀਆਂ ਤੋਂ ਇੱਕ ਪ੍ਰਮੁੱਖ ਬਸਤੀ ਰਹਿ ਗਿਆ ਹੈ,
ਇਸ ਦੀ ਇਤਿਹਾਸ ਰੋਮਾਂ ਦੇ ਨਾਮ ਦੇ ਰਾਹੀਂ ਸ਼ੁਰੂ ਹੋਈ ਹੈ, ਜਿਸ ਨੂੰ ਲੰਡਨੀਅਮ ਕਿਹਾ ਗਿਆ ਸੀ.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

HTML ਵਿੱਚ ਟੇਬਲ ਲੇਆਉਟ

ਨੋਟਸ:<table> ਐਲੀਮੈਂਟ ਲੇਆਉਟ ਟੂਲ ਵਜੋਂ ਨਹੀਂ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ。

<table> ਐਲੀਮੈਂਟ ਦਾ ਕੰਮ ਤੇਲੀਕਰਨ ਸਮਾਚਾਰ ਦਿਖਾਉਣਾ ਹੈ。

HTML <table> ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਨਾਲ ਬਾਹਰੀ ਕੀਮਤ ਦਿਖਾਉਣ ਦਾ ਕੰਮ ਕਰ ਸਕਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਕੈਸਸ ਸਟਾਈਲ ਨਾਲ ਸੈਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ:

ਇੱਕ ਉਦਾਹਰਣ

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>
</body>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>