HTML பகுதி 04 - Block மற்றும் Inline Element இற்கு இடையிலான வேறுபாடு என்ன?

 இந்த பதிவில்

1. Attributes என்றால் என்ன?
2. TAG மற்றும் Element இற்கு இடையிலான வேறுபாடு என்ன?
3. Block மற்றும் Inline Element இற்கு இடையிலான வேறுபாடு என்ன?

என்று பார்ப்போம்.

ஏற்கனவே எழுதப்பட்ட தொடரை பார்வையிடை இங்கு கிளிக் செய்யவும்.

HTML Attributes

• எல்லா HTML Element இற்கும் Attributes காணப்படும்.
  
  
• HTML Element இன் Properties என்று இதனை கூறலாம்.
  
  
• HTML Element இற்கு சில மாற்றங்களை இதில் செய்யலாம்.
  
  
  உதாரணம் H1  TAG இனை பயன்படுத்தும் போது அந்த Heading இனை Center Align செய்யலாம்.இது போன்று நாம் பயன்படுத்தும் Element இனை பொறுத்து இந்த Attribute ஆனது மாறுபடும்.
  
  
• இதனை Opening TAG  இற்குல் எழுத  வேண்டும்.
  
  
• இந்த Attributes ஆனது name="value" என்று காணப்டும்.
  
  
• Value ஆனது Single மற்றும் Double quotation இல் எழுத முடியும் ஆனால் பொதுவாக Double quotation இனையே எல்லோரும் பயன்படுத்துவர்.
  
  
• HTML5 இல் காணப்படும் பல Boolean Attributes (True or False) இற்கு Value தேவை இல்லை (checked, disabled, required, etc) இதனை அடுத்தடுத்து வரும் தொடரில் பார்ப்போம்.
  
  
• Attributes ஆனது கட்டாயம் வழங்க வேண்டும் என்று அவசியம் இல்லை இருந்த போதிலும் சில Element இற்கு Attributes  வழங்கினால் மட்டுமே அதனுடைய வெளியீடு Web Browser இல் காட்சிப்படுத்தப்படும்.உதாரணம் img tag  அடுத்தடுத்த தொடரில் பார்ப்போம்.
  
  

உதாரணம்

Heading ஒன்றை Center Align செய்வதற்கு பயன்படுத்தப்படும் Attribute Name ஆனது Align ஆகும்.இதற்கு Value ஆக left, right, center, justify போன்றவற்றில் ஒன்றை பயன்படுத்தப்படும். இதனை எப்படி HTML இல் எழுதுவது என்று பார்ப்போம்.

<h1 align = "center"> WELCOME TO SLYC </h1>

இதனுடைய வெளியீடு 

TAG மற்றும் Element என்றால் என்ன?

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

TAG  என்பது Opening மற்றும் Closing TAG இற்குல் எந்தவொரு Content இனும் இல்லாமல் காணப்படுவதாகும்.

உதாரணம் <h1> </h1>

Element என்பது குறித்த TAG இற்குல் Content உடன் காணப்படுவதாகும்.

உதாரணம் <h1> WELCOME TO SLYC</h1>

Block மற்றும் Inline Element என்றால் என்ன?

ஒவ்வொரு Element இற்கும் Default ஆக ஒரு Display Value காணப்படும்.இது நாம் பயன்படுத்தும் Element இணை பொறுத்து மாறுபடும்.

இரண்டு வகையாக Display Value காணப்டுகிறது. ஒன்று Block இரண்டாவது Inline ஆகும்.

 

உதாரணம்

paragraph ஒன்றை பயன்படுத்துவதற்கு p TAG இனை பயன்படுத்தலாம்.

மேலே உள்ள  படத்தை அவதானித்து கீலே உள்ள விடயங்களை விளங்கிக் கொள்ளுங்கள்.

• இந்த TAG ஆனது அடுத்த TAG இற்கு இடையில் ஒரு Line இடைவெளியை தானாகவே ஏற்படுத்திக்கொள்ளும்.(</br> தேவையில்லை)
  
  
• இந்த TAG  இணை பயன்படுத்தினால் Screen இல் அருகில் எவ்வளவு இடைவெளி இருந்தாலும் அருகில் அடுத்த  TAG இணை காட்சிப்படுத்தாது மாறாக அடுத்த Line இல் தான் காட்சிப்படுத்தும்.இதனையே Block Element என்று அழைக்கப்படுகின்றது அதாவது அந்த TAG ஆனாது முழுமையான அகலத்தை பெற்றுக்கொள்ளும். அத்துடன் எப்போதும் புதிய Line இல் ஆரம்பம் ஆகும்.
  
  
• மேலே பயன்படுத்தப்பட் மூன்று TAG களும் Block Element ஆகும்.
  
  
• Inline Element என்பது முழு அகத்தையோ அல்லது அடுத்த Line இணை எடுத்துக்கொள்ளாது மாறாக ஏனைய TAG இற்கு எந்தவொரு  இடையூறும் ஏற்படுத்தாமல் அதனுடைய வெளியீட்டை காட்டும்.
  
  
• தடித்த எழுத்தில் ஒரு Text இணை (Bold) மாற்றுவதற்கு b TAG இணை பயன்படுத்தலாம். இந்த TAG ஆனது ஒரு Inline Element ஆகும்.உதாரணம்
  
  
  
  
  
  
  
  
  
• Youth என்ற Word எந்தவொரு இடையூரும் செய்யாமல் Bold ஆனதை நீங்கள் அவதானிக்கலாம்.

அடுத்த பதிவில் பல புதிய TAG களை Body  இற்குல் பயன்படுத்தி பார்ப்போம்.இந்த தொடரை தொடர்ச்சியாக எழுத உங்கள் ஆதரவை (Like, Comment and Share) தாருங்கள்.

NimTech இன் WhatsApp குழுவில் இணைய இங்கு கிளிக் செய்யவும்

பிடித்திருந்தால் உங்கள் நண்பர்களுடன் Share செய்யுங்கள்.