Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

HTML’ ye Giriş Uzm. Murat YAZICI. HTML Nedir? • Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama.

Benzer bir sunumlar


... konulu sunumlar: "HTML’ ye Giriş Uzm. Murat YAZICI. HTML Nedir? • Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama."— Sunum transkripti:

1 HTML’ ye Giriş Uzm. Murat YAZICI

2 HTML Nedir? • Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. Metin, resim ve diğer nesnelerin bir web sayfası üzerinde nasıl görüntülendiğini ve web sayfasının, bağlantıların birleşimiyle nasıl oluştuğunu belirten dili ifade eder. • HTML ziyaretçileriyle web sayfaları arasında etkileşimi mümkün kılacak komutlar içermez. Fakat, PHP, ASP, Javascript, Flash veya CSS gibi farklı eklentiler sayesinde dinamik web sayfaları biçimlendirilebilir.

3 HTML Kodları • HTML kodları ile sayfa oluşturmak için herhangi bir editör programı kullanılabilir. Bu bölümdeki uygulamalar Not Defterinde yapılacaktır. HTML kodlarından oluşan dosyanın uzantısı.htm veya.html olabilir. Günümüzde HTML kodlarını otomatik oluşturan bir çok program mevcuttur.

4 HTML Etiketleri • HTML komutlarının her biri Tag (Etiket) olarak adlandırılır. Tag, daima sivri parantezler içinde yazılır. Harflerin küçük veya büyük yazılması HTML'de hiçbir önem taşımaz • HTML tagları iki şekilde sınıflandırılabilir. 1) Bir açma bir de kapama tag’ından oluşanlar( kalın yazı ) 2) Tek başına bulunan tag’lar (, )

5 HTML Sayfalarının Yapısı

6 HTML Etiketleri... 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. Bir HTML belgesi iki bölüme ayrılır: head(baş) ve body(gövde).... etiketleri arasına sayfa hakkında bilgiler yazılır. ve gibi etiketler burada yer almaktadır.... arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu etiketler arasında yer almaktadır.... Title sayfanın başlığını belirtir.

7 İlk sayfamız (HTML Kodu)

8 İlk sayfamız (Ekran Görüntüsü)

9 Özel Karakterler • HTML yapısı içerisinde özel karakterler ve birden fazla boşluk için aşağıdaki kodlar kullanılır. Boşluk karakteri © © karakteri < < karakteri > >karakteri & & karakteri "" karakteri

10 Özel Karakterler NOT : HTML etiketleri arasına yazılan metin içerisindeki boşluklardan birden fazlası tarayıcılar tarafından yorumlanmaz. İki kelime arasına konulan birden fazla boşluklar tek boşluk olarak yorumlanır. İki kelime arasına veya iki nesne arasına birden fazla boşluk karakteri koymak için kodu kullanılmalıdır. Ayrıca Enter tuşu ile kodları ve içeriği alt satıra indirmekte HTML açısından bir etkisi olmaz. Alt satıra geçmek için etiketini kullanmadıkça alt satıra geçilmez.

11 Etiketinin Alt Etiketleri Etiketi : Web sayfalarına ait çeşitli bilgilendirme ve ayarlamaların yapıldığı etikettir. Dokümanın yazarı, konusu, anahtar kelimeleri, tazeleme süresi… gibi bilgiler yer alır. muratyazici.com Yukarıdaki etiket HTML sayfasının 5 saniye sonra muratyazici.com sayfasına yönlenmesini sağlar.

12 Etiketinin Alt Etiketleri Türkçe Sayfanın içeriğinin Türkçe olduğunu göstermektedir. keywords Arama motorları tüm webde sayfaları tararken sayfaları kolay ve istenilen biçimde indekslemek için yardımcı olmak amacıyla yukarıdaki gibi keywords değişkeni kullanır. description Sayfa hakkında açıklama cümlesi yazmak için description değişkeni kullanır.

13 Etiketinin Alt Etiketleri Author Sayfayı hazırlayan kişiyi belirtmek için Author değişkeni kullanılır. 3 sn. sonra ayrılıyoruz.

14 Etiketinin Alt Etiketleri Etiketi : Sayfaların başlığını belirler Tarayıcı penceresinde başlık çubuğunda yazılan başlık görüntülenir. Uzm. Murat YAZICI Sayfanın başlığına bakınız.

15 Etiketinin Alt Etiketleri Etiketi : Stiller sayfadaki çeşitli nesneleri topluca biçimlendiren yapılardır. Bu etiket sayfa içi stil belirlemede kullanılır. p { color: red; } h1 { color: blue; text-align: center; } Merhaba Web Tasarımı Dersine hoşgeldiniz.

16 Etiketinin Alt Etiketleri Etiketi : Sayfaya ait stil sayfalarını bağlamak için kullanılır. Bu stil sayfaları harici sayfalardır. Bu sayfaların yapısı CSS bölümünde ayrıntılı olarak incelenecektir. Aşağıda link etiketinin kullanımı gösterilmiştir.

17 Etiketinin Alt Etiketleri Etiketi : VBScript, Javascript kodlarının yazılacağı bir alandır. Gerektiğinde etiketi sınırları içerisinde de kullanılabilir. Aşağıda etiketinin kullanımı gösterilmiştir. alert("Siteme hoşgeldiniz."); Javascript etiketi çalıştı.

18 Etiketi ve Alt Etiketleri HTML belgesinin bütün içeriği burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir. BODY etiketinin alacağı parametreler : Bgcolor : Sayfanın arka plan rengini belirler (renk) Background : Sayfanın arka plan resmini belirler (URL) Topmargin : Üst kenar boşluğu (sayı) Leftmargin : Sol kenar boşluğu (sayı) Link : Sayfadaki linklerin rengini belirler (renk) Vlink : Ziyaret edilen bağlantıların rengini belirler (renk) Text : Sayfadaki metnin rengini belirler (renk)

19 Etiketine Bir Örnek… Body etiketine bir örnek Bayrakları bayrak yapan üzerindeki kandır ; Toprak eğer uğruna ölen varsa vatandır.

20 Metin Biçimlendirme Etiketleri Etiketi : Yazıda etkin olacak fontla ilgili çeşitli biçimlendirmeleri yapmak için kullanılır. Fontun tipi, rengi ve büyüklüğü ayarlanabilir. FONT Etiketi Parametreleri Color : Yazının rengini belirler (Renk) Face : Metnin yazı tipini belirler (Arial, Verdana, …) Size : Yazının büyüklüğünü belirler (Sayı) [ 1 – 7 ]

21 Örnek… Font etiketine bir örnek Merhaba Uzm. Murat YAZICI

22 Metin Biçimlendirme Etiketleri (Bold) Etiketi : Metni kalın ve koyu yapar. (Italic) Etiketi : Metni italik biçimde yazar. (Underline) Etiketi : Metni altı çizili olarak biçimlendirir. Etiketi : Metni alt simge olarak gösterir. Etiketi : Metni üst simge olarak gösterir.

23 Uygulama 1 Metin biçimlendirme etiketleri Korkma, sönmez bu şafaklarda yüzen al sancak; Sönmeden yurdumun üstünde tüten en son ocak. O benim milletimin yıldızıdır, parlayacak; O benimdir, o benim milletimindir ancak.

24 Uygulama 2 Örnek 2 2 * 3 2 = (2*3) 2

25 Metin Blokları Etiketleri (Paragraf) Etiketi : Metin içerisinde paragraf oluşturmak için kullanılır. align : Paragrafı hizalamak için kullanılır. Aşağıdaki değerleri alır. left : Sola yaslı right : Sağa hizalı center : Ortalı justify : Her iki yana yaslı

26 Uygulama P etiketine örnek RİZE ÜNİVERSİTESİ Rize Üniversitesi, Türkiye Cumhuriyeti Bakanlar Kurulu'nun 2006 yılı içerisinde aldığı bir kararla bağlı olduğu Karadeniz Teknik Üniversitesi'nden ayrılarak Rize ilinde açılan üniversitedir.

27 Metin Blokları Etiketleri Etiketi :  Satır başı için kullanılır.  Sonlandırması yoktur.  Satırbaşı ile paragraf arasında görüntü olarak iki satır arası yükseklik ve yerleşim farkı vardır. … Etiketleri:  Başlık etiketleridir. H harfinin yanındaki rakamsal değer başlığın büyüklüğünü belirler. Bu değer 1 için en büyük, 6 için en küçüktür.  align (left, right, center) parametresiyle de kullanılabilir.

28 Uygulama Örnek RİZE ÜNİVERSİTESİ Meslek Yüksekokulu Elektronik Teknolojisi Bölümü Web Tasarımı Dersi

29 Metin Blokları Etiketleri Etiketi : HTML kod sayfasındaki biçimin (boşluk, satır,paragraf…) aynen kullanılmasını sağlar. Bu etiket birçok etiketi ve özel karakter kodlarını kullanmadan metin biçimlendirmede çok büyük kolaylıklar sağlar. Sonlandırması vardır. ( …….. )

30 Uygulama Örnek int a = 10; if (a%2 == 0) Console.WriteLine(“Çift”); else Console.WriteLine(“Tek”);

31 Metin Blokları Etiketleri (Horizontal Ruler) Etiketi : Sayfaya yatay bar şeklinde çizgi eklemek için kullanılır. Sonlandırması olmayan bir etikettir. Aşağıda etiketin özellikleri ve aldıkları değerler verilmiştir : align: Yataydaki konumunu verir. (Varsayılan : center) (left, right, center) size: Piksel cinsinden kalınlığını belirler. width: Genişliğini belirler. (Varsayılan : %100) color: Çizginin rengini belirler. (Varsayılan : Siyah)

32 Sayfalara Resim Eklemek Etiketi : Sayfaya resim eklemek için kullanılır. jpg, bmp, gif, png… gibi resim formatlarını belirler. Sonlandırması olmayan bir etikettir. src: Resmin konumunu belirler. alt : Resme ait açıklama metni (fare resmin üzerine geldiğinde ortaya çıkar) height : Resmin yüksekliği width : Resmin genişliği align : Yataydaki konumu (left, right) border : Resmin kalınlığı

33 Uygulama Örnek Rize Üniversitesi logo

34 Bağlantı Eklemek (Link Vermek) Etiketi : Bağlantı eklemek için kullanılır. … etiketleri arasına yazılan metinlerin veya resim gibi nesnelerin üzerlerine fare ile tıklandığında tarayıcı belirtilen adrese ziyaretçiyi yönlendirir. etiketinin özellikleri : href : Bağlantı adresini belirlemek için kullanılır. href="index.htm", href="dosyalar/cv.doc", href="http://rize.edu.tr" target : Bağlantı ile gidilecek sayfanın hangi pencerede açılacağını belirler. target="_blank" (Yeni sayfada açmak için)

35 Uygulama Örnek Rize Üniversitesi web sayfası


"HTML’ ye Giriş Uzm. Murat YAZICI. HTML Nedir? • Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama." indir ppt

Benzer bir sunumlar


Google Reklamları