İST1111 BİLGİSAYAR UYGULAMALARI HTML Doç. Dr. Çağın Kandemir Çavaş DEÜ Fen Fakültesi Bilgisayar Bilimleri Bölümü
HTML-(H)yper (T)ext (M)arkup (L)anguage (Hiper Metin İşaretleme Dili) www tarayıcısında görüntülenmek için tasarlanan bir dosyaya eklenen "İşaretleme" sembolleri ya da kodlarının kümesidir. Belgelerin birbirlerine bağlanış şeklini ve belge içinde metin ve resimlerin yerleşimini belirleyen etiket (tag) denilen kod parçalarından oluşan bir sistemdir. Bir işaretleme dilidir. Programlama dili değildir.
Derlenen değil yorumlanan bir dildir. HTML Hiper Metin: Bağlantılarla birinden diğerine geçilebilen belge tipi. İşaretleme: Tasarımı ve biçimlendirmeyi, düz metin şeklinde yazılmış belirli etiketlerle uygulama. Dil: HTML’in kendisini ifade eder. Derlenen değil yorumlanan bir dildir.
HTML Metin dokümanlarıdır. Kullanılabilecek editörler; ASCII metin dosyaları kullanılır. HTML dosya uzantısı: .html ya da .htm Kullanılabilecek editörler; Notepad, Notepad++ Microsoft FrontPage Macromedia DreamWeaver Netscape Composer Adobe Page Mill…
Etiketler ve Elemanlar Etiketler, doküman yapısını ve içerik tipini belirler. Etiket (Tag) yapısı (grup parantezleri < >) <komut> … </komut> Birçok etiketin başlangıç ve sonu vardır. <title> … </title> <html> … </html> Büyük – küçük harf duyarsız (case insensitive) Elemanlar, etiketler arasında yer alan içeriklerdir. <title> Benim sayfam </title> (Bu bir başlık elemanıdır)
İlk Sayfamız...
<!DOCTYPE html> Bir belge tipi bildirimidir. <html> etiketinden önce mutlaka <!Doctype> bildiriminin yapılması gerekir. Bu bir HTML etiketi değildir. Yazılan kodlar HTML’e göre yorumlanacaktır. Yapılmazsa ne olur? Tarayıcı, Quirks Mode (Garip Mod) formatında çalışır ve oluşturulan sayfa yorumlamaya çalışır.
<!-- --> Açıklama etiketidir. <!-- --> Açıklama etiketidir. Kaynak koda açıklama eklemek için kullanılır.
İlk Sayfamız... (Heading)
İlk Sayfamız... (Heading)
İlk Sayfamız... (Heading)
İlk Sayfamız...
İlk Sayfamız... (Break)
İlk Sayfamız... (Bold)
İlk Sayfamız... (Italic)
İlk Sayfamız... (Underline)
İlk Sayfamız... (Big)
İlk Sayfamız... (Big)
İlk Sayfamız... (Small)
İlk Sayfamız... (Sub)
İlk Sayfamız... (Sup)
İlk Sayfamız... (del)
İlk Sayfamız... (Font)
İlk Sayfamız... (Font)
İlk Sayfamız... (Font) Renk Kodları <font color=Renkadı> black white red green blue yellow gray maroon olive navy purple lime aqua teal fuchsia silver
İlk Sayfamız... (Font)
İlk Sayfamız... (Font) <font color=#RGB> R: Red (0 – 255) G: Green (0 – 255) B: Blue (0 – 255) Hexadecimal System (16’lık düzen) 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 00 – FF (0 – 255) #FF0000 #00FF00 #0000FF
İlk Sayfamız... (Font)
Bazı Özel Karakterler (boşluk) & (& ampersand işareti) " (" çift tırnak) © (© işareti)
Yapısal Elemanlar Standart bir HTML dokümanı iki ana yapısal elemana sahiptir. head, tarayıcı ve web sayfası ile ilgili kurulum bilgilerini içerir. Tarayıcı sayfasının başlığı, stil tanımları, JavaScript kodları, … body, web sayfasının içeriğini oluşturur. Paragraflar, tablo ve listeler, resimler, JavaScript kodları…
İlk Sayfamız... (Title) <html> <head> <title>Yeni Sayfamız</title> </head> <body> Bu Benim ilk sayfam </body> </html>
İlk Sayfamız... (Title)
İlk Sayfamız...
İlk Sayfamız...
İlk Sayfamız...
İlk Sayfamız... (Paragraf)
İlk Sayfamız...
İlk Sayfamız... (Parametreler) align = left align = right align = center align = justify
İlk Sayfamız... (Parametreler)
İlk Sayfamız... (Parametreler)
İlk Sayfamız... (Parametreler)
İlk Sayfamız... (Horizantal Rule)
İlk Sayfamız... (Horizantal Rule)
İlk Sayfamız... (Sırasız Liste)
İlk Sayfamız... (Sırasız Liste)
<ul> in alt parametresi type: liste işareti ne olacak? (disc, square, circle…) <ul type="square"> <li>Domates</li> <li>Biber</li> <li>Patlıcan</li> </ul>
İlk Sayfamız... (Sıralı Liste)
İlk Sayfamız... (Sıralı Liste)
İlk Sayfamız... (Sıralı Liste)
İlk Sayfamız... (Sıralı Liste)
<ol> in alt parametreleri type: liste rakamla mı harfle mi başlayacak? (I, 1, a,…) start: hangi rakam ya da harfle başlayacak? <ol type="a"> <li>Domates</li> <li>Biber</li> <li>Patlıcan</li> </ol>
Tanım listesi (description list) <dl> <dt>Domates </dt> <dd>Kırmızı renklidir ve yemeklerde kullanılır. </dd> <dt>Biber </dt> <dd>Yeşil renklidir ve acı veya tatlı olabilir. </dd> </dl>
İlk Sayfamız... (Sayfa Zemini)
İlk Sayfamız... (Sayfa Zemini)
İlk Sayfamız... (Sayfa Zemini)
İlk Sayfamız...
İlk Sayfamız... (Sayfa Yazı Rengi)
İlk Sayfamız... (Resim Ekleme)
İlk Sayfamız... (Resim Ekleme)
İlk Sayfamız... (Resim Ekleme)
İlk Sayfamız... (Resim Ekleme)
İlk Sayfamız... (Resim Ekleme)
İlk Sayfamız... (Resim Ekleme)
İlk Sayfamız... (Resim Ekleme)