HTML Layout
html page ekaka Multicolums Layout hadanna puluwan krama 4k thiyenawa
- CSS framework learn here
- CSS float property learn here
- CSS flexbox learn here
- CSS grid learn here
| HTML Semantic |
|---|
HTML page ekaka විවිධ කොටස් අර්ථ දැක්වීමට භාවිතා කළ හැකි අර්ථකථන (semantic) අංග කිහිපයක් ඇත
1.<main>
2.<header>
3.<nav>
4.<section>
5.<article>
6.<aside>
7.<footer>
8.<details>
9.<summary>
10.<figure>
11.<figcaption>
| 1.<main> |
|---|
1.<main>
<html>
<body>
<h1>The main element</h1>
<main>
<h1>Most Popular Browser</h1>
<p>Chrome the most used browsers today.</p>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
</main>
</body>
</html>- <main> element eka තුළ ඇති අන්තර්ගතය ema html document eke අනන්‍ය deyak විය යුතුය.
- sidebars, navigation links, copyright information, site logos, and search forms wage ewa <main> tag eka athule athulath nowiya yuthuya
- document ekaka <main> මූලද්‍රව්‍ය එකකට වඩා නොතිබිය යුතුය. <main> element eka <article>, <aside>, <footer>, <header>, හෝ <nav> element ekakin පැවත එන්නක් නොවිය යුතුය.
| 2.<header> |
|---|
2.<header>
<html>
<body>
<header>
<h1>Hello World</h1>
<p>Posted by John Doe</p>
<p>How to mfast learn html and css</p>
</header>
</body>
</html>- <header> html document eke udama thiyenne header eka
- eka html document ekaka <header> element කිහිපයක් තිබිය හැකිය. namuth <header> <footer>, <address> හෝ වෙනත් <header> element ekak තුළ තිබිය නොහැක.
<header Element ekaka සාමාන්‍යයෙන් අඩංගු වන්නේ:
- heading අංග එකක් හෝ කිහිපයක් (<h1> – <h6>)
- logo or icon
- Navigation links
- authorship(කර්තෘත්ව) information
| 3.<nav> |
|---|
3.<nav>
<html>
<body>
<h1>The nav element</h1>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>
</html>
- <nav> links කට්ටලයක් අර්ථ දක්වයි
- html document eke syaluma link <nav> element eke thibimata awashaya nehe. pradana navigation link කට්ටල pamanay <nav> element ekata athulath kala yuththe
| 4.<section> |
|---|
4.<section>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h4>My Email Address</h4>
<p>[email protected]</p>
</section>
</body>
</html>- <section> eka document kotas washayen අර්ථ dakway
- example = home page eke ekinekata wenas kotas 5k thiyenam section 5k liyanna wenawa
- meke hari wistharaya hoyaganna nehe hariyatama eth meka godak bawitha karanwa code karaddi (loku html code liyaddi section kada kada liyanne section1,section 2 widiyata)
<section> Element ekak භාවිතා කළ හැකි අවස්ථා
- Chapters (පරිච්ඡේද)
- Introduction (හැඳින්වීම)
- News items (පුවත් wisthara)
- Contact information (contact තොරතුරු)
| 5.<article> (ලිපියක්) |
|---|
5.<article>
<html>
<body>
<h1>The article element</h1>
<article><!--blog post-->
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article> <!--user comment-->
<h2>Crstiano Ronaldo</h2>
<p> Cocacola is very bad drink</p>
</article>
</body>
</html>
- <article> ස්වාධීන, ස්වයං අන්තර්ගත නිර්වචනය කරයි
- <article> (ලිපියක්) තනිවම අර්ථවත් විය යුතු අතර එය අඩවියේ ඉතිරි කොටස් වලින් wen kara haduna gatha හැකි විය යුතුය.
<article> Element ekak භාවිතා කළ හැකි අවස්ථා
- Forum posts
- Blog posts
- User comments
- Product cards
- Newspaper articles (පුවත්පත් ලිපි)
| 6.<aside> |
|---|
6.<aside>
<html>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
</body>
</html>- <aside> eke අන්තර්ගතය අවට අන්තර්ගතයට වක්‍රව සම්බන්ධ විය යුතුය
- <aside> අන්තර්ගතය බොහෝ විට ලේඛනයක පැති තීරුවක් (sidebar) ලෙස තබා ඇත
- Example = me code eke paragraph eke thiyena content ekata wakrawa <aside> eke content eka sambanda wiya yuthuya
| 7.<footer> |
|---|
7.<footer>
<html>
<body>
<h1>The footer element</h1>
<footer>
<p>Author: Hege Refsnes<br>
<a href="mailto:[email protected]">[email protected]</a></p>
<a href="https://www.w3schools.com/" >Copyright 1999-2025</a>
</footer>
</body>
</html>- <footer> eka page ekaka yatama thiyena anthargathaya footer eka lesa නිර්වචනය කරයි
- footer ekaka yata thiyena wisthra mekata adala wenne
<footer> Element ekak භාවිතා කළ හැකි අවස්ථා
- authorship information (කර්තෘත්ව තොරතුරු)
- copyright information
- contact information
- sitemap
- related documents ( wedagath page)
| 8.<details> and 9.<summary> |
|---|
8.<details> and 9.<summary>
<html>
<body>
<h1>The detalis element</h1>
<details open>
<summary> Hello World </summary>
<p>HTML learning Easy Web development</p>
</details>
</body>
</html>- <details> Question and answer walata bawitha karanne ewage arena wahena ekak hadana eka meken wenne (default, විජට් වසා ඇත)
- <summary> tag eka <details> tag eka athule bawitha wenne. <details> tag eke create wena විජට් ekata uda heading eka labadenne meken ( heading eka view/hide karanna puluwan)
| open | default විජට් eka wasa ඇත. eya default open kara thibimata meya bawitha kala hekiya |
| 10.<figure> and 11.<figcaption> |
|---|
10.<figure> and 11.<figcaption>
<html>
<body>
<h1>The figure and figcaption element</h1>
<figure>
<img src="facebook.png" alt="facebook logo" style="width:30%">
<img src="instergram.jpeg" alt="instergram logo" style="width:30%">
<img src="youtube.png" alt="youtube logo" style="width:30%">
<figcaption> Facebook,instergram,youtube Website Logo</figcaption>
</figure>
</body>
</html>- <figure> tag eka magin images, tables, video clips, audio clips code listings wage ewa ekata bahaluwak lesa bawitha karanna puluwan ( meka wedagath wenne search engine walata)
- Example = image godak ekata ekathu karaddi <figure> tag eka athule e image tika add karanna puluwan ethakota search engine walata hoday
- <figcaption> me tag eka magin <figure> eka athule thiyena siyaluma content walata thani text ekak labadenna puluwan (eka seo/search engine walata godak hoday)