MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler"

Aydin Çalış
7 yıl önce
İzleme sayısı:

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, -

1 MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma, içiçe listeler oluşturma, - Özel karakterler ekleme. 1. Bölüm: Temel HTML Etiketleri - Resimler (1) Geçen derste oluşturduğunuz HelloWorld.html dokümanınızı açınız. 1

2 (2) HelloWorld.html dosyanızın bulunduğu klasörünüzün içerisine resimler kaydedeceğiniz, images isimli ayrı bir klasör oluşturunuz. (3) hello1 ve hello2 jpeg dosyalarını ilgili resimler klasörünün içerisine atınız. (4) HTML dokümanınıza ilgili resimleri eklemek için aşağıdaki kodu yazınız. <img src="images/hello1.jpg" alt="helloworld1" width="244" height="138"/> <img src="images/hello2.jpg" alt="helloworld2" width="334" height="119"/> <img> etiketi resim eklemek için kullanılan HTML etiketidir. is used to add the image. src parametresi/özelliği (attribute) ise eklenecek olan resim dosyasının bulunduğu yeri, konumunu (relative path) belirtir. 2

Soru: İkinci resmi ilk resmin yanına konumlandırmak için ne yapmalıyız?

3 alt parametresi/özelliği (attribute) resmin tarayıcı tarafından gösterilememesi durumunda resim yerine görünecek mesajı belirtir. width ve height parametreleri ise resmin boyutlarını ayarlamayı sağlar. Design View penceresinden eklediğiniz resimleri, oluşturduğunuz sayfayı görebilirsiniz! Soru: İkinci resmi ilk resmin yanına konumlandırmak için ne yapmalıyız? Dreamweaver üzerinde HTML kodu yazarken Dreamweaver ın autocomplete (otomatik tamamlama) özelliğinden faydalanabilirsiniz, daha hızlı ve doğru bir şekilde kodunuzu oluşturabilirsiniz. Bu özelliği kullanmak için < karakteri ile bir etiket açınız. Dreamweaver, hemen HTML etiket kütüphanesini listeleyecektir, ufak bir menü açılacaktır. Aynı zamanda HTML etiketleri için kullandığımız parametreler içinde autocomplete özelliği söz konusudur. 3

4 2. Bölüm: Temel HTML Etiketleri - Web Sayfası için Arkaplan Rengi (1) Web sayfanızın arkaplan rengini değiştirmek için, <body> etiketine aşağıdaki kodu yazınız. (2) Arkaplan rengini <body> etiketi üzerinden iki farklı yol ile uygulayabilirsiniz: style veya bgcolor kullanabilirsiniz. 4

5 Design View penceresinden oluşturduğunuz sayfayı görebilirsiniz! 5

3. Bölüm: Temel HTML Etiketleri Web Sayfası için Arkaplan Resmi (1) Öncelikle background.jpg dosyasını images klasörünüzün içerisini atınız. Web sayfanıza background.

6 3. Bölüm: Temel HTML Etiketleri Web Sayfası için Arkaplan Resmi (1) Öncelikle background.jpg dosyasını images klasörünüzün içerisini atınız. Web sayfanıza background.jpg resmini arkaplan yapmak için <body> etiketine aşağıdaki kodu yazınız. <body> etiketi içerisinde background parametresi kullanmanız gerekecektir, ilgili arkaplan resminin konumunu yazmanız/seçmeniz gerekecektir. 6

7 Design View penceresinden oluşturduğunuz sayfayı görebilirsiniz! (2) Arkaplan resminin tekrarlama özelliğini kaldırmak için style özelliği kullanarak background-repeat:no-repeat parametresini ekleyiniz. 7

8 4. Bölüm: Temel HTML Etiketleri Linkler Geçen ders oluşturduğunuz Paragraphs Exercise.html dosyanızı açınız. Web sayfalarını birbirine bağlamak için linkler kullanırız. Çeşitli linkler bulunmaktadır, sırasıyle hepsini inceleyelim. (1) RELATIVE LINK: Bir başka HTML dokümanımıza link vermek için aşağıdaki kodu yazınız. <a> etiketi hypertext link oluşturmak için kullanılır. is used to add a hypertext link. href parametresi bağlanacak olan kaynağın (diğer HTML dokümanı, resim vb.) konumunu göstermektedir. title parametresi ise mouse ile link üzerine gidildiğinde görüntülenecek mesajı belirtir. target parametresi ise bağlanılan sayfanın nerede açılacağını (aynı pencerede veya başka bir pencerede) belirtir. (2) ABSOLUTE LINK: Absolute linkler başka web sayfalarına yapılan bağlantıları ifade eder. Discuss the difference between absolute and relative paths. 8

9 (3) RESİMLERLE LINK VERME (4) LINKI VERME 9

(5) SAYFA İÇERİSİNDE LINK VERME: Oluşturduğunuz web sayfanızın çok uzun olması durumunda, sayfa üzerinde daha hızlı navigasyon sağlamak amacıyla

10 (5) SAYFA İÇERİSİNDE LINK VERME: Oluşturduğunuz web sayfanızın çok uzun olması durumunda, sayfa üzerinde daha hızlı navigasyon sağlamak amacıyla bu link örneğinden faydalanabilirsiniz. Çalışma 1 Şimdi, klasörünüzün içerisinde bulunan HTML sayfalarınızı birbirine bağlayalım. Local View: 10

11 index.html dosyanızı açınız ve aşağıdaki iki farklı link içeren kodu ekleyiniz. İlk link HelloWorld.html dosyasına giden bir bağlantıdır. İkinci link ise IT klasörümüzün içerisinde bulunan 1.html dosyasına giden bir bağlantıdır. Design View penceresinden kontrol ediniz: 11

Design View penceresinden kontrol ediniz: Son olarakta, 1.

12 Şimdi, HelloWorld.html dosyasını açınız ve aşağıdaki index.html ana sayfamıza giden linki ekleyiniz. Design View penceresinden kontrol ediniz: Son olarakta, 1.html dosyanızı açınız ve aşağıdaki index.html ana sayfamıza ve HelloWorld.html sayfamıza giden iki linki ekleyiniz. 12

13 Design View penceresinden kontrol ediniz: Şimdi, index.html sayfanızı tarayıcınız üzerinden açınız, oluşturduğunuz sayfalar arasında gezip bağlantılarınızı kontrol edebilirsiniz 13

14 5. Bölüm: Temel HTML Etiketleri Listeleme Lists Exercise.html isimli yeni bir HTML dokümanı oluşturunuz. (1) Maddeli listeleme (Unordered List) oluşturmak için <ul> ve <li> etiketleri kullanılır, sıralı olmayan liste anlamına gelir: Design View penceresinden kontrol ediniz: (2) Numaralandırma, Sıralı Listeleme (Ordered List) oluşturmak için <ol> ve <li> etiketleri kullanılır: Design View penceresinden kontrol ediniz: 14

15 (3) İçiçe listeleme (Nested List) örneği için aşağıdaki kodu yazınız. Design View penceresinden kontrol ediniz: 15

16 (1) Aşağıdaki kodu oluşturunuz. 6. Bölüm: Temel HTML Etiketleri Özel Karakterler Design View penceresinden kontrol ediniz: (2) Aşağıdaki kodu oluşturunuz. 16

17 Design View penceresinden kontrol ediniz: 17

Benzer belgeler

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar