HTML Layout Elements and Techniques

HTML லேஅவுட் உறுப்புகள் மற்றும் நுட்பங்கள்

HTML Layout Elements

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

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

HTML Layout Elements

HTML ஒரு வலைப்பக்கத்தின் வெவ்வேறு பகுதிகளை வரையறுக்கும் பல அர்த்தப்பூர்வ உறுப்புகளைக் கொண்டுள்ளது:

HTML5 Semantic Elements Description
<header> ஒரு ஆவணம் அல்லது பிரிவுக்கான தலைப்பை வரையறுக்கிறது
<nav> வழிசெலுத்தல் இணைப்புகளின் தொகுப்பை வரையறுக்கிறது
<section> ஒரு ஆவணத்தில் ஒரு பகுதியை வரையறுக்கிறது
<article> சுயாதீனமான, சுய-பொருத்தப்பட்ட உள்ளடக்கத்தை வரையறுக்கிறது
<aside> உள்ளடக்கத்திலிருந்து தவிர உள்ளடக்கத்தை வரையறுக்கிறது (ஒரு பக்கப்பட்டியைப் போல)
<footer> ஒரு ஆவணம் அல்லது பிரிவுக்கான அடிக்குறிப்பை வரையறுக்கிறது
<details> பயனர் திறந்து மூடக்கூடிய கூடுதல் விவரங்களை வரையறுக்கிறது
<summary> <details> உறுப்புக்கான தலைப்பை வரையறுக்கிறது

உதவிக்குறிப்பு:

அர்த்தப்பூர்வ உறுப்புகள் பற்றிய மேலதிக தகவலுக்கு எங்கள் HTML Semantics அத்தியாயத்தைப் படிக்கவும்.

HTML Layout Techniques

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

CSS Frameworks

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

CSS Float Property

CSS float பண்புகளைப் பயன்படுத்தி முழு வலை லேஅவுட்களையும் உருவாக்கலாம்.

CSS Flexbox

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

CSS Grid

CSS கட்ட லேஅவுட் தொகுதி வரிசைகள் மற்றும் நெடுவரிசைகளுடன் கூடிய கட்ட-அடிப்படையிலான லேஅவுட் அமைப்பை வழங்குகிறது.

CSS Frameworks

நீங்கள் விரைவாக உங்கள் லேஅவுடை உருவாக்க விரும்பினால், நீங்கள் Jassif Team CSS அல்லது Bootstrap போன்ற ஒரு CSS பிரேம்வொர்க்கைப் பயன்படுத்தலாம்.

Jassif Team Spaces:

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

CSS Float Layout

CSS float பண்புகளைப் பயன்படுத்தி முழு வலை லேஅவுட்களையும் உருவாக்கலாம். Float கற்றுக்கொள்வது எளிது - float மற்றும் clear பண்புகள் எவ்வாறு செயல்படுகின்றன என்பதை நினைவில் கொள்ள வேண்டும்.

குறைபாடுகள்: மிதக்கும் உறுப்புகள் ஆவண ஓட்டத்துடன் இணைக்கப்பட்டுள்ளன, இது நெகிழ்வுத்தன்மையை பாதிக்கக்கூடும்.

கவனிக்க:

Float பற்றிய மேலதிக தகவலுக்கு எங்கள் CSS Float மற்றும் Clear அத்தியாயத்தைப் பார்க்கவும்.

Float Layout Example:

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Sidebar

Additional information about cities.

Footer

CSS Flexbox Layout

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

Flexbox Example Code:

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex: 1 0 200px;
    margin: 10px;
}

கற்றுக்கொள்ளுங்கள்:

Flexbox பற்றிய மேலதிக தகவலுக்கு எங்கள் CSS Flexbox அத்தியாயத்தைப் படிக்கவும்.

CSS Grid Layout

CSS கட்ட லேஅவுட் தொகுதி வரிசைகள் மற்றும் நெடுவரிசைகளுடன் கூடிய கட்ட-அடிப்படையிலான லேஅவுட் அமைப்பை வழங்குகிறது, float மற்றும் positioning பயன்படுத்தாமல் வலைப்பக்கங்களை வடிவமைக்க எளிதாக்குகிறது.

Grid Example Code:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 20px;
}

.header {
    grid-column: 1 / -1;
}

.sidebar {
    grid-row: 2 / 4;
}

கற்றுக்கொள்ளுங்கள்:

CSS கட்டங்கள் பற்றிய மேலதிக தகவலுக்கு எங்கள் CSS Grid Intro அத்தியாயத்தைப் படிக்கவும்.

பயிற்சி

உங்கள் அறிவை சோதிக்க பின்வரும் பயிற்சியை முயற்சிக்கவும்:

❓ பின்வரும் HTML5 அர்த்தப்பூர்வ உறுப்புகளில் எது சுயாதீனமான, சுய-பொருத்தப்பட்ட உள்ளடக்கத்தை வரையறுக்கிறது?

<header>
✗ தவறு! <header> ஒரு ஆவணம் அல்லது பிரிவுக்கான தலைப்பை வரையறுக்கிறது
<article>
✓ சரி! <article> சுயாதீனமான, சுய-பொருத்தப்பட்ட உள்ளடக்கத்தை வரையறுக்கிறது
<nav>
✗ தவறு! <nav> வழிசெலுத்தல் இணைப்புகளின் தொகுப்பை வரையறுக்கிறது
<aside>
✗ தவறு! <aside> உள்ளடக்கத்திலிருந்து தவிர உள்ளடக்கத்தை வரையறுக்கிறது

சிறந்த நடைமுறைகள்

அர்த்தப்பூர்வ HTML பயன்படுத்தவும்: உள்ளடக்கத்தின் பொருளை சரியாக விவரிக்க அர்த்தப்பூர்வ உறுப்புகளைப் பயன்படுத்தவும்
நவீன லேஅவுட் நுட்பங்களைப் பயன்படுத்தவும்: Flexbox மற்றும் Grid ஆகியவற்றைப் பயன்படுத்தி நெகிழ்வான லேஅவுட்களை உருவாக்கவும்
அமைப்புக்காக டேபிள்களைப் பயன்படுத்த வேண்டாம்: லேஅவுட் வடிவமைப்பிற்காக HTML டேபிள்களைப் பயன்படுத்த வேண்டாம்
பதிலளிக்கும் டிசைன்: அனைத்து சாதனங்களிலும் சரியாகக் காண்பிக்க flexbox மற்றும் grid பயன்படுத்தவும்