Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

WEB S İ TES İ YAPIYORUM HTML Hazırlayan: Hazel İ NC İ ULU Ğ.

Benzer bir sunumlar


... konulu sunumlar: "WEB S İ TES İ YAPIYORUM HTML Hazırlayan: Hazel İ NC İ ULU Ğ."— Sunum transkripti:

1 WEB S İ TES İ YAPIYORUM HTML Hazırlayan: Hazel İ NC İ ULU Ğ

2  Bir web sitesi yapmak için kullanabilece ğ imiz çeşitli programlar vardır. (Örn: Frontpage, Dreamweaver vb.)  Bu programlar ile kod yazmadan web sayfası oluşturabiliriz. Görsel olarak ekledi ğ imiz her resim, ba ğ lantı vb. programın arkasında bir kod üretir. Bu kodlar, HTML olarak isimlendirilen bir dildir.

3 HTML (Hyper Text Markup Language)  Bazen Frontpage, Dreamweaver gibi programlar yetersiz kalabilir. Böyle zamanlarda sitemizin kodlarına bizim müdahele etmemiz gerekir. Bu yüzden temel HTML kodlarını bilmemiz gerekir.  HTML; internet sayfalarını oluşturmaya yarayan, internet tarayıcılarının okuyabilece ğ i bir dildir.

4 HTML Kodları Nereye Yazılır?  HTML kodlarını herhangi bir kelime işlemci programına yazabiliriz. (Notepad, Word vb)  HTML dökümanı tek başına, sadece bir metin dosyasıdır. Ancak herhangi bir internet tarayıcısı ile ( İ nternet Explorer, Google Chrome vb.) çalıştırıldı ğ ında, içerdi ğ i kodlara göre anlam kazanır.

5 HTML Kodları Nereye Yazılır?  Not defterinde oluşturdu ğ umuz belgeyi, uzantısı.html olacak şekilde kaydetmemiz gerekir.  Bunun için Dosya menüsünden, Farklı Kaydet seçene ğ ini tıklayarak, açılan pencerede dosya ismi bölümünü dasya adı.html şeklinde yazmalıyız. Örn: Bir web tarayıcısından adresine girelim. Sayfada sa ğ tıklayıp Kayna ğ ı Görüntüle seçene ğ ine tıklayalım. Tıkladıktan sonra, sayfanın HTML diliyle yazılmış kodlarını göreceksiniz.www.meb.gov.tr

6 Temel HTML Komutları  HTML kodlarının yazılışında, bazı temel kurallar vardır. Bu kuralların herhangi birinde yapılacak hata, işlemlerinizin sonuç vermemesine neden olur. Şimdi bu kuralları inceleyelim:

7 Temel HTML Komutları  HTML komutlarına etiket (tag) denir. Bu etiketlerin bir açma, bir de kapama bölümü bulunur.  Komutlar küçüktür işaretleri arasına yazılır. Bir HTML sayfası, komutu ile başlar ve sayfa sonunda komutu ile biter. Bu bizim temel komutumuzdur. Etiketin kapama kısmı her zaman çizgi işareti içerir.

8 Temel HTML Komutları  Head Komutu Sayfanın en üstünde w eb sayfası ile ilgili temel özellikler (Sayfa Başlı ğ ı Yazı karakterler kümesi, link özellikleri gibi) komutu altında tanımlanır. Kısaca head kısmında sayfanın nasıl görüntülenece ğ i gibi bölümler yer alır. Bilgiler bitince ile kapatılır.

9 Temel HTML Komutları  Title Komutu Sayfanın başlı ğ ının yazıldı ğ ı bölümdür. ve arasına yazılan metin, web sayfasının başlı ğ ı olarak görünür. Örn: Deneme Sayfası

10 Temel HTML Komutları  Body Komutu Web sayfasında yer alacak asıl bilgiler bu komut altında yazılır. Burada yazılan metinler web sayfasında aynen görünür. Örn: Deneme Sayfası html ö ğ reniyorum. İ lk deneme sayfası

11 Metin Biçimlendirme Etiketleri  Web sayfasına yazdı ğ ımız metinleri şekillendirmek için kullanaca ğ ımız etiketlerdir.  BAŞLIKLAR HTML’de başlık tanımlamaları için özel komutlar vardır. Yazdı ğ ımız yazının başlık oldu ğ unun belli olması için ……… etiketleri içine yazmamız gerekir. H harfleri, İ ngilizce’dekiHeader (başlık) kelimesinden gelmektedir. h harfinin yanında bir sayı bulunur ve bu sayı yazının büyüklü ğ ünü gösterir. 6 tip başlık büyüklü ğ ü vardır.

12 Metin Biçimlendirme Etiketleri  BAŞLIKLAR büyük yazı, ana başlıklar orta yazı, alt başlıklar küçük yazı en küçük yazı

13 Metin Biçimlendirme Etiketleri … Yazıları kalın yapar. (bold) … Yazılarınızı italik karakter yapar. … Yazılarınıza alt çizgi koyar. … Paragraf etiketi yapar. Paragrafınızın altına ve üstüne boşluk koyar. Satırbaşı yapar. Bir alt satıra geçer. Bu komutun şeklinde kapama ifadesi yoktur. Uzun bir satır yazmak istiyor ve bu satırın bölünmesini istemiyorsak bu komutu kullanırız. … Büyük yazı yazar. … Küçük yazı yazar.

14 Metin Biçimlendirme Etiketleri UYGULAMA Metin Biçimlendirme HTML size metin biçimlendirme konusunda geniş olanaklar sa ğ lar. Metinleri ister kocaman ister küçücük isterseniz koyu, italik veya altyazılı yazabilirsiniz.Yada satırbaşı yapabilir veya paragraf oluşturabilirsiniz

15

16 Metin Biçimlendirme Etiketleri FONT ET İ KET İ Font etiketi sayesinde, metinlerin renk, yazı tipi, boyut gibi özelliklerini de ğ iştirebiliriz. geçebiliriz.HTML belgesinin body bölümüne yazdı ğ ımız metni, etiketleri arasına alarak bu metne bazı özellikler kazandırabiliriz Yazı Rengi HTML’de renkler, kodlarla ifade edilir. (Örne ğ in #FFFFFF beyaz,# siyah) Fakat html, bazı renklerin İ ngilizce’sini anlar. Green=YeşilRed=Kırmızı Black=SiyahYellow=Sarı Blue=MaviOrange=Turuncu

17 Metin Biçimlendirme Etiketleri ColorRenk kodu veya rengin İngilizce ismi değerini alır FaceYazı türünün ismi değerini alır. Yazı tipini gösterir. Size1 ile 7 arasında istenilen değeri alır. Yazı boyutunu gösterir. FONT ET İ KET İ ……..….

18 Metin Biçimlendirme Etiketleri ÖRNEK: Font kullanımı Font etiketinin color parametresini kullanarak renkli yazılar yazabilir ; de ğ işik yazı karakterleri kullanabilirsiniz: Mesela öyle! Hatta yazılarınızı büyütüp Küçültebilirsiniz

19

20 Nesneleri Ortaya Hizalama  Ekledi ğ imiz yazı ya da resimleri sayfanın ortasında görmek istiyorsak; komutları arasına yazmamız gerekir.

21 Zemin Rengi (bgcolor)  Hazırladı ğ ımız sayfanın arka plan rengini de ğ iştirmek için, etiketinin içine, etiketiyle birlikte renk kodunu yazmamız gerekir. Arka plan rengi de ğ iştirme denemesi Bu bir denemedir

22 Arka Plana Resim Ekleme  Hazırladı ğ ımız sayfanın arka planına resim eklemek için, etiketinin içine, etiketiyle birlikte resim dosyasının konumunu yazmak gerekir. NOT: Dosya konumunu görmek için eklemek istedi ğ iniz resmin üzerine sa ğ tıklayıp, özellikler seçene ğ ini seçin. Konum adresini orada göreceksiniz.

23 Düzen ve Yerleşim  Yazı veya resimleri, ekranın sa ğ ına, soluna ya da ortasına koyabilmek için align etiketi kullanılır. ……… Nesneleri ekranın soluna yerleştirir. ……... Nesneleri ekranın sa ğ ına yerleştirir. ……. Nesneleri ekranın ortasına yerleştirir. Not: HTML’de tüm nesneler, e ğ er belirtmezsek ekranın solundan itibaren gösterilir. Yani soldan başlayarak yazı yazmak için, komutunu kullanmaya gerek yoktur.

24 Düzen ve Yerleşim Sayfa Düzeni ve Yerleşimi Yazılar otomatik olarak ekranın sol tarafına yerleşir. Sa ğ tarafa yerleştirme Şimdi yazımız sa ğ da Ortaya yerleştirme Şimdi yazımız ortada

25 Sayfaya Resim Ekleme  Resimler etiketi aracılı ğ ıyla kullanılırlar. srcResmin bulunduğu konumu belirtir. widthResmin genişliğini piksel cinsinden bildirir. heightResmin yüksekliğini bildirir borderResmin etrafındaki çizginin kalınlığını belirtir. alignYatay konum belirler; left, right, center değerlerini alır. titleMouse resmin üzerindeyken yazacağınız açıklamayı gösterir Örn:

26 Ba ğ lantılar  Ba ğ lantılar ziyaretçinin bir tıklama ile, sitenizin içinde veya dışında, belirledi ğ iniz herhangi bir adrese gitmesini sa ğ lar. Ba ğ lantılar etiketi ile bildirilir. href Bağlantının adresi belirtilir. target Sayfanın açılacağı yeri belirler. Açılacak sayfa yeni bir sayfa olarak açılacaksa “_blank” yazılmalıdır. Buraya tıklayın.. Hotmail Görüşleriniz için…

27 Resime Ba ğ lantı Ekleme  Resimleri bir ba ğ lantı haline getirmek için; Aşa ğ ıdaki örne ğ i yazdı ğ ınızda, resmin üzerine tıklanınca istedi ğ iniz bir adrese yeni bir sayfa açılır.

28 Müzik Ekleme  Fareyle bir yere tıklandı ğ ında müzik sesi duymak için; Müzik için tıklayın… (burada “Müzik için tıklayın…” yazısına tıkladı ğ ımızda müzik çalacaktır)  Fon müzi ğ i çalması için; (Sayfa açıldı ğ ında fon müzi ğ i çalmaya başlar)


"WEB S İ TES İ YAPIYORUM HTML Hazırlayan: Hazel İ NC İ ULU Ğ." indir ppt

Benzer bir sunumlar


Google Reklamları