Linkcsere verseny, link kihelyezése HTML-ben – képekkel


  • Share on Google+

Tegye fel a kezét az, aki látta már, hogy a borítékunk hátulján szerepel az alábbi link:

http://kedvezmeny.webonic.hu

Most tegye fel a kezét az, aki meg is nézte ezt az oldalt…

Én már láttam.

Én már láttam.

A linken a Gyümölcstárhely ügyfeleinek szánt kedvezményei olvashatóak, többek között az is, hogy van az a bizonyos linkcsere verseny.

Most azoknak szeretnék segíteni, akiknek egyszerű HTML oldaluk van, és szeretnék kihelyezni a linkünket, hogy részt vehessenek ők is a versenyben.

A korábbi oldalam, ahogy írtam is, fejlesztés alatt áll.

Honlapom most.

Honlapom most.

 

Amíg el nem készül, addig is szeretnék részt venni a linkcsere versenyben.

Először csak a honlapom háttérképének közepébe, a kosaras “fejlesztés alatt” képem alá helyezem azt a bannert, ami nekem a legjobban tetszik a felkínáltak közül.

Első linkem.

Első linkem.

 

index.html

Az index.html fájlom tartalmát így nem is bántom, csak behelyezem a kódot, amit a http://linkcsere.webonic.hu/ oldalon, a leginkább tetsző link melletti dobozban találtam.

Így a korábban megadott container div-emnek/ dobozomnak a szabályai érvényesülnek rajta.

Az index.html fájlom body része most így néz ki:

<body>
   <div>
      <ul>
      <img src="kepek/kosar_feltoltes alatt.jpg"/>
      </ul>
      <ul>
      <a href="https://webonic.hu" title="Szimpatikus webtárhely :)"><img title="Szimpatikus webtárhely :)" alt="Szimpatikus webtárhely :)" style="border:0px" src="http://linkcsere.webonic.hu/tarhely/transparent/468x60_en.gif"/></a>
      </ul>
   </div>
 </body>

És ehhez tartozik az alábbi css kód:

body {
 background: #FFFFFF url(kepek/korfodros_eper.jpg) repeat-y top;
 margin-top: 10%;
 margin-left: 5%;
 margin-right: 5%;
 width:90%;
 }
 .container {
 margin-left: 140px;
 margin-right: 140px;
 text-align: center;
 margin-top: 250px;
 }

Ez alapján a honlapom most ilyen lett:

Link elhelyezve.

Link elhelyezve.

 

Mivel szeretek kísérletezni, és a láblécek nagyon tetszenek a honlapok alján, úgy döntöttem, készítek egyet.

 

Ezt a linket helyezem a láblécbe.

Ezt a linket helyezem a láblécbe.

 

A body részbe helyeztem egy újabb div-et, mert a láblécet külön szeretném formázni. Azt szeretném, hogy egy vékony vonallal elválasztódjon a honlap többi tartalmától, és oda kerüljön a kis észrevétlen szöveg, ahová én szeretném. A betűk színe és mérete is más lesz.

Behelyeztem tehát  képem alá, a container lezárása után egy footer nevű dobozt, így:

</div>
<div id="footer">

És alá írtam a kódot, amit választottam:

<p>Én is a <a href="https://webonic.hu" title="Gyümölcstárhely - tárhely, domain, webtárhely"><img title="Gyümölcstárhely - tárhely, domain, webtárhely" alt="Gyümölcstárhely - tárhely, domain, webtárhely" style="border:0px" src="http://linkcsere.webonic.hu/tarhely/normal/80x25_kiwi.jpg"/></a> szolgáltatásait használom.</p>

Kicsit beleszerkesztettem a kimásolt linkbe, beleírtam, hogy én is a Gyümölcstárhely szolgáltatását használom, majd lezártam a tag-et. Most így néz ki az index.html-em tartalma a honlap törzsében:

<body>
   <div>
     <ul>
       <img src="kepek/kosar_feltoltes alatt.jpg"/>
     </ul>
     <ul>
       <a href="https://webonic.hu" title="Szimpatikus webtárhely :)"><img title="Szimpatikus webtárhely :)" alt="Szimpatikus webtárhely :)" style="border:0px" src="http://linkcsere.webonic.hu/tarhely/transparent/468x60_en.gif"/></a>
     </ul>
   </div>
<div id="footer">
      <p>Én is a <a href="https://webonic.hu" title="Gyümölcstárhely - tárhely, domain, webtárhely"><img title="Gyümölcstárhely - tárhely, domain, webtárhely" alt="Gyümölcstárhely - tárhely, domain, webtárhely" style="border:0px" src="http://linkcsere.webonic.hu/tarhely/normal/80x25_kiwi.jpg"/></a> szolgáltatásait használom.
     </p>
</div>
</body>
</html>

Mivel a kódomba bele helyeztem egy újabb div-et, ezért azt értelmeznem kell a css-fájlomban, hogy a böngésző is tudja, miképp jelenljen meg a láblécem, vagyis a footer.

A css fájlom tartalmát az alábbi résszel egészítettem ki:

#footer {
 clear: both;
 padding: 10px 0;
 background: #FFFFFF;
 border-top: 2px solid #E8AD35;
 text-align: center;
 font-size: smaller;
 color: #E8AD35;
 }

A border-top segítségével meghatároztam, hogy a lábléc felett legyen egy kis narancssárga vonal, a 2px solid a vastagságát, a #E8AD35 a színét jelöli. A többi bejegyzés azt mondja meg, hogy a lábléc háttere fehér legyen, a szöveg betűmérete kicsi, középre zárt és színe a vonallal azonos.

Ezzel a szabállyal az alábbi képet eredményeztem az oldal lehívásakor, ami most így néz ki:

Láblécem.

Láblécem.

Látogatottsággal teli, szép napot kívánok!