ஒரு HTML பக்கத்தை உருவாக்குவது எப்படி

நீங்கள் உங்கள் சொந்த வலைப்பக்கத்தை உருவாக்க விரும்பினால், உங்களுக்கு HTML பற்றிய புரிதல் இருக்க வேண்டும். This article explains how to create an HTML page. உங்கள் உள்ளடக்கத்தைப் பற்றி பார்வையாளர்களுக்குத் தெரியப்படுத்த, xml தளவரைபடத்தை எவ்வாறு உருவாக்குவது மற்றும் ஒரு படம் மற்றும் இணைப்பை எவ்வாறு சேர்ப்பது என்பதை நீங்கள் கற்றுக் கொள்வீர்கள். xml தளவரைபடத்தை உருவாக்குவதும் முக்கியம், இது உங்கள் தளத்தை ஒழுங்கமைக்கவும் உங்கள் போக்குவரத்தை அதிகரிக்கவும் உதவும். அடுத்த படி ஒரு டெம்ப்ளேட்டைத் தேர்ந்தெடுப்பது.

Creating a html page

HTML ஒரு மார்க்அப் மொழி. வலைப்பக்கத்தின் ஒவ்வொரு உறுப்பும் ஒரு குறிச்சொல்லால் குறிக்கப்படுகிறது. ஒரு குறிச்சொல் கோண அடைப்புக்குறிகளால் அடையாளம் காணப்படுகிறது, மேலும் ஒவ்வொரு உறுப்புக்கும் ஒன்று அல்லது அதற்கு மேற்பட்ட குறிச்சொற்கள் உள்ளன. சில உறுப்புகளுக்கு ஒரு குறிச்சொல் மட்டுமே தேவைப்படுகிறது; மற்றவர்களுக்கு இரண்டு தேவைப்படலாம். தொடக்க மற்றும் மூடும் குறிச்சொற்கள் முன்னோக்கி சாய்வைக் கொண்டுள்ளன (/). உதாரணத்திற்கு, பத்தி உறுப்பு p குறிச்சொல்லால் குறிக்கப்படுகிறது. தொடக்க மற்றும் மூடும் குறிச்சொற்களுக்கு இடையில் உள்ள உரை பத்தி உரை.

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

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

Creating a xml sitemap

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

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

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

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

Adding a picture

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

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

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

Adding a link

You can add a link in HTML to your document using an a> href பண்புடன் குறியிடவும். இது ஆவணத்திற்கான புக்மார்க்கை உருவாக்கி புதிய தாவலில் திறக்கும். ஆவணத்தில் படத்தைச் செருக href பண்புக்கூறையும் பயன்படுத்தலாம். HTML பொத்தானை இணைப்பாக மாற்ற, ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கொண்ட இணைப்பையும் பயன்படுத்தலாம். நீங்கள் இதைச் செய்தவுடன், நீங்கள் CSS அல்லது ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கொண்டு உங்கள் இணைப்பை வடிவமைக்கலாம்.

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

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

Adding a table

Adding a table to an HTML page is simple, ஆனால் அதைச் செய்வதற்கு முன் நீங்கள் கருத்தில் கொள்ள வேண்டிய சில விஷயங்கள் உள்ளன. உங்கள் பார்வையாளரின் கண்களைக் கவரும் மற்றும் முக்கியமான தகவல்களுக்கு கவனத்தை ஈர்க்க உங்கள் அட்டவணையின் பின்னணி நிறம் முக்கியமானது. ஹெக்ஸ் வண்ணக் குறியீடுகள் அல்லது வண்ணப் பெயர்களைப் பயன்படுத்தி அட்டவணையின் தலைப்பு உறுப்பு மற்றும் தரவு உறுப்புக்கு வேறு நிறத்தை அமைக்கலாம். எப்படியோ, உங்கள் அட்டவணை எளிதாக தெரியும்.

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

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

Adding a div

Adding a div to an HTML file allows you to add a section of your webpage without re-writing the whole page. div உறுப்பு என்பது உரைக்கான சிறப்புக் கொள்கலன், படங்கள், மற்றும் பிற கூறுகள். நீங்கள் விரும்பும் எதையும் பெயரிடலாம் மற்றும் உங்கள் தேவைகளுக்கு ஏற்ப அதன் பண்புகளை மாற்றலாம். உங்கள் பக்கத்தில் உள்ள div மற்றும் பிற உறுப்புகளுக்கு இடையில் இடைவெளியை உருவாக்க, நீங்கள் ஒரு வகுப்பு அல்லது விளிம்பைச் சேர்க்கலாம்.

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

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