πWhat is HTML?π
1). αើ HTML αឺαាα’្αី? (What is HTML?)
HTML (Hypertext Markup Language) αាαα័ααា αាαាαα្αាα់ webpage αើ internet។ αាαាαិαីαិαេααួααែααើαα្αើαើα្αីαα្αើααេα αំα័α (website) αូα αា α’α្ααα αូααាα αិαα ្αើααៀα។ αាαូα αាαាαα្αើα្ααាααα៌α្αេααα្αា αិαα្αីαα័ααើα្αីαៀαα ំαៀααៅαូααាααួα។
α ំαុα αំαាα់αααα់ HTML αាα:
- Hypertext: αឺαាαំαα្αាα់αេα αំα័αααៃαៀα។
- Markup: αឺαាαូααែααួααៀαα ំαំα័αα’ោααាααα្αាα។
- Language: αឺαាαូααែααα្ααិαីα’៊ិααឺααែααα់αាα។
α§αាα αα៍αូα HTML αួαα្αា:
<p>This is a paragraph in HTML.</p>
αូααេះαួααα្α ាααា This is a paragraph in HTML. (αាα’α្αααα្αុα HTML)
2). α្ααα្αិα្αីααៃ HTML (A Brief History of HTML)
HTML α្αូααាααα្αើαα‘ើααៅα្αាំ 1991 αោααោα Tim Berners-Lee។ αាαូα αាαាααα្αើααាαាα្αីαួααα្αាα់αុំα្αូα័α។ α ាα់αាំααីαេααោះαα αាαាααែαα្α’αាα ្αើααα αូα αាαាααα្αែααាα្αα្αីααៅα្αុααα αាαុα្αα។
HTML αាααើαα‘ើαα៉ាαα ្αើα:
- HTML 1.0 (1991): αាαំαែαំαួααំαូα។
- HTML 4.01 (1999): αាαα្αើα±្αα្ααើααាαួααុααាαα្αី។
- HTML5 (2014): αាα្αែααα ្α ុα្αα្α, α’ាα αα្α ូααីαេα’ូ αិαα’្αីα្αេαααៀααាα។
α§αាα αα៍αៃ HTML5:
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
HTML5 α’ាα αួααα្α ូααីαេα’ូαោαα្αើααααៅαឹα <video> tag។
3). αួαាαីααα់ HTML α្αុααាαα’αិαα្αα៍αេα αំα័α (The Role of HTML in Web Development)
HTML αឺαូα αាα្α’ឹααៃαេα αំα័α។ αាα្αាα់αុំα្αូα័ααីααៀααៀαα ំα’្αីααៅαើαេα αំα័α។ αα្αាα់αα αើαα្αើαិαីα្αេααៀααើα្αីα្αើα±្ααាαើααៅα្α’ាα αិααាαα ααា។ αាαួαα្αα់αα αាαα្α័α្α α ើααាαα្αោះα ំαុα αំαាα់α:
- HTML: α្αិααៅα្αុααើααំαាα់ααα់αេα αំα័α។
- CSS: αួαα្αើα±្ααាα្α’ាα។
- JavaScript: αួαα្αើα±្ααាαាαααα្ααាα។
α§αាα αα៍αα αាαα្α័α្ααួααៃα―ααាα HTML៖
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css"> <!-- CSS Styling -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple webpage.</p>
<script src="script.js"></script> <!-- JavaScript for Interactivity-->
</body>
</html>
α្αុαα§αាα αα៍αេះ:
- <link> tag αាαូααែαα្αាα់αេα αំα័ααៅαឹαα―ααាα CSS α្αែααាαα្αៅ αើα្αីα្αើα±្ααំα័ααាααូααាαα្α’ាα។
- <script> tag αាαូααែαα្αាα់αៅαឹαα―ααាα JavaScript α្αែααាαα្αៅ αើα្αីα្αើα±្ααំα័ααាαααα្ααាα (αូα αាα៊ូαុααិαααα្ααាαα្αេαα)។
4). αα αាαα្α័α្ααូαα្αាααៃα―ααាα HTML (Basic Structure of an HTML Document)
α―ααាα HTML αាαα្αែααំαាα់ααូα αាα្αាα (head) αិααួα្αួα (body)។ Head αឺαα្αាα់α័α៌αាααែααើααិααើα α ើα body αឺαα្αាα់α’្αីαែααើααើααៅαើαេα αំα័α។ α―ααាα HTML αួααាααាααំαាα់ααូα αា:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>αំαុំαែααα HTML</title>
</head>
<body>
<h1>α្αាααα៍αααាα់ HTML</h1>
<p>αេះαាαំαុំ HTML αួα។</p>
</body>
</html>Explanation:
- <!DOCTYPE html>: αα្α ាααាα―ααាααេះαាα―ααាα HTML5។
- <html>: αាαាαុαំαូααែααាααាαុ HTML α្αេααៀααាំαα’α់αៅα្αុααា។
- <head>: αាααα៌αាαα’ំαីα―ααាα (αូα αាα ំαααើα αិααុαα’α្αα)។
- <meta charset="UTF-8">: αួαα’ោαα―ααាαα’ាα α’ាααាααាα ្αើααាαា។
- <title>: αα្α ាαα ំαααើααៅαើα្αាំααα្ααិαីα’៊ិααឺααែα។
- <body>: αាααាαិαាαែαα’ាα αើααាα, αួααាαα’α្ααα, αូααាα, αិααំαα្αាα់។
5). HTML, CSS, αិα JavaScript៖ ααៀααែααួααាα្αើαាααាαួαα្αា (HTML, CSS, and JavaScript: How They Work Together)
- HTML αួαα្αα់αាα្αាααូαα្αាααα្αាα់αេα αំα័α។
- CSS αួααុααែαα’α្ααα αិααូααាα (αូα αាαα៌, α្αα់, αិααុαα’α្αα)។
- JavaScript αួαα្αើα±្ααេα αំα័αα’ាα αាαααα្ααាα (αូα αាα៊ូαុα, α្αាំααំαេαα័α៌αាα, αិα animations)។
α§αាα αα៍αៃ integration:
<!DOCTYPE html>
<html>
<head>
<title>Styled Webpage</title>
<link rel="stylesheet" href="styles.css"> <!-- External CSS -->
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my webpage.</p>
<button id="btn">Click Me!</button>
<script>
document.getElementById('btn').onclick = function() {
alert('Button clicked!');
};
</script> <!-- Inline JavaScript -->
</body>
</html>6). αាαៈαំαាα់αៃ HTML αែααាαα’α្αα័α (The Importance of Semantic HTML)
HTML αែααាαα’α្αα័ααាαα័ααាαាαα្αើαាα្αα្αឹαα្αូααើα្αីαα៌αាα’្αីαែααើααំαុααα្α ាα។ αាαួαα±្ααុំα្αូα័α αិαααុα្ααα់αាα់αែα ្αាα់αីα’្αីαែααៅαើαេα αំα័α។ αួαα’ោααេα αំα័ααាαα្αួαα្αុααាαα្αើα្αាα់ αិααួαα្αα័α្αα្αែααα (SEO) αើα្αីαααាαិαាαាαα្α’។
α§αាα αα៍α’α្ααααេα៉α់αីαα្αុα HTML αាααូα αា:
- <article>: α្αើαα្αាα់αាαិαាαួααាα ់αោαα‘ែα (αូα αាα្αα់)។
- <header>: αំαៅαៅαើα្αាααៃα្αែα α¬αំα័α។
- <footer>: αំαៅαៅαើα ុαα្αោααៃα្αែα α¬αំα័α។
- <nav>: αំαៅαើα៉ឺαុα (menu) Navigates ។
Non-Semantic HTML:
<div>Content</div>Semantic HTML:<article>Content</article>αេα α្αីααុα (Summary):
αេះαឺαាαាααα្αα់αាαα្αα’ំαី HTML។ αាαូα αាαាαα្αើαាαាαិαេααួααើα្αីα្αាα់αុំα្αូα័ααីααៀααα្α ាαα័α៌αាααៅαើαេα αំα័α។ αើαα្αើαាαាαួαα§αααα៍α្αេααៀααើα្αីα្αើα±្ααេα αំα័ααើααៅα្α’ាα αិααាαα្αួαα្αើα្αាα់។
