Tananyag_HTML_alapjai_<>
Presentation
•
Computers
•
9th - 12th Grade
•
Practice Problem
•
Hard
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
Páratlan (vagy üres) HTML-tagek, amelyekhez nem tartozik záró tag. Pl.: br -> break -> sortörés
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
Blokkszintű elemek: dobozoknak is nevezzük, fontos a megjelenésben.
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)
Logikai paraméter: jelölheted vele, hogy egy adott beállítás érvényre jusson e vagy nem.
Lang paraméter: ezzel állítható be egy bekezdés nyelve, értékeként a nyelv betűlódját kell megadni.
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
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
9 questions
Similarity, Dilations, and Volume Review
Presentation
•
9th - 12th Grade
10 questions
Stoichiometry Lesson
Presentation
•
9th - 12th Grade
7 questions
How to use Jumprope
Presentation
•
9th - 12th Grade
7 questions
Lesson 1
Presentation
•
10th - 12th Grade
7 questions
Lesson 2
Presentation
•
10th - 12th Grade
11 questions
Solving absolute value equations
Presentation
•
9th - 11th Grade
12 questions
Equitable or not?
Presentation
•
9th - 12th Grade
8 questions
Nuclear Power Overview
Presentation
•
9th - 12th Grade
Popular Resources on Wayground
16 questions
Grade 3 Simulation Assessment 2
Quiz
•
3rd Grade
19 questions
HCS Grade 5 Simulation Assessment_1 2526sy
Quiz
•
5th Grade
10 questions
Cinco de Mayo Trivia Questions
Interactive video
•
3rd - 5th Grade
17 questions
HCS Grade 4 Simulation Assessment_2 2526sy
Quiz
•
4th Grade
24 questions
HCS Grade 5 Simulation Assessment_2 2526sy
Quiz
•
5th Grade
13 questions
Cinco de mayo
Interactive video
•
6th - 8th Grade
20 questions
Math Review
Quiz
•
3rd Grade
30 questions
GVMS House Trivia 2026
Quiz
•
6th - 8th Grade