WEB TASARIMININ TEMELLERI

1
WEB TASARIMININ TEMELLERI

• HTML

2
SAYFALARA YAZI VEYA METIN GIRMEK

• IKI BODY DEYIMI ARASINA YAZILARIMIZI YAZARIZ.
• BIR WEB SAYFASININ IÇERIGINI INTERNET EXPLORER
  PROGRAMIYLA GÖREBILIRIZ.
• YAZILARIMIZI BIÇIMLEME DEYIMLERI KULLANARAK
  DÜZENLERIZ.

3
ÖRNEK 6 (YAZI GIRME)

• ltHTMLgt
• ltHEADgt
• lttitlegtDESEM Bilgisayar Kurslari...lt/titlegt
• lt/HEADgt
• lt!-- Asagida verilen satirda Web sayfasindaki
• metinlerin rengi degistiriliyor. --gt
• ltbody text"BLUE"gt
• DESEM
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...
• lt/BODYgt
• lt/HTMLgt

4
ltBRgt DEYIMI

• BIR ÖNCEKI ÖRNEGIMIZDE DESEM YAZISINDA SONRA
  YAZIYA BIR ALT SATIRDAN BASLAMAK INTERNET
  EXPLORER PROGRAMINDA HIÇBIR DEGISIKLIGE YOL
  AÇMADI..
• BIR ALT SATIRDAN YAZIYA DEVAM ETMEK IÇIN ltBRgt
  DEYIMI KULLANILIR.

5
ÖRNEK 7 (BR DEYIMI)

• ltHTMLgt
• ltHEADgt
• lttitlegtDESEM Bilgisayar Kurslari...lt/titlegt
• lt/HEADgt
• lt!-- Asagida verilen satirda Web sayfasindaki
• metinlerin rengi degistiriliyor. --gt
• ltbody text"BLUE"gt
• DESEMltBRgt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...
• lt/BODYgt
• lt/HTMLgt

6
YAZILARIN ORTALANMASI

• SAYFA IÇINDE ORTALANMASINI ISTEDIGIM YAZILAR IÇIN
  ltCENTERgt...lt/CENTERgt DEYIMINI KULLANABILIRIM.
• ORTALAMAK ISTEDIGIM METNIN BASINA ltCENTERgt
  BASLATMA DEYIMINI, SONUNA ISE lt/CENTERgt DEYIMINI
  YERLESTIRECEGIM. BU IKI DEYIM ARASINDA KALAN YAZI
  ORTALANIR.

7
ÖRNEK 8 (ltCENTERgt)

• ltHTMLgt
• ltHEADgt
• lttitlegtDESEM Bilgisayar Kurslari...lt/titlegt
• lt/HEADgt
• lt!-- Asagida verilen satirda Web sayfasindaki
• metinlerin rengi degistiriliyor. --gt
• ltbody text"BLUE"gt
• ltCENTERgt
• DESEMltBRgt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

8
YAZI BÜYÜKLÜGÜ

• WEB SAYFAMIZDA KULLANDIGIMIZ YAZILARIMIZIN FARKLI
  BÜYÜKLÜKTE OLMASI GEREKEBILIR.
• BÜYÜKLÜK AYARI IÇIN ltFONTgt DEYIMI IÇINDE
  KULLANILAN SIZE PARAMETRESI KULLANILIR.
• ltFONT SIZEXgt..YAZIMIZ..lt/FONTgt
• BURADA X HARFI YAZIMIZIN BÜYÜKLÜGÜDÜR.

9
ÖRNEK 9 (YAZI BÜYÜKLÜGÜ)

• ltHTMLgt
• ltHEADgt
• lttitlegtDESEM Bilgisayar Kurslari...lt/titlegt
• lt/HEADgt
• lt!-- Asagida verilen satirda Web sayfasindaki
• metinlerin rengi degistiriliyor. --gt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT SIZE6 gtDESEMlt/FONTgtltBRgt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

10
ÖRNEK 10 (H1,H2,...,H6)

• ltHTMLgt
• ltBODYgt
• lth1gt Bu baslik 1 dirlt/h1gt
• lth2gt Bu baslik 2 dir lt/h2gt
• lth3gt Bu baslik 3 dür lt/h3gt
• lth4gt Bu baslik 4 tür lt/h4gt
• lth5gt Bu baslik 5 dir lt/h5gt
• lth6gt Bu baslik 6 dir lt/h6gt
• lt/BODYgt
• lt/HTMLgt

11
KALIN, ITALIK VE ALTI ÇIZGILI YAZI

• BIR ÖNCEKI ÖRNEGIMIZDE YAZIMIZIN ISTEDIGIMIZ
  BÜYÜKLÜKTE OLMASINI SAGLAYABILIYORDUK.
• BENZER SEKILDE METINLERIN KALIN, ITALIK VE ALT
  ÇIZGILI OLMASINI DA SAGLAYABILIRIZ.
• KALIN IÇIN ltBgt..YAZIlt/Bgt
• ITALIK IÇIN ltIgt..YAZI..lt/Igt
• ALT ÇIZGI IÇIN ltUgt..YAZI..lt/Ugt
• KULLANILIR

12
ÖRNEK 11 (K, I,ALT)

• ltHTMLgt
• ltHEADgt
• lttitlegtDESEM Bilgisayar Kurslari...lt/titlegt
• lt/HEADgt
• lt!-- Asagida verilen satirda Web sayfasindaki
• metinlerin rengi degistiriliyor. --gt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT SIZE6 gtDESEMlt/FONTgtltBRgt
• ltBgt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...
• lt/BgtltBRgt

13
ÖRNEK 11 (DEVAM)

• ltIgt
• Mühendislik Fakültesi
• lt/IgtltBRgt
• ltUgt
• Bilgisayar Mühendisligi Bölümü...
• lt/Ugt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

14
ltSTRONGgt,ltEMgt DEYIMLERI

• YAZIMIZI KALIN YAPMAK IÇIN ltBgt DEYIMI YERINE
  ltSTRONGgt DEYIMINI KULLANABILIRIZ.
• AYNI SEKILDE YAZIMIZI ITALIK YAPMAK IÇIN ltIgt
  DEYIMI YERINE ltEMgt DEYIMINI KULLANABILIRIZ.

15
ÖRNEK 12 (STRONG, EM)

• ltHTMLgt
• ltHEADgt
• lttitlegtDESEM Bilgisayar Kurslari...lt/titlegt
• lt/HEADgt
• lt!-- Asagida verilen satirda Web sayfasindaki
• metinlerin rengi degistiriliyor. --gt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT SIZE6 gtDESEMlt/FONTgtltBRgt
• ltSTRONGgt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...
• lt/STRONGgtltBRgt

16
ÖRNEK 12 (DEVAM)

• ltEMgt
• Mühendislik Fakültesi
• lt/EMgt
• ltSTRONGgtltEMgt
• Bilgisayar Mühendisligi
• lt/EMgtlt/STRONGgt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

17
YAZI RENGINI AYARLAMAK

• YAZI RENGI AYARI IÇIN DAHA ÖNCE BIR YOL
  TANIMLAMISTIK.
• FAKAT SADECE TÜM SAYFAMIZIN YAZI RENGINI
  DEGISTIREBILIYORDUK.
• BELLI YAZILARIMIN RENGININ FARKLI RENKTE OLMASINI
  ISTIYORSAM ltFONTgt DEYIMININ COLOR
  PARAMETRESINI KULLANIRIM.
• ltFONT color YAZI RENGIgtYAZIMlt/FONTgt
• KULLANILIR

18
ÖRNEK 13 (YAZI RENGI)

• ltHTMLgt
• ltHEADgtlttitlegtDESEM Bilgisayar Kurslari...lt/titlegtlt
  /HEADgt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT colorred gtDESEMlt/FONTgtltBRgt
• ltFONT coloryellowgt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...
• lt/FONTgtltBRgt
• ltfont colorgreengtMühendislik Fakültesi
  lt/fontgt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

19
FONT DEGISIKLIGI

• YAZILARIMIZI WORD PROGRAMINDA OLDUGU GIBI BIR
  FONT BELIRTEREKTE BIÇIMLENDIREBILIRIZ.
• ÖRNEGIN Arial,Times New Roman,Technical
  vs.. HEP FONT ÇESITLERIDIR.
• WINDOWS ISLETIM SISTEMI BU FONTLARDAN BIR ÇOGUN
  DESTEKLER.

20
FONT DEGISTIRME

• WINDOWS ISLETIM SISTEMININ DESTEKLEDIGI FONTLARI
  RAHATLIKLA WEB SAYFALARIMIZDA KULLANABILIRIZ.
• BU FONTLARI KULLANMAK IÇIN ltFONTgt DEYIMININ
  FACE PARAMETRESINI KULLANIRIZ.
• ltFONT face arialgtDESEMlt/FONTgt

21
ÖRNEK 14 (FACE PARAMETRESI)

• ltHTMLgt
• ltHEADgtlttitlegtDESEM Bilgisayar Kurslari...lt/titlegtlt
  /HEADgt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT faceArial gtDESEMlt/FONTgtltBRgt
• ltFONT face"Courier New"gt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...lt/FONTgtltBRgt
• ltFONT faceVerdanagtMühendislik Fakültesi
  lt/FONTgt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

22
ÖRNEK 15 (FACE PARAMETRESI)

• ltHTMLgt
• ltHEADgt
• lttitlegtDESEM Bilgisayar Kurslari...lt/titlegt
• lt/HEADgt
• ltbody gt
• ltCENTERgt
• ltFONT color"red" faceArialgtDESEMlt/FONTgtltBRgt
• ltfont color"green"gtDokuz Eylül Üniversitesi
  Sürekli Egitim Merkezi...lt/fontgtltBRgt
• ltFONT faceVerdanagtMühendislik Fakültesi
  lt/FONTgt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

23
HTML RESIMLERI

• ÖZELLIKLE BANT GENISLIGININ ARTMASIYLA WEB
  SAYFALARINDA ÇOK FAZLA RESIMLER KULLANILMAYA
  BASLANDI.
• BUNUN SONUCU OLARAK ltIMGgt TAGININ IYI BILINMESI
  GEREKMEKTEDIR.

24
ltIMGgt VE SRC ÖZELLIGI

• ltIMGgt TAGININ BITIS TAGI YOKTUR, SADECE
  ÖZELLIKLERI VARDIR.
• BIR SAYFADA RESIM GÖRÜNTÜLEYEBILMEK IÇIN ltIMGgt
  TAGININ SRC ÖZELLIGI KULLANILIR.
• YANI
• ltIMG SRCURLgt
• lt IMG SRCC\ISMAIL.GIFgt

25
HTML RESIMLERI

• BIR RESMI WEB SAYFAMIZA YERLESTIRMEK ISTIYORSAK
  ILK OLARAK RESIM DOSYAMIZ HARD DISKIMIZ ÜZERINDE
  OLMALIDIR.
• AYNI SEKILDE INTERNET ÜZERINDEN YAYINLAYACAGIMIZ
  RESME AIT DOSYA DA INTERNETTE OLMALIDIR.

26
RESIM TIPLERI

• INTERNET ÜZERINDEN YAYINLAYACAGIMIZ RESIMLERIN
  FORMATI
• JPEG, JPG
• BMP
• GIF
• XBM
• PNG

27
Örnek16 (Resim Ekleme)

• ltHTMLgt
• ltHEADgtlttitlegtDESEM Bilgisayar Kurslari...lt/titlegtlt
  /HEADgt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT faceArial gtDESEMlt/FONTgtltBRgt
• ltFONT face"Courier New"gt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...lt/FONTgtltBRgt
• ltFONT faceVerdanagtMühendislik Fakültesi
  lt/FONTgt
• ltIMG SRC file///C/WINDOWS/Backgrnd.gif gt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

28
Örnek 17(Resim ekleme)

• ltHTMLgt
• ltHEADgtlttitlegtDESEM Bilgisayar Kurslari...lt/titlegtlt
  /HEADgt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT faceArial gtDESEMlt/FONTgtltBRgt
• ltFONT face"Courier New"gt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...lt/FONTgtltBRgt
• ltFONT faceVerdanagtMühendislik Fakültesi
  lt/FONTgt
• ltIMG SRC ../dosyalar/bulutlar.gif gt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

29
Resim Biçimleme

• WEB SAYFASINA EKLEDIGIMIZ RESIMLERI
• BORDER ÖZELLIGI ILE RESIM ÇERÇEVE KALINLIGI
  BELIRTILEBILIR.
• ALIGN ÖZELIGI ILE RESMIN KONUMU BELIRTILEBILIR
• LEFT,RIGHT,CENTER,TOP,BOTTOM
• HEIGHT ILE RESIM YÜKSEKLIGINI VE
• WIDTH ILEDE RESIM GENISLIGINI BELIRTEBILIRIZ.

30
ÖRNEK18 (Resim özellikleri )

• ltHTMLgt
• ltHEADgtlttitlegtDESEM Bilgisayar Kurslari...lt/titlegtlt
  /HEADgt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT faceArial gtDESEMlt/FONTgtltBRgt
• ltFONT face"Courier New"gt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...lt/FONTgtltBRgt
• ltFONT faceVerdanagtMühendislik Fakültesi
  lt/FONTgt
• ltIMG SRC ../dosyalar/bulutlar.gif
  width"250" height"240" border"6" gt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

31
Resim özellikleri ALT

• RESIM GÖRÜNTÜLENEMEDIGI ZAMAN VEYA BELIRTILEN
  TIPTEKI RESMI GÖRÜNTÜLEME IMKANI OLMAYAN
  TARAYICILAR IÇIN RESMIMIZ YERINE BIR METINDE
  HAZIRLANABILIR
• BUNUN IÇIN
• ltIMG SRC resim_adi ALTMETNIMIZgt
• KULLANILIR

32
ÖRNEK 19 (ALT ÖZELLIGI)

• ltHTMLgt
• ltHEADgtlttitlegtDESEM Bilgisayar Kurslary...lt/titlegtlt
  /HEADgt
• ltbody text"BLUE"gt
• ltCENTERgt
• ltFONT faceArial gtDESEMlt/FONTgtltBRgt
• ltFONT face"Courier New"gt
• Dokuz Eylül Üniversitesi Sürekli Egitim
  Merkezi...lt/FONTgtltBRgt
• ltFONT faceVerdanagtMühendislik Fakültesi
  lt/FONTgt ltimg src ../dosyalar/bulutlar.gif
  width"250" height"240" border"6" alt "Guzel
  bir bulut"gt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

33
SAYFALARDA YATAY ÇIZGI

• SAYFALARIMIZA YATAY BIR ÇIZGI EKLEMEK ISTIYORSAK
  ltHRgt TAGINI KULLANMAMIZ GEREKIR.
• SAYFANIZIN ISTEDIGINIZ BIR YERINE ltHRgt DEYIMINI
  EKLERIZ. KAPANIS TAGI YOKTUR.
• ltHR align"center" width"250" size"5" noshade
  color"0000CC"gt

34
ltPgt...lt/Pgt

• PARAGRAFLARI BELIRTMEK IÇIN KULLANILIR.
• ltPgtBURASI BIR PARAGRAFTIR.lt/Pgt

35
ÖRNEK 20 (ltPgt)

• ltHTMLgt
• ltHEADgtlttitlegtDESEM Bilgisayar Kurslary...lt/titlegtlt
  /HEADgt
• ltbody text"BLUE"gt
• ltp align"left"gtBURASI ILK PARAGRAF lt/pgt
• ltp align"center"gtBURASI DA IKINCI PARAGRAF ltbrgt
• Paragrafin devamida ayni özellikte olurlt/pgt
• ltp align"right"gtBURASI ÜÇÜNCÜ VE SAGA DAYALI
  ltbrgt
• Özellik Muhafaza ediliyorlt/pgt
• ltp align"justify"gtVE DE IKI KENARA DAYALIlt/pgt
• lt/BODYgt
• lt/HTMLgt

36
KENAR BOSLUKLARI

• INTERNET EXPLORER SAYFALARIMIZI GÖRÜNTÜLERKEN
  KENARLARDA BIR MIKTAR BOSLUK BIRAKMAKTADIR.
• EGER BOSLUK MIKTARINI KENDIMIZ BELIRTMEK ISTERSEK
  BODY DEYIMI ILE KULLANILAN
• TOPMARGIN
• LEFTMARGIN
• ÖZELLIKLERINI KULLANIRIZ...

37
ÖRNEK 21 (TOPMARGIN,LEFTMARGIN)

• ltHTMLgt
• ltHEADgtlttitlegtDESEM Bilgisayar Kurslari...lt/titlegtlt
  /HEADgt
• ltbody TOPMARGIN50 LEFTMARGIN100gt
• ltp align"left"gtBURASI ILK PARAGRAF lt/pgt
• ltp align"center"gtBURASI DA IKINCI PARAGRAF lt/pgt
• ltp align"right"gtBURASI ÜÇÜNCÜ VE SAGA DAYALIlt/pgt
• ltp align"justify"gtVE DE IKI KENARA DAYALIlt/pgt
• lt!-- AUTOSTART VE HIDDEN PARAMETRELERI DE
  KULLANILABILIR --gt
• ltEMBED SRC"C\WINDOWS\MEDIA\LOGOFF.WAV"gt
• lt/BODYgt
• lt/HTMLgt