34 KiB

Raw Blame History Unescape Escape

ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 1: HTML ਦਾ ਪਰਿਚਯ

journey
    title Your HTML Learning Journey
    section Foundation
      Create HTML file: 3: Student
      Add DOCTYPE: 4: Student
      Structure document: 5: Student
    section Content
      Add metadata: 4: Student
      Include images: 5: Student
      Organize layout: 5: Student
    section Semantics
      Use proper tags: 4: Student
      Enhance accessibility: 5: Student
      Build terrarium: 5: Student

ਸਕੈਚਨੋਟ Tomomi Imura ਦੁਆਰਾ

HTML, ਜਾਂ HyperText Markup Language, ਹਰ ਵੈਬਸਾਈਟ ਦੀ ਬੁਨਿਆਦ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਦੇ ਵੀ ਵੇਖਿਆ ਹੈ। HTML ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਦੇ ਢਾਂਚੇ ਦੇ ਤੌਰ 'ਤੇ ਸੋਚੋ - ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ ਕਿੱਥੇ ਜਾਂਦੀ ਹੈ, ਇਹ ਕਿਵੇਂ ਸੰਗਠਿਤ ਹੈ, ਅਤੇ ਹਰ ਹਿੱਸਾ ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ। ਜਦ CSS ਤੁਹਾਡੇ HTML ਨੂੰ ਰੰਗਾਂ ਅਤੇ ਲੇਆਉਟ ਨਾਲ "ਸਜਾਉਣ" ਲਈ ਆਵੇਗਾ, ਅਤੇ JavaScript ਇਸਨੂੰ ਇੰਟਰਐਕਟਿਵਿਟੀ ਨਾਲ ਜ਼ਿੰਦਾ ਕਰੇਗਾ, HTML ਉਹ ਅਹਿਮ ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਬਾਕੀ ਸਭ ਕੁਝ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।

ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਵਰਚੁਅਲ ਟੈਰੀਰੀਅਮ ਇੰਟਰਫੇਸ ਲਈ HTML ਢਾਂਚਾ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ। ਇਹ ਹੱਥ-ਅਨੁਭਵ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਮੁੱਢਲੇ HTML ਸੰਕਲਪ ਸਿਖਾਏਗਾ ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਦ੍ਰਿਸ਼ਮਾਨ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਸੈਮਾਂਟਿਕ ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮੱਗਰੀ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ, ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ, ਅਤੇ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਬੁਨਿਆਦ ਬਣਾਉਣ ਦੇ ਬਾਰੇ ਸਿੱਖੋਗੇ।

ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ HTML ਪੇਜ ਹੋਵੇਗਾ ਜੋ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਾਲਮਾਂ ਵਿੱਚ ਦਰਸਾਉਂਦਾ ਹੈ, ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ। ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਬੁਨਿਆਦੀ ਲੱਗਦਾ ਹੈ - ਇਹੀ HTML ਦਾ ਕੰਮ ਹੈ CSS ਦੇ ਵਿਜ਼ੁਅਲ ਪੋਲਿਸ਼ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ।

mindmap
  root((HTML Fundamentals))
    Structure
      DOCTYPE Declaration
      HTML Element
      Head Section
      Body Content
    Elements
      Tags & Attributes
      Self-closing Tags
      Nested Elements
      Block vs Inline
    Content
      Text Elements
      Images
      Containers (div)
      Lists
    Semantics
      Meaningful Tags
      Accessibility
      Screen Readers
      SEO Benefits
    Best Practices
      Proper Nesting
      Valid Markup
      Descriptive Alt Text
      Organized Structure

ਪਾਠ-ਪਹਿਲਾਂ ਕਵਿਜ਼

📺 ਦੇਖੋ ਅਤੇ ਸਿੱਖੋ: ਇਸ ਮਦਦਗਾਰ ਵੀਡੀਓ ਝਲਕ ਨੂੰ ਦੇਖੋ

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸੈਟ ਅੱਪ ਕਰਨਾ

HTML ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਢੰਗ ਵਾਲਾ ਵਰਕਸਪੇਸ ਸੈਟ ਅੱਪ ਕਰੀਏ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਸੰਗਠਿਤ ਫਾਈਲ ਢਾਂਚਾ ਬਣਾਉਣਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਆਦਤ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵੈਬ ਵਿਕਾਸ ਯਾਤਰਾ ਦੌਰਾਨ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੇਵਾ ਦੇਵੇਗੀ।

ਕੰਮ: ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਢਾਂਚੇ ਨੂੰ ਬਣਾਓ

ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਮਰਪਿਤ ਫੋਲਡਰ ਬਣਾਓਗੇ ਅਤੇ ਆਪਣੀ ਪਹਿਲੀ HTML ਫਾਈਲ ਸ਼ਾਮਲ ਕਰੋਗੇ। ਇੱਥੇ ਦੋ ਪਹੁੰਚਾਂ ਹਨ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ:

ਵਿਕਲਪ 1: Visual Studio Code ਦੀ ਵਰਤੋਂ ਕਰਨਾ

Visual Studio Code ਖੋਲ੍ਹੋ
"File" → "Open Folder" 'ਤੇ ਕਲਿਕ ਕਰੋ ਜਾਂ Ctrl+K, Ctrl+O (Windows/Linux) ਜਾਂ Cmd+K, Cmd+O (Mac) ਦੀ ਵਰਤੋਂ ਕਰੋ
terrarium ਨਾਮਕ ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਚੁਣੋ
Explorer ਪੈਨ ਵਿੱਚ, "New File" ਆਈਕਨ 'ਤੇ ਕਲਿਕ ਕਰੋ
ਆਪਣੀ ਫਾਈਲ ਨੂੰ index.html ਨਾਮ ਦਿਓ

ਵਿਕਲਪ 2: ਟਰਮੀਨਲ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

mkdir terrarium
cd terrarium
touch index.html
code index.html

ਇਹ ਕਮਾਂਡ ਕੀ ਕਰਦੀਆਂ ਹਨ:

ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ terrarium ਬਣਾਉਂਦਾ ਹੈ
ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾਂਦਾ ਹੈ
ਖਾਲੀ index.html ਫਾਈਲ ਬਣਾਉਂਦਾ ਹੈ
Visual Studio Code ਵਿੱਚ ਫਾਈਲ ਖੋਲ੍ਹਦਾ ਹੈ ਸੰਪਾਦਨ ਲਈ

💡 ਪ੍ਰੋ ਟਿਪ: ਫਾਈਲ ਦਾ ਨਾਮ index.html ਵੈਬ ਵਿਕਾਸ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਹੈ। ਜਦੋਂ ਕੋਈ ਵੈਬਸਾਈਟ 'ਤੇ ਜਾਂਦਾ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ index.html ਨੂੰ ਡਿਫਾਲਟ ਪੇਜ ਦੇ ਤੌਰ 'ਤੇ ਵੇਖਣ ਲਈ ਲੱਭਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ https://mysite.com/projects/ ਵਰਗਾ URL ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ projects ਫੋਲਡਰ ਤੋਂ index.html ਫਾਈਲ ਨੂੰ ਸਰਵ ਕਰੇਗਾ ਬਿਨਾਂ URL ਵਿੱਚ ਫਾਈਲ ਨਾਮ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇ।

HTML ਦਸਤਾਵੇਜ਼ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ

ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਢਾਂਚੇ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਮਝਣ ਅਤੇ ਦਰਸਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਢਾਂਚੇ ਨੂੰ ਇੱਕ ਅਧਿਕਾਰਤ ਚਿੱਠੀ ਵਾਂਗ ਸੋਚੋ - ਇਸ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕ੍ਰਮ ਵਿੱਚ ਲੋੜੀਂਦੇ ਤੱਤ ਹੁੰਦੇ ਹਨ ਜੋ ਪ੍ਰਾਪਤਕਰਤਾ (ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਬ੍ਰਾਊਜ਼ਰ) ਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।

flowchart TD
    A["<!DOCTYPE html>"] --> B["<html>"]
    B --> C["<head>"]
    C --> D["<title>"]
    C --> E["<meta charset>"]
    C --> F["<meta viewport>"]
    B --> G["<body>"]
    G --> H["<h1> Heading"]
    G --> I["<div> Containers"]
    G --> J["<img> Images"]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style G fill:#e8f5e8

ਆਓ ਅਹਿਮ ਬੁਨਿਆਦ ਸ਼ਾਮਲ ਕਰਕੇ ਸ਼ੁਰੂ ਕਰੀਏ ਜੋ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ ਲੋੜੀਂਦੀ ਹੈ।

DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਅਤੇ ਰੂਟ ਐਲਿਮੈਂਟ

ਕਿਸੇ ਵੀ HTML ਫਾਈਲ ਦੀ ਪਹਿਲੀ ਦੋ ਲਾਈਨਾਂ ਦਸਤਾਵੇਜ਼ ਦਾ "ਪ੍ਰਸਤਾਵ" ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦਿੰਦੇ ਹਨ:

<!DOCTYPE html>
<html></html>

ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:

ਦਸਤਾਵੇਜ਼ ਦੀ ਕਿਸਮ HTML5 ਦੇ ਤੌਰ 'ਤੇ <!DOCTYPE html> ਨਾਲ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ
ਰੂਟ <html> ਐਲਿਮੈਂਟ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਸਾਰੀ ਪੇਜ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗਾ
ਆਧੁਨਿਕ ਵੈਬ ਮਿਆਰਾਂ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਲਈ
ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਥਿਰ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ

💡 VS Code ਟਿਪ: VS Code ਵਿੱਚ ਕਿਸੇ ਵੀ HTML ਟੈਗ 'ਤੇ ਹਵਰ ਕਰੋ ਤਾਂ ਜੋ MDN Web Docs ਤੋਂ ਮਦਦਗਾਰ ਜਾਣਕਾਰੀ ਦੇਖ ਸਕੋ, ਜਿਸ ਵਿੱਚ ਵਰਤੋਂ ਦੇ ਉਦਾਹਰਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਵੇਰਵੇ ਸ਼ਾਮਲ ਹਨ।

📚 ਹੋਰ ਸਿੱਖੋ: DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ "quirks mode" ਵਿੱਚ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਜੋ ਬਹੁਤ ਪੁਰਾਣੀਆਂ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਸਹਾਇਤਾ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਸੀ। ਆਧੁਨਿਕ ਵੈਬ ਵਿਕਾਸ ਸਧਾਰਨ <!DOCTYPE html> ਡਿਕਲੇਰੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਮਿਆਰ-ਅਨੁਕੂਲ ਰੈਂਡਰਿੰਗ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ।

🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ

ਵਿਰਾਮ ਲਓ ਅਤੇ ਵਿਚਾਰ ਕਰੋ: ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ:

✅ ਕਿਉਂ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ
✅ <html> ਰੂਟ ਐਲਿਮੈਂਟ ਵਿੱਚ ਕੀ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ
✅ ਇਹ ਢਾਂਚਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਪੇਜਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਰੈਂਡਰ ਕਰਨ ਵਿੱਚ ਕਿਵੇਂ ਮਦਦ ਕਰਦਾ ਹੈ

ਤੁਰੰਤ ਸਵੈ-ਪਰੀਖਣ: ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ "ਮਿਆਰ-ਅਨੁਕੂਲ ਰੈਂਡਰਿੰਗ" ਦਾ ਮਤਲਬ ਸਮਝਾ ਸਕਦੇ ਹੋ?

ਅਹਿਮ ਦਸਤਾਵੇਜ਼ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਨਾ

HTML ਦਸਤਾਵੇਜ਼ ਦਾ <head> ਭਾਗ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਪਰ ਜੋ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਪੇਜ 'ਤੇ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੀ। ਇਸਨੂੰ "ਪਿੱਛੇ-ਦ੍ਰਿਸ਼" ਜਾਣਕਾਰੀ ਵਾਂਗ ਸੋਚੋ ਜੋ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਅਤੇ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਗਟ ਹੋਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ।

ਇਹ ਮੈਟਾਡੇਟਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪੇਜ ਨੂੰ ਕਿਵੇਂ ਦਰਸਾਉਣਾ ਹੈ, ਕਿਹੜੀ ਕਿਰਦਾਰ ਕੋਡਿੰਗ ਵਰਤਣੀ ਹੈ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਆਕਾਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ - ਪੇਸ਼ੇਵਰ, ਪਹੁੰਚਯੋਗ ਵੈਬ ਪੇਜ ਬਣਾਉਣ ਲਈ ਸਾਰਾ ਕੁਝ ਜ਼ਰੂਰੀ।

ਕੰਮ: ਦਸਤਾਵੇਜ਼ ਹੈਡ ਸ਼ਾਮਲ ਕਰੋ

ਆਪਣੇ <html> ਟੈਗਾਂ ਦੇ ਖੁਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ ਦੇ ਵਿਚਕਾਰ ਇਹ <head> ਭਾਗ ਸ਼ਾਮਲ ਕਰੋ:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

ਹਰ ਤੱਤ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:

ਪੇਜ ਦਾ ਸਿਰਲੇਖ ਸੈਟ ਕਰਦਾ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
UTF-8 ਕਿਰਦਾਰ ਕੋਡਿੰਗ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਵਿਸ਼ਵਵਿਆਪੀ ਟੈਕਸਟ ਪ੍ਰਦਰਸ਼ਨ ਲਈ
Internet Explorer ਦੇ ਆਧੁਨਿਕ ਵਰਜਨਾਂ ਨਾਲ ਅਨੁਕੂਲਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ
ਵਿਊਪੋਰਟ ਨੂੰ ਡਿਵਾਈਸ ਚੌੜਾਈ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਸੰਰਚਿਤ ਕਰਦਾ ਹੈ
ਸ਼ੁਰੂਆਤੀ ਜ਼ੂਮ ਪੱਧਰ ਨੂੰ ਕੰਟ੍ਰੋਲ ਕਰਦਾ ਹੈ ਸਮੱਗਰੀ ਨੂੰ ਕੁਦਰਤੀ ਆਕਾਰ 'ਤੇ ਦਰਸਾਉਣ ਲਈ

🤔 ਇਸ ਬਾਰੇ ਸੋਚੋ: ਜੇ ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਮੈਟਾ ਟੈਗ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੈਟ ਕਰੋ: <meta name="viewport" content="width=600">, ਤਾਂ ਕੀ ਹੋਵੇਗਾ? ਇਹ ਪੇਜ ਨੂੰ ਹਮੇਸ਼ਾ 600 ਪਿਕਸਲ ਚੌੜਾ ਬਣਾਉਣ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ, ਜਿਹੜਾ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੂੰ ਤੋੜ ਦੇਵੇਗਾ! ਸਹੀ ਵਿਊਪੋਰਟ ਸੰਰਚਨਾ ਬਾਰੇ ਹੋਰ ਸਿੱਖੋ।

ਦਸਤਾਵੇਜ਼ ਬਾਡੀ ਬਣਾਉਣਾ

HTML ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਅਤੇ ਟੈਰੀਰੀਅਮ ਸੰਬੰਧੀ ਸਮੱਗਰੀ ਲਈ ਅਗਲੇ ਹਿੱਸੇ ਵਿੱਚ ਜਾਰੀ ਰੱਖੋ।

ਵੱਖ ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ ਹਰ ਵਿਜੁਅਲ ਕੰਪੋਨੈਂਟ ਲਈ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ (ਉਪਰਲਾ ਹਿੱਸਾ, ਕੰਧਾਂ, ਮਿੱਟੀ, ਹੇਠਲਾ ਹਿੱਸਾ)
ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਗਲਾਸ ਰਿਫਲੈਕਸ਼ਨ ਪ੍ਰਭਾਵਾਂ ਲਈ ਨੇਸਟਡ ਐਲਿਮੈਂਟਸ (ਚਮਕਦਾਰ ਹਿੱਸੇ)
ਵਰਤਦਾ ਹੈ ਵਰਣਨਾਤਮਕ ਕਲਾਸ ਨਾਮ ਜੋ ਹਰ ਹਿੱਸੇ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਸਪਸ਼ਟ ਕਰਦੇ ਹਨ
ਤਿਆਰ ਕਰਦਾ ਹੈ ਢਾਂਚਾ CSS ਸਟਾਈਲਿੰਗ ਲਈ ਜੋ ਗਲਾਸ ਟੈਰੀਰੀਅਮ ਦੀ ਦਿੱਖ ਬਣਾਏਗਾ

🤔 ਕੁਝ ਧਿਆਨ ਦਿੱਤਾ?: ਹਾਲਾਂਕਿ ਤੁਸੀਂ ਇਹ ਮਾਰਕਅੱਪ ਜੋੜਿਆ ਹੈ, ਤੁਹਾਨੂੰ ਪੇਜ 'ਤੇ ਕੁਝ ਨਵਾਂ ਨਹੀਂ ਦਿਖਦਾ! ਇਹ ਬਹੁਤ ਹੀ ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ HTML ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਦਕਿ CSS ਦਿੱਖ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਹ <div> ਐਲਿਮੈਂਟਸ ਮੌਜੂਦ ਹਨ ਪਰ ਅਜੇ ਤੱਕ ਕੋਈ ਵਿਜੁਅਲ ਸਟਾਈਲਿੰਗ ਨਹੀਂ ਹੈ – ਇਹ ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਆਵੇਗੀ!

flowchart TD
    A[HTML Document] --> B[Document Head]
    A --> C[Document Body]
    B --> D[Title Element]
    B --> E[Meta Charset]
    B --> F[Meta Viewport]
    C --> G[Main Heading]
    C --> H[Page Container]
    H --> I[Left Container with 7 plants]
    H --> J[Right Container with 7 plants]
    H --> K[Terrarium Structure]
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style H fill:#f3e5f5

🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ

HTML ਢਾਂਚਾ ਮਾਹਰਤਾ: ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ:

✅ HTML ਢਾਂਚੇ ਅਤੇ ਵਿਜੁਅਲ ਦਿੱਖ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਵਿਆਖਿਆ ਕਰੋ
✅ ਸੈਮੈਂਟਿਕ ਅਤੇ ਗੈਰ-ਸੈਮੈਂਟਿਕ HTML ਐਲਿਮੈਂਟਸ ਦੀ ਪਛਾਣ ਕਰੋ
✅ ਵਿਆਖਿਆ ਕਰੋ ਕਿ ਸਹੀ ਮਾਰਕਅੱਪ ਕਿਵੇਂ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਲਾਭ ਪਹੁੰਚਾਉਂਦਾ ਹੈ
✅ ਪੂਰੇ ਦਸਤਾਵੇਜ਼ ਟ੍ਰੀ ਢਾਂਚੇ ਦੀ ਪਛਾਣ ਕਰੋ

ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ: ਆਪਣੀ HTML ਫਾਈਲ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ JavaScript ਬਿਨਾਂ ਅਤੇ CSS ਹਟਾ ਕੇ ਖੋਲ੍ਹਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਖਾਲੀ ਸੈਮੈਂਟਿਕ ਢਾਂਚਾ ਦਿਖਾਉਂਦਾ ਹੈ!

GitHub Copilot Agent ਚੈਲੈਂਜ

Agent ਮੋਡ ਵਰਤ ਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:

ਵੇਰਵਾ: ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ ਸੈਕਸ਼ਨ ਲਈ ਸੈਮੈਂਟਿਕ HTML ਢਾਂਚਾ ਬਣਾਓ।

ਪ੍ਰੋੰਪਟ: ਇੱਕ ਸੈਮੈਂਟਿਕ HTML ਸੈਕਸ਼ਨ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਮੁੱਖ ਸਿਰਲੇਖ "ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ", ਤਿੰਨ ਉਪ-ਸੈਕਸ਼ਨ "ਪਾਣੀ ਦੇਣ", "ਰੋਸ਼ਨੀ ਦੀਆਂ ਲੋੜਾਂ", ਅਤੇ "ਮਿੱਟੀ ਦੀ ਦੇਖਭਾਲ" ਦੇ ਸਿਰਲੇਖਾਂ ਨਾਲ ਹੋਵੇ, ਹਰ ਇੱਕ ਵਿੱਚ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਜਾਣਕਾਰੀ ਵਾਲਾ ਪੈਰਾ ਸ਼ਾਮਲ ਹੋਵੇ। ਸਮਰਥ HTML ਟੈਗ ਜਿਵੇਂ <section>, <h2>, <h3>, ਅਤੇ <p> ਵਰਤ ਕੇ ਸਮੱਗਰੀ ਨੂੰ ਢੰਗ ਨਾਲ ਢਾਂਚੇਬੱਧ ਕਰੋ।

Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ਇਥੇ।

HTML ਇਤਿਹਾਸ ਚੈਲੈਂਜ

ਵੈੱਬ ਵਿਕਾਸ ਬਾਰੇ ਸਿੱਖਣਾ

HTML ਨੇ 1990 ਵਿੱਚ CERN ਵਿੱਚ Tim Berners-Lee ਦੁਆਰਾ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਕਾਫ਼ੀ ਤਰੱਕੀ ਕੀਤੀ ਹੈ। ਕੁਝ ਪੁਰਾਣੇ ਟੈਗ ਜਿਵੇਂ <marquee> ਹੁਣ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ ਹਨ ਕਿਉਂਕਿ ਇਹ ਆਧੁਨਿਕ ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦੇ।

ਇਹ ਤਜਰਬਾ ਕਰੋ:

ਅਸਥਾਈ ਤੌਰ 'ਤੇ ਆਪਣੇ <h1> ਸਿਰਲੇਖ ਨੂੰ <marquee> ਟੈਗ ਵਿੱਚ ਲਪੇਟੋ: <marquee><h1>My Terrarium</h1></marquee>
ਆਪਣਾ ਪੇਜ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖੋ
ਸੋਚੋ ਕਿ ਇਹ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤਾ ਗਿਆ (ਸੁਝਾਅ: ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਬਾਰੇ ਸੋਚੋ)
<marquee> ਟੈਗ ਨੂੰ ਹਟਾਓ ਅਤੇ ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ 'ਤੇ ਵਾਪਸ ਜਾਓ

ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ:

ਸਕ੍ਰੋਲਿੰਗ ਸਿਰਲੇਖ ਵਿਜੁਅਲ ਅਪੰਗਤਾ ਜਾਂ ਮੋਸ਼ਨ ਸੰਵੇਦਨਸ਼ੀਲਤਾ ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ?
ਕਿਹੜੀਆਂ ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਇਸੇ ਤਰ੍ਹਾਂ ਦੇ ਵਿਜੁਅਲ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਜ਼ਿਆਦਾ ਪਹੁੰਚਯੋਗ ਤਰੀਕੇ ਨਾਲ ਹਾਸਲ ਕਰ ਸਕਦੀਆਂ ਹਨ?
ਪੁਰਾਣੇ ਤੱਤਾਂ ਦੀ ਬਜਾਏ ਮੌਜੂਦਾ ਵੈੱਬ ਮਿਆਰਾਂ ਨੂੰ ਵਰਤਣਾ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ?

ਪੁਰਾਣੇ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ HTML ਐਲਿਮੈਂਟਸ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ਤਾਂ ਜੋ ਸਮਝ ਸਕੋ ਕਿ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਵੈੱਬ ਮਿਆਰ ਕਿਵੇਂ ਤਰੱਕੀ ਕਰਦੇ ਹਨ।

ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼

ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ

HTML ਬਾਰੇ ਆਪਣਾ ਗਿਆਨ ਵਧਾਓ

HTML ਪਿਛਲੇ 30 ਸਾਲਾਂ ਤੋਂ ਵੈੱਬ ਦਾ ਅਧਾਰ ਰਿਹਾ ਹੈ, ਜੋ ਇੱਕ ਸਧਾਰਨ ਦਸਤਾਵੇਜ਼ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ ਤੋਂ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਇੱਕ ਸੁਧਾਰਤ ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਤਰੱਕੀ ਕਰ ਰਿਹਾ ਹੈ। ਇਸ ਤਰੱਕੀ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਕਦਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ ਅਤੇ ਵਧੀਆ ਵਿਕਾਸ ਫੈਸਲੇ ਲੈਣ ਵਿੱਚ ਸਹਾਇਤਾ ਮਿਲਦੀ ਹੈ।

ਸਿਫਾਰਸ਼ੀ ਸਿੱਖਣ ਦੇ ਰਾਹ:

HTML ਇਤਿਹਾਸ ਅਤੇ ਤਰੱਕੀ
- HTML 1.0 ਤੋਂ HTML5 ਤੱਕ ਟਾਈਮਲਾਈਨ ਦੀ ਖੋਜ ਕਰੋ
- ਪਤਾ ਕਰੋ ਕਿ ਕੁਝ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ (ਪਹੁੰਚਯੋਗਤਾ, ਮੋਬਾਈਲ-ਫ੍ਰੈਂਡਲੀਨੈਸ, ਰੱਖ-ਰਖਾਅ)
- ਉਭਰ ਰਹੀਆਂ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਪ੍ਰਸਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰੋ
ਸੈਮੈਂਟਿਕ HTML ਡੀਪ ਡਾਈਵ
- HTML5 ਸੈਮੈਂਟਿਕ ਐਲਿਮੈਂਟਸ ਦੀ ਪੂਰੀ ਸੂਚੀ ਦਾ ਅਧਿਐਨ ਕਰੋ
- ਪਛਾਣ ਕਰਨ ਦੀ ਅਭਿਆਸ ਕਰੋ ਕਿ <article>, <section>, <aside>, ਅਤੇ <main> ਕਦੋਂ ਵਰਤਣਾ ਹੈ
- ਵਧੇਰੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ARIA ਗੁਣਾਂ ਬਾਰੇ ਸਿੱਖੋ
ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ
- ਰਿਸਪਾਂਸਿਵ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣ ਬਾਰੇ Microsoft Learn 'ਤੇ ਖੋਜ ਕਰੋ
- ਸਮਝੋ ਕਿ HTML CSS ਅਤੇ JavaScript ਨਾਲ ਕਿਵੇਂ ਇੰਟਿਗ੍ਰੇਟ ਹੁੰਦਾ ਹੈ
- ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ SEO ਬਿਹਤਰ ਤਰੀਕਿਆਂ ਬਾਰੇ ਸਿੱਖੋ

ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ:

ਤੁਸੀਂ ਕਿਹੜੇ ਡਿਪ੍ਰੀਕੇਟ HTML ਟੈਗ ਪਤਾ ਲਗਾਏ, ਅਤੇ ਉਹ ਕਿਉਂ ਹਟਾਏ ਗਏ?
HTML ਦੇ ਭਵਿੱਖ ਦੇ ਵਰਜਨਾਂ ਲਈ ਕਿਹੜੀਆਂ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਸਤਾਵਿਤ ਕੀਤੀਆਂ ਜਾ ਰਹੀਆਂ ਹਨ?
ਸੈਮੈਂਟਿਕ HTML ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ SEO ਵਿੱਚ ਕਿਵੇਂ ਯੋਗਦਾਨ ਪਾਉਂਦਾ ਹੈ?

⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ

DevTools (F12) ਖੋਲ੍ਹੋ ਅਤੇ ਆਪਣੇ ਮਨਪਸੰਦ ਵੈੱਬਸਾਈਟ ਦੇ HTML ਢਾਂਚੇ ਦੀ ਜਾਂਚ ਕਰੋ
ਬੁਨਿਆਦੀ ਟੈਗਾਂ ਨਾਲ ਇੱਕ ਸਧਾਰਨ HTML ਫਾਈਲ ਬਣਾਓ: <h1>, <p>, ਅਤੇ <img>
W3C HTML Validator ਆਨਲਾਈਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ HTML ਦੀ ਵੈਧਤਾ ਦੀ ਜਾਂਚ ਕਰੋ
 ਵਰਤ ਕੇ ਆਪਣੀ HTML ਵਿੱਚ ਇੱਕ ਟਿੱਪਣੀ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

🎯 ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ

ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਸੈਮੈਂਟਿਕ HTML ਸੰਕਲਪਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ
ਸਹੀ HTML ਢਾਂਚੇ ਨਾਲ ਆਪਣੇ ਬਾਰੇ ਇੱਕ ਸਧਾਰਨ ਵੈੱਬਪੇਜ ਬਣਾਓ
ਵੱਖ-ਵੱਖ ਸਿਰਲੇਖ ਪੱਧਰ ਅਤੇ ਟੈਕਸਟ ਫਾਰਮੈਟਿੰਗ ਟੈਗਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ
ਮਲਟੀਮੀਡੀਆ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦਾ ਅਭਿਆਸ ਕਰਨ ਲਈ ਚਿੱਤਰ ਅਤੇ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰੋ
HTML5 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਾਰੇ ਖੋਜ ਕਰੋ ਜੋ ਤੁਸੀਂ ਅਜੇ ਤੱਕ ਨਹੀਂ ਅਜ਼ਮਾਈਆਂ ਹਨ

📅 ਤੁਹਾਡਾ ਹਫਤਾਵਾਰ HTML ਯਾਤਰਾ

ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਨਾਲ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ
ARIA ਲੇਬਲ ਅਤੇ ਰੋਲ ਵਰਤ ਕੇ ਇੱਕ ਪਹੁੰਚਯੋਗ ਵੈੱਬਪੇਜ ਬਣਾਓ
ਵੱਖ-ਵੱਖ ਇਨਪੁਟ ਕਿਸਮਾਂ ਨਾਲ ਫਾਰਮ ਬਣਾਉਣ ਦਾ ਅਭਿਆਸ ਕਰੋ
HTML5 APIs ਜਿਵੇਂ localStorage ਜਾਂ geolocation ਦੀ ਖੋਜ ਕਰੋ
ਰਿਸਪਾਂਸਿਵ HTML ਪੈਟਰਨ ਅਤੇ ਮੋਬਾਈਲ-ਪਹਿਲੇ ਡਿਜ਼ਾਈਨ ਦੀ ਖੋਜ ਕਰੋ
ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਦੇ HTML ਕੋਡ ਦੀ ਸਮੀਖਿਆ ਕਰੋ ਅਤੇ ਵਧੀਆ ਤਰੀਕਿਆਂ ਦੀ ਪਛਾਣ ਕਰੋ

🌟 ਤੁਹਾਡਾ ਮਹੀਨਾਵਾਰ ਵੈੱਬ ਫਾਊਂਡੇਸ਼ਨ

ਆਪਣੀ HTML ਮਾਹਰਤਾ ਦਿਖਾਉਣ ਵਾਲੀ ਪੋਰਟਫੋਲਿਓ ਵੈੱਬਸਾਈਟ ਬਣਾਓ
Handlebars ਵਰਗੇ ਫਰੇਮਵਰਕ ਨਾਲ HTML ਟੈਂਪਲੇਟਿੰਗ ਸਿੱਖੋ
HTML ਦਸਤਾਵੇਜ਼ੀकरण ਨੂੰ ਸੁਧਾਰ ਕੇ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ
ਕਸਟਮ ਐਲਿਮੈਂਟਸ ਵਰਗੇ ਉੱਚ HTML ਸੰਕਲਪਾਂ ਵਿੱਚ ਮਾਹਰ ਬਣੋ
CSS ਫਰੇਮਵਰਕ ਅਤੇ JavaScript ਲਾਇਬ੍ਰੇਰੀਜ਼ ਨਾਲ HTML ਨੂੰ ਇੰਟਿਗ੍ਰੇਟ ਕਰੋ
HTML ਬੁਨਿਆਦੀਆਂ ਸਿੱਖਣ ਵਾਲਿਆਂ ਨੂੰ ਮਦਦ ਦਿਓ

🎯 ਤੁਹਾਡਾ HTML ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ

timeline
    title HTML Learning Progression
    
    section Foundation (5 minutes)
        Document Structure: DOCTYPE declaration
                         : HTML root element
                         : Head vs Body understanding
        
    section Metadata (10 minutes)
        Essential Meta Tags: Character encoding
                           : Viewport configuration
                           : Browser compatibility
        
    section Content Creation (15 minutes)
        Image Integration: Proper file paths
                         : Alt text importance
                         : Self-closing tags
        
    section Layout Organization (20 minutes)
        Container Strategy: Div elements for structure
                          : Class and ID naming
                          : Nested element hierarchy
        
    section Semantic Mastery (30 minutes)
        Meaningful Markup: Heading hierarchy
                         : Screen reader navigation
                         : Accessibility best practices
        
    section Advanced Concepts (1 hour)
        HTML5 Features: Modern semantic elements
                      : ARIA attributes
                      : Performance considerations
        
    section Professional Skills (1 week)
        Code Organization: File structure patterns
                         : Maintainable markup
                         : Team collaboration
        
    section Expert Level (1 month)
        Modern Web Standards: Progressive enhancement
                            : Cross-browser compatibility
                            : HTML specification updates

🛠️ ਤੁਹਾਡਾ HTML ਟੂਲਕਿਟ ਸਾਰ

ਇਹ ਪਾਠ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ:

ਦਸਤਾਵੇਜ਼ ਢਾਂਚਾ: ਸਹੀ DOCTYPE ਨਾਲ ਪੂਰੀ HTML5 ਬੁਨਿਆਦ
ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ: ਅਰਥਪੂਰਨ ਟੈਗ ਜੋ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ SEO ਨੂੰ ਵਧਾਉਂਦੇ ਹਨ
ਚਿੱਤਰ ਇੰਟੀਗ੍ਰੇਸ਼ਨ: ਸਹੀ ਫਾਈਲ ਸੰਗਠਨ ਅਤੇ alt ਟੈਕਸਟ ਅਭਿਆਸ
ਲੇਆਉਟ ਕੰਟੇਨਰ: ਵਰਣਨਾਤਮਕ ਕਲਾਸ ਨਾਮਾਂ ਨਾਲ divs ਦੀ ਰਣਨੀਤਿਕ ਵਰਤੋਂ
ਪਹੁੰਚਯੋਗਤਾ ਜਾਗਰੂਕਤਾ: ਸਕ੍ਰੀਨ ਰੀਡਰ ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਸਮਝ
ਆਧੁਨਿਕ ਮਿਆਰ: ਮੌਜੂਦਾ HTML5 ਅਭਿਆਸ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ ਟੈਗਾਂ ਦਾ ਗਿਆਨ
ਪ੍ਰੋਜੈਕਟ ਬੁਨਿਆਦ: CSS ਸਟਾਈਲਿੰਗ ਅਤੇ JavaScript ਇੰਟਰਐਕਟਿਵਿਟੀ ਲਈ ਮਜ਼ਬੂਤ ਅਧਾਰ

ਅਗਲੇ ਕਦਮ: ਤੁਹਾਡਾ HTML ਢਾਂਚਾ CSS ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ ਹੈ! ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਸੈਮੈਂਟਿਕ ਬੁਨਿਆਦ ਅਗਲੇ ਪਾਠ ਨੂੰ ਸਮਝਣ ਲਈ ਬਹੁਤ ਆਸਾਨ ਬਣਾਏਗੀ।

ਅਸਾਈਨਮੈਂਟ

ਆਪਣੀ HTML ਦਾ ਅਭਿਆਸ ਕਰੋ: ਇੱਕ ਬਲੌਗ ਮੌਕਅੱਪ ਬਣਾਓ

ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।

34 KiB Raw Blame History Unescape Escape

ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 1: HTML ਦਾ ਪਰਿਚਯ

ਪਾਠ-ਪਹਿਲਾਂ ਕਵਿਜ਼

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸੈਟ ਅੱਪ ਕਰਨਾ

ਕੰਮ: ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਢਾਂਚੇ ਨੂੰ ਬਣਾਓ

HTML ਦਸਤਾਵੇਜ਼ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ

DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਅਤੇ ਰੂਟ ਐਲਿਮੈਂਟ

🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ

ਅਹਿਮ ਦਸਤਾਵੇਜ਼ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਨਾ

ਕੰਮ: ਦਸਤਾਵੇਜ਼ ਹੈਡ ਸ਼ਾਮਲ ਕਰੋ

ਦਸਤਾਵੇਜ਼ ਬਾਡੀ ਬਣਾਉਣਾ

🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ

GitHub Copilot Agent ਚੈਲੈਂਜ

HTML ਇਤਿਹਾਸ ਚੈਲੈਂਜ

ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼

ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ

⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ

🎯 ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ

📅 ਤੁਹਾਡਾ ਹਫਤਾਵਾਰ HTML ਯਾਤਰਾ

🌟 ਤੁਹਾਡਾ ਮਹੀਨਾਵਾਰ ਵੈੱਬ ਫਾਊਂਡੇਸ਼ਨ

🎯 ਤੁਹਾਡਾ HTML ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ

🛠️ ਤੁਹਾਡਾ HTML ਟੂਲਕਿਟ ਸਾਰ

ਅਸਾਈਨਮੈਂਟ

34 KiB

Raw Blame History Unescape Escape