ஆரம்பநிலைகளுக்கான வரையறுக்கப்பட்ட HTML கையேடு

கடைசியாக புதுப்பிக்கப்பட்டது: 29 மே 26

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

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

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

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

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

ஆரம்பகால Q & A

HTML- என்ன HTML?

HTML சுருக்கம் ஆகும் Hyper Tநீடிப்பு Markup Language. இது இணைய உலாவிகளுக்கான டேக்கிங் உள்ளடக்கங்களுக்கான நிலையான மொழி ஆகும்.

HTML "கூறுகள்" என்பதன் மூலம் குறிக்கப்படுகிறது. கூறுகள் "குறிச்சொற்கள்" என்றும் அழைக்கப்படுகின்றன.

XHTML- ஏன் HTML தேவை?

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

அதனால்தான் உங்களுக்கு HTML தேவை.

எக்ஸ்எம்எல்- HTML உணர்வு முக்கியமானது?

HTML முக்கியமானது அல்ல. ஆனால் சரியான நடைமுறைகளுடன் HTML ஐ எழுதுவது சிறந்த நடைமுறை.

உங்கள் முதல் HTML கோப்பை உருவாக்குவதற்கான படிகள்

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

ஒரு கோட் எடிட்டர் தேவை. பெரிய குறியீடு எடிட்டர் பெரிய குறியீடுகளை எழுத மற்றும் ஒழுங்கமைக்க உதவுகிறது.

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

இங்கே நீங்கள் செய்ய வேண்டியது என்னவென்றால்:

  1. ஒரு குறியீடு ஆசிரியர் நிறுவவும்
  2. அதை திற
  3. புதிய கோப்பை உருவாக்கவும்
  4. அதை ஒரு. Html கோப்பாக சேமிக்கவும்

நீ செல்ல தயாராக இருக்கிறாய்!


மேலே செல்க

வணக்கம்!

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

குறியீடு:

<! DOCTYPE html> <html> <head> <title> எனது முதல் வலைப்பக்கம் </ title> </ head> <body> <p> வணக்கம்! </ P> </ body> </ html>

வெளியீடு:

வாழ்த்துக்கள்! உங்கள் முதல் HTML கோப்பை உருவாக்கியுள்ளீர்கள். இந்த கட்டத்தில் நீங்கள் அதை புரிந்து கொள்ள வேண்டியதில்லை. விரைவில் அதை மூடிவிடுவோம்.

HTML அமைப்பு புரிந்து

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

எனவே அதை "Hello World!" குறியீடில் இருந்து புரிந்து கொள்ள முயற்சிக்கலாம். ஒவ்வொரு HTML கோப்பிற்கும் பின்வரும் கூறுகள் கட்டாய பாகங்கள் ஆகும்.

  • <! DOCTYPE html> = இது உலாவிக்கு ஒரு அறிவிப்பு இது ஒரு HTML கோப்பாகும். <Html> குறிக்கு முன் அதை நீங்கள் குறிப்பிட வேண்டும்.
  • <html> </ html> = இது ஒரு HTML கோப்பின் மூல உறுப்பு. நீங்கள் எழுதும் அனைத்தும் <html> மற்றும் </ html> இடையில் செல்கிறது.
  • <head> </ head> = இது ஒரு உலாவிக்கு மெட்டா தகவல் பகுதியாகும். இந்த குறியீட்டுக்குள்ளான குறியீடுகள் காட்சி வெளியீட்டைக் கொண்டிருக்கவில்லை.
  • <body> </ body> = இது ஒரு இணைய உலாவி வழங்கும் பகுதியாகும். <Body> மற்றும் </ body> இடையில் குறியீடுகளின் ரெண்டரிங் என்பது நீங்கள் ஒரு இணையத்தளத்தில் சரியாகப் பார்க்கிறீர்கள்.


மேலே செல்க

XHTML- HTML குறிச்சொற்கள்

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

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

(2a) தலை குறிச்சொற்கள்

அனைத்து தலை குறிச்சொல்களும் <head> மற்றும் </ head> இடையே செல்கின்றன. அவர்கள் வலை உலாவி மற்றும் தேடல் இயந்திரங்கள் மெட்டா தகவல் கொண்டிருக்கும். அவர்கள் அடிப்படையில் காட்சி வெளியீடு இல்லை.

<title> </ title>

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

குறியீடு:

<title> என் முதல் வலைப்பக்கம் </ title>
தலைப்பு குறிச்சொல் உங்கள் உலாவியில் மேல் தோன்றுகிறது.

<இணைப்பை>

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

குறியீடு:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<மெட்டா>

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

குறியீடு:

<meta name = "description" content = "தேடுபொறிகளை காண்பிக்கும் குறுகிய விளக்கம் இது"

<ஸ்கிரிப்ட்> </ script>

ஸ்கிரிப்ட் குறிச்சொல் ஒரு சர்வர் ஸ்கிரிப்ட் ஸ்கிரிப்ட் உள்ளிட்டோ அல்லது வெளிப்புற ஸ்கிரிப்ட் கோப்பிற்கு இணைப்பை உருவாக்குகிறது. இது தொடக்க குறிப்பில் இரண்டு பண்புக்கூறுகளைக் கொண்டிருக்கலாம். ஒன்று வகை மற்றும் மற்றொரு மூல (src).

குறியீடு:

<ஸ்கிரிப்ட் வகை = "உரை / ஜாவாஸ்கிரிப்ட்" src = "scripts.js"> </ script>

<noscript> </ noscript>

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

குறியீடு:

<Noscript> <ப> அந்தோ! உரைகள் முடக்கப்பட்டுள்ளன. </ P> </ noscript>

(2b) உடல் குறிச்சொற்கள்

அனைத்து உடல் குறிச்சொற்களை <body> மற்றும் </ body> இடையே செல்கின்றன. அவர்கள் காட்சி வெளியீடுகளைக் கொண்டிருக்கிறார்கள். இதுதான் பெரும்பாலான வேலை செய்யப்படுகிறது. உங்கள் முக்கிய பக்க உள்ளடக்கத்தை கட்டமைக்க நீங்கள் இந்த குறிச்சொற்களைப் பயன்படுத்த வேண்டும்.

<h1> </ h1> <h6> </ H6>

இவை தலைப்பு குறிச்சொற்கள். மிக முக்கியமான தலைப்பு <h1> மற்றும் <h6> உடன் குறைந்தது முக்கியமானது. நீங்கள் சரியான வரிசைக்கு அவற்றை பயன்படுத்த வேண்டும்.

குறியீடு:

<h1> இது ஒரு H1 தலைப்பு </ h1> <H2> இது ஒரு H2 தலைப்பு </ h2> <H3> இது ஒரு H3 தலைப்பு </ h3> <h4> இது ஒரு H4 தலைப்பு </ h4> <h5 > இது ஒரு H5 தலைப்பு </ h5> <h6> இது ஒரு H6 தலைப்பு </ h6>

வெளியீடு:

வடிவமைத்தல் குறிச்சொற்கள்

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

குறியீடு:

<p> நீங்கள் <strong> தைரியமான </ strong>, <u> அடிக்கோடு </ u>, <em> சாய்வு </ em>, <mark <mark> </ mark>, <sub> சந்தா </ sub>, <sup> superscript </ sup> மேலும் <! p>

வெளியீடு:

<! - ->

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

உதாரணமாக:

<! - <p> இந்த வழியில் அவற்றைச் சுற்றியுள்ள எந்தவொரு குறியீடுகளையும் நீங்கள் கருத்து தெரிவிக்கலாம் </ p> ->

(2c) பிற முக்கிய HTML குறிச்சொற்கள்

<a> </a>

நங்கூரம் கிட்டத்தட்ட எல்லா இடங்களிலும் பயன்படுத்தப்படும் ஒரு மதிப்புமிக்க குறிப்பாகும். குறைந்தபட்சம் ஒரு நங்கூரம் இணைப்பு இல்லாமல் வலைப்பக்கங்களை ஆன்லைனில் பார்க்க முடியாது.

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

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

  • ahref = "" = இது இலக்கு இணைப்பை வரையறுக்கிறது. இணைப்பு இரட்டை மேற்கோள்களுக்கு இடையே செல்கிறது.
  • இலக்கு = "" = இது ஒரு புதிய உலாவி தாவலில் அல்லது அதே தாவலில் திறக்கும் என்பதை வரையறுக்கிறது. இலக்கு = "_ blank" என்பது புதிய தாவலுக்கு மற்றும் இலக்கு = "_ self" அதே தாவலில் திறக்கும்.
  • rel = "" = இது நடப்பு பக்கத்தின் தொடர்பை இணைக்கப்பட்ட பக்கத்துடன் தொடர்புபடுத்துகிறது. இணைக்கப்பட்ட பக்கத்தை நீங்கள் நம்பவில்லையெனில், நீங்கள் rel = "nofollow" என்பதை வரையறுக்கலாம்.

குறியீடு:

Google இல் செல்ல <p> <a target="_blank" href="https://www.google.com/"> இங்கே கிளிக் செய்க </a>. இது புதிய தாவலில் திறக்கும். </ P> <p> <a target="_self" href="https://www.google.com/"> இங்கே சொடுக்கவும் </a>. இது உங்களை Google க்கு எடுத்துச்செல்லும், ஆனால் தற்போதைய தாவலில் திறக்கும். </ P>

வெளியீடு:

<img />

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

<img /> ஒரு சுய முடிவைக் குறிக்கின்றது. இது போன்ற </ img> போன்ற பாரம்பரிய நிறைவு தேவை இல்லை. நீங்கள் அதை சரியாக பயன்படுத்த முடியும் முன் நீங்கள் தெரிந்து கொள்ள வேண்டும் சில பண்புகளை உள்ளன.

  • src = "" = இது படத்தின் மூல இணைப்பை வரையறுப்பதாகும். இரட்டை மேற்கோள்களுக்கு இடையில் இணைப்பை சரியான இடத்தில் வை.
  • alt = "" = இது மாற்று உரைக்கு நிற்கிறது. உங்கள் படத்தை ஏற்றாத போது, ​​இந்த உரை பயனர் காணாமல் படத்தைப் பற்றி ஒரு யோசனைக்கு அளிக்கும்.
  • width = "" = இது பிக்சல்களில் படத்தின் அகலத்தை வரையறுக்கிறது.
  • உயரம் = "" = பிக்சல்களின் படத்தின் உயரத்தை அது வரையறுக்கிறது.

உதாரணமாக:

<p> இது ஆகஸ்ட் மாதம் Googleplex ஆகும். </ p> <p> இந்த படத்தில் அகலம் 2014 பிக்சல்கள் மற்றும் உயரம் 500 பிக்சல்கள் உள்ளன. </ p> <img src = "https: //upload.wikimedia. ஆகஸ்ட் XX "அகலம் =" 375 "height =" 0 "/> </ span> </ div>

வெளியீடு:

உதவிக்குறிப்புகள்: கிளிக் செய்யக்கூடிய படத்தை செருக விரும்புகிறீர்களா? படக் குறியீட்டை ஒரு <a> குறிச்சொல்லைப் போடு. அது எவ்வாறு செல்கிறது என்பதைப் பாருங்கள்.

<ol> </ ol> அல்லது <ul> </ ul>

பட்டியல் டேக் உருப்படிகளின் பட்டியலை உருவாக்குவது. <ol> கட்டளையிடப்பட்ட பட்டியல்களுக்கானது (எண்ணிடப்பட்ட பட்டியல்) மற்றும் <ul> வரிசையற்ற பட்டியல்களுக்கு (புல்லட் புள்ளிகள்) உள்ளது.

<Ol> அல்லது <ul> உள்ளே பட்டியலிடப்பட்ட பட்டியல் <li> </ li> உடன் குறிக்கப்பட்டுள்ளது. li பட்டியலில் உள்ளது. <Li> அல்லது <ul> குறிச்சொல்லுக்குள் நீங்கள் விரும்பியபடி <

குறியீடு:

</ p> <li> <li> உருப்படி 1 </ li> <li> உருப்படி 2 </ li> <li> உருப்படி 3 </ li> </ ol> <p> </ P> <li> உருப்படி 1 </ li> <li> உருப்படி 2 </ li> <li> உருப்படி 3 </ li> </ ul>

வெளியீடு:

<table> </ table>

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

<table> </ table> என்பது வெளிப்புறக் குறியீடு ஆகும். இந்த குறியில், <tr> அட்டவணை வரிசையில் நிற்கிறது, <td> அட்டவணை நெடுவரிசை மற்றும் <th> அட்டவணையின் தலைப்பகுதி உள்ளது.

குறியீடு:

<table> <tr> <th> பெயர் </ th> <th> வயது </ th> <th> தொழில்முறை </ வது> </ tr> <tr> <td> ஜோ <td> XHTML </ td> < </ td> <td> நர்ஸ் </ td> </ tr> <tr> <td> சிமோன் </ span> </ / td> <td> XHTML </ td> <td> பேராசிரியர் </ td> </ tr> </ table>

வெளியீடு:

குறிப்பு: முதல் <tr> க்குள் மதிப்புகள் தலைப்புகள் ஆகும். எனவே, நாங்கள் உரைக்கு தைரியமான உரை விளைவுகளை பயன்படுத்துகின்ற <th> ஐப் பயன்படுத்துகிறோம்.

அட்டவணை குழுமம்

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

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

அட்டவணை தொகுத்தல் குறிப்புகள் பின்வருமாறு:

  • <thead> </ thead> = ஒரு அட்டவணையின் தலைப்புகளை போடுவதற்கு. இது அட்டவணை ஒவ்வொரு பிளவு பக்கம் அச்சிடுகிறது.
  • <tbody> </ tbody> = ஒரு மேஜையின் முக்கிய தரவு போடுவதற்கு. உங்களுக்குத் தேவைப்படும்போது பல <tbody> ஆக இருக்கலாம். ஒரு <tbody> குறிச்சொல் என்பது தரவுகளின் ஒரு தனி குழு.
  • <tfoot> </ tfoot> = ஒரு அட்டவணையின் முடிப்பு தகவலை மடிக்க இது அட்டவணை ஒவ்வொரு பிளவு பக்கம் அச்சிடுகிறது.

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

எமது முன்மாதிரியான அட்டவணையை <thead>, <tbody> மற்றும் <tfoot> என்ற வகையில் எப்படி தொகுக்கலாம்?

குறியீடு:

<table> <th>> <tr> <th> ஜான் </ td> <td> <TD> தொழிலதிபர் </ td> </ tr> <tr> <td> கரோல் </ td> <td> 27 </ td> <td> நர்ஸ் </ பேராசிரியர் </ td> </ tr> </ tbody> <tfoot> <tr> <td> </ span> <td> மொத்த நபர்கள்: </ td> <td> 26 </ td> </ tr> </ tfoot> </ table>

வெளியீடு:

<form> </ form>

படிவம் உறுப்பு இணைய பக்கங்களுக்கு ஊடாடும் படிவங்களை உருவாக்க பயன்படுகிறது. HTML வடிவத்தில் பல தொடர்ச்சியான கூறுகள் உள்ளன. எடுத்துக்காட்டாக: <label>, <input>, <textarea> முதலியன.

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

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

வடிவங்களுக்கான பல வகையான உள்ளீடுகள் உள்ளன. மிகவும் அடிப்படை உள்ளீடு வகை உரை. இது <input type = "text"> என எழுதப்பட்டுள்ளது. வகைகள் ரேடியோ, செக் பாக்ஸ், மின்னஞ்சல் மற்றும் பலவற்றில் இருக்கலாம். சமர்ப்பிக்க பொத்தானை உருவாக்குவதற்கான கீழே உள்ள ஒரு சமர்ப்பிக்க வகை உள்ளீடு இருக்க வேண்டும்.

<label> குறிச்சொல் லேபிள்களை உருவாக்குவதற்கும் உள்ளீடுகளுடன் அவற்றை இணைப்பதற்கும் பயன்படுத்தப்படுகிறது. உள்ளீடுகளுடன் லேபிள்களை இணைப்பதற்கான விதி, அது = "" லேபிள் மற்றும் ஐடி = "" இன் பண்புக்கூறின் பண்புக்கூறுக்கு ஒரே மதிப்பு.

குறியீடு:

முதல் பெயர்: </ label> <input type = "text" id = "firstname"> <br> <name for "lastname"> கடைசி பெயர்: </ label> <text type id = "உயிர்" வரிசைகள் = "10" cols = "text" = "bio"> <textarea id = "bio" </ Span> <<label> பாலினம்: </ label> <br> <label for = "male"> ஆண் </ label> <input type = பெண் </ label> <input type = "வானொலி" பெயர் = "பாலினம்" id = "female"> <br > <input type = "submit" மதிப்பு = "சமர்ப்பி"> <form>

வெளியீடு:

குறிப்பு: நான் ஒரு பூஜ்ய மதிப்பை சுட்டிக்காட்டியிருக்கிறேன், ஏனென்றால் எந்த தகவலையும் இது தொடர்புபடுத்தவில்லை.


மேலே செல்க

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

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

ஒரு பண்புக்கூறு attributename = "" மற்றும் தொடக்க HTML குறியில் அமர்ந்திருக்கிறது. பண்புக்கூறு மதிப்பு இரட்டை மேற்கோள்களுக்கு இடையில் செல்கிறது.

id = "" மற்றும் வர்க்கம் = ""

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

குறியீடு:

<h1 class = "heading"> இது முக்கிய தலைப்பு </ h1>

படம் = ""

ஹைபர்டெக்ஸ்ட் குறிப்புக்கு href உள்ளது. அவர்கள் இணைப்புகள் குறிப்புகளை பயனர்கள் சுட்டிக்காட்டுகின்றனர். ஆங்கர் டேக் <a> இலக்கு URL ஐ பயனர்களுக்கு அனுப்ப href பயன்படுத்துகிறது.

குறியீடு:

<a href="https://www.google.com/"> Google </a>

மூல = ""

src ஆதாரமாக உள்ளது. இது HTML கோப்பில் நீங்கள் பயன்படுத்தும் ஒரு ஊடகத்தின் அல்லது ஆதாரத்தின் ஆதாரத்தை வரையறுக்கிறது. ஆதாரம் உள்ளூர் அல்லது மூன்றாம் தரப்பு URL ஆக இருக்கலாம்.

குறியீடு:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

Alt = ""

மாற்று alt உள்ளது. இது ஒரு HTML உறுப்பு ஏற்ற முடியாது போது பயன்படுத்த வரும் ஒரு காப்பு உரை.

குறியீடு:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "கூகிள் தலைமையகம்" />

பாணி = ""

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

குறியீடு:

<h2 பாணி = "color: red"> இது மற்றொரு தலைப்பு </ h2>


மேலே செல்க

X- கோட் காட்சி: பிளாக் Vs இன்லைன்

சில கூறுகள் எப்போதுமே ஒரு புதிய வரியைத் தொடங்கி முழு அகலத்தை எடுத்துக்கொள்ளும். இவை "பிளாக்" கூறுகள்.

எ.கா: <div>, <p>, <h1> - <h6>

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

முன்னாள்: <a>, <span>, <strong>, <img> போன்றவை.

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

குறியீடு:

<! DOCTYPE html> <html> <head> <title> எனது முதல் வலைப்பக்கம் </ title> </ head> <body> <h2> இது ஒரு H2 தலைப்பு. இது பிளாக் காட்சி உள்ளது. </ H2> <h2> இது <u> இன்னொரு </ u> H2 தலைப்பு. இங்கே அடிக்கோடிட்ட குறியில் இன்லைன் காட்சி உள்ளது. </ H2> </ body> </ html>

வெளியீடு:


மேலே செல்க

HTML - இரட்டை மேற்கோள் HTML ஒற்றை மேற்கோள் எதிராக

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

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

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


மேலே செல்க

6- சொற்பொருள் HTML Vs அல்லாத சொற்பொருள் HTML

சொற்பொருள் HTML என்பது HTML இன் சமீபத்திய பதிப்பு, இது HTML5 என்றும் அழைக்கப்படுகிறது. இது அல்லாத சொற்பொருள் HTML மற்றும் XHTML வளர்ந்த பதிப்பு.

ஏன் HTML5 சிறந்தது? முந்தைய பதிப்புகளில், HTML உறுப்புகள் அடையாள / வர்க்க பெயர்களால் அடையாளம் காணப்பட்டன. உதாரணமாக: <div id = "article"> </ div> ஒரு கட்டுரையாக கருதப்பட்டது.

HTML5 இல், <article> </ article> குறிச்சொல் எந்த ஐடி / வர்க்க அடையாளங்காட்டியும் தேவையில்லாமல் ஒரு கட்டுரையாகக் குறிக்கப்படுகிறது.

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

இங்கு சில பிரபலமான HTML5 குறிச்சொற்களை பட்டியல் உள்ளது:

  • <main> </ main> = இது உங்கள் பார்வையாளர்களை காட்ட விரும்பும் பிரதான உள்ளடக்கத்தை போர்த்துவதற்கு.
  • <header> </ header> = இது தலைப்பு அல்லது எழுத்தாளர் மெட்டா போன்ற உள்ளடக்கத்தின் தலைப்பு பகுதியை குறிக்கும்.
  • <article> </ article> = இது உங்கள் பார்வையாளர்களுக்கு ஒரு பயனர் வரையறுக்கப்பட்ட அல்லது சுயாதீன உள்ளடக்கத்தை குறிப்பிடுகிறது.
  • <section> </ section> = அது தலைப்பு, முடிப்பு அல்லது பக்கப்பட்டியில் எந்த குறியீடு குழு முடியும். நீங்கள் சொல்ல முடியும், அது ஒரு div ஒரு சொற்பொருள் வடிவம்.
  • <footer> </ footer> = இது உங்கள் அடிக்குறிப்பு உள்ளடக்கம், மறுப்பு அல்லது பதிப்புரிமை உரை.
  • <audio> </ audio> = எந்த சொருகி பிரச்சனையும் இல்லாமல் ஆடியோ கோப்புகளை செருகுவதற்கு இது உதவுகிறது.
  • <video> </ video> = போன்ற <ஆடியோ>, நீங்கள் சொருகி பிரச்சினைகள் இல்லாமல் இந்த டேக் பயன்படுத்தி வீடியோக்களை நுழைக்க முடியாது.

ஒரு எளிய HTMLX அமைப்பு இந்த மாதிரி இருக்கும்:

<Head> <head> <nav> <ul> </ span> </ div> </ div> <span style = "color =" "gtc: suffix =" "& gt; </ strong> </ header> <main> <article> <header> <h8> இந்த கட்டுரை தலைப்பு </ li> </ </ p> </ p> <p> பதிப்புரிமை 1 ஜான் டோ </> </ p> <p> p> </ footer> </ body> </ html>


மேலே செல்க

XHTML- HTML சரிபார்ப்பு

பெரும்பாலான வலை நிபுணர்கள் அதை முடிந்தவுடன் தங்கள் குறியீட்டை சரிபார்க்கிறார்கள். நன்றாக வேலை செய்யும் போது ஒரு குறியீட்டை சரிபார்க்க வேண்டியது ஏன்?

உங்கள் குறியீடுகளை சரிபார்க்க இரண்டு சாத்தியமான காரணங்கள் உள்ளன:

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

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


மேலே செல்க

எக்ஸ்எம்எல்- வேறு பயனுள்ள வளங்கள்

HTML எப்போதும் கற்றல் தலைப்பு. HTML இன் மேலும் மேம்படுத்தப்பட்ட பதிப்புகள் விரைவில் வரக்கூடும். எனவே நீங்கள் மேம்படுத்தப்பட்டு பயிற்சி பெற வேண்டும். பயிற்சி என்ன ஏஸ் HTML ஆகும்.

உங்களுக்கு சில பயனுள்ள ஆதாரங்கள் உள்ளன: