msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e444b62884'
${ noResults }
Web-Dev-For-Beginners/translations/hu/3-terrarium/1-intro-to-html/assignment.md

4.3 KiB
Raw Blame History Escape

HTML Gyakorló Feladat: Blog Mockup Készítése

Célkitűzés

Tervezd meg és kézzel kódold le egy személyes blog kezdőlapjának HTML szerkezetét. Ez a gyakorlat segít a szemantikus HTML, az elrendezés tervezése és a kód szervezésének gyakorlásában.

Útmutató

  1. Tervezd meg a Blog Mockupot

    • Készíts egy vizuális vázlatot a blog kezdőlapjáról. Tartalmazza a főbb szekciókat, mint például fejléc, navigáció, fő tartalom, oldalsáv és lábléc.
    • Használhatsz papírt és beszkennelheted a vázlatot, vagy digitális eszközöket (pl. Figma, Adobe XD, Canva, vagy akár PowerPoint).

  2. Azonosítsd a HTML Elemeket

    • Sorold fel azokat a HTML elemeket, amelyeket az egyes szekciókhoz használni tervezel (pl. <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a>, stb.).

  3. Írd meg a HTML Markupot

    • Kézzel kódold le a mockup HTML-jét. Koncentrálj a szemantikus szerkezetre és a legjobb gyakorlatokra.
    • Használj legalább 10 különböző HTML elemet.
    • Adj hozzá megjegyzéseket, hogy magyarázd a választásaidat és a szerkezetet.

  4. Küldd be a Munkádat

    • Töltsd fel a vázlatot/mockupot és a HTML fájlt.
    • Opcionálisan írhatsz egy rövid reflexiót (2–3 mondat) a tervezési döntéseidről.

Értékelési Szempontok

Kritérium Kiemelkedő Megfelelő Fejlesztésre Szorul
Vizuális Mockup Tiszta, részletes mockup címkézett szekciókkal és átgondolt elrendezéssel Alapvető mockup néhány címkézett szekcióval Minimális vagy nem egyértelmű mockup; hiányoznak a szekció címkék
HTML Elemek 10+ szemantikus HTML elem használata; szerkezet és legjobb gyakorlatok megértése látható 5–9 HTML elem használata; némi szemantikus szerkezet Kevesebb mint 5 elem használata; hiányzik a szemantikus szerkezet
Kód Minőség Jól szervezett, olvasható kód megjegyzésekkel; követi a HTML szabványokat Többnyire szervezett kód; kevés megjegyzés Szétszórt kód; hiányoznak a megjegyzések
Reflexió Érdemi reflexió a tervezési döntésekről és kihívásokról Alapvető reflexió Nincs reflexió vagy nem releváns

Tippek

  • Használj szemantikus HTML tageket a jobb hozzáférhetőség és SEO érdekében.
  • Szervezd a kódodat behúzásokkal és megjegyzésekkel.
  • Nézd meg az MDN HTML Elemek Referenciát útmutatásért.
  • Gondolj arra, hogyan lehetne az elrendezést bővíteni vagy stílusozni a jövőbeli feladatok során.

Felelősség kizárása:
Ez a dokumentum az Co-op Translator AI fordítási szolgáltatás segítségével került lefordításra. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.