HTML in Tamil
HTML language என்பது மிகவும் பிரபலமான மற்றும் எளிமையான programming language
ஆகும். இது web designing செய்வதற்காகவே மேம்படுத்த பட்ட மொழி ஆகும். மேலும்
இதன் சிறப்பு ஆம்சமே இதை மிகவும் எளிதாக அனைவராலும்கற்றுக்கொள்ள முடியும். எனவே
நாம் இந்த பகுதியில் HTML language - ன் அடிப்படை யான அனைத்து விஷயத்தையும்
கற்றுக்கொள்ளலாம்.
HTML - Hypertext mark-up Language
Basic Tags
Tags என்பது நம்முடைய website ஐ எளிமையாக தனிப்பயனாக்கலாம்(customize).
அதற்காக இந்த tags பயன்படுத்த படுகிறது.
<!DOCTYPE>- இது document types ஐ define(தெளிவு) படுத்த
உதவுகிறது.
<body> - இதில் பல்வேறு data களை உள் அடகியதாகும்.
<!--இதில் நாம் Comment டிர் காக பயன் படுத்த வேண்டும்.-->
<head> - இதில் தான் நாம் document details ஐ சேமிக்க வேண்டும்.
<title> - ithu நாம் பயன்படுத்தும் web browser இல் ,அதன் tab இல்
தென்படும்.
<h1>- என்பது நாம் பயன்படுத்தும் எழுத்துகளின் size ஐ பொறுத்து
அமையும்.
Example h2 என்றால் சிறிய அளவில் size குறையும்.
<p> - என்பது paragraph ஐ குறிக்கும்.
<link rel="stylesheet" type="textclass" href="helloworld.css">
மேலும் இதை பயன்படுத்தி நாம் css என்ற மற்றொரு page நாம் connect
செய்யலாம்.css என்பது cascading style sheet என்று கூறுவர்.
<footer> - இந்த tag ஐ நாம் copyright என்ற பகுதிக்காக பயன் படுத்த
வேண்டும்.
<img> - image ஐ நாம் web site இல் insert செய்ய உதவும்.
<div> - என்ற tag இன்னொரு section ஐ அமைக்க உதவும்.
<table> - table ஐ உருவாக்க உதவும்.
<tr> - table row வை உருவாகும்.
<th> - table heading ஐ அமைக்க உதவும்.
<br> - ஒரு line ஐ break செய்து அடுத்த line கு கொண்டு செல்லும்.
<td> - table data's ஐ insert செய்ய உதவி செய்யும்.
மேல் கண்ட வற்றை வைத்து நாம் சில எடுத்துக்காட்டுகளை காண்போம்.
Example1:
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
</head>
<body>
<h1> Welcome to HTML Tamil Learning point</h1>
<table align="center">
<tr>
<th>s.no</th>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Anand</td>
<td>30k</td>
</tr>
<tr>
<td>2</td>
<td>Babu</td>
<td>45k</td>
</tr>
</table>
</body>
</html>
output :
மேலே உள்ளவாறுு நாம் அனைத்து tag யயும் பயன் படுத்தி ஒரு simple website ஐ
உருவாகலாம்.
மேலும் இதில் html உடன் css ஐ பற்றியும் காணலாம்.முதலில் css என்பது Cascading
Style Sheet என்று கூறுவர். இதை பயன்படுத்தி தான் நாம் ஒரு website ஐ
design செய்ய முடியும். அதை பற்றி சிறிய அளவில் நாம் காணலாம்.
Example
body
{
background-image:url("")
background-position:left-bottom;
background-size:100% 100%
}
மேலே குறிப்பிட்ட உள்ளவற்றில் body என்பது selector ஆகும். இது html coding
இல் எதை வேண்டுமானாலும் mention செய்து. பின் அதை desing செய்யலாம்.
{ text - align:
center;}
|
|
|
Property. Declaration. Value
நாம் body என்பதை body content ஐ select செய்யவதாக பயன் படுத்த
வேண்டும்.
எப்படி நாம் html udan CSS ஐ லிங்க் செய்வது??
அதற்காக நாம் ஒரு லிங்க் ஐ head tag உள்ளே mention. செய்ய வேண்டும்.
<link rel="stylesheet" type="text/css" href="filecss.css">
மேலே உள்ள லிங்க் ஐ தான் நாம் பயன்படுத்த வேண்டும். அதில் குறிப்பிட்டு
உள்ளவாறு செய்து பின் href இல் அதன் நாம் மற்றும் அதன் type ஐயும் குறிப்பிட
வேண்டும்.
DOMAIN
பின் நாம் ஒரு website முழுவதுமாக create செய்த பிறகு நாம் domain என்ற ஒன்றை
பதிவு செய்ய வேண்டும்.
அவற்றை பற்றி சிறிய அளவில் காண்போம்.
DOMAIN மூன்று பகுதிகளாக பிரிக்கப்பட்டுள்ளது.
- Third-level domain
- Second level domain
- Top-level domain
Example
www.newstech360degree.tech
இதில் www என்பது sub domain என்றும்
newstech360degree domain name என்றும்
மேலும் கடைசியாக உள்ள .tech or .com என்பது top-level domain என்று
வரையருகப்பட்டு உள்ளது.
மேலும் இது போன்ற சுவாரசியமான coding ஐ கற்று கொல்லுங்கள்.நாம் ஒரு simple
website ஐ create செய்யலாம்.மேலும் css பற்றியும் கற்றுக்கொள்ளலாம்.
<ul>unordered list
<li> list item's
<a> creates a hyperlink
முதலில், unordered list ஐ
உருவாகிய பிறகு நாம் list item's ஐ create செய்ய வேண்டும்.
For example,
<html>
<head>
<title>Example for ui and li</title>
</head>
<body>
<ul>
<li><a
href="page1.html">Home</a></li>
<li><a href="page2.html">About</a></li>
<li><a
href="page3.html">Contact</a></li>
</body>
</html>
நாம் முதலில் navigation வகைகளை காண்போம்.
Navigation என்பது நாம் தமிழிளில் வழி செயலி என்று கூறுவர். இதன் அர்த்தம்
நாம் ஒரு பகுதியில் இருந்து அடுத்த பகுதிக்கு செல்வதாக பயன்படுத்தும் ஒரு கருவி
என்று பொருள்.
Navigation types.
Sidebar static navigation
Navigation typesஇல் இது தான் மிகவும் சுலபமான வழி செலுத்தி ஆக
கருதப்படுகிறது. இதில் அனைத்து லிங்க் களும் தெளிவாக இருக்கும்.இதை நாம் மூன்று
கோடுகளில் குறிப்பிடலாம்.
Hamburger menu
இது பொதுவாக மேல் இடது பக்கத்தில் அமைந்து இருக்கும். இதை வழிசெயல் செய்வதில்
மிகவும் எளிதாக இருக்கும்.
Drop down menu
இந்த வலிசெயல் முறையில் அனைத்து அனைத்து இணைப்புகளும் விரிவாக்கம்
அடையும்.மேலும் இதை பயன்படுத்துவதில் மிகவும் சுலபமாக இருக்கும்.
Layout types
Layout என்பது நாம் முடைய இணையதளம் எப்படி தோன்றும் அதாவது எப்படி
இருக்கும் என்பதை நாம் நிரலாக்க தளத்தை பயன்படுத்தி
மாட்ருவதாகும்.
1) column layout
இது எளிமையாக மற்றும் வசதியான வடிவமைப்பாகா கருதப்படுகிறது.
இதில் எளிமையான வழி செயல் அமைப்பும் உள்ளது.
இதன் வடிவமைப்பு கவனம் முழுவதும் இணைய தளத்தின் மைய பகுதியில் இருக்கும்்.
2)Full screen image
இந்த வடிவமைப்பு முழுவதுமாக படம் கலின் உதவியாக தான் அமைத்து
இருக்கும்.இதில் அனைத்து உரை களும் படத்திற்கு மேலாக தான் அமைந்து இருக்கும்
3)Grid layout
இதன் தகவமைப்பு செய்தி தாள்களில் வருவது போல அமைந்து இருக்கும்.இந்த அமைப்பு
எளிதாக மற்றவர்களுக்கு எளிமையாக புரியும் வகையில் அமைந்து இருக்கும்.
4)Headline & Thumbnail
பெரிய ஒரு உரை ஐ ஒரு சிறிய படத்தின் மூலம் வடிவமைப்பு செய்யவதாகும்.
إرسال تعليق
إرسال تعليق