அடிப்படை HTML குறியீட்டைப் புரிந்துகொள்ள 5 படிகள்

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

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

HTML அடிப்படைகள்: HTML என்றால் என்ன?

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

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

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

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

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

படி 1: குறிச்சொற்களின் கருத்தைப் புரிந்துகொள்வது

HTML ஒரு அமைப்பைப் பயன்படுத்துகிறது குறிச்சொற்கள் ஆவணத்தின் பல்வேறு கூறுகளை வகைப்படுத்த.

பாதிக்கப்பட்ட குறிப்புகளை உள்ளே போடுவதற்கு பெரும்பாலான குறிச்சொற்கள் ஜோடிகளாக வருகின்றன. இங்கே ஒரு எளிய உதாரணம் (தி

டேக் உரை செய்கிறது தைரியமான ; நாம் இதை இன்னும் சிறிது நேரத்தில் விவாதிப்போம்.)

This is some bold text .
மூடுதல் குறி எப்படி முன்னோக்கி சாய்வுடன் தொடங்குகிறது என்பதைக் கவனியுங்கள் (/). இது ஒரு மூடும் குறியைக் குறிக்கிறது, இது முக்கியமானது. நீங்கள் ஒரு குறிச்சொல்லை மூடவில்லை என்றால், ஆரம்பம் முதல் எல்லாவற்றிலும் அந்த பண்பு இருக்கும்.
குரோம் நிறைய நினைவகத்தைப் பயன்படுத்துகிறது

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

படி 2: எலும்புக்கூடு HTML அமைப்பு

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

ஒவ்வொரு HTML ஆவணமும் | _+_ | உடன் தொடங்க வேண்டும் தன்னை அப்படியே அறிவிக்க வேண்டும். இவ்வாறு, அதன் இறுதி குறி, | _+_ | , ஒரு HTML கோப்பில் கடைசி உருப்படி.

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

இறுதியாக, தி _ _+_ | வாசகர் பார்க்கும் பக்கத்தின் உரையை டேக் வைத்திருக்கிறது (மேலும் பல). இங்கே நீங்கள் படங்கள், இணைப்புகள் மற்றும் பலவற்றைக் காணலாம்.

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

படி 3: வடிவமைப்பதற்கான அடிப்படை HTML குறிச்சொற்கள்

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

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

எளிய உரை வடிவமைத்தல்
மைக்ரோசாப்ட் வேர்டில் நீங்கள் காணும் அடிப்படை உரை பாணிகளை HTML ஆதரிக்கிறது:

| _+_ | குறிச்சொற்கள் உரையை உருவாக்குகின்றன தைரியமான .

| _+_ | குறிச்சொற்கள் (இது 'முக்கியத்துவம்' என்பதைக் குறிக்கிறது) சாய்வு உரை

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

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

பத்தி மற்றும் பிற பிரிவுகள்
HTML கள்
குறிச்சொல் ஆவணத்தின் ஒரு பகுதியை வரையறுக்க உதவுகிறது. வழக்கமாக, இது ஒரு குறிப்பிட்ட வழியில் ஒரு பகுதியை வடிவமைக்க CSS உடன் இணைக்கப்பட்டுள்ளது (கீழே காண்க).

தி

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

உங்கள் ஆவணத்தில் தலைப்புகளைச் சேர்க்கலாம் மற்றும் அதைப் பயன்படுத்தி பின்பற்றுவதை எளிதாக்கலாம்

மூலம்

குறிச்சொற்கள். H1 மிக முக்கியமான தலைப்பு, அதே நேரத்தில் H6 மிக முக்கியமானது. ஏறக்குறைய ஒவ்வொரு MakeUseOf கட்டுரையும் தகவலை ஒழுங்கமைக்க H2 மற்றும் H3 தலைப்புகளைப் பயன்படுத்துகிறது.

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

ஒரு வரி இடைவெளியை சேர்க்க.

இவை அனைத்தையும் பயன்படுத்தும் ஒரு உதாரணம் இங்கே:

படி 4: படங்களைச் செருகுவது

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

நீங்கள் பயன்படுத்தி ஒரு படத்தை செருகவும்

குறிச்சொல். உடன் இதை இணைத்தல்

நீங்கள் படத்தை எங்கிருந்து ஏற்ற விரும்புகிறீர்கள் என்பதைக் குறிப்பிட பண்புக்கூறு உங்களை அனுமதிக்கிறது.

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

பயன்படுத்த
மற்றும்

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

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

Example Heading This is one paragraph. This is a second paragraph split between two lines.
படி 5: இணைப்புகளைச் சேர்த்தல்

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

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

உள்ளே
src
குறிச்சொல், தி

நீங்கள் எங்கு இணைக்கிறீர்கள் என்று பண்புக்கூறு கூறுகிறது. வெறுமனே URL ஐ ஒட்டுவது நன்றாக வேலை செய்யும். நீங்கள் பயன்படுத்தலாம்
alt
இணைப்பில் யாராவது வட்டமிடும் போது தோன்றும் ஒரு பிட் உரையைச் சேர்க்க உறுப்பு.

ஒரு அடிப்படை இணைப்பு இதுபோல் தெரிகிறது:

width
தி
height
குறிச்சொல் பல சாத்தியமான கூறுகளைக் கொண்டுள்ளது, ஆனால் நாங்கள் அவற்றை இங்கே மூழ்கடிக்க மாட்டோம்.

CSS மற்றும் JavaScript உடன் HTML எவ்வாறு இணைகிறது

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

ஆனால் இப்போது, எங்களிடம் இன்னும் நிறைய இருக்கிறது. CSS (Cascading Style Sheets) என்பது HTML இல் நீங்கள் தயாரித்த உரை எப்படி இருக்க வேண்டும் என்பதை விவரிக்கப் பயன்படுத்தப்படும் மொழி. நினைவில் கொள்ளுங்கள்

நாம் விவாதித்த குறிச்சொல்? இதற்குள் (மற்றும் பிற குறிச்சொற்கள்), நீங்கள் a ஐ வரையறுக்கலாம்

பண்பு பின்னர், உங்களுடன் உள்ள CSS ஆவணத்தில், அது எப்படி என்பதற்கான வழிமுறைகளை நீங்கள் எழுதலாம்

பார்க்க வேண்டும்.

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

ஜாவாஸ்கிரிப்ட்

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

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

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

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

HTML இன் பரிணாமம்

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

HTML இன் புதிய மறுசீரமைப்புகள் சில தொன்மையான குறிச்சொற்களை அவ்வப்போது விலக்குவதாக அறிவிக்கிறது. இது போன்ற மோசமான குறிச்சொற்களை உள்ளடக்கியது
href
மற்றும்
title
(அந்த சுருள் மற்றும் ஃப்ளாஷ் உரை முறையே) 1990 களின் இணையதள வடிவமைப்பில் பொதுவாகக் காணப்பட்டது. காலப்போக்கில் தரநிலைகள் மாறும் என்பதை நினைவில் கொள்ளுங்கள்.

ஒரு சிறிய HTML அறிவு நீண்ட தூரம் செல்கிறது

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

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

படக் கடன்: Belyaevskiy/ வைப்புத்தொகைகள்
பகிர் பகிர் ட்வீட் மின்னஞ்சல் உங்கள் மெய்நிகர் பாக்ஸ் லினக்ஸ் இயந்திரங்களை சூப்பர்சார்ஜ் செய்ய 5 குறிப்புகள்
மெய்நிகர் இயந்திரங்களால் வழங்கப்படும் மோசமான செயல்திறனால் சோர்வாக இருக்கிறதா? உங்கள் VirtualBox செயல்திறனை அதிகரிக்க நீங்கள் என்ன செய்ய வேண்டும் என்பது இங்கே.
அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

நிரலாக்க

HTML

இணைய மேம்பாடு

ஜாவாஸ்கிரிப்ட்

வெப்மாஸ்டர் கருவிகள்

நிரலாக்க

HTML5

எழுத்தாளர் பற்றி பென் ஸ்டெக்னர்(1735 கட்டுரைகள் வெளியிடப்பட்டன)
பென் ஒரு துணை ஆசிரியர் மற்றும் MakeUseOf இல் உள்ள போர்டிங் மேலாளர். 2016 இல் முழுநேரம் எழுதுவதற்காக அவர் தனது ஐடி வேலையை விட்டுவிட்டு திரும்பிப் பார்க்கவில்லை. அவர் ஏழு ஆண்டுகளுக்கும் மேலாக தொழில்முறை எழுத்தாளராக தொழில்நுட்ப பயிற்சிகள், வீடியோ கேம் பரிந்துரைகள் மற்றும் பலவற்றை உள்ளடக்கியுள்ளார்.
பென் ஸ்டெக்னரிடமிருந்து மேலும்
எங்கள் செய்திமடலுக்கு குழுசேரவும்

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