Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

HTML e GİRİŞ Temel HTML etiketleri. HTML Nedir? • Hyper Text Markup Language : Hiper metin işaretleme dilidir • Bir programlama dili değildir. • Metin,

Benzer bir sunumlar


... konulu sunumlar: "HTML e GİRİŞ Temel HTML etiketleri. HTML Nedir? • Hyper Text Markup Language : Hiper metin işaretleme dilidir • Bir programlama dili değildir. • Metin,"— Sunum transkripti:

1 HTML e GİRİŞ Temel HTML etiketleri

2 HTML Nedir? • Hyper Text Markup Language : 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. HTML

3 • HTML kodları ile sayfa oluşturmak için herhangi bir editör programı kullanılabilir. • 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. Biz NOTEPAD++ kullanacağız.! HTML editörleri

4 Notepad ++ •

5 • 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( … ) 2) Tek başına bulunan tag’lar ( ) Etiketler

6 HTML Sayfalarının Yapısı • Uygulama: 10dk.

7 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.

8 Etiketinin Alt Etiketleri > META 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. Yukarıdaki etiket HTML sayfasının 5 saniye sonra google.com sayfasına yönlenmesini sağlar.

9 Etiketinin Alt Etiketleri > META 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.

10 Etiketinin Alt Etiketleri > META Author Sayfayı hazırlayan kişiyi belirtmek için Author değişkeni kullanılır. •

11 Etiketinin Alt Etiketleri > TITLE Sayfaların başlığını belirler Tarayıcı penceresinde başlık çubuğunda yazılan başlık görüntülenir. RizeMYO Sayfanın başlığına bakınız.

12 Etiketinin Alt Etiketleri > STYLE 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.

13 Etiketinin Alt Etiketleri > LINK 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.

14 Etiketinin Alt Etiketleri > SCRIPT 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ı.

15 Etiketinin Alt Etiketleri > META • HTML 4.01: • HTML5: • Kısaca her sayfanızda bulunması gereken META kodu: 3 sn. sonra ayrılıyoruz.

16 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. • 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)

17 Paragraf Etiketleri 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ı

18 Paragraf Etiketleri : 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.

19 Başlık Etiketleri … 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. 

20 Uy Başlık Etiketleri: Uygulamagulama Örnek RİZE ÜNİVERSİTESİ Meslek Yüksekokulu Elektronik Teknolojisi Bölümü Web Tasarımı Dersi


"HTML e GİRİŞ Temel HTML etiketleri. HTML Nedir? • Hyper Text Markup Language : Hiper metin işaretleme dilidir • Bir programlama dili değildir. • Metin," indir ppt

Benzer bir sunumlar


Google Reklamları