2. Linkek, egyszerűbb tag-ek, egyszerű stíluselemek

Az előző leckében eddig jutottunk, ez van jelenleg az index.html fájlunkban:

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
Helló világ! Ez az én első honlapom!
</body>

 

</html>

Legegyszerűbb tag szerintem a <p></p> nyitó-záró páros, ez egy egyszerű paragrafus tag, vagyis bekezdés, minden <p></p> tag közé írt szöveget új bekezdésben fog megjeleníteni, nagyjából mind MS Word-ben.

Adjuk hozzá a <p> taget a meglévő kódunkhoz, és toldjuk meg még egy kis szöveggel!

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
<p>Helló világ! Ez az én első honlapom!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</body>

 

</html>

Stílust is tudunk hozzáadni, például legyen az alsó szöveg dőlt és legyen a betűszíne piros!

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
<p>Helló világ! Ez az én első honlapom!</p>
<p style=”font-style:italic; color:red;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</body>

 

</html>

Megjegyzés: alap színeket lehet szöveggel kiírni mint piros=red; de komolyabb színeknél ajánlatos színkódot használni, ami egy 6 jegyű szám # jellel az elején, pl fehér = #FFFFFF; fekete = #000000;

Csináljunk egy egyszerű linket az oldalra!
Alap link elhelyezése az oldalon : <a href=”link url-je, elérhetősége, fájl neve“>Link neve</a>

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
<p>Helló világ! Ez az én első honlapom!</p>
<p style=”font-style:italic; color:red;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a href=”elso.html”>Első oldal</a>
</body>

 

</html>

Ha most csinálunk egy új üres lapot Notepad-ban, és felírjuk az alap tag-eket amit az első leckében kezdetnek írtam, és elmentjük ugyanabba a mappába elso.html néven, ahol az index.html fájlunk is van, akkor ha megnyitjuk böngészőben az index.html fájlt, majd rákattintunk a linkünkre, akkor az az elso.html fájlt nyitja meg 🙂
Fontos! Minden honlaphoz tartozó elem ugyanabban a mappában legyen, minden fájl, ami kapcsolódik a honlaphoz, képek, aloldalak, mind egy mappában legyenek! Ha mappán belül másik mappában vannak akkor a következőképpen kell a linket módosítani: <a href=”mappaneve/elso.html“>Első oldal</a>

Adjunk a linknek is egy kis stílust! Legyen minden betűje a link nevének nagybetű, és legyen félkövér!

<html>

 

<head>
<title>Első honlapom</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-2″>
</head>

 

<body>
<p>Helló világ! Ez az én első honlapom!</p>
<p style=”font-style:italic; color:red;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p style=”font-weight:bold; text-transform:uppercase;”><a href=”elso.html”>Első oldal</a></p>
</body>

 

</html>

Mint a MS Word-ben itt is vannak címsorok, amiket <h1> től <h6> tag-ig terjed, és alapértelmezett stílussal rendelkeznek, tehát ha css-ben nem is adsz meg hozzájuk semmit, a header tag-ek akkor is másképp fognak megjelenni a sima szövegtől. Nagyobb betűméret, félkövér betűstílus, ezek változnak attól függően hogy hányas szintű header tag-et használunk, <h1> a legmagasabb 1. szintű címsor, innen csökken le <h6>-ig.

Ennyit az alap dolgokról, következő leckében a div tag-ról fogok írni, és végigvezetem a dolgot egy egyszerű honlapon keresztül!