Search Header Logo
Tananyag_HTML_alapjai_<>

Tananyag_HTML_alapjai_<>

Assessment

Presentation

•

Computers

•

9th - 12th Grade

•

Practice Problem

•

Hard

Created by

Diána Madar

Used 2+ times

FREE Resource

12 Slides • 0 Questions

1

HTML
HyperText Markup Laguage = Hiperszöveges jelölő nyelv

2

HTML

Nem programozási, hanem úgynevezet leíró nyelv, amely a honlaptartalmak leírására szolgál.

Kiterjesztése: .html

Tartalom <> tagekkel írható le, ezeket a böngészőprogram értelmezi.

3

HTML-tagek (<>) típusai

  1. Páratlan (vagy üres) HTML-tagek, amelyekhez nem tartozik záró tag. Pl.: br -> break -> sortörés

  2. Páros HTML-tagek: kizárólag egymással párban használhatóak egy nyitó es egy záró tagből állnak, amelyek körbezárják a formázni kívánt tartalmakat.
    Záró tag azonos a nyitóval, annyi a küldönbség, hogy kap egy / jelet is. Pl.: <html> </html>

4

HTML-tagek (<>) egymásba ágyazása

Mindig azt a taget kell hamarabb lezárni, amit később nyitottunk meg.
Pl.: <b> <i>Ez a félkövér, dőlt, egymásba ágyazott bekezdés. </i> </b>

5

HTML-tagek csoportosítása

  1. Blokkszintű elemek: dobozoknak is nevezzük, fontos a megjelenésben.

  2. Inline (sorbeli) elemek: a böngésző nem jeleníti meg külön blokkban.




Megjegyzés készítése
<!-- szöveg -->
Lehet egy vagy többsoros is. Olyan szövegeket tartalmaznak, amelyek láthatóak ugyan a HTML állományban de a böngésző nem jeleníti meg őket.

6

HTML paraméterek (attribútumok)

  1. Logikai paraméter: jelölheted vele, hogy egy adott beállítás érvényre jusson e vagy nem.

  2. Lang paraméter: ezzel állítható be egy bekezdés nyelve, értékeként a nyelv betűlódját kell megadni.

  3. Title paraméter: ennek az értékeként megadott szöveg, akkor jelenik meg, ha az adott bekezdés fülé viszed az egeret.

Egy taghez több paraméter is tartozhat, szóközökkel kell elválasztani őket.
A paraméterek nevét = követi, amely után az érték " " vagy ' ' között kell megadni.

7

Az oldalak tartalmát kötött struktúrában kell elhelyezni.

MINDIG a dokumentumtípus megadásával kezdődik, amelyet a HTML-tag követ.
Ez a tag az oldal legfelső szintű eleme, vagyis minden más elemet ezen belül kell elhelyezni.

Ezután az oldal két nagy részre osztható:
1. HEAD: fejrész, cím, meta információk
2. BODY: törzsrész, tényleges tartalomAz oldalak tartalmát kötött struktúrában kell elhelyezni.

HTML5 alapfelépítése

8

media

9

Címsorok

Segítségükkel alakítható ki egy oldal tartalmi szerkezete. A HTML nyelvben hat címsorszint van, páros tagek!

<h1> Címsor1 </h1>
<h2> Címsor2 </h2>
<h3> Címsor3 </h3>
<h4> Címsor4 </h4>
<h5> Címsor5 </h5>
<h6> Címsor6 </h6>

A böngészőrpgramok a címsorokat félkövér betűkkel jelenítik meg, amelyek mérete a címsorok szintjeinek függvényében változik.

10

tagek <>

Bekezdés: páros <p> taggel hozható létre. Blokkszintű elem, vagyis a böngészőprogram a bekezdés körül üres térközt, margót hagy ki.

Sortörés: páratlan tag: <br>. Hasznos lehet a tördelésekhez.

Elválasztó vonal: páratlan tag: <hr>, akkor érdemes használni, ha vizuálisan is el akarunk valamit választani.

Félkövér: az inline páros <b> (bold) taggel félkövér formázást állíthatunk be.

Hangsúlyos szöveg: az inline páros <em> tag is dőlt betűt eredményez, ezzel hangsúlyos kiemelést érünk el.

Dőlt: az inline páros <i> (italic) taggel dőlt formázást állíthatunk be.

"Idejemúlt szöveg": az inline páros <s> taggel a szöveg vízszintes vonallal áthúzva jelenik meg.

Indexek: az inline páros elem <sub> taggel ALSÓ index; az inline páros elem <sub> taggel FELSŐ indexbe helyezünk.

11

Képek beszúrása

PNG: Portable Netwrok Graphics
JPEG: Joint Photographic Expert Group
SVG: Scalable Vector Graphics
GIF: Graphics Interchange Format
APNG: Animated Portable Network Graphics

<img src=" valami.png" alt="Valami" title="Valami" width="480px" height="250px">

src = Kép forrása. Ha ugyan abbana mappában van a kép és a weboldalunk akkor csak a nevét és a fájl kiterjesztését kell megadni. Abban az esetben ha nem azonosak akkor az elérési útvonalat is meg kell adnunk. Pl.: kepek/valami.png

alt= helyettesítő szöveg, akadálymentes funkciónál fontos

title= elemhez tartozó "súgó". Ha a kép felé visszük az egeret megjelenik egy szövegbuborék a szöveggel.



12

Listák

Definíciós lista: ha a fogalmakat és a hozzá fűzött magyarázatokat közölnénk a weboldalon speciális (definíciós) listát érdemes használni.
A listát a páros <dl>, a fogalmakat páros <dt>, a magyarázatokat páros <dd> elemek közé kell helyezni.

<dl>
<dt> HTML </dt>
<dd> HyperText Markup Language </dd>
</dl>
-->
HTML
Hypertext Markup Language

Számozatlan lista: <ol> </ol> tagekkel, listaelemei <li> </li> taggel

Számozott lista: <ul> </ul> tagekkel, listaelemei <li> </li> taggel

Az elemeket egymásba ágyazva többszintű listákat tudunk kialakítani:
<ul>
<li> első elem </li>
<ol>
<li>első elemen belüli elem</li>
</ol>
</ul>

HTML
HyperText Markup Laguage = Hiperszöveges jelölő nyelv

Show answer

Auto Play

Slide 1 / 12

SLIDE

Similar Resources on Wayground

ICT Grade 11 Final Exam Practice

10 questions

ICT Grade 11 Final Exam Practice

lesson

Lesson

•

9th - 12th Grade

Factoring trinomials a > 1

10 questions

Factoring trinomials a > 1

lesson

Lesson

•

9th - 11th Grade

Text Formatting

8 questions

Text Formatting

lesson

Lesson

•

9th - 12th Grade

HTML Links

8 questions

HTML Links

lesson

Lesson

•

9th - 12th Grade

Алгоритм

9 questions

Алгоритм

lesson

Lesson

•

9th - 12th Grade

CHAPTER 2 : so that and in order to

10 questions

CHAPTER 2 : so that and in order to

lesson

Lesson

•

9th - 12th Grade

Digitális platformok online workshop

8 questions

Digitális platformok online workshop

lesson

Lesson

•

KG

Popular Resources on Wayground

Fractions on a Number Line

15 questions

Fractions on a Number Line

quiz

Quiz

•

3rd Grade

Probability Practice

10 questions

Probability Practice

quiz

Quiz

•

4th Grade

Probability on Number LIne

15 questions

Probability on Number LIne

quiz

Quiz

•

4th Grade

Equivalent Fractions

20 questions

Equivalent Fractions

quiz

Quiz

•

3rd Grade

Multiplication Facts

25 questions

Multiplication Facts

quiz

Quiz

•

5th Grade

fractions

22 questions

fractions

quiz

Quiz

•

3rd Grade

Appropriate Chromebook Usage

6 questions

Appropriate Chromebook Usage

lesson

Lesson

•

7th Grade

Greek Bases tele and phon

10 questions

Greek Bases tele and phon

quiz

Quiz

•

6th - 8th Grade

Discover more resources for Computers

Exploring Digital Citizenship Essentials

10 questions

Exploring Digital Citizenship Essentials

interactive video

Interactive video

•

6th - 10th Grade

[AP CSP] JavaScript Programming Quiz

14 questions

[AP CSP] JavaScript Programming Quiz

quiz

Quiz

•

9th - 12th Grade

Understanding Computers and Computer Engineering

10 questions

Understanding Computers and Computer Engineering

interactive video

Interactive video

•

7th - 12th Grade

Python - Tuples, Lists, and List Methods

37 questions

Python - Tuples, Lists, and List Methods

quiz

Quiz

•

9th - 12th Grade

MOS Word Home, Insert, Reference Ribbon Basics

60 questions

MOS Word Home, Insert, Reference Ribbon Basics

quiz

Quiz

•

9th Grade

Ratio Applications
Recognising even and odd functions
Making economic choices
Advanced ASL grammar
Using coordinates to compute perimeters of polygons
Evaluate effectiveness for specific audiences
Argument for Formulas of Circles & 3D Shapes
Basic Chinese characters
Descriptive Language
Solving a pair of linear equations in two variables algebraically by elimination

© 2026 Quizizz Inc. (DBA Wayground)