17 எளிய HTML குறியீடு எடுத்துக்காட்டுகள் நீங்கள் 10 நிமிடங்களில் கற்றுக்கொள்ளலாம்

17 எளிய HTML குறியீடு எடுத்துக்காட்டுகள் நீங்கள் 10 நிமிடங்களில் கற்றுக்கொள்ளலாம்

நவீன வலைத்தளங்கள் பொதுவாக பயனர் நட்பு இடைமுகங்களுடன் கட்டப்பட்டிருந்தாலும், சில அடிப்படை HTML ஐ அறிவது பயனுள்ளது. பின்வரும் 17 HTML உதாரணக் குறிச்சொற்களை (மற்றும் சில கூடுதல்) உங்களுக்குத் தெரிந்தால், நீங்கள் ஒரு அடிப்படை வலைப்பக்கத்தை புதிதாக உருவாக்கலாம் அல்லது வேர்ட்பிரஸ் போன்ற ஒரு பயன்பாட்டால் உருவாக்கப்பட்ட குறியீட்டை மாற்றலாம்.





பெரும்பாலான குறிச்சொற்களுக்கான வெளியீட்டுடன் HTML குறியீடு எடுத்துக்காட்டுகளை வழங்கியுள்ளோம். நீங்கள் அவற்றை செயலில் பார்க்க விரும்பினால், கட்டுரையின் முடிவில் மாதிரி HTML கோப்பைப் பதிவிறக்கவும். நீங்கள் அதை ஒரு உரை எடிட்டரில் விளையாடலாம் மற்றும் உலாவியில் ஏற்றலாம் உங்கள் மாற்றங்கள் என்ன செய்கின்றன என்பதைப் பார்க்க.



1

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





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

2

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



3.

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

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



நான்கு

இந்த டேக் உங்கள் பக்கத்தின் தலைப்பை அமைக்கிறது. நீங்கள் செய்ய வேண்டியது, உங்கள் தலைப்பை டேக்கில் வைத்து மூடுவது, இதைப் போன்றது (நான் தலைப்பு குறிச்சொற்களைச் சேர்த்துள்ளேன், மேலும் சூழலைக் காட்ட):


My Website

உலாவியில் திறக்கும் போது அந்த பெயர் தாவல் தலைப்பாக காட்டப்படும்.



5

தலைப்பு குறிச்சொல்லைப் போலவே, மெட்டாடேட்டாவும் உங்கள் பக்கத்தின் தலைப்பு பகுதியில் வைக்கப்பட்டுள்ளது. மெட்டாடேட்டா முதன்மையாக தேடுபொறிகளால் பயன்படுத்தப்படுகிறது, மேலும் இது உங்கள் பக்கத்தில் உள்ளதைப் பற்றிய தகவலாகும். பல்வேறு மெட்டா துறைகள் உள்ளன, ஆனால் இவை பொதுவாக பயன்படுத்தப்படும் சில:

  • விளக்கம் : உங்கள் பக்கத்தின் அடிப்படை விளக்கம்.
  • முக்கிய வார்த்தைகள் : உங்கள் பக்கத்திற்கு பொருந்தும் முக்கிய வார்த்தைகளின் தேர்வு.
  • நூலாசிரியர் : உங்கள் பக்கத்தின் ஆசிரியர்.
  • காட்சி துறை : எல்லா சாதனங்களிலும் உங்கள் பக்கம் நன்றாக இருப்பதை உறுதி செய்வதற்கான குறிச்சொல்.

இந்தப் பக்கத்திற்குப் பொருந்தக்கூடிய ஒரு உதாரணம் இங்கே:




மொபைல் மற்றும் டெஸ்க்டாப் சாதனங்களில் உங்கள் பக்கம் நன்கு காண்பிக்கப்படுவதை உறுதிசெய்ய உள்ளடக்கமாக 'வியூபோர்ட்' டேக் எப்போதும் 'அகலம் = சாதனம்-அகலம், ஆரம்ப-அளவு = 1.0' ஐ கொண்டிருக்க வேண்டும்.

6

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

உங்கள் வலைப்பக்கத்தின் உள்ளடக்கம் அனைத்தும் இந்த குறிச்சொற்களுக்கு இடையில் செல்கிறது. இது ஒலிப்பது போல் எளிது:


Everything you want displayed on your page.

7

சற்று குறைவான பெரிய தலைப்பு


துணை தலைப்பு

விளைவாக:

நீங்கள் பார்க்க முடியும் என, அவை ஒவ்வொரு மட்டத்திலும் சிறியதாகின்றன.

8

பத்தி குறி ஒரு புதிய பத்தியைத் தொடங்குகிறது. இது வழக்கமாக இரண்டு வரி இடைவெளிகளைச் செருகும்.

உதாரணமாக, முந்தைய வரிக்கும் இதற்கும் இடையிலான இடைவெளியைப் பாருங்கள். அதுதான் ஏ

டேக் செய்யும்.

Your first paragraph.


Your second paragraph.

விளைவாக:

உங்கள் முதல் பத்தி.

உங்கள் இரண்டாவது பத்தி.

உங்களாலும் முடியும் CSS பாணியைப் பயன்படுத்தவும் உங்கள் பத்தி குறிச்சொற்களில், இது போன்ற உரை அளவை மாற்றுகிறது:

This is 50% larger text.

விளைவாக:

9.

வரி முறிவு குறி ஒற்றை வரி இடைவெளியைச் செருகுகிறது:

The first line.

The second line (close to the first one).

விளைவாக:

இதே வழியில் வேலை செய்வது

குறிச்சொல். இது உங்கள் பக்கத்தில் ஒரு கிடைமட்ட கோட்டை வரைகிறது மற்றும் உரையின் பிரிவுகளை பிரிப்பதற்கு நல்லது.

10

இந்த குறி முக்கியமான உரையை வரையறுக்கிறது. பொதுவாக, அது தைரியமாக இருக்கும் என்று அர்த்தம். எனினும், அதை உருவாக்க CSS ஐப் பயன்படுத்த முடியும் உரை காட்சி வித்தியாசமாக.

கிண்டில் ஃபயரில் இருந்து விளம்பரங்களை அகற்று 7

எனினும், நீங்கள் பாதுகாப்பாகப் பயன்படுத்தலாம் தைரியமான உரைக்கு.

Very important things you want to say.

விளைவாக:

நீங்கள் சொல்ல விரும்பும் மிக முக்கியமான விஷயங்கள்.

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

பதினொன்று.

போல மற்றும் , மற்றும் சம்பந்தப்பட்டவை. தி குறிச்சொல் வலியுறுத்தப்பட்ட உரையை அடையாளம் காண்கிறது, அதாவது பொதுவாக அது சாய்வாக இருக்கும் மீண்டும், சிஎஸ்எஸ் வலியுறுத்தப்பட்ட உரை காட்சியை வித்தியாசமாக உருவாக்கும் வாய்ப்பு உள்ளது.

An emphasized line.

விளைவாக:

வலியுறுத்தப்பட்ட வரி.

தி டேக் இன்னும் வேலை செய்கிறது, ஆனால் மீண்டும், இது HTML இன் எதிர்கால பதிப்புகளில் விலக்கப்பட வாய்ப்புள்ளது.

12.

தி , அல்லது ஆங்கர், டேக் இணைப்புகளை உருவாக்க உதவுகிறது. ஒரு எளிய இணைப்பு இதுபோல் தெரிகிறது:

MUO க்குச் செல்லவும்

இணைப்பின் இலக்கை 'href' பண்பு அடையாளம் காட்டுகிறது. பல சந்தர்ப்பங்களில், இது மற்றொரு வலைத்தளமாக இருக்கும். இது ஒரு படம் அல்லது PDF போன்ற ஒரு கோப்பாகவும் இருக்கலாம்.

பிற பயனுள்ள பண்புகளில் 'இலக்கு' மற்றும் 'தலைப்பு' ஆகியவை அடங்கும். இலக்கு பண்பு கிட்டத்தட்ட ஒரு புதிய தாவல் அல்லது சாளரத்தில் இணைப்பைத் திறக்க பிரத்தியேகமாகப் பயன்படுத்தப்படுகிறது, இது போன்றது:

Go to MUO in a new tab

விளைவாக:

புதிய தாவலில் MUO க்குச் செல்லவும்

'தலைப்பு' பண்புக்கூறு ஒரு உதவிக்குறிப்பை உருவாக்குகிறது. இது எப்படி வேலை செய்கிறது என்பதைப் பார்க்க கீழே உள்ள இணைப்பில் வட்டமிடுங்கள்:

Hover over this to see the tool tip

விளைவாக:

கருவி நுனியைப் பார்க்க இதைச் சுற்றி வையுங்கள்

13

உங்கள் பக்கத்தில் ஒரு படத்தை உட்பொதிக்க விரும்பினால், நீங்கள் படக் குறியைப் பயன்படுத்த வேண்டும். நீங்கள் பொதுவாக 'src' பண்புக்கூறுடன் இணைந்து பயன்படுத்துவீர்கள். இது படத்தின் மூலத்தைக் குறிப்பிடுகிறது, இது போன்றது:

விளைவாக:

நீக்கப்பட்ட யூடியூப் வீடியோக்கள் என்ன என்பதைக் கண்டுபிடிப்பது எப்படி

'உயரம்,' 'அகலம்' மற்றும் 'ஆல்ட்' போன்ற பிற பண்புக்கூறுகள் கிடைக்கின்றன. இது எப்படி இருக்கும் என்பது இங்கே:

the name of your image

நீங்கள் எதிர்பார்த்தபடி, 'உயரம்' மற்றும் 'அகலம்' பண்புக்கூறுகள் படத்தின் உயரத்தையும் அகலத்தையும் அமைக்கிறது. பொதுவாக, அவற்றில் ஒன்றை மட்டும் அமைப்பது நல்லது, அதனால் பட அளவுகள் சரியாக இருக்கும். நீங்கள் இரண்டையும் பயன்படுத்தினால், நீங்கள் ஒரு நீட்டப்பட்ட அல்லது செதுக்கப்பட்ட படத்துடன் முடிவடையும்.

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

14

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

  1. ), எனவே உங்கள் பட்டியல் இப்படி இருக்கும்:


    1. First thing

    2. Second thing

    3. Third thing

    விளைவாக:

    1. முதல் விஷயம்
    2. இரண்டாவது விஷயம்
    3. மூன்றாவது விஷயம்

    HTML5 இல், நீங்கள் பயன்படுத்தலாம்

      எண்களின் வரிசையை மாற்றியமைக்க. தொடக்கப் பண்புடன் தொடக்க மதிப்பை அமைக்கலாம்.

      பட்டியல் உருப்படிகளுக்கு எந்த வகை குறியீட்டைப் பயன்படுத்த வேண்டும் என்பதை உலாவிக்கு 'வகை' பண்புக்கூறு சொல்ல உதவுகிறது. இது '1,' 'A,' 'a,' 'I,' அல்லது 'i' என அமைக்கலாம், இது போன்ற சுட்டிக்காட்டப்பட்ட சின்னத்துடன் காட்சிப்படுத்த பட்டியலை அமைக்கவும்:

        பதினைந்து.

          வரிசைப்படுத்தப்படாத பட்டியல் அதன் ஆர்டர் செய்யப்பட்ட சகாவை விட மிகவும் எளிமையானது. இது வெறுமனே புல்லட் செய்யப்பட்ட பட்டியல்.


          • First item

          • Second item

          • Third item

          விளைவாக:

          • முதல் பொருள்
          • இரண்டாவது உருப்படி
          • மூன்றாவது உருப்படி

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

          16

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














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          தி

          மற்றும்
          டேக்குகள் அட்டவணையின் தொடக்கத்தையும் முடிவையும் குறிப்பிடுகின்றன. திடேக் அனைத்து அட்டவணை உள்ளடக்கத்தையும் கொண்டுள்ளது.

          அட்டவணையின் ஒவ்வொரு வரிசையும் a இல் இணைக்கப்பட்டுள்ளதுகுறிச்சொல். ஒவ்வொரு வரிசையிலும் உள்ள ஒவ்வொரு கலமும் ஒன்றில் மூடப்பட்டிருக்கும்நெடுவரிசை தலைப்புகளுக்கான குறிச்சொற்கள், அல்லதுநெடுவரிசை தரவுகளுக்கான குறிச்சொற்கள். ஒவ்வொரு வரிசையிலும் ஒவ்வொரு நெடுவரிசைக்கும் இவற்றில் ஒன்று தேவை.

          விளைவாக:

          1 வது நெடுவரிசை2 வது நெடுவரிசை
          வரிசை 1, நெடுவரிசை 1வரிசை 1, நெடுவரிசை 2
          வரிசை 2, நெடுவரிசை 1வரிசை 2, நெடுவரிசை 2

          17.

          நீங்கள் மற்றொரு வலைத்தளம் அல்லது நபரை மேற்கோள் காட்டும்போது, ​​உங்கள் ஆவணத்தின் மற்ற பகுதிகளை தவிர்த்து மேற்கோளை அமைக்க விரும்பினால், பிளாக்வோட் டேக் பயன்படுத்தவும். பிளாக்வோட் குறிச்சொற்களைத் திறக்கவும் மூடவும் மேற்கோளை இணைக்க வேண்டும்:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          விளைவாக:

          நான் நினைத்தபடி வலை, நாங்கள் இன்னும் பார்க்கவில்லை. கடந்த காலத்தை விட எதிர்காலம் இன்னும் பெரிதாக உள்ளது.

          பயன்படுத்தப்படும் சரியான வடிவமைத்தல் நீங்கள் பயன்படுத்தும் உலாவி அல்லது உங்கள் தளத்தின் CSS ஐப் பொறுத்தது. ஆனால் குறிச்சொல் அப்படியே உள்ளது.

          HTML குறியீடு மாதிரிகள்

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

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

          பகிர் பகிர் ட்வீட் மின்னஞ்சல் அடிப்படை குறியீட்டைக் கற்றுக்கொள்ள விரும்புகிறீர்களா? உங்கள் ஓய்வு நேரத்தில் 5 பைட் சைஸ் கோடிங் ஆப்ஸை முயற்சிக்கவும்

          அடிப்படை குறியீட்டை கற்றுக்கொள்ள விரும்புகிறீர்களா ஆனால் சிறிது நேரம் இருக்கிறதா? இந்த கடி-அளவு குறியீட்டு பயன்பாடுகள் உங்கள் பிஸியான நாளின் சில நிமிடங்களை எடுக்கும்.

          அடுத்து படிக்கவும்           தொடர்புடைய தலைப்புகள்
          • நிரலாக்க
          • வேர்ட்பிரஸ்
          • HTML
          • இணைய மேம்பாடு
          • குறியீட்டு பயிற்சிகள்
          எழுத்தாளர் பற்றி ஆண்டி பெட்ஸ்(221 கட்டுரைகள் வெளியிடப்பட்டன)

          ஆண்டி முன்னாள் அச்சு பத்திரிகையாளர் மற்றும் பத்திரிகை ஆசிரியர் ஆவார், அவர் 15 ஆண்டுகளாக தொழில்நுட்பத்தைப் பற்றி எழுதி வருகிறார். அந்த நேரத்தில் அவர் எண்ணற்ற வெளியீடுகளுக்கு பங்களித்தார் மற்றும் பெரிய தொழில்நுட்ப நிறுவனங்களுக்கு நகல் எழுதும் வேலையை தயாரித்தார். அவர் ஊடகங்களுக்கு நிபுணர் கருத்தையும் வழங்கினார் மற்றும் தொழில் நிகழ்வுகளில் பேனல்களை வழங்கினார்.

          ஆண்டி பெட்ஸிலிருந்து மேலும்

          எங்கள் செய்திமடலுக்கு குழுசேரவும்

          தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

          குழுசேர இங்கே சொடுக்கவும்