HTML லேபிளுடன் இடுகைகளைக் காண்பிக்கிறது. அனைத்து இடுகைகளையும் காண்பி

செவ்வாய், 30 டிசம்பர், 2014

HTML Tutorials 17- Body tag- ல் BACKGROUND பண்பு..

Author: Infomas | டிசம்பர் 30, 2014 |

கடந்த இடுகையில் Body குறிஒட்டில் பயன்படுத்தப்படும் சிறப்புப் பண்புகளில் ஒன்றான TEXT என்ற பண்பைப் பார்த்தோம். முந்தையப் பதிவில் பார்த்த BGCOLOR என்ற பண்பை போன்றதே

இன்றையப் பதிவில் பார்க்கப்போகும் BACKGROUND என்ற பண்பும்.

HTML ஆவணத்தில் முக்கிய குறிஒட்டான tag-ல் பயன்படுத்தப்படும் சிறப்புப் பண்புகளைப் பற்றி கற்றுக்கொண்டிருக்கிறோம் என்பதை மறவாதீர்கள்.

இந்த BACKGROUND பண்பானது உங்கள் HTML ஆவணத்தில் பின்னணியில் படத்தைச் சேர்க்கப் பயன்படுகிறது. அதாவது முன்பு பார்த்த BGCOLOR என்ற பண்பைப் பார்த்தோமல்லவா? அதைப்போன்றேதான்.. ஒரே ஒரு வித்தியாசம் என்னவெனில் BGCOLOR பண்பில் பின்னணியில் நிறத்தை வைக்கிறோம். BACKGROUND பண்பு பின்னணியில் படத்தை வைக்கிறோம். அவ்வளவே.

இவ்வாறு படத்தை வைக்க TAG-ல் BACKGROUND என்ற சிறப்புப் பண்பைச் சேர்க்க வேண்டும்.

உ.ம்.

<HTML>

<HEAD>

<TITLE>Background in BODY TAG</TITLE>

</HEAD>

<BODY BACKGROUND="IMAGE URL" >

இந்த நிரல் HTML ஆவணத்தில் வலைபக்கங்களின் பின்னணியில் படங்களை வைக்கப் பயன்படும் background என்ற சிறப்புப் பண்பைப் பற்றியது

</BODY>

</HTML>

மேற்கண்ட நிரலில் படத்தினுடைய URL -லை கொடுக்கவேண்டும்.

உலவியில் இதனுடைய வெளிப்பாடு இவ்வாறு இருக்கும்.

இதில் நீங்கள் வைக்க வேண்டிய படத்தின் சரியான கோப்புத் தடத்தைப்(File Path or image url) பதிய வேண்டும். அப்போதுதான் படமானது உங்கள் HTML வலைப்பக்கத்தின் பின்னணியில் படம் தோன்றும்.

நீங்கள் பின்னணியில் வைக்க விரும்பும் படம் உங்கள் கணினியிலேயே சேமிக்கப்பட்டிருந்தால், அந்த

படத்தின் மீது ரைட் கிளிக் செய்து Properties என்பதைத் தேர்ந்தெடுங்கள்.
அதில் General என்ற டேபில் கீழே Location என்பதற்கு நேராக இருக்கும் பைல்பாத்தை-file path(கோப்புத் தடம்) காப்பி செய்து செய்துகொள்ளுங்கள்.
பிறகு HTML ஆவணத்தில் இறுதியாக அந்த படத்தின் பெயர் என்னவோ அதை தட்டச்சிட்டு சேமித்துக்கொள்ளுங்கள்.

அதாவது இவ்வாறு இருக்க வேண்டும்.

C:\Users\User\Desktop\imagename.jpg

இவ்வாறு கோப்புத் தடத்தை காப்பி செய்துகொண்டு உங்கள் HTML ஆவணத்தில்

<BODY BACKGROUND="IMAGE URL" > என்பதில் IMAGE URL

என்பதை நீக்கிவிட்டு நீங்கள் காப்பி செய்த படத்தின் தடத்தை(FILE PATH) பேஸ்ட் செய்துகொள்ளுங்கள்.

அதாவது இப்படி இருக்க வேண்டும்.

<BODY BACKGROUND="C:\Users\User\Desktop\imagename.jpg" >

இப்போது முழு HTML ஆவணம்

<HTML>

<HEAD>

<TITLE>Background in BODY TAG</TITLE>

</HEAD>

<BODY BACKGROUND="C:\Users\User\Desktop\imagename.jpg" >

இந்த HTML ஆவணம் பின்னணியில் படங்களை வைக்கப் BODY குறி ஒட்டில் பயன்படுத்தக்கூடிய background என்ற சிறப்புப் பண்பைப் பற்றியது.

</BODY>

</HTML>

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

குறிப்பு: படத்திற்கான URL அல்லது File Path சரியாக தட்டச்சிடப்பட்டுள்ளதா அல்லது சரியாக காப்பி பேஸ்ட் செய்துள்ளதா என்பதை ஒரு முறை சோதனை செய்துகொள்ளுங்கள். சிறு தவறு ஏற்படினும் படமானது பின்னணியில் தோன்றாது.

BODY TAG-ல் பயன்படுத்தக்கூடிய சிறப்புப் பண்புகளில் ஒன்றான இணைப்பு பண்பைப் (LINK Attributions) பற்றி இனி வரும் பதிவுகளில் காணலாம்.

பதிவானது பலரையும் சென்றடைய திரட்டிகளில் ஓட்டுப்போட உங்களைக் கேட்டுக்கொள்கிறேன். உங்கள் நண்பர்களுக்கு பகிர சமூதளங்களில் பதிவைப் பகிர்ந்திடுங்கள். நன்றி நண்பர்களே மீண்டும் அடுத்த பதிவில் சந்திப்போம்....!!

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 16-HTML ஆவணத்தில் தமிழை வெளிப்படுத்த

Author: Infomas | டிசம்பர் 30, 2014 |

வெற்றிகரமாகச் சென்றுகொண்டிருக்கும் நமது 'எளிய தமிழில் HTML

கற்றுக்கொள்ள' தொடரில் HTML தொடர்பான அடிப்படைப் பாடங்களை

(கற்றுக்கொண்டு)பார்த்துக்கொண்டு வருகிறோம்.

ஒவ்வொரு பாடத்திலும் எளிமையான தமிழ்வார்த்தைகளைப்

பயன்படுத்தியே வருகிறேன்.

ஒரு HTML ஆவணத்தில் தமிழ் வார்த்தைகளைப் பயன்படுத்தி, அதை HTML

கோப்பாகச் சேமிக்கும்போது ஒரு சிலப் பிரச்னைகள் வரலாம்.

அதாவது தமிழில் எழுதிய உங்களுடைய கோப்புகளை உலவியில்

திறக்கும்போது எழுத்துகள் சரியாக இல்லாமல் சிறு சிறு கட்டங்களாக தோன்றும். அல்லது புரியாத குறியீடுகளைப் போன்ற தோற்றத்தை ஏற்படுத்தும்.

<HTML>

<HEAD>

<TITLE>

How to display tamil in a HTML Document

</TITLE>

</HEAD>

<BODY>

நீங்கள் உங்கள் HTML கோப்புகளை ஒருங்குறி (யுனிகோட்) எழுத்துகளாக தட்டச்சிட்டு, அதை பின்வருமாறு சேமிக்க வேண்டும்.

</BODY>

</HTML>

மேற்கண்ட நிரல் வரிகளை NotePad எழுதி சேமிக்கும்போது எந்த வகைகோப்பாக சேமிக்க வேண்டும் என்ற விருப்பம் அதில் கீழே இருக்கும்.

அதில் UTF-8 என்பதைத் தேர்ந்தெடுத்து சேமித்து விடுங்கள்.

சேமித்த HTML கோப்பை(File) உலவியில்(Internet Browser) திறக்கும்போது வலைப்பக்கமானது தமிழிலேயே காட்டும்.

இனி நீங்கள் தமிழில் எழுதும் ஒவ்வொரு புதிய ஹெச்.டி.எம்.எல். கோப்பையும் இந்த முறையில் சேமியுங்கள். பிறகு வலைஉலவியில் திறந்து பார்க்கும்போது வலைப்பக்கமானது(Web Page) அழகு தமிழிலேயே வெளிப்படும்.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 15-Body tag- ல் TEXT பண்பு..

Author: Infomas | டிசம்பர் 30, 2014 |

வணக்கம் நண்பர்களே.. கடந்த இடுகையில்<BODY>

குறிஒட்டின்(TAG)-ல் பயன்படுத்தக்கூடிய பண்புகளில் ஒன்றான

BGCOLOR என்பதைப் பற்றி விரிவாகப் பார்த்தோம். படிக்கத்

தவறியவர்கள் இந்த இணைப்பை கிளிக் செய்து

பார்த்துக்கொள்ளுங்கள்.

இன்றையப் பாடத்தில் TEXT பண்பு என்பதைப் பற்றிப் பார்ப்போம்.

நீங்கள் உருவாக்கும் HTML ஆவணத்தில் சாதாரணமாக எழுத்துகள்

கறுப்பு நிறத்தில் இருக்கும். இதை நாம் மாற்றலாம். அதற்கு இந்த TEXT

என்ற பண்பு பயன்படுகிறது.

உம். <BODY BGCOLOR="red" TEXT="White"> என்று கொடுத்துப்

பாருங்கள். இதன் விளைவு பின்னணி நிறம் சிவப்பாகவும், அதில்

நீங்கள் தட்டச்சிடும் உரையானது வெண்மை நிறத்திலும் இருக்கும்.

உ.ம்.

ஒரு HTML ஆவணத்தைப் பார்ப்போம்.

<HTML>

<HEAD>

<TITLE>BGCOLOR AND TEXT COLOR</TITLE>

</HEAD>

<BODY BGCOLOR="red" TEXT="White">

இந்த HTML ஆவணம் பிண்ணனி நிறத்தையும், அதில் இடம்பெறும் எழுத்துக்களின் நிறத்தையும் குறிக்கும் வகையில் அமைக்கப்பட்டிருக்கிறது. அதாவது பின்னணி நிறம் சிவப்பாகவும், அதில் இடம்பெறும் எழுத்துகள் வெண்மையாகவும் இருக்குமாறு BODY குறி ஒட்டில் சிறப்புப் பண்புகளைப் பயன்படுத்தி எழுதப்பட்டிருக்கிறது.

</BODY>

</HTML>

இந்த நிரலை Notepad எழுதி .html என்ற விரிவுடன் சேமித்து உங்கள்

உலவியில் திறந்துபாருங்கள்.

மேற்கண்ட HTML ஆவணத்தில் பின்னணி நிறம் மற்றும் எழுத்தின்

நிறத்தையும் நிர்ணயிக்கும் சிறப்புப் பண்புகளான BGCOLOR, TEXT என்ற

இரு பண்புகளைப் பயன்படுத்தியிருக்கிறேன்.

உலவியில் இதனுடைய வெளிப்பாடு(OUTPUT) இவ்வாறு இருக்கும்.

இந்த HTML ஆவணம் பிண்ணனி நிறத்தையும், அதில் இடம்பெறும்

எழுத்துக்களின் நிறத்தையும் குறிக்கும் வகையில்

அமைக்கப்பட்டிருக்கிறது. அதாவது பின்னணி நிறம் சிவப்பாகவும்,

அதில் இடம்பெறும் எழுத்துகள் வெண்மையாகவும் இருக்குமாறு BODY

குறி ஒட்டில் சிறப்புப் பண்புகளைப் பயன்படுத்தி எழுதப்பட்டிருக்கிறது.

இதில் பின்னணி நிறம் சிவப்பாகவும், அதில் இடம்பெற்றுள்ள

உரைக்கான எழுத்துகள் அனைத்தும் வெண்மை நிறத்திலும்

இருப்பதைப் பாருங்கள். இவ்வாறு நமக்கு விருப்பமான வண்ணங்களில்

எழுத்துகளை TEXT பண்பைப் <BODY> TAG-ல் பயன்படுத்துவதன்

மூலம் பெற்றுக்கொள்ளலாம்.

குறிப்பு: இந்த சிறப்புப் பண்புகள் அனைத்தும் Body என்னும் குறிஒட்டில்(Tag) பயன்படுத்தக்கூடியவை என்பதை நினைவில் வைத்திருங்கள்.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 14-Body tag-ல் சிறப்புப் பண்பு bgcolor

Author: Infomas | டிசம்பர் 30, 2014 |

ஒரு HTML ஆவணத்தின் உரைப்பகுதியானது <BODY> மற்றும் </BODY>

என்னும் குறி ஒட்டுகளுக்கு(Tags) இடையே இருக்கும்.

இது நமக்குத் தெரிந்ததே. இந்த BODY குறிஒட்டில்(TAG) லும் நிறைய சிறப்புப்

பண்புகளைச் சேர்க்க முடியும். அந்த வகையில் ஒரு ஆவணத்தின் பின்னணி

நிறத்தை கொடுக்கக்கூடிய சிறப்புப் பண்பான BGCOLOR என்பதைப் பற்றி

பார்ப்போம்.

<BODY> குறி ஒட்டில் பண்புகளைச் சேர்ப்பதன் மூலம் பின்னணி

நிறம்(BACKGROUND),பின்னணியில் படம்(Background Image), எழுத்தின்

நிறம்(Font COLOR) இணைப்புக் கோட்டின் நிறம்(LINK LINE COLOR)

போன்றவற்றைக் கொடுக்க முடியும்.

<BODY> குறிஒட்டில் (Tag ) BGCOLOR, TEXT, BACKGROUND, LINK, VLING, ALINK, LEFTMARGIN மற்றும் TOPMARGIN போன்ற பண்புகளைக் கொடுக்க முடியும். இந்தப் பண்புகளைப் பற்றிக் இன்றையப் பாடத்தில் பார்ப்போம்.

BGCOLOR - (பின்னணி நிறம்) பண்பு

<BODY> என்ற குறி ஒட்டில் BGCOLOR என்னும் பண்பைச் சேர்ப்பதன் மூலம் பக்கத்தின் JSன்னணி நிறத்தைக் கொடுக்க முடியும். RGB நிறக் குறிமுறையைப்(Color names) பயன்படுத்துதல், ஆறு இலக்க பதினறும எண்ணைப் (Color Values)பயன்படுத்துதல் போன்ற இரு வழிகளில் நிறத்தைக் கொடுக்க முடியும்.

ஆறு இலக்க பதினறும எண்ணில் முதல் இரண்டு இலக்கம் சிவப்பு நிறத்தையும், அடுத்த இரண்டு இலக்கம் பச்சை நிறத்தையும், கடைசி இரண்டு இலக்கம் ஊதா நிறத்தையும் குறிக்கின்றன. இவை அனைத்தும் முதன்மை நிறங்களான (RGB - RED, GREEN, BLUE) ஆகியவை.

எடுத்துக்காட்டாக FFFFFF என்பது வெள்ளை நிறத்தையும், FF0000 என்பது சிவப்பு நிறத்தையும், FFFF00 என்பது மஞ்சள் நிறத்தையும் குறிக்கின்றன. நிறத்தை இவ்வாறு பதின்றும இலக்கங்களில் கொடுப்பது சிரமமானதாக இருக்கலாம்.

எனவே தற்போது உலவிகள் நிறத்தின் பெயர்களைப் புரிந்துகொள்ளும்படி அமைக்கப்பட்டுள்ளன. எனவே இந்த எண்களைப் பயன்படுத்துவதைக் காட்டிலும் நேரடியாகவே நிறத்தின் பெயரை கொடுக்கலாம்.

black, silver, Grey, white, maroon, red, purple, fuchsia, green, lime, Olive, yellow, navy, blue, teal மற்றும் aqua என்பன போன்ற பதினாறு வகை நிறங்கள் வரை ஏற்றுக்கொள்கின்றன.

உதாரணம் ஒன்றைப் பார்ப்போம்.

என்று கொடுக்கும்போது உங்கள் வலைப்பக்கத்தின் பின்னணி நிறமானது பச்சை நிறத்தில் காணப்படும்.

பின்னணி நிறம் எதுவும் இல்லையெனில் எப்போதும்போல வெண்மையாகவே இருக்கும்.

<HTML>

<HEAD>

<TITLE>How to put background color in html page?</TITLE>

</HEAD>

<BODY bgcolor="green">

வணக்கம் நண்பர்களே,

இது அருண். நான் உங்களுக்குஎளிய தமிழில்<

HTML எனும் தலைப்பில்

கற்றுக்கொடுக்க ஆரம்பித்திருக்கிறேன்.

தொடர்ந்து இந்தத் தொடர்பதிவைப்

படித்து பயன்பெற வேண்டுகிறேன்.

நன்றி

</BODY>

</HTML>

மேற்கண்டவற்றை .html என்ற விரிவுடன் சேமித்து உங்கள் வலைஉலவியில் திறந்து பார்க்கும்போது உங்கள் வலைப்பக்கத்தின் பின்னணி நிறம் பச்சை நிறத்தில் காணப்படும்.

அடுத்தப் பதிவில் இதே <body> குறிஒட்டில் இன்னும் சில சிறப்புப் பண்புகள் இருக்கிறது. அதில்TEXT பண்பு, BACKGROUND பண்பு(attributes)களைப்பற்றிப் படிப்போம்.

Source : http://www.thangampalani.com/

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 13-BR (Break) tag

Author: Infomas | டிசம்பர் 30, 2014 |

இது எதற்கென்றால் ஒரு வரியை முடித்து, அடுத்த வரிக்குச் செல்ல

வேண்டும் என்பதை Browser-க்கு சொல்லப் பயன்படும் குறிஒட்டாகும்.

கீழக்காணும் எடுத்துக்காட்டைக் கவனியுங்கள்..

<HTML>

<HEAD>

<TITLE>THIS IS MY OWN PAGE</TITLE>

</HEAD>

<BODY>

<CENTER>வணக்கம் நண்பர்களே,<br>

இது அருண். நான் உங்களுக்குஎளிய தமிழில்<br>

HTML எனும் தலைப்பில் <br>

கற்றுக்கொடுக்க ஆரம்பித்திருக்கிறேன்.<br>

தொடர்ந்து இந்தத் தொடர்பதிவைப் <br>

படித்து பயன்பெற வேண்டுகிறேன்.<br>

நன்றி</CENTER>

</BODY>

</HTML>

மேற்கண்ட நிரல் வரிகளை Notepad -ல் எழுதி அதை .html என்ற விரிவுடன் சேமித்துக்கொள்ளுங்கள். சேமித்த கோப்பை உலவியில் திறந்துப் பார்த்து சோதனை செய்துகொள்ளவும்.

மேற்கண்டவற்றின் வெளிபாடு(உலவியில்) இவ்வாறு இருக்கும்.

வணக்கம் நண்பர்களே,

இது அருண். நான் உங்களுக்குஎளிய தமிழில்

HTML எனும் தலைப்பில்

கற்றுக்கொடுக்க ஆரம்பித்திருக்கிறேன்.

தொடர்ந்து இந்தத் தொடர்பதிவைப்

படித்து பயன்பெற வேண்டுகிறேன்.

நன்றி

என்ன காரணம்?

ஒவ்வொரு வரி முடிவிலும் <BR> Tag சேர்த்திருப்பதால் இந்த மாற்றம்

வந்திருக்கிறது. இதிலிருந்து <BR> Tag -ன் பயன்பாடு என்ன என்பது

புரிந்திருக்கும்.

உங்களுக்கு தேவைப்படும் இடங்களில் இந்த <BR> Tag

பயன்படுத்திக்கொள்ளலாம். குறிப்பாக செய்யுள்கள், கவிதைகள்

போன்றவைகளை அடுத்த வரிகளில் அவைகள் உள்ளது உள்ளபடியே

காட்டினால்தான் பொருள்தரக்கூடிய வகையில் இருக்கும். இதற்கும் இந்த

<BR> Tag பயன்படுகிறது.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 12-CENTER tag

Author: Infomas | டிசம்பர் 30, 2014 |

எளிய தமிழில் HTML கற்றுக்கொள்ள தொடர் மூலம் நிறைய புதிய

நண்பர்களைப் பெற்றிருப்பதில் மிக்க மகிழ்ச்சி. விடுபட்ட கடந்த

மூன்றுநாட்களுக்கான பதிவுகளையும் சீரான இடைவெளியில் இன்றைய

வேலைநாளில் பதிவிட எண்ணியிருக்கிறேன். பதிவிற்கு வருவோம்.

கடந்த பதிவில் பத்திக் குறி ஒட்டில் (Paragraph Tag) இசைவுப்(Align) பண்புகளைப் (attributes) பற்றிப் பார்த்தோம்.

இப்பதிவில் <CENTER> மற்றும் </CENTER> ஆகிய குறி ஒட்டுகளைக் காண்போம். இந்தக் குறிஒட்டுகளுக்கு(Tags) இடையில் உள்ள உரை உலவித்திரையில் கிடைமட்டமாக(Horizontal) மையப்படுத்திக் காட்டப்பட பயன்படுத்தப்படுகிறது.அதாவது வலைப்பக்கத்தில் மையப்படுத்தி(Center) காண்பிக்கும்.

கீழ்க்கண்ட நிரல்வரிகளை notepade-ல் எழுதி வழக்கம்போலவே .html என்ற விரிவுடன் சேமித்து, உங்கள் கோப்பை Internet Explorer, Google Chrome, Firefox போன்ற உலவிகளில் திறந்துப் பாருங்கள். உரையானது மையப்படுத்திக் காண்பிக்கப்பட்டிருக்கும்.

<HTML>

<HEAD>

</HEAD>

<BODY>

<CENTER>HI Masinfom BLOG VIEWERS</CENTER>

</BODY>

</HTML>

இதன் வெளிப்பாடு இவ்வாறு இருக்கும்.

HI Masinfom BLOG VIEWERS

இவ்வாறு ஒரு உரையை நடுவில், மையப்படுத்தி காண்பிக்க இந்த <center></center>குறிஒட்டுகள் காண்பிக்கப் பயன்படுகிறது.அடுத்த பதிவில் <BR> (Break Tag)ஐப் பற்றிப் பார்ப்போம்

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorials 11-Paragraph Tag-ல் அலைன்மெண்ட்

Author: Infomas | டிசம்பர் 30, 2014 |

கடந்த பதிவில் பத்திக் குறி ஒட்டைப்(Paragraph Tag) பற்றிப் பார்த்தோம். இது

மிகவும் எளிதாக விளங்கிக்கொள்ளக்கூடிய ஒன்றுதான். இந்த Paragraph Tag

பத்திக் குறி ஒட்டில் Align பண்பைச் சேர்ப்பதன் மூலம் பத்திகளை நமது

விருப்பத்திற்கேற்ப மாற்றி அமைக்கலாம்.

அதாவது இடது(left), வலது(Right), நடுப்புறம்(Center) மற்றும்

நேர்த்தி(Justify) என நான்கு வகைகளில் பத்திகளை அமைக்கலாம்.

ஒரு உதாரணத்தைப் பார்ப்போம்.

<P ALIGN = "left"> என்பது பத்தியை இடது இசைவிற்கும்,

<P ALIGN = "right"> என்பது பத்தியை வலது இசைவிற்கும்,

<P ALIGN = "center">என்பது பத்தியை மைய இசைவிற்கும்

<P ALIGN = "justify"> என்பது நேர்த்தியான இசைவுக்கும் மாற்றுகிறது.

      <HTML>
    <BODY>
    <P ALIGN="left">HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி

வலைஉலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிக்கிறது.HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி வலை

உலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிப்பதாகும்.</p>

<P ALIGN="right">HTML மொழியை மீயுரை என அழைக்கலாம். இதன்

பணி வலைஉலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும்

என குறிக்கிறது.HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி

வலை உலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிப்பதாகும்.</p>

<P ALIGN="center">HTML மொழியை மீயுரை என அழைக்கலாம். இதன்

பணி வலைஉலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும்

என குறிக்கிறது.HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி

வலை உலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிப்பதாகும்.</p>

<P ALIGN="justify">HTML மொழியை மீயுரை என அழைக்கலாம். இதன்

பணி வலைஉலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும்

என குறிக்கிறது.HTML மொழியை மீயுரை என அழைக்கலாம். இதன் பணி

வலை உலவிகளுக்கு Hypertext ஆனது எப்படி வெளிப்பட வேண்டும் என

குறிப்பதாகும். </p>

</BODY>
</HTML>

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

செவ்வாய், 16 டிசம்பர், 2014

HTML Tutorial -10-பத்திக் குறி ஒட்டு( Paragraph Tag)

Author: Infomas | டிசம்பர் 16, 2014 |

கடந்த பதிவில் முழுமுதன்மையான குறிஒட்டுக்களான <b></b>, <i></i>

மற்றும் <u></u> என்பதைப் HTML Tags-(Part-I) பார்த்தோம்.
இந்தப் பதிவில் பத்திக் குறி ஒட்டு( Paragraph Tag) என்பதைப் பற்றிப் பார்ப்போம்.

பத்திக் குறி ஒட்டில் தொடக்கம் <P> இவ்வாறு இருக்கும். இது ஒரு புதிய பத்தி தொடங்குவதைக் குறிக்கிறது.

</p> என்னும் முடிவுக் குறி ஒட்டு பத்தி முடிவதைக் குறிக்கிறது.

இந்தக் குறி ஒட்டு எதற்கென்றால் ஒவ்வொரு பத்தியாக(Paragraph) பிரித்துக்காட்டப் பயன்படுகிறது. இதில் ஆரம்ப குறிஒட்டு ஒன்றை சேர்த்தால் கூட போதுமானது.

உதாரணத்தைக் கவனியுங்கள்..

<HTML>
<BODY>
<P>இந்த எளிய தமிழில் HTML தொடர் எளிமையாகவும், புதிய

வாசகர்களுக்கும், HTML கற்க விருப்பமுள்ளவர்களுக்கும்

பயனுள்ளதாக உள்ளது. </p><p>இந்த தளத்தைப் பற்றி உங்கள்

கருத்துகளையும், ஆலோசனைகளையும் வரவேற்கிறோம். </P>

<P>தொடர்ந்து உங்களின் நல்லாதரவையும் ஒத்துழைப்பையும்

வழங்க கேட்டுக்கொள்கிறேன். <p> நன்றி. வணக்கம்.

<BODY>
</HTML>

இதன் வெளிப்பாடு இவ்வாறு இருக்கும்.

எனவே ஒரு பத்திக்கும்(Paragraph) அடுத்த பத்திக்கும்(Paragraph)

இடைவெளி காண்பிக்க இந்த Pragraph Tag பயன்படுகிறது என்பதை

அறிந்துகொள்ளுங்கள். இதைச் செயல்படுத்தி பார்க்க நோட்பேடில்

மேற்கொண்ட நிரல்வரிகளை எழுதி Body Section -ல் ஒன்றிரண்டு பத்திகளை

எழுதி அவற்றிற்கிடையில் Pragraph Tag-ஐப் பயன்படுத்திப் பாருங்கள்.

அதன் விளைவை உலவியில் திறந்து பார்த்தால் தெரியும். Pragraph Tag

இடாத பத்திகள் அனைத்தும் இடைவெளியில்லாமலும் , Pragraph Tagஇட்ட

பத்திகள் இடைவெளிவிட்டு அமைந்திருப்பதையும் காணலாம்.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

HTML Tutorial 9-HTML ஆவணத்தை வடிவூட்ட(formation)

Author: Infomas | டிசம்பர் 16, 2014 |

HTML Tutorial 9

கடந்த இடுகையில் பார்த்த அடிப்படை HTML ஆவணம். இதை மேலும் நாம் வடிவூட்டலாம்(format)

அதாவது ஒரு ஓவியம் வரையும்போது முதலில் கோடுகளால் வரைந்துவிட்டுப் பிறகு அவ்வோவியத்திற்கு நிழல்(Shadow) ,மற்றும் விரும்பிய வண்ணங்கலவைக் கொண்டு மாற்றி அமைப்பதுபோலவே நமது HTML ஆவணத்தையும் வடிவூட்டலாம்.
ஹெச்.டி.எம்.எல் ஆவணத்தை கவர்ச்சிகரமாகக் காட்ட HTML-ல் பல குறிஒட்டுகள்(TAGS) உள்ளன. இவற்றைப் பயன்படுத்தி ஒரு ஆவணத்திலுள்ள உரையை அழகுப்படுத்துவதுடன், அதில் படங்களையும், வண்ணங்களையும், ஒலிகளையும், காணொளிகளையும் சேர்க்கலாம்.

இத்தகைய வடிவூட்டல்களுக்குப் பயன்படும் குறிஒட்டுகளைப் பற்றிப்

பார்க்கலாம்.

1.தலைப்புக் குறி ஒட்டு (Heading Tags)

எழுத்துகளை பெரிதாகவும், தடிமனாகவும் கொடுப்பதன் மூலம்

காண்போரின்

கவனத்தை ஈர்க்க முடியும். HTML ஆவணத்தில் ஆறு அளவுகளில்

தலைப்புகளை அமைக்க முடியும். இந்த எழுத்து அளவுகள் ஏற்கனவே

முன்வரையறுக்கப்பட்டு வைக்கப்பட்டுள்ளன. இந்த அளவுகளை <H1>...</H1>

எனத் தொடங்கி <H6>...</H6> வரைக் குறிப்பிடலாம்..

<H1> என்பது இருப்பதிலேயே பெரிய அளவையும், <H6> என்பதை

இருப்பதிலேயே சிறிய அளவையும் குறிக்கும்.

வேறுபட்ட அளவுள்ள தலைப்புகளை உருவாக்குவதற்காக எழுதப்பட்ட நிரல்

கீழே கொடுக்கப்பட்டுள்ளது.

<HTML>

<HEAD>

<TITLE> Heading Tags</TITLE>

</HEAD>

<BODY>

<H1>Heading Level 1 </H1>

<H2>Heading Level 2 </H2>

<H3>Heading Level 3 </H3>

<H4>Heading Level 4 </H4>

<H5>Heading Level 5 </H5>

<H6>Heading Level 6 </H6>

</BODY>

</HTML>

மேற்கண்ட கோடிங்கை ஒரு நோட்பேடில் எழுதி உங்களுக்கு விருப்பமான

பெயரில் .html என்ற விரிவுடன் சேமித்துக்கொள்ளுங்கள்.

சேமிக்கப்பட்ட கோப்பை உங்கள் இணைய உலவியில் (Internet

Browser)பிரௌசரில் திறந்து பார்க்கும்போது இவ்வாறு இருக்கும்.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

பல்வேறுபட்ட தலைப்புகளை HTML -ல் எழுதிப் பழகுங்கள்.

2. கிடைக்கோடுகள் (Horizontal Rules)

<HR> என்ற கிடைக்கோட்டுக் குறி ஒட்டு, ஒரு கிடைக்கோட்டினை உருவாக்குகிறது.
ஒரு ஆவணத்தின் முக்கியப் பகுதிகளைப் பிரித்துக்காட்ட கிடைக்கோட்டுக்
குறி ஒட்டு(<HR> tag) பயன்படுகிறது.
<HR> குறி ஒட்டைப் பயன்படுத்தி வரையப்படும் கோட்டின் தடிமனைக் கூட
தீர்மானிக்க முடியும்.
அவ்வாறு செய்வதற்கு <HR> குறி ஒட்டுடன் சில பண்புகளைச் சேர்க்க
வேண்டும்.
SIZE மற்றும் NOSHADE என்பவை <HR> குறி ஒட்டுடன் அடிக்கடி
பயன்படுத்தப்படும் பண்புகளாகும்.
வரையப்படும் கோட்டின் தடிமனைக் குறிக்க SIZE பண்பு பயன்படுகிறது.
NOSHADE பண்பு வரையப்படும் கோட்டை சாம்பல் நிறத்தில் (நிழலகற்றி)
காட்டப் பயன்படுகிறது.
கவனிக்க: <HR> முடிவு குறி ஒட்டு இல்லை.

உதாரணமாக இந்த ஆவணத்தைப் பாருங்கள்..

<HTML>

<HEAD>

<TITLE> Horizontal Rules</TITLE>

</HEAD>

<BODY>

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

<HR size="5">

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

<HR size="5" noshade >

</BODY>

</HTML>

மேற்கண்ட HTML நிரல்வரிகளுக்கான வெளிப்பாடு...

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules<HR>

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules This is Horizontal rules

மேற்கண்ட படத்தில்...

1. கிடைமட்டக்கோடு கோடு <HR>

2. கிடைமட்டக் கோட்டின் தடிமன் ஐந்து புள்ளிகள்

அதிகரிக்கப்பட்டிருக்கிறது...மேற்கண்ட வரியில்size="5" என்பதற்கு பதில்

உங்களுக்கு விருப்பமான எண்ணை உள்ளிடலாம். எண்ணின் மதிப்பு

அதிகரிக்க கோட்டின் தடிமன் அதிகமாகும்.

3. கிடைமட்டக் கோட்டில் வரும் சாம்பல் நிற நிழலை(shade)த் தவிர்க்க "no

shade" என்ற சிறப்புப் பண்பு பயன்படுத்தப்பட்டுள்ளது.

இதுபோல் நிறைய வடிவூட்டல் குறிஒட்டுகள் HTML ஆவணத்தில்

பயன்படுத்தலாம்.

HTML, HTML Tutorial, Subjects(Computer Programming Languages)

செவ்வாய், 30 டிசம்பர், 2014

இன்றையப் பதிவில் பார்க்கப்போகும் BACKGROUND என்ற பண்பும்.

மேற்கண்ட நிரலில் படத்தினுடைய URL -லை கொடுக்கவேண்டும். உலவியில் இதனுடைய வெளிப்பாடு இவ்வாறு இருக்கும்.

வணக்கம் நண்பர்களே.. கடந்த இடுகையில்<BODY>

குறிஒட்டின்(TAG)-ல் பயன்படுத்தக்கூடிய பண்புகளில் ஒன்றான

BGCOLOR என்பதைப் பற்றி விரிவாகப் பார்த்தோம். படிக்கத்

தவறியவர்கள் இந்த இணைப்பை கிளிக் செய்து

பார்த்துக்கொள்ளுங்கள்.

இன்றையப் பாடத்தில் TEXT பண்பு என்பதைப் பற்றிப் பார்ப்போம்.

நீங்கள் உருவாக்கும் HTML ஆவணத்தில் சாதாரணமாக எழுத்துகள்

கறுப்பு நிறத்தில் இருக்கும். இதை நாம் மாற்றலாம். அதற்கு இந்த TEXT

என்ற பண்பு பயன்படுகிறது.

<HTML>

<HEAD>

இந்த நிரலை Notepad எழுதி .html என்ற விரிவுடன் சேமித்து உங்கள்

உலவியில் திறந்துபாருங்கள்.

இந்த HTML ஆவணம் பிண்ணனி நிறத்தையும், அதில் இடம்பெறும்

எழுத்துக்களின் நிறத்தையும் குறிக்கும் வகையில்

அமைக்கப்பட்டிருக்கிறது. அதாவது பின்னணி நிறம் சிவப்பாகவும்,

அதில் இடம்பெறும் எழுத்துகள் வெண்மையாகவும் இருக்குமாறு BODY

குறி ஒட்டில் சிறப்புப் பண்புகளைப் பயன்படுத்தி எழுதப்பட்டிருக்கிறது.

செவ்வாய், 16 டிசம்பர், 2014

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Popular Posts

Facebook

Blog Archive

மேற்கண்ட நிரலில் படத்தினுடைய URL -லை கொடுக்கவேண்டும்.

உலவியில் இதனுடைய வெளிப்பாடு இவ்வாறு இருக்கும்.