10 Rêbazên Di HTML5-ê de Nasandin Ku Tecrûbeya Bikarhêner Bi Dramatîk Pêşveçûn
Em alîkariyê dikin a Saas pargîdanî di xweşbînkirina platforma xwe de ji bo lêgerîna organîk (SEO)… û gava ku me koda ji bo şablonên derketinê yên wan nihêrî, me tavilê ferq kir ku wan qet rêbazên HTML5-ê ji bo derketinên rûpela xwe venekirine.
HTML5 ji bo ezmûna bikarhêner pêveçûnek girîng bû (UX) di pêşveçûna malperê de. Wê gelek rêbaz û tagên nû destnîşan kir ku kapasîteyên rûpelên malperê zêde kirin. Li vir navnîşek gulebarkirî ya deh rêbaz û etîketên sereke yên HTML5 bi ravekirin û nimûneyên kodê heye:
- Hêmanên Semantîk: HTML5 hêmanên semantîk destnîşan kir ku avahiyek watedartir ji naveroka malperê re peyda dike, gihîştinê çêtir dike û SEO.
<header>
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article>
<footer>
<p>© 2023 WebsiteName</p>
</footer>
- Video û Audio: HTML5 destnîşan kir
<video>
û<audio>
hêmanan, hêsantir dike ku meriv naveroka multimedia bêyî ku xwe bispêre pêvekên sêyemîn.
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
- Çîta qeyikan: The
<canvas>
element destûrê dide grafîk û anîmasyonên dînamîkî bi navgîniya JavaScriptê, taybetmendiyên înteraktîf zêde dike.
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// Draw shapes and animations here using JavaScript.
</script>
- Pêşveçûnên Form: HTML5 cureyên têketina nû zêde kir (mînak, e-name, URL) û taybetmendiyên (mînak,
required
,pattern
) ji bo pejirandina formê û ezmûna bikarhêner a çêtir.
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit" value="Submit">
</form>
- Geolocation: HTML5 malperan dihêle ku xwe bigihînin cîhê erdnîgarî yê bikarhêner, ji bo karûbarên cîhê-based îmkanan vedike.
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
// Use latitude and longitude data here.
});
}
- Stasyona Herêmî: HTML5 destnîşan kir
localStorage
ji bo hilanînê-aliyekê xerîdar, malperan dihêle ku daneyên herêmî bêyî ku xwe bispêrin cookie-yan hilînin.
// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');
- Storage Storage: Li kêleka
localStorage
, HTML5 destnîşan kirsessionStorage
ji bo hilanîna daneyên danişîn-taybet, ku dema danişîn biqede tê paqij kirin.
// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');
- Drag û Drop : HTML5 ji bo danûstendinên kaş-û-davêjê piştgirîya xwemalî peyda dike, ku pêkanîna navbeynkên xwerû hêsantir dike.
<div id="dragTarget" draggable="true">Drag me!</div>
<div id="dropTarget">Drop here!</div>
<script>
const dragTarget = document.getElementById('dragTarget');
const dropTarget = document.getElementById('dropTarget');
dragTarget.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Dragged item');
});
dropTarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
dropTarget.addEventListener('drop', function(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text');
// Handle the dropped item here.
});
</script>
- Wêneyên Bersiv: HTML5 destnîşan kir
<picture>
hêman û yasrcset
taybetmendî ji bo radestkirina wêneyên guncan li ser bingeha mezinahî û çareseriya ekranê.
<picture>
<source srcset="image-large.jpg" media="(min-width: 1200px)">
<source srcset="image-medium.jpg" media="(min-width: 768px)">
<img src="image-small.jpg" alt="Responsive Image">
</picture>
- Details û Kurte: The
<details>
û<summary>
hêmanan dihêle hûn beşên naverokê yên berbelav biafirînin, rêxistina belgeyê zêde bikin.
<details>
<summary>Click to expand</summary>
<p>Additional content goes here...</p>
</details>
Van taybetmendiyên din ên HTML5 bêtir kapasîteyên pêşkeftina malperê çêtir kirin, ji pêşdebiran re amûran peyda dikin da ku bêtir malperên înteraktîf û bikarhêner-heval biafirînin.