HTML - basic - Lecke száma 3
Szöveg tagolása
Egy HTML dokumentumba beírt szöveg tagolás nélkül, folyamatosan jelenik meg. Ahhoz, hogy átlátható, később majd egységesen formázható legyen a weboldal tartalma, címeket és bekezdéseket jelölünk ki.
A tagoláshoz a következő címkéket használhatjuk:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - különböző méretű/szintű címek, alcímek, a h az angol header (fejléc) szó rövidítése. A címkék közé került szöveg külön sorba jelenik meg.
<br> - sortörés, a break (törés jelentésű) angol szóból származik. Új sorba kerül a szöveg anélkül, hogy új bekezdés kezdődne. Ezt a címkét nem kell lezárni.
<p> </p> - bekezdés, az angol paragraph (paragrafus) szóból rövidítése. A közrezárt szöveg bekezdésként kiválik a szövegrészből.
A sortörés és bekezdés közötti legnagyobb különbség az, hogy a bekezdésnek van lezáró címkéje a sortörésnek nincs. A bekezdés szövege azonosítható: tudjuk hol az eleje és vége, ezért formázható. A sortörés nem zárható le, nem vonatkozik egy szövegrészre, egyszerűen új sor kezdődik a megadott helyen.
A tagoláshoz a következő címkéket használhatjuk:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - különböző méretű/szintű címek, alcímek, a h az angol header (fejléc) szó rövidítése. A címkék közé került szöveg külön sorba jelenik meg.
<br> - sortörés, a break (törés jelentésű) angol szóból származik. Új sorba kerül a szöveg anélkül, hogy új bekezdés kezdődne. Ezt a címkét nem kell lezárni.
<p> </p> - bekezdés, az angol paragraph (paragrafus) szóból rövidítése. A közrezárt szöveg bekezdésként kiválik a szövegrészből.
A sortörés és bekezdés közötti legnagyobb különbség az, hogy a bekezdésnek van lezáró címkéje a sortörésnek nincs. A bekezdés szövege azonosítható: tudjuk hol az eleje és vége, ezért formázható. A sortörés nem zárható le, nem vonatkozik egy szövegrészre, egyszerűen új sor kezdődik a megadott helyen.
Feladatok
1. A index.html fájlban jelölje be a Coders Work a legmagasabb szintű fejlécként, majd helyezze a többi szöveget egy bekezdésbe.
Tekintsd meg az eredményt
2. Másolja az alábbi szöveget az index.html-be a bekezdés után:
After finishing my studies, as a sociologist, I was eager to find out how youth is coping with getting a decent job for fulfilling their lives. The result of my research showed that the IT sector is the most popular, yet most unreachable for people with limited educational possibilities.
Together with a couple of friends who work as programmers, we decided to draw up a course " Coders Work" - in which those interested can find out, about the basics of programming, ex: how to make a website, how to use JavaScript, CSS and HTML, and more.
Figyeljük meg, hogy a szöveg folyamatosan jelenik meg, a böngésző nem reagál a belépő linkre. A korábban megjelölt fejléc külön sorban marad.
Tekintsd meg az eredményt
After finishing my studies, as a sociologist, I was eager to find out how youth is coping with getting a decent job for fulfilling their lives. The result of my research showed that the IT sector is the most popular, yet most unreachable for people with limited educational possibilities.
Together with a couple of friends who work as programmers, we decided to draw up a course " Coders Work" - in which those interested can find out, about the basics of programming, ex: how to make a website, how to use JavaScript, CSS and HTML, and more.
Figyeljük meg, hogy a szöveg folyamatosan jelenik meg, a böngésző nem reagál a belépő linkre. A korábban megjelölt fejléc külön sorban marad.
3. Helyezd a korábban másolt szövegetkét bekezdésbe. Amint látod, mindkettõ új sorokban kezdõdik.
Tekintsd meg az eredményt
4. Helyezzen be egy sortörést a második bekezdés első mondata után, és vegye figyelembe, hogy egy új sorban kezdődik a böngészőben.
Tekintsd meg az eredményt
Kérdőív
1. Ha egy HTML dokumentum az alábbi sorokat tartalmazza:
<h4>Opera</h4>
<h5>Chrome</h5>
<h1>Firefox</h1>
Melyik fejléc lesz nagyobb/magasabb szintű?
<h4>Opera</h4>
<h5>Chrome</h5>
<h1>Firefox</h1>
Melyik fejléc lesz nagyobb/magasabb szintű?
2. Egy HTML dokumentum a következő sort tartalmazza:
<h1>Hobbies</h1><p>designing</p><p>painting, <br> drawing</p> writing
Hány sor jelenik meg a böngészőben?
<h1>Hobbies</h1><p>designing</p><p>painting, <br> drawing</p> writing
Hány sor jelenik meg a böngészőben?
3. Ha hosszabb szöveget akarunk beilleszteni egy weboldalra, melyik eljárás a legjobb, ha struktúrát ad a szöveghez?
