HTML இணையத்தளங்களை உருவாக்குவதற்காக மிகவும் பொதுவாகப் பயன்படுத்தப்படும் சுட்டு மொழியாகும். HTML மூலகங்கள் HTML எழுதுவதற்குப் பயன்படுகிறன. HTML மூலகங்கள் என்பது இரண்டு angle அடைப்புக் குறிகளினுள் எழுதப்படும். இவற்றில் சில ஜோடியாக காணப்படும். உதாரணமாக <h1> start tag ஆகவும் </h1> end tag ஆகவும் காணப்படும். சில தனியாகக் காணப்படும். உதாரணமாக <img>.
HTML இல் இரண்டு பகுதிகள் உண்டு. அவை Head மற்றும் Body ஆகும். Head பகுதியில் இணையப்பக்கம் தொடர்பான தகவல் பதிவு செய்யப்படும். இப்பகுதியிலே தேடல் இயந்திரத்திற்கான குறியீட்டுச் சொற்கள் அல்லது இணையப்பக்கத்தின் தலைப்பு என்பன உள்ளடங்கும். Body பாகத்திலே இணையப்பக்கத்திற்கான தகவல்கள் பதிவு செய்யப்படும்.
இணையத்தளம் ஒன்றை உருவாக்குவதற்கு ஆரம்பப் படிமுறைகள் சில உண்டு. அவையாவன
புதிய Folder ஒன்றை முதலில் உருவாக்கிக் கொள்ள வேண்டும். இந்த Folder இல் இணையத்தளம் தொடர்பான தகவல்கள், படங்கள் என்பன சேமிக்கப்பட்டிருக்கும்.
பின் Note pad ஐ open செய்து பின்வருமாறு type செய்து கொள்ளவும். எழுத்துகளை(text) விருப்பத்திற்கு ஏற்றவாறு மாற்றிக் கொள்ளலாம்.
| <html> <head> <title> My own home page </title> </head> <body> <h1> IT Kurukulam </h1> </body> </html> |
பின் Note pad ஐ உருவாக்கிக் கொண்ட Folder இனுள் Save செய்து கொள்ளவும். File_Name.html என்ற முறையில் Save செய்து கொள்ளவும்.
பின்பு double click செய்வதன் மூலம் உருவாக்கிய பக்கத்தினை பார்வையிடலாம்.
இணையப்பக்கம் ஒன்றை உருவாக்கும் போது படங்கள் (Graphics), பின்னணிகள் (Background), எழுத்துகளுக்கான நிறங்கள் (Text colours) என்பனவற்றை பயன்படுத்தலாம். இவ்வாறு பயன்படுத்தும் போது எமது தளத்தினுள் உள்நுழையும் பார்வையாளர்களை கவரக்கூடிய விதமாக அமைகிறது. இணையப்பக்கத்தின் பின்னணி நிறத்தை மாற்றுவதற்கு body பாகத்தில் <body bgcolor = "yellow">, அல்லது <body bgcolor = "#0000FF">, என type செய்யவும்.
பின்னணி நிறத்தை மாற்றிய முறையிலேயே எழுத்துக்களின் நிறத்தையும் மாற்ற முடியும். <font color = "red">, என்ற code இனை பயன்படுத்தி நிறத்தினை மாற்றலாம்.
| <html> <head> <title> My own page </title> </head> <body> <body bgcolor = "yellow"> <font color = "red"> <h1> IT Kurukulam </h1> </font> </body> </html> |
இணையப்பக்கம் ஒன்றில் Graphics களை add செய்வதன் மூலம் அப்பக்கத்தை மேலும் அழகாகவும் கவர்ச்சிகரமாகவும் மாற்றலாம். இதற்காக, add செய்ய வேண்டிய Graphics களை இணையப்பக்கம் save செய்திருக்கும் folder இனுள் save செய்து கொள்ள வேண்டும். Graphics இனை upload செய்வதற்கு <img src = " myimage.jpg"> </a>, என்ற code இனை Note pad ல் type செய்ய வேண்டும்.
| <html> <head> <title> My own page </title> </head> <body> <body bgcolor = "yellow"> <font color = "red"> <h1> IT Kurukulam </h1> <img src = " myimage.jpg" alt="image" width="200" height="200"> </a> </font> </body> </html> |
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 செய்ய வேண்டிய சொல்.
| <html> <head> <title> My own page </title> </head> <body> <body bgcolor = "yellow"> <font color = "red"> <h1> IT Kurukulam </h1> <img src = " myimage.jpg" alt="image" width="200" height="200"> <a href = "Page1.html"> Page 1 </a> </font> </body> </html> |
ஒரு இணையத்தளத்தை link செய்ய வேண்டுமாயின் <a href= "http://www.google.com"> Click here </a>, என type செய்ய வேண்டும்.
எழுத்துகளுக்கு பதிலாக graphics களையும் Link செய்வதற்குப் பயன்படுத்தலாம். Link இற்கு பயன்படுத்தும் graphics இனை இணையப்பக்கம் save செய்துள்ள folder ல் save செய்ய வேண்டும்.
| <html> <head> <title> My own page </title> </head> <body> <body bgcolor = "yellow"> <font color = "red"> <h1> IT Kurukulam </h1> <img src = " myimage.jpg" alt="image" width="200" height="200"> <a href = "Page1.html"> <img src = " click.jpg"></a> </font> </body> </html> |
இணையப்பக்கத்தினுள் paragraph ஒன்றினை புகுத்துவதற்கு<p>, மற்றும் <br>, என்ற codes பயன்படும். <p>, என்பது புதிய paragraph ஒன்றின் ஆரம்பத்தை குறிக்கும். <br>, என்பது ஒரு பந்தியிலேயே புதிய வரி ஒன்றை குறிக்கும்.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <title> My own page </title> </head> <body> <body bgcolor = "yellow"> <font color = "red"> <h1> IT Kurukulam </h1> <img src = " myimage.jpg" alt="image" width="200" height="200"> <a href = "Page1.html"> <img src = " click.jpg"></a> <p> "Introduction to Computers". <br>A computer is a man-made, programmable electronic machine that can store, retrieve, and process data according to a given set of instructions. <p> Whatever information given to a computer is termed input. The computer input typically comprises of two things: Data and Instructions. <p>The data are the facts, which are to be processed, and the instructions describe how the computer should process the data. <br>The data which has been converted or organized into a more useful or intelligible form for direct utilization or helps human beings in their decision making process is typically termed information. </font> </body> </html> |
<center>, <p align left>, <p align right>என்பவற்றை பயன்படுத்தி alignments அமைத்துக் கொள்ளலாம். மற்றும் <font size> ,<b>, <i>, <u>, என்ற codes மூலம் text ன் size மற்றும் style களை மாற்றிக் கொள்ளலாம்.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <title> My own page </title> </head> <body> <body bgcolor = "yellow"> <font color = "red"> <h1> IT Kurukulam </h1> <center> <img src = " myimage.jpg" alt="image" width="200" height="200"> </center> <a href = "Page1.html"> <img src = " click.jpg"> </a> <center> <p> <font size = 5> <b> <u> "Introduction to Computers".</u><br> A computer is a man-made, programmable electronic machine that can store, retrieve, and process data according to a given set of instructions. </b> </font> <p> </center> <p align = right> <i> Whatever information given to a computer is termed input. The computer input typically comprises of two things: Data and Instructions. </i> <p></align> <p align = left>The data are the facts, which are to be processed, and the instructions describe how the computer should process the data. <br>The data which has been converted or organized into a more useful or intelligible form for direct utilization or helps human beings in their decision making process is typically termed information.</align> </font> </body> </html> |
Demo Page
Demo பக்கத்துக்கு செல்ல இங்கே click செய்யவும்.
Source Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <html> <head> <title> IT-fit2school </title> </head> <body background="background.jpg"> <font color = "#FFFFFF" size =4> <h2> fit2school </h2> <h4>We open the door for the future IT masterminds</h4> </font> <h4 align="right">This is the link of IT Kurukulam </h4></a> <center> <p> <font color = "blue" size = 5> <b> <u>Introduction to HTML</u></b> </font> <p> <img src ="html.jpg"> </a> </center> <p align="justify"> <font size = 4> HTML is a markup language. It tells the web browser what content to display. HTML separates "content" (words, images, audio, video, and so on) from "presentation" (the definition of the type of content and the instructions for how that type of content should be displayed). HTML uses a pre-defined set of elements to identify content types. Elements contain one or more "tags" that contain or express content. Tags are surrounded by angle brackets, and the "closing" tag is prefixed by a forward slash. </font></p> <center><table><tr><td> <p><b><font color = "#300000" size = 4> This is an audio clip for html</font></b></p> <audio controls><source src="html.mp3" type="audio/mpeg"> </audio> </td> <td width=20></td> <td><p><b><font color = "#300000" size = 4> This is a video clip for html</font></b></p> <video width="200" controls><source src="html.mp4" type="video/mp4"></video></td> </tr></table></center> <font color = "#383838" size = 3> <footer><h4>Community project by students of the Faculty of Information Technology, University of Moratuwa, Sri Lanka.</h4></footer> </font> </body> </html> |
