Community project by students of the Faculty of Information Technology, University of Moratuwa, Sri Lanka.

10.3. இணையப்பக்கங்களை உருவாக்குவதற்கு மீ உரை சுட்டு மொழி (HTML)யைப் பாவித்தல்.( Uses HTML to create web pages).

HTML இணையத்தளங்களை உருவாக்குவதற்காக மிகவும் பொதுவாகப் பயன்படுத்தப்படும் சுட்டு மொழியாகும். HTML மூலகங்கள் HTML எழுதுவதற்குப் பயன்படுகிறன. HTML மூலகங்கள் என்பது இரண்டு angle  அடைப்புக் குறிகளினுள் எழுதப்படும். இவற்றில் சில ஜோடியாக காணப்படும். உதாரணமாக <h1> start tag ஆகவும் </h1> end tag ஆகவும் காணப்படும். சில தனியாகக் காணப்படும். உதாரணமாக <img>.

HTML இல் இரண்டு பகுதிகள் உண்டு. அவை Head மற்றும் Body ஆகும். Head பகுதியில் இணையப்பக்கம் தொடர்பான தகவல் பதிவு செய்யப்படும். இப்பகுதியிலே தேடல் இயந்திரத்திற்கான குறியீட்டுச் சொற்கள் அல்லது இணையப்பக்கத்தின் தலைப்பு என்பன உள்ளடங்கும். Body பாகத்திலே இணையப்பக்கத்திற்கான தகவல்கள் பதிவு செய்யப்படும்.

இணையத்தளம் ஒன்றை உருவாக்குவதற்கு ஆரம்பப் படிமுறைகள் சில உண்டு. அவையாவன

  1. புதிய Folder ஒன்றை முதலில் உருவாக்கிக் கொள்ள வேண்டும். இந்த Folder இல் இணையத்தளம் தொடர்பான தகவல்கள், படங்கள் என்பன சேமிக்கப்பட்டிருக்கும்.

  1. பின் Note pad ஐ open செய்து பின்வருமாறு type செய்து கொள்ளவும். எழுத்துகளை(text) விருப்பத்திற்கு ஏற்றவாறு மாற்றிக் கொள்ளலாம்.

img1

  1. பின் Note pad ஐ உருவாக்கிக் கொண்ட Folder இனுள் Save செய்து கொள்ளவும். File_Name.html என்ற முறையில் Save செய்து கொள்ளவும்.

  1. பின்பு double click செய்வதன் மூலம் உருவாக்கிய பக்கத்தினை பார்வையிடலாம்.

இணையப்பக்கம் ஒன்றை உருவாக்கும் போது படங்கள் (Graphics), பின்னணிகள் (Background), எழுத்துகளுக்கான நிறங்கள் (Text colours) என்பனவற்றை பயன்படுத்தலாம். இவ்வாறு பயன்படுத்தும் போது எமது தளத்தினுள் உள்நுழையும் பார்வையாளர்களை கவரக்கூடிய விதமாக அமைகிறது. இணையப்பக்கத்தின் பின்னணி நிறத்தை மாற்றுவதற்கு body பாகத்தில் <body bgcolor = “yellow”>, அல்லது <body bgcolor = “#0000FF”>,  என type செய்யவும்.

பின்னணி நிறத்தை மாற்றிய முறையிலேயே எழுத்துக்களின் நிறத்தையும் மாற்ற முடியும். <font color = “red”>, என்ற code இனை பயன்படுத்தி நிறத்தினை மாற்றலாம்.

img2

இணையப்பக்கம் ஒன்றில் Graphics களை add செய்வதன் மூலம் அப்பக்கத்தை மேலும் அழகாகவும் கவர்ச்சிகரமாகவும் மாற்றலாம். இதற்காக, add செய்ய வேண்டிய Graphics களை இணையப்பக்கம் save செய்திருக்கும் folder இனுள் save செய்து கொள்ள வேண்டும். Graphics இனை upload செய்வதற்கு <img src = “ myimage.jpg”> </a>, என்ற code இனை Note pad ல் type செய்ய வேண்டும்.

img3

Add செய்ய வேண்டிய Graphics வேறு folder ல் save செய்து இருந்தால் பின்வருமாறு type செய்ய வேண்டும். Images என்ற folder இனுள் save செய்யப்பட்டுள்ளது எனக் கொண்டால் “ <img src = “ /images/myimage.jpg”> </a>,  என்று அமையும்.

“Links” என்பது ஒரு இணையப்பக்கத்தை இன்னொரு இணையப்பக்கத்துடன் தொடர்பு படுத்துவதாகும். இணையப்பக்கம் ஒன்றினுள் Link களை add செய்வதன் மூலம் மிகவும் இலகுவாக மற்றுமொரு இணையத்தளத்தினுள் பிரவேசிக்க முடியும்.

உருவாக்குகின்ற இணையத்தளத்தின் Home page ல் இருந்து வேறு பக்கங்களுக்கு பிரவேசிக்க வேண்டுமாயின் முதலில் தேவையான பக்கங்களை HTML ல் உருவாக்கிக் கொள்ள வேண்டும். அப்பக்கங்களை Home page save செய்யப்பட்டிருக்கும் folder இலேயே save செய்ய வேண்டும். பின் home page இற்குரிய note pad ல் <a href = “Page1.html”> Page 1 </a> , என்று type செய்ய வேண்டும். இதில் Page1.html என்பது பிரவேசிக்க வேண்டிய பக்கம் save செய்திருக்கும் முறை, Page 1 என்பது home page ல் click செய்ய வேண்டிய சொல்.

img4

ஒரு இணையத்தளத்தை link செய்ய வேண்டுமாயின் <a href= “http://www.google.com”> Click here </a>, என type செய்ய வேண்டும்.

எழுத்துகளுக்கு பதிலாக graphics களையும் Link செய்வதற்குப் பயன்படுத்தலாம். Link இற்கு பயன்படுத்தும் graphics இனை இணையப்பக்கம் save செய்துள்ள folder ல் save செய்ய வேண்டும்.

img5

இணையப்பக்கத்தினுள் paragraph ஒன்றினை புகுத்துவதற்கு<p>, மற்றும் <br>, என்ற codes பயன்படும். <p>, என்பது புதிய paragraph ஒன்றின் ஆரம்பத்தை குறிக்கும். <br>, என்பது ஒரு பந்தியிலேயே புதிய வரி ஒன்றை குறிக்கும்.

img6

<center>, <p align left>, <p align right>என்பவற்றை பயன்படுத்தி alignments அமைத்துக் கொள்ளலாம். மற்றும் <font size> ,<b>, <i>, <u>, என்ற codes மூலம் text ன் size மற்றும் style களை மாற்றிக் கொள்ளலாம்.

img7

Demo Page

demo

Demo பக்கத்துக்கு செல்ல இங்கே  click செய்யவும்.

Source Code

 

The following two tabs change content below.

Kasthuri Shanmugalingam

Student at Faculty of Information Technology, University of Moratuwa

Leave a Reply

Your email address will not be published. Required fields are marked *