Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

1 HTML Hyper Text Markup Language (Hareketli-Metin İşaretleme Dili) Kısaca, internet dökümanları oluşturmaya yarayan bir çeşit dildir.

Benzer bir sunumlar


... konulu sunumlar: "1 HTML Hyper Text Markup Language (Hareketli-Metin İşaretleme Dili) Kısaca, internet dökümanları oluşturmaya yarayan bir çeşit dildir."— Sunum transkripti:

1

2 1 HTML Hyper Text Markup Language (Hareketli-Metin İşaretleme Dili) Kısaca, internet dökümanları oluşturmaya yarayan bir çeşit dildir.

3 2 HTML'de Temel Unsurlar HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör. Sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un Notepad'i ile halledebilirsiniz. Piyasada iki tip editör bulunuyor. 1- Metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler (HotDog, HomeSite..) 2- WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,..). NOT: Biz bu derste Windows'un Notepad'i kullanacagız. Bu işlerin nasıl yapıldığını öğrendikçe ilerde siz de görsel editörlere geçebilirsiniz. Çünkü bir yerde istenmedik sonuçlar çıkabilir ve kodlara müdahele etmeniz gerekebilir. Üstelik görsel editörler bazen istenmeyen kodlar ekliyorlar, bu da döküman boyutunun büyümesi demektir.

4 3 İlk HTML sayfamızı yapıyoruz 1.Öncelikle çalışmalarınızı saklamak için kullanacağınız boş bir klasör oluşturup uygun bir ad verin, (mesela html_ders olsun). 2.Şimdi de bu klasörü açıp yeni bir metin belgesi oluşturun (sağ fare/Yeni/Metin belgesi). 3.Dosyayı çift tıklayarak açın ve içine şunları yazın: İlk Sayfam Sayfama Hoş geldiniz

5 4. 4.Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...). Dosya ya htm uzantılı bir isim verin (örnegin, "sayfa1.htm", tırnaklar dahil) ve Tamam'a basın. 5.Notepad'i kapatın, otomatik olarak sayfa1.htm web sayfanız oluşacaktır. Artık metin dosyasını silebilir ve oluşan yeni sayfa1.htm dosyasını açabilirsiniz. NOT: Budan sonra Web sayfamızda değişiklik yapmak için (Görümüm/Kaynak) ile metin dosyamıza tekrar gidiniz, istediğiniz değişikliği yapınız ve kaydediniz. Daha sonra Web sayfanıza dönün ve (Görümüm/Yenile) ile değişikliği görünüz.

6 5 Ve sayfanızın Görüntüsü

7 6 Bir şey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük sembolleri arasına yazdık. Bu ifadelere tag (etiket) denir. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işareti / ile tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.

8 7 Burada kullandığımız etiketler ve anlamları şöyle... Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır.... etiketleri arasına sayfa hakkında bilgiler yazıyoruz, title gibi etiketler burada yeralıyor. Buraya yazılanlar sayfada gözükmez.... Title sayfanın başlığını belirtiyor. Burada yazılanlar browser'ın üst tarafında browser adıyla beraber gösteriliyor.... arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu tagler arasında yer alıyor.

9 8 Metin Biçimleme HTML'de metin stillerini üç şekilde belirleyebiliriz: 1.Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (satır içi) biçimlendirme denir. 2.Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme) 3.HTML dosyasının dışında başka bir stil dosyası oluşturarak stil için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor. Not: Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar.

10 9 Birinci metoda göre biçimlendirmeyi kotları.... Aradaki metinleri sayfaya göre ortalar. (center).... Aradaki metni koyu (bold) yazar..... Aradaki metni eğik (italic) yazar..... Aradaki metni altı çizili (underline) olarak yazar..... Başlık (heading) etiketi. h1 en büyük, h6 en küçük..... Aradaki metin paragraf özelliği kazanır. Sonlandırıldığında, takip eden metin bir satır boşluk bırakılarak ve satır başına yazılır. Align ile paragraf şekillendirilir.

11 10 Örnek Başlık Etiketi Sayfama Hoşgeldiniz HTML etiketleri ile, Yazıları koyu italik ve altı çizili olarak yazabiliyorum

12 11 ve etiketleri ve etiketleri enter tuşunun görevini görüyor. Metinleri bölmek, yani ikinci satıra atmak için kullanılır HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için Enter tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından fark etmeyecektir eğer kullanılmazsa. paragraf şekillendirilir. satır başını engeller. kelimeyi böler çizgi çizilir.... çizgi şekillendirilir (pixel cinsinden) kalınlık ve boyutu değiştirilir sayfa genişliğinin yüzdesi çizer 3 boyutlu görünmez Not: Dikkat edilirse ve etiketleri sonlandırılmıyor. Bundan sonra bütün ölçüler pixel cinsinden olacak

13 12 Örnek BR etiketi Pazartesi Salı çarşamba ocak şubat mart nisan

14 13 Listeler HTML’de üç tip liste hazırlama vardır 1.Sıralı listeler (ordered list)Sıralı listeler (ordered list) 2.Sırasız listeler (unordered list)Sırasız listeler (unordered list) 3.Tanımlama listeleri (definition list)Tanımlama listeleri (definition list) NOT: Sıralı listeler rakam veya harf yada her ikisini iç içe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır

15 14 1. Sıralı Listeler Liste içine alınacak metinler... etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise (list item) etiketini getiriyoruz. Bu etiket sonlandırılmıyor. parametreler ekleyebiliyoruz. Bunlar: listemizin sayılar,harfler (küçük/büyük) ve romen rakamları (i,ii,iii gibi) ilemi başlayacağını (type), hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.

16 15 Örnek (solda yalnız body (gövde) bölümünü verildi) Kimya İnorganik Analitik Fizik Dinamik Statik Matematik Sayılar Diğer Türev İntegral 1.Kimya a. Organik b. İnorganik c. Analitik 2.Fizik a. Dinamik b. Statik 3.Matematik a. Sayılar b. Diğer i.Türev ii.İntegral

17 16 2. Sırasız Listeler Burada sıralı listelemeye benzer şekilde listeleme yaparken etiketi kullanılarak maddelerin başına küçük şekiller getirilir. liste maddeleri için kullandığımız etiketi burada da geçerlidir. kullanılabilecek parametreler, -- disc (içi dolu daire), -- circle (içi boş daire), -- square (içi dolu kare). Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip Olmasını sağlıyor.

18 17 Örnek (solda yalnız body (gövde) bölümünü verildi) Kimya İnorganik Analitik Fizik Dinamik Statik Matematik Sayılar Diğer Türev İntegral Kimya ■ Organik ■ İnorganik ■ Analitik Fizik ■ Dinamik ■ Statik Matematik ■ Sayılar ■ Diğer o Türev o İntegral

19 18 Tanımlama Listeleri Benzer şekilde... veya... etiketleri arasına aldığımız listeyi bu sefer... arasına yazıyoruz. Listenin maddelerini belirtmek için kullandığımız etiketinin yerini burada (terim için) ve (tanım için) etiketleri alıyor. Yine parametre olarak etiketi içinde compact ifadesini kullanabiliriz.

20 19 örnek Neler öğrendik? HTML nedir? HTML’nin HTML’nin ne olduğunu halen öğrenemedinizmi, ere ere erer ger ertet er ewrte ertggt regt Listeler Listeleri şimdi size anlatayım wer ewrte ert erwtre erwte ewte ewrte ewrte wert ewrtrew rewt reg rwetr rtrt rtyg Rthrt rweg ewrtre Neler öğrendik? HTML nedir? HTML’nin ne olduğunu halen öğrenemedinizmi, ere ere erer eger ertet er ewrte ertggt regt Listeler Listeleri şimdi size anlatayım wer ewrte ert erwtre erwte ewte ewrte ewrte wert ewrtrew rewt reg rwetr rtrt rtyg rthrt rweg ewrtre

21 20 Renkler 16'lık sayı düzeninde renk kodu girmek 16'lık sayı sisteminde de toplam 16 rakam var bunlar; A B C D E F [10'un karşılığı A... 15'in karşılığı F'dir.] Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green- blue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir). Buna göre; # siyah, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF beyaz'dır. Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz. Bütüün renkler ve kodları için:

22 21 Renk Kodları #000000=black(siyah) #0000FF=blue(mavi) #008080=teal(koyu yeşil) #00FFFF=aqua(turkuaz) #800080=purple(mor) #808080=gray(gri) #FF0000=red(kırmızı) #FFFF00=yellow(sarı) #000080=navy(lacivert) #008000=green(yeşil) #00FF00=lime(parlak yeşil) #800000=maroon(vişne çürüğü) #808000=olive(zeytuni yeşil) #C0C0C0=silver(gümüşi gri) #FF00FF=fuchsia(parlak pembe) #FFFFFF=white(beyaz)

23 22 Fontlar Font etiketinin kullanımı;... face = yazıtipinin adı (arial, tahoma, verdana,...) size= yazının büyüklüğü (1-7 arası) color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk kodları) Bunlara font etiketinin parametreleri diyoruz.

24 23 örnek Renkler ve Mevsimler İlkbahar Yaz Sonbahar Kış

25 24 Resimler Bu konuda sayfamıza ve artalana nasıl resim ekleyebileceğimizi öğreneceğiz. Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yok. (telif hakları kanunu dışında tabi) Şimdi kedi.gif isimli kediyi sayfamıza yerleştirelim. klasörümüzün içinde klasörümüzün içindeki resimler klasöründe Her ne kadar şart olmasa da resmin en ve boy belirtilebilir. resmin yanlarındaki boşluklar belirlenir. resmin çerçevesinin boyutunu belirlenir. 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. resimlerin nereye yerleşeceği belirtilir. resimlerin yazıların neresine yerleşeceği belirtilir. Resimlere alternatif olarak metin yazılabilir. Ziyaretçi eğer browser'ını sadece metinleri göstermek üzere ayarlamışsa, resim yerine alternatif açıklama (van kedisi) görüntülenecektir. Bu açıklama aynı zamanda kullanıcı fare imlecini resim üzerine getirdiğinde sarı bir çerçeve içinde görüntülenir. NOT: Resimlere sağ tıklayıp (Resmi farklı kaydet../Save image as..) seçeneğiyle harddiskinize kaydedebilirsiniz

26 25 Artalanı renklendirme ve resim yerleştirme Sayfamızın artalananını renklendirmemiz için sayfamızın gövdesini belirtmek için yazdığımız etiketini, şeklinde değiştiriyoruz. Sayfamızın artalananını yazılarının renklerini ayarlama Sayfamızın artalananına resim yerleştirmek için ise etiketini şeklinde değiştiririz. ( Burada en ve boy ifadesini kullanmamıza gerek yok. Seçtiğimiz resim browser tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir)

27 26 örnek

28 27 Örnek

29 28 Bağlantılar Yapmak istediğimiz bağlantıya göre kullanacağımız komut: etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir. Sayfamızın bağlantılarının renklerini ayarlayabiliriz link, ziyaret edilmemiş sayfa lingin rengi vlink, ziyaret edilmiş sayfa linginin rengi alink, üzerine kliklenmiş sayfa linginin rengi NOT: Browser htm, txt, jpg, gif, pdf, ps... uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyemez. İkinci tip dosyalarda kullanıcıya dosyayı açmak mı yoksa diske kaydetmek mi istediği sorulacaktır.

30 29 Bağlantı Türleri Yeni bir sayfaya bağlanabiliriz Bizim Köy Bir internet adresine bağlanabiliriz (link verebiliriz) GOPÜ Bir dosyaya ulaşabilir Ödevlerim Resimlere bağlantı yapabilir Kedim Dosya indirmek için bir ftp adresine link verilebilir tıklayın dosyaları indirin Kullanıcının mail programı açmak ve mail'in send to (kime) kısmına verdiğimiz mail adresini otomatik olarak yazdırılabilir mail atın

31 30 Resimlere bağlantı özelliği kazandırmak Resimlere bağlantı özelliği vermek için resmi yerleştirmek için kullandığımız: etiketini... etiketinin arasına alıyoruz. örnek Burada, kedi.gif tıklanacak resmi, sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor.

32 31 Target parametresi Açılacağı pencereyi belirtmek için kullanılan target parametresinin kullanımı :... target="_blank” Bağlantı yeni bir pencerede açılır. target="_self” Bağlantı aynı pencere içerisinde açılır. target="_top“ Bağlantı aynı pencere içerisinde en üstten itibaren açılır. target="_parent“ Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. target="çerçeve adı“ Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar. ("Çerçeveler" konusunda tekrar değineceğiz.)

33 32 Tablolar Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz.

34 33 Tablo HTML' de Tablolar... 'Bu tablomuzun birinci satırı (Başlık satırı) 'Tablomuzun birinci satırındaki ilk hücre 'Tablomuzun birinci satırındaki 2. hücre 'Tablomuzun birinci satırındaki 3. hücre

35 34 Tablo HTML' de Tablolar... Dil Günler Türkçe Pazartesi Salı İngilizce Monday Tuesday

36 35 Tablo Yapımı Basit bir tablo yapmak için gerekli etiketler... satırları sütunları etiketi ile oluşturuyoruz. Hücre1 Hücre2 Hücre1 Hücre2 Hücre 1Hücre 2 Hücre 1 Hücre 2

37 36 Tablo Parametreleri border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar. cellspacing parametresi hücreler arası marjı belirler align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.

38 37 etiketi için parametreler etiketi için parametreler bgcolor parametresi hücreyi renklendirmede kullanılır background parametresi ile hücreye grafik-artalan yerleştirebiliriz width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz.En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır align parametresi hücre içinde yatay hizalama yapar valign parametresi hücre içinde düşey hizalama yapar

39 38 Hücreleri Birleştirme aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait.. etiketini siliyoruz.

40 39 Çerçeveler Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler. (Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekliyor). Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir.

41 40 Örnek frame.htm dosyası: Çerçeveler htm1.htm dosyası: htm1.htm htm2.htm dosyası: htm2.htm

42 41 FRAME in parametreleri marginwidth="..." marginheight="..." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler. scrolling=".." (yes, no, auto) Kaydırma çubuklarının durumunu belirler. noresize Pencere boyutlarının sabit olmasını sağlar.

43 42 FRAMESET in parametreleri Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, buraya row yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır. cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, buraya örneğin cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor. Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. cols=".." ifadesine iki değer (ya da yıldız) verirsek bu iki pencere aç anlamındadır, 3 değer 3 pencere açar. frame name="..." src="..." etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya sonra değineceğiz). src pencerede görüntülenecek html dosyasının yerini gösteriyor.

44 43 FRAMESET in diğer parametreleri frameborder="..." (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler. border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler

45 44 Örnekler

46 45 Örnekler


"1 HTML Hyper Text Markup Language (Hareketli-Metin İşaretleme Dili) Kısaca, internet dökümanları oluşturmaya yarayan bir çeşit dildir." indir ppt

Benzer bir sunumlar


Google Reklamları