இணையப் பக்கம் என்றால் என்ன? இது ஹைப்பர்டெக்ஸ்ட் மார்க்அப் லாங்குவேஜில் (HTML) எழுதப்பட்ட ஆவணமாகும், அதை உலாவியைப் பயன்படுத்தி பார்க்க முடியும். URL ஐ உள்ளிடுவதன் மூலம் வலைப்பக்கத்தை அணுகலாம்.

ஒரு வலைப்பக்கத்தில் உரை, கிராபிக்ஸ் மற்றும் பிற பக்கங்கள் மற்றும் கோப்புகளுக்கான ஹைப்பர்லிங்க்கள் இருக்கலாம்.

வலைப்பக்கத்தை எவ்வாறு திறப்பது

இணையப் பக்கத்தைப் பார்க்க, உலாவி தேவை (உதாரணமாக, இன்டர்நெட் எக்ஸ்புளோரர், எட்ஜ், சஃபாரி, பயர்பாக்ஸ் அல்லது குரோம்). உங்கள் உலாவியில், தட்டச்சு செய்வதன் மூலம் இணையப் பக்கத்தைத் திறக்கலாம் முகவரிப் பட்டி URL. எடுத்துக்காட்டாக, "https://www.computerhope.com/esd.htm" என்று தட்டச்சு செய்தால், ESD கணினி நம்பிக்கை பக்கம் வரும்.

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

முதல் இணையப் பக்கம் எப்போது உருவாக்கப்பட்டது?

முதல் இணையப் பக்கம் CERN இல் ஆகஸ்ட் 6, 1991 இல் டிம் பெர்னர்ஸ்-லீ என்பவரால் உருவாக்கப்பட்டது. அதற்கு முன், http://info.cern.ch/ இல் முதல் தளத்தையும் முதல் இணையப் பக்கத்தையும் சென்று பார்க்கலாம்.

ஒரு தளத்திற்கும் வலைப்பக்கத்திற்கும் என்ன வித்தியாசம்?

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

மேலே உள்ள URL எடுத்துக்காட்டில், "url.htm" என்பது இணையப் பக்கமாகும், இது எப்போதும் URL இன் கடைசி பகுதியாகும். .htm, .html, .php, .cgi, .pl அல்லது பிற கோப்பு நீட்டிப்பில் முடிவடையாத URLகளுக்கு, சேவையகம் இயல்புநிலையாக index.htm என்ற இணையப் பக்கத்தை ஏற்றுகிறது. எடுத்துக்காட்டாக, தொடர்புப் பக்க URLக்கான இணையப் பக்கம் இல்லை. இந்த வழக்கில், இயல்புநிலை குறியீட்டு கோப்பு / தொடர்பு கோப்பகத்திலிருந்து ஏற்றப்படும்.

இணைய பக்க உதாரணங்கள்

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

வலைப்பக்கத்தில் என்ன கூறுகள் உள்ளன?

கீழே முக்கிய கூறுகளின் முறிவு உள்ளது, எனவே வலை வடிவமைப்பாளர்கள் எதைப் புரிந்து கொள்ள முடியும் தருக்க அமைப்புவலை பக்கங்கள்:

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

தேடல் பட்டி பார்வையாளர்களை விரைவாக ஒரு வலைப்பக்கத்தைக் கண்டறிய அனுமதிக்கிறது. இது ஒவ்வொரு பக்கத்திலும் இருக்க வேண்டும்;

வழிசெலுத்தல் பட்டி அல்லது மெனு பொதுவாக ஒவ்வொரு வலைப்பக்கத்தின் மேல் அல்லது இடது பக்கத்தில் காணப்படும். இது தளத்தின் ஒவ்வொரு முக்கிய பிரிவுகளுக்கும் இணைப்புகளைக் கொண்டிருக்க வேண்டும்;

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

சமூக வலைப்பின்னல் தளங்களில் ஒரு வலைப்பக்கத்திற்கான இணைப்பைப் பகிர சமூக பொத்தான்கள் பார்வையாளர்களை அனுமதிக்கின்றன;

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

ஒவ்வொரு இணையப் பக்கத்தின் மேலேயும் தலைப்பு இருக்க வேண்டும். இது HTML குறிச்சொல்லைப் பயன்படுத்தி உருவாக்கப்பட்டது.

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

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

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

பக்கத்தை அச்சிடுவதற்கான பொத்தான் போன்ற கூடுதல் தகவல்களும் கருவிகளும் பயனர்களுக்கு பயனுள்ளதாக இருக்கும்;

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

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

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

இணையப் பக்கத்தில் பயனர்கள் என்ன செய்யலாம்?

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

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

HTML மற்றும் CSS என்றால் என்ன?

HTML (HyperText Markup Language) உள்ளடக்கத்தின் கட்டமைப்பையும் அதன் பொருளையும் வரையறுக்கிறது, தலைப்புகள், பத்திகள் அல்லது படங்கள் போன்ற உள்ளடக்கத்தை வரையறுக்கிறது. CSS (கேஸ்கேடிங் ஸ்டைல் ​​ஷீட்ஸ்) அல்லது கேஸ்கேடிங் ஸ்டைல் ​​ஷீட்ஸ் என்பது வடிவமைப்பிற்காக உருவாக்கப்பட்ட விளக்கக்காட்சி மொழியாகும். தோற்றம்எழுத்துருக்கள் அல்லது வண்ணங்களைப் பயன்படுத்தி உள்ளடக்கம்.

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

HTML மற்றும் CSS க்கு இடையிலான வித்தியாசத்தைப் பற்றிய இந்த புரிதலுடன், HTML இல் இன்னும் விரிவாக டைவ் செய்யலாம்.

அடிப்படை HTML விதிமுறைகள்

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

கூறுகள்

ஒரு பக்கத்தில் உள்ள பொருட்களின் கட்டமைப்பு மற்றும் உள்ளடக்கத்தை எவ்வாறு வரையறுப்பது என்பதை கூறுகள் குறிப்பிடுகின்றன. பொதுவாகப் பயன்படுத்தப்படும் சில கூறுகளில் பல நிலை தலைப்புகள் (இலிருந்து வரை உறுப்புகள் என வரையறுக்கப்படுகிறது) மற்றும் பத்திகள் (இவ்வாறு வரையறுக்கப்பட்டுள்ளது

); பட்டியலில் உள்ள கூறுகளை நீங்கள் சேர்க்கலாம் .

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

குறிச்சொற்கள்

கோண அடைப்புக்குறிகளைச் சேர்த்தல்< и >உறுப்பைச் சுற்றி ஒரு குறிச்சொல் என அறியப்படுவதை உருவாக்குகிறது. குறிச்சொற்கள் பெரும்பாலும் தொடக்க மற்றும் மூடும் குறிச்சொற்களின் ஜோடிகளில் நிகழ்கின்றன.

தொடக்க குறிச்சொல் உறுப்பின் தொடக்கத்தைக் குறிக்கிறது. இது சின்னத்தைக் கொண்டுள்ளது; உதாரணத்திற்கு, .

இறுதிக் குறிச்சொல் உறுப்பின் முடிவைக் குறிக்கிறது. இது ஒரு சின்னத்தைக் கொண்டுள்ளது< с последующей косой чертой и именем элемента и завершается символом >; உதாரணத்திற்கு, .

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

எனவே, இணைப்பு குறிச்சொற்கள் இப்படி இருக்கும்:

...

பண்புக்கூறுகள்

பண்புக்கூறுகள் என்பது ஒரு உறுப்பைப் பற்றிய கூடுதல் தகவல்களை வழங்கப் பயன்படும் பண்புகளாகும். மிகவும் பொதுவான பண்புக்கூறுகளில் ஐடி பண்புக்கூறு அடங்கும், இது உறுப்பை அடையாளம் காட்டுகிறது; உறுப்பை வகைப்படுத்தும் வர்க்கப் பண்பு; உட்பொதிக்கப்பட்ட உள்ளடக்கத்தின் மூலத்தைக் குறிப்பிடும் src பண்புக்கூறு; மற்றும் href பண்புக்கூறு, இது தொடர்புடைய ஆதாரத்திற்கான இணைப்பைக் குறிப்பிடுகிறது.

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

ஷே ஹோவ்

அடிப்படை HTML விதிமுறைகளின் விளக்கம்

இந்தக் குறியீடு "Shay Howe" என்ற உரையை வலைப்பக்கத்தில் காண்பிக்கும், மேலும் இந்த உரையைக் கிளிக் செய்யும் போது பயனரை http://shayhowe.com க்கு அழைத்துச் செல்லும். இணைப்பு உறுப்பு தொடக்க குறிச்சொல்லைப் பயன்படுத்தி அறிவிக்கப்படுகிறது மற்றும் மூடும் குறிச்சொல்தொடக்கக் குறிச்சொல்லில் href="http://shayhowe.com" வழியாக அறிவிக்கப்பட்ட இணைப்பு முகவரியின் பண்பு மற்றும் மதிப்பு ஆகியவற்றை உள்ளடக்கியது.

அரிசி. 1.01 அவுட்லைன் வடிவத்தில் உள்ள HTML தொடரியல் உறுப்பு, பண்புக்கூறு மற்றும் குறிச்சொல் ஆகியவற்றை உள்ளடக்கியது

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

HTML ஆவணக் கட்டமைப்பைத் தனிப்பயனாக்குதல்

HTML ஆவணங்கள் .txt ஐ விட .html நீட்டிப்புடன் சேமிக்கப்பட்ட எளிய உரை ஆவணங்கள். HTML எழுதத் தொடங்க, முதலில் நீங்கள் பயன்படுத்த வசதியாக இருக்கும் உரை திருத்தி தேவை. துரதிருஷ்டவசமாக, இது சேர்க்கப்படவில்லை மைக்ரோசாப்ட் வேர்டுஅல்லது பக்கங்கள், இவை சிக்கலான எடிட்டர்கள் என்பதால். HTML மற்றும் CSS ஐ எழுதுவதற்கு மிகவும் பிரபலமான இரண்டு உரை எடிட்டர்கள் ட்ரீம்வீவர் மற்றும் உன்னதமான உரை. இலவச மாற்றுகளில் Windows க்கான Notepad++ மற்றும் Mac க்கான TextWrangler ஆகியவையும் அடங்கும்.

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

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

உறுப்பு வரையறுக்கிறது உள்ளே மேல் பகுதிஆவணம், பல்வேறு மெட்டாடேட்டா உட்பட (பக்கத்தைப் பற்றிய தகவல்களுடன்). உறுப்புக்குள் இருக்கும் உள்ளடக்கம் இணையப் பக்கத்திலேயே காட்டப்படாது. அதற்கு பதிலாக, இது ஆவணத்தின் தலைப்பு (உலாவி சாளரத்தின் தலைப்புப் பட்டியில் தோன்றும்), வெளிப்புற கோப்புகளுக்கான இணைப்புகள் அல்லது வேறு ஏதேனும் பயனுள்ள மெட்டாடேட்டாவை உள்ளடக்கியிருக்கலாம்.

வலைப்பக்கத்தின் அனைத்து புலப்படும் உள்ளடக்கமும் உறுப்பில் இருக்கும். ஒரு பொதுவான HTML ஆவணத்தின் அமைப்பு இதுபோல் தெரிகிறது:

வணக்கம் உலகம்! வணக்கம் உலகம்!

இது ஒரு இணையப் பக்கம்.

HTML ஆவணக் கட்டமைப்பின் விளக்கக்காட்சி

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

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

சுய மூடும் கூறுகள்

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

• 
  

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

குறியீடு சரிபார்ப்பு

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

நடைமுறையில்

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

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

அடிப்படை CSS விதிமுறைகள்

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

தேர்வாளர்கள்

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

தேர்வாளர்கள் பொதுவாக ஐடி அல்லது கிளாஸ் மதிப்பு போன்ற பண்புக்கூறு மதிப்புடன் அல்லது உறுப்பு பெயர் அல்லது

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

பி(...)

பண்புகள்

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

பி (நிறம்: ...; எழுத்துரு அளவு: ...;)

மதிப்புகள்

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

மேலும் வண்ண சொத்து மதிப்பை ஆரஞ்சு நிறமாகவும், எழுத்துரு அளவு சொத்து மதிப்பை 16 பிக்சல்களாகவும் அமைக்கவும்.

பி (நிறம்: ஆரஞ்சு; எழுத்துரு அளவு: 16px; )

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

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

அரிசி. 1.03 CSS தொடரியல் அமைப்பு தேர்வி, பண்புகள் மற்றும் மதிப்புகளை உள்ளடக்கியது

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

தேர்வாளர்களுடன் பணிபுரிதல்

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

வகை தேர்வாளர்கள்

வகைத் தேர்வாளர்கள் தங்கள் வகையின்படி கூறுகளை குறிவைக்கிறார்கள். எடுத்துக்காட்டாக, அனைத்து உறுப்புகளையும் குறிவைக்க விரும்பினால், div தேர்வியைப் பயன்படுத்த வேண்டும். பின்வரும் குறியீடு உறுப்புகளுக்கான வகைத் தேர்வி மற்றும் தொடர்புடைய HTML ஐக் காட்டுகிறது.

டிவி(...)

... ...

வகுப்புகள்

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

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

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

அருமை (...)

...

அடையாளங்காட்டிகள்

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

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

CSS இல், அடையாளங்காட்டிகள் முன் ஒரு ஹாஷ் குறியீட்டால் குறிப்பிடப்படுகின்றன, அதைத் தொடர்ந்து ஐடி பண்புக்கூறின் மதிப்பு. இங்கே ஐடி மதிப்பு shayhowe ஐடி பண்புக்கூறு கொண்ட உறுப்பை மட்டுமே தேர்ந்தெடுக்கும்.

#ஷேஹோவ் (...)

...

கூடுதல் தேர்வாளர்கள்

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

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

CSS ஐ இணைக்கிறது

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

CSS ஐ சேர்ப்பதற்கான பிற விருப்பங்கள்

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

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

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

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

CSS சரியாக வழங்க, href பண்புக்கூறின் பாதை மதிப்பு நேரடியாக CSS கோப்பு சேமிக்கப்படும் இடத்தில் பொருந்த வேண்டும். முந்தைய எடுத்துக்காட்டில், main.css கோப்பு HTML கோப்பின் அதே இடத்தில் சேமிக்கப்படுகிறது, இது ரூட் கோப்புறை என்றும் அழைக்கப்படுகிறது.

CSS கோப்பு ஒரு துணை கோப்புறையில் இருந்தால், href பண்புக்கூறின் மதிப்பு அந்த பாதைக்கு ஒத்திருக்க வேண்டும். எடுத்துக்காட்டாக, எங்கள் main.css கோப்பு ஸ்டைல்ஷீட்கள் என்ற துணைக் கோப்புறையில் சேமிக்கப்பட்டிருந்தால், href பண்புக்கூறின் மதிப்பு stylesheets/main.css ஆக இருக்கும். இது ஒரு துணை கோப்புறைக்கு நகர்வதைக் குறிக்க முன்னோக்கி சாய்வு (அல்லது சாய்வு) பயன்படுத்துகிறது.

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

CSS மீட்டமைப்பைப் பயன்படுத்துதல்

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

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

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

நீங்கள் கொஞ்சம் சாகசமாக உணர்ந்தால், Nicholas Gallagher உருவாக்கிய Normalize.css உள்ளது. Normalize.css அனைத்து முக்கிய உறுப்புகளுக்கும் கடின மீட்டமைப்பைப் பயன்படுத்துவதில் கவனம் செலுத்தவில்லை, மாறாக அந்த உறுப்புகளுக்கான பொதுவான பாணிகளை அமைப்பதில் கவனம் செலுத்துகிறது. இதற்கு CSS பற்றிய ஆழமான புரிதலும், ஸ்டைல்களில் இருந்து நீங்கள் எதை அடைய விரும்புகிறீர்கள் என்பது பற்றிய அறிவும் தேவை.

குறுக்கு உலாவி இணக்கத்தன்மை மற்றும் சோதனை

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

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

நடைமுறையில்

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

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

டெக்ஸ்ட் எடிட்டரைப் பயன்படுத்தி, main.css என்ற புதிய கோப்பை உருவாக்கி, அதை நாம் உருவாக்கிய ஸ்டைல்ஷீட் கோப்புறையில் சேமிக்கலாம்.

உலாவியில் உள்ள index.html கோப்பைப் பார்ப்பதன் மூலம் உறுப்புகள் மற்றும்

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

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 உரிமம்: எதுவுமில்லை (பொது டொமைன்) */ html, உடல், div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, சுருக்கம், முகவரி, பெரிய, மேற்கோள், குறியீடு, டெல், dfn, em, img, ins, kbd, q, s, samp, சிறிய, வேலைநிறுத்தம், வலுவான, துணை, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figcaption, அடிக்குறிப்பு, தலைப்பு hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( ஓரம்: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ol, ul (list-style: none; ) blockquote, q (மேற்கோள்கள்: எதுவுமில்லை; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- சரிவு: சரிவு; எல்லை இடைவெளி: 0; )

எங்கள் main.css கோப்பு வடிவம் பெறத் தொடங்குகிறது, எனவே அதை index.html கோப்புடன் இணைப்போம். index.html இல் திறக்கவும் உரை திருத்திமற்றும் உறுப்பிற்குப் பிறகு, உறுப்பைச் சேர்க்கவும்.

உறுப்பு மூலம் ஸ்டைல்களை நாங்கள் சுட்டிக்காட்டுவதால், மதிப்பு நடைதாளுடன் rel பண்புக்கூறைச் சேர்க்கவும்.

href பண்புக்கூறைப் பயன்படுத்தி எங்கள் main.css கோப்பிற்கான இணைப்பையும் சேர்ப்போம். நினைவில் கொள்ளுங்கள், எங்கள் main.css கோப்பு உடைகள் கோப்புறையின் உள்ளே அமைந்துள்ள ஸ்டைல்ஷீட்ஸ் கோப்புறையில் சேமிக்கப்பட்டுள்ளது. எனவே href பண்புக்கூறின் மதிப்பு, இது எங்கள் main.css கோப்பிற்கான பாதை, சொத்துக்கள்/ஸ்டைல்ஷீட்கள்/main.css ஆக இருக்க வேண்டும்.

பாணிகள் மாநாடு

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

அரிசி. 1.04 CSS மீட்டமைப்புடன் கூடிய எங்கள் ஸ்டைல்கள் மாநாட்டு தளம்

ஆர்ப்பாட்டம் மற்றும் ஆதாரம்

கீழே நீங்கள் ஸ்டைல்கள் மாநாட்டு இணையதளத்தை அதன் தற்போதைய நிலையில் பார்க்கலாம், அத்துடன் தளத்தின் தற்போதைய மூலக் குறியீட்டைப் பதிவிறக்கவும்.

சுருக்கம்

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

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

மறுபரிசீலனை செய்ய, நாங்கள் பின்வருவனவற்றை உள்ளடக்கினோம்:

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

இப்போது HTML ஐக் கூர்ந்து கவனிப்போம் மற்றும் சொற்பொருளைப் பற்றி கொஞ்சம் தெரிந்து கொள்வோம்.

ஆதாரங்கள் மற்றும் இணைப்புகள்

• ஸ்கிரிப்டிங் மாஸ்டர் வழியாக பொதுவான HTML விதிமுறைகள்
• ஈர்க்கக்கூடிய வலைகள் வழியாக CSS விதிமுறைகள் & வரையறைகள்
• CSS கருவிகள்: எரிக் மேயர் வழியாக CSS ஐ மீட்டமைக்கவும்

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

ஆய்வக வகுப்புகளில், HTML கோப்புகளைத் தயாரிக்க Notepad உரை திருத்தியையும், என்ன செய்யப்பட்டுள்ளது என்பதைக் கண்காணிப்பதற்கான கருவியாக Internet Explorer உலாவியையும் பயன்படுத்துவோம்.

தத்துவார்த்த தகவல்

அடிப்படை கருத்துக்கள்

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

HTML ஆவணம்;

இணைய ஆவணம்;

இணைய பக்கம்.

இத்தகைய பக்கங்கள் பொதுவாக NTM அல்லது HTML வடிவத்தில் இருக்கும்.

ஒரு ஆசிரியர் அல்லது ஒரு IEDV உடல் மற்றும் பொதுவான ஹைப்பர்லிங்க்களால் ஒன்றோடொன்று இணைக்கப்பட்ட வலைப்பக்கங்களின் குழு ஒரு வலை முனை அல்லது வலைத்தளம் எனப்படும் கட்டமைப்பை உருவாக்குகிறது. ஒவ்வொரு HTML பக்கத்திற்கும் தனித்தனி URL உள்ளது - அஈபஇcஇணையத்தில்.

சட்டகம் (சட்டகம்) - இரண்டு அர்த்தங்களைக் கொண்ட ஒரு சொல். முதல் மதிப்பு அதன் சொந்த ஸ்க்ரோல் பார்களைக் கொண்ட ஆவணப் பகுதி. இரண்டாவது அனிமேஷன் கிராஃபிக் கோப்பில் (பிரேம்) 0DNN0H படம்.

ஆப்லெட் (ஆப்லெட்) - ஒரு நிரல் வடிவத்தில் கிளையன்ட் கணினிக்கு மாற்றப்பட்டது தனி கோப்புமற்றும் இணையப் பக்கத்தைப் பார்க்கும்போது தொடங்கப்பட்டது.

கையால் எழுதப்பட்ட தாள் (கையால் எழுதப்பட்ட தாள்) , அல்லது ஸ்கிரிப்ட் என்பது ஒரு வலைப்பக்கத்தில் அதன் திறன்களை விரிவுபடுத்துவதற்காக சேர்க்கப்பட்டுள்ள ஒரு நிரலாகும். சில சூழ்நிலைகளில், இன்டர்நெட் எக்ஸ்ப்ளோரர் உலாவி செய்தியைக் காட்டுகிறது: "பக்கத்தில் ஸ்கிரிப்ட் செயல்படுத்தலை அனுமதிக்கவா?" இந்த விஷயத்தில் நாம் ஸ்கிரிப்ட்களைக் குறிக்கிறோம்.

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

உலாவி (உலாவி) - இணையப் பக்கங்களைப் பார்ப்பதற்கான ஒரு நிரல்.

உறுப்பு- HTML மொழி வடிவமைப்பு. தரவை வைத்திருக்கும் மற்றும் அதை ஒரு குறிப்பிட்ட வழியில் வடிவமைக்க அனுமதிக்கும் கொள்கலன் என்று நீங்கள் நினைக்கலாம். எந்தவொரு வலைப்பக்கமும் கூறுகளின் தொகுப்பாகும். ஹைபர்டெக்ஸ்ட்டின் முக்கிய யோசனைகளில் ஒன்று கூடு கட்டும் கூறுகளின் சாத்தியமாகும். உதாரணத்திற்கு:

உறுப்பின் உள்ளடக்கம், உறுப்பு வடிவமைக்கும் தரவு

குறியிடவும்(ஆங்கில குறிச்சொல்லில் - லேபிள், டிஸ்கிரிப்டர், லேபிள்) - ஒரு உறுப்பின் தொடக்க அல்லது முடிவு குறிப்பான். குறிச்சொற்கள் உறுப்புகளின் செயல்பாட்டின் எல்லைகளை வரையறுக்கின்றன மற்றும் ஒருவருக்கொருவர் தனித்தனி கூறுகள். வலைப்பக்கத்தின் உரையில், குறிச்சொற்கள் கோண அடைப்புக்குறிக்குள் இணைக்கப்பட்டுள்ளன< >, மற்றும் எண்ட் டேக் எப்பொழுதும் ஸ்லாஷால் பின்பற்றப்படும். இந்த அடைப்புக்குறிகளுக்கு இடையே உரை இல்லை (< >), உலாவியில் பார்க்கும்போது முற்றிலும் தெரியும். உதாரணத்திற்கு:

உறுப்பு உள்ளடக்கம், தரவு என்று

ஒரு உறுப்பை வடிவமைக்கிறது

இந்த உரை ஒரு தனி பத்தியில் அமைந்திருக்கும்

எந்தவொரு வலைப்பக்கமும் கூறுகளின் தொகுப்பாகும். HTML இன் அடிப்படைக் கொள்கைகளில் ஒன்று, ஒரு தனிமத்தை மற்றொன்றிற்குள் கூடு கட்டும் திறன் ஆகும்.

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

இந்த உரை திரையின் மையத்தில் சீரமைக்கப்படும்

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

குறிப்பு:

ஏதேனும் பயனுள்ள தகவல்அதன் வடிவமைப்பைக் குறிக்கும் தொடக்க மற்றும் முடிவு குறிச்சொற்களுக்கு இடையில் இருக்க வேண்டும்;

அனைத்து பண்புக்கூறுகளும் தொடக்க குறிச்சொல்லில் அமைந்துள்ளன;

பயன்பாட்டின் எளிமைக்காக, நீங்கள் தொடக்கக் குறிச்சொல்லை பெரிய எழுத்து (பெரியல்) எழுத்துடன் (P), மற்றும் இறுதிக் குறிச்சொல் சிறிய (சிறிய) எழுத்துடன் (/p) எழுதலாம், இருப்பினும் இது தேவையில்லை;

அனைத்து உறுப்புகளுக்கும் ஒரு முடிவு (மூடுதல்) குறிச்சொல் தேவையில்லை;

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

WWW இலிருந்து எந்த ஒரு ஆவணத்தையும் நீங்கள் பதிவிறக்கம் செய்யும்போது, ​​அதன் உரை உங்கள் உலாவி சாளரத்தில் சரியாக வடிவமைக்கப்பட்ட, பார்க்க எளிதான வடிவத்தில் காட்டப்படும். இதன் பொருள் WEB பக்கங்கள் சாதாரண உரை அல்ல, ஆனால் உங்கள் உலாவி சாளரத்தில் ஆவணத்தின் விளக்கக்காட்சியைக் கட்டுப்படுத்த சில துணைத் தகவல்களையும் கொண்டுள்ளது. ஒரு ஆவணத்தை உருவாக்கும் போது, ​​பயனர் எந்த வகையான கணினியைப் பார்ப்பார் என்பது தெளிவாகத் தெரியாததால், WEB பக்கங்களை ஒரு குறிப்பிட்ட கணினி இயங்குதளத்திற்காக உருவாக்கப்பட்ட வடிவத்தில் தயார் செய்து சேமிக்க முடியாது, எடுத்துக்காட்டாக, Windows XPக்கான Microsoft Word வடிவத்தில். எந்த வகையான கணினியிலும் பணிபுரியும் ஒரு பயனர் ஆவணத்தை அதற்கேற்ப வடிவமைக்கப்படுவதைக் காண, இந்த நோக்கத்திற்காக குறிப்பாக உருவாக்கப்பட்ட HTML மொழி பயன்படுத்தப்படுகிறது.

HTML என்றால் என்ன?

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

CTRL+Uஐ அழுத்தவும்

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

HTML - HyperText Markup Language

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

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

HTML மொழி

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

HTML குறியீடு சாளரத்தில் உள்ள ஆவணம் ஒரு சிறப்பு வடிவத்தில் உள்ள உரை ஆவணமாகும். இந்த வடிவத்தில் உள்ள எல்லா கோப்புகளும் உள்ளன HTML நீட்டிப்பு(.html), அல்லது HTM (.htm). ஒரு HTML ஆவணம் கோண அடைப்புக்குறிக்குள் இணைக்கப்பட்ட மார்க்அப் கூறுகளுடன் எளிய உரையை கலக்கிறது< и >, உதாரணத்திற்கு, , , , . இந்த மார்க்அப் கூறுகள் குறிச்சொற்கள் என்று அழைக்கப்படுகின்றன. குறிச்சொற்கள் ஒற்றை, திறப்பு மற்றும் மூடுதல் மற்றும் ஒரு குறிப்பிட்ட வரிசையில் அடுத்தடுத்த பகுதிகளைக் கொண்டிருக்கலாம்:

• இடது கோண அடைப்புக்குறி.

எனவே, HTML ஆவணத்தின் தொடக்கத்தில் தோன்றும் மற்றும் அதன் தொடக்கத்தைக் குறிக்கும் தொடக்கக் குறிச்சொல், HTML பெயர் மற்றும் இரண்டு கோண அடைப்புக்குறிகளைக் கொண்டுள்ளது.< >, மற்றும் WEB ஆவணத்தின் முடிவில் அமைந்துள்ள குறிச்சொல், நியமிக்கப்பட்ட பகுதிகளுக்கு கூடுதலாக, ஒரு சாய்வு / அடையாளத்தையும் கொண்டுள்ளது, அதாவது மூடும் குறிச்சொல் மற்றும் ஆவணத்தின் முடிவைக் குறிக்கிறது. குறிச்சொல் என்பது ஆவணத்தில் ஒருங்கிணைக்கப்பட்ட ஸ்கிரிப்ட் நிரலின் குறியீட்டின் தொடக்கத்தைக் குறிக்கிறது. இந்தக் குறிச்சொல்லில், ஸ்கிரிப்ட் பெயருடன் கூடுதலாக, "vbscript" மதிப்புடன் ஒரு மொழி பண்புக்கூறு உள்ளது, அதாவது ஸ்கிரிப்ட் vbscript மொழியில் எழுதப்பட்டுள்ளது.

குறிச்சொற்களில் லத்தீன் எழுத்துக்களை மட்டுமே பயன்படுத்த முடியும், மேலும் பண்புக்கூறு மதிப்புகளில் எந்த எழுத்துகளையும் பயன்படுத்தலாம். எடுத்துக்காட்டாக, சிரிலிக் எழுத்துக்கள் பண்புக்கூறு மதிப்புகளாகப் பயன்படுத்தப்பட்டால், அவை மேற்கோள் குறிகளில் இணைக்கப்பட வேண்டும், எடுத்துக்காட்டாக, பெயர்="பிரிவு 1".

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

html தளமாகக் குறிச்சொற்கள்

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

ஆன்லைன் புத்தகக் கடை மூன்று படிகள்

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

பெரும்பாலான குறிச்சொற்கள் ஒன்று அல்லது அதற்கு மேற்பட்ட பண்புக்கூறுகளைக் கொண்டிருக்கலாம் - உலாவி தற்போதைய குறிச்சொல்லை எவ்வாறு செயலாக்க வேண்டும் என்பது பற்றிய கூடுதல் தகவலை வழங்கும் பண்புகள். ஆனால் பண்புக்கூறுகள் இல்லாமல் இருக்கலாம். ஒரு குறிச்சொல் பண்புக்கூறு ஒரு பெயரைக் கொண்டுள்ளது, எடுத்துக்காட்டாக, சீரமைத்தல், சம அடையாளம் = மற்றும் ஒரு மதிப்பு, இது எழுத்துக்களின் சரத்தால் குறிப்பிடப்படுகிறது, எடுத்துக்காட்டாக, "சென்டர்": align="center". பண்புக்கூறு மதிப்புகள் பொதுவாக மேற்கோள் குறிகளில் இணைக்கப்படும். ஆனால் இந்த மதிப்புகள் லத்தீன் எழுத்துக்கள், எண்கள் மற்றும் ஹைபன்களை மட்டுமே பயன்படுத்தினால், மேற்கோள்களைத் தவிர்க்கலாம், எடுத்துக்காட்டாக: align=center. ஆனால் ஜாவாஸ்கிரிப்ட் மற்றும் மொழிகளுடன் HTML இன் வரவிருக்கும் ஒருங்கிணைப்பு தொடர்பான பல சூழ்நிலைகள் காரணமாக மேற்கோள்களைத் தவிர்ப்பது கண்டிப்பாக பரிந்துரைக்கப்படவில்லை. எனவே, மேற்கோள்களில் பண்புகளை உடனடியாக எழுதும் பழக்கத்தை வளர்த்துக் கொள்ளுங்கள்.

HTML ஆவண அமைப்பு

ஒவ்வொரு HTML ஆவணத்திற்கும் ஒரு குறிப்பிட்ட அமைப்பு உள்ளது, இது போல் தெரிகிறது:

…

ஒரு HTML ஆவணத்தின் அமைப்பு பின்வரும் அத்தியாவசிய கூறுகளைக் கொண்டுள்ளது:

• குறிச்சொற்கள் மற்றும் , இது ஆவணத்தின் தொடக்கத்தையும் முடிவையும் குறிக்கும்;
• தலைப்பு மற்றும் மூலம் பிரிக்கப்பட்டது;
• குறிச்சொற்களால் கட்டுப்படுத்தப்பட்ட உடல்….

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

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

HTML (HyperText Markup Language) என்பது சிறப்பு மொழிவடிவமைத்தல் உரை ஆவணங்கள்(இது ஆவண மார்க்அப் மொழி என்றும் அழைக்கப்படுகிறது - WWW ஆவண பார்வையாளர்). HTML என்பது ஒரு ஆவணத்தின் கட்டமைப்பை விவரிக்கும் மிகவும் எளிமையான கட்டளைகளின் தொகுப்பாகும். HTML ஆனது உரையில் தனிப்பட்ட தருக்க பகுதிகளை முன்னிலைப்படுத்த உங்களை அனுமதிக்கிறது (தலைப்புகள், பத்திகள், பட்டியல்கள், முதலியன), தனித்தனியாக தயாரிக்கப்பட்ட புகைப்படம் அல்லது படத்தை ஒரு வலைப்பக்கத்தில் வைக்கவும், மற்றும் பிற ஆவணங்களுடன் தொடர்புகொள்வதற்காக பக்கத்தில் இணைப்புகளை ஒழுங்கமைக்கவும்.

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

பார்வையில் இருந்து விண்டோஸ் பயனர், ஒரு வலைப்பக்கம் என்பது இணைய சேவையகத்தில் உள்ள *.htm அல்லது *.html கோப்பு. உள்ளூர் நெட்வொர்க்அல்லது உங்கள் கணினியின் வன்வட்டில்.

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

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