1 / 41

Weblap szerkesztés

Weblap szerkesztés. HTML oldal felépítése. <html> <head> </head> <body> </body> </html>. Nyitó tag Nyitó tag Záró tag Nyitó tag Záró tag Záró tag. oldalfej. tözs. HTML oldal felépítése. Nyitó és záró tag-ekbők Tag-ek egymába ágyazhatóak. Bekezdések. <html> <head>

latoya
Download Presentation

Weblap szerkesztés

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Weblap szerkesztés 1

  2. HTML oldal felépítése <html> <head> </head> <body> </body> </html> Nyitó tag Nyitó tag Záró tag Nyitó tag Záró tag Záró tag oldalfej tözs 2

  3. HTML oldal felépítése • Nyitó és záró tag-ekbők • Tag-ek egymába ágyazhatóak 3

  4. 4

  5. Bekezdések <html> <head> </head> <body> <p>szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg</p> <p>szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg</p> </body> </html> 5

  6. 6

  7. Sortörés • Shift + Enter • Nem írja új bekezdébe, csak új sorban folytatja 7

  8. A <br>-nek NINCS záró </br> párja, csak töréspontot jelöl <html> <head> </head> <body> <p>szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg</p> <p>szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg</p> <p>szöveg szöveg szöveg<br>szöveg szöveg<br>szöveg</p> </body> </html> 8

  9. 9

  10. 10

  11. Címsor 1-6 <html> <head> </head> <body> <h1>Címsor1</h1> <h2>Címsor2</h2> <h3>Címsor3</h3> <h4>Címsor4</h4> <h5>Címsor5</h5> <h6>Címsor6</h6> <p>szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg </p> </body> </html> 11

  12. Rendezett lista • Ez egy rendezett (ordered -> számozott) lista első sora • Második sora • Harmadik sora • … 12

  13. Rendezetlen lista • Ez egy rendezetlen (unordered) lista első sora • Második sora • Harmadik sora • … 13

  14. 14

  15. <html> <head> </head> <body> <ol> <li>Első sor</li> <li>Második</li> <li>Harmadik</li> <li>...</li> </ol> <ul> <li>Első sor</li> <li>Második</li> <li>Harmadik</li> <li>...</li> </ul> </body> </html> <ol> : ordered list <ul> : unordered list <li> : list item 15

  16. Linkek 16

  17. 2. 1. 3. 17

  18. Hivatkozás oldalra URL címmel • A linkké alakítandó szöveg kijelölése • Beszúrás -> Hiperhivatkozás • Cím mezőbe beírjuk a hivatkozott URL címet 18

  19. 3. 1. 19

  20. Hivatkozás helyi mappában lévő oldalra • A linkké alakítandó szöveg kijelölése • Beszúrás -> Hiperhivatkozás • Kiválasztjuk a mappában lévő megfelelő fájlt 20

  21. Hol nyitja meg a hivazkozott oldalt? • A lap alapértelmezése (nincs): általában ugyanabba az ablakban • Azonos keret: mindig ugyanabban az ablakban • Új ablakban: az oldal megmarad az ablakában és a hivatkozott oldal egy új böngésző ablakban nyílik meg (látogató számára ez a legkényelmesebb) 21

  22. 22

  23. <html> <head> </head> <body> <p>Ez egy link a <a target="_blank" href="http://www.mikell.hu">MIKELL</a> honlapjára</p> <p>Link a helyi mappában tárolt <a href="masikweblap.html">másik weblapra</a></p> </body> </html> ############################################################################ Target: az hivatkozott oldal megnyitásának a helye ( _blanc -> új ablakba) Href: a hivatkozás helye <a href="hivatkozasi_cim" >linkké akakítandó szöveg</a> 23

  24. Képek beszúrása • A kép is legyen a helyi mappában, vagy ennek egy almappájában • Ha nincs, akkor a szerverre való feltöltés után a kép nem jelenik meg • A képfájl nevében ne legyenek ékezetes vagy speciális karakterek 24

  25. Képek beszúrása • Kép helyi mappába másolása • Beszúrás -> Kép -> Fájlból • Mappa kikeresése • Kép kiválasztása 25

  26. 26

  27. Jobb egérrel kattints a képre 27

  28. <html> <head> </head> <body> <img src="idealis_nev.JPG" > <p>szöveg</p> </body> </html> ############################################################# <img>-nek sincs záró változata 28

  29. Táblázatok • style="border-collapse: collapse" paramétert a HTML kódból el kell távolítani. Többet ront, mint használ. 29

  30. 30

  31. 31

  32. <html> <head> </head> <body> <div align="center"> <center> <table border="2" cellpadding="4" cellspacing="6" bordercolor="#111111" width="80%"> <tr> <td width="50%">elő sor első</td> <td width="50%">első sor második</td> </tr> <tr> <td width="50%">második sor első</td> <td width="50%">második sor második</td> </tr> </table> </center> </div> </body> </html> A FrontPage ezt generálja 32

  33. A lényeg <table> <tr> <td>elő sor első</td> <td>első sor második</td> </tr> <tr> <td>második sor első</td> <td>második sor második</td> </tr> </table> 33

  34. Lap tulajdonságai • Egész weblapra vonatkozó formázások • Ezek lesznek az alapértelmezettek 34

  35. 35

  36. 36

  37. <body link="#FFFFFF" vlink="#C0C0C0" alink="#FF00FF" text="#00FFFF" bgcolor="#000080"> </body> 37

  38. 38

  39. <html> <head> <title>Első weblapom</title> </head> <body link="#FFFFFF" vlink="#C0C0C0" alink="#FF00FF" text="#00FFFF" bgcolor="#000080"> <p>szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg</p> <p>Ez egy link a <a target="_blank" href="http://www.mikell.hu">MIKELL</a> honlapjára</p> <p>Link a helyi mappában tárolt <a href="masikweblap.html">másik weblapra</a></p> <img border="0" src="idealis_nev.JPG" width="358" height="233"> </body> </html> 39

  40. Tipp • Hogy az oldal ne folyjon szét, tegyük bele az egészet egy 1*1-es táblázatba, mely • Szélessége 70% (ablak kerethez viszonyítva értelmezik a böngészők, így az ablak átméretezésével a táblázat is változik) • Középre igazított • Nincs kerete 40

  41. 41

More Related