[PDF] HTML - Hyper Text Markup Language - SILO Of Research Documents

Search

• Categories
• Top Downloads
• Login
• Register
Search

• Home
• HTML Hyper Text Markup Language

HTML Hyper Text Markup Language July 25, 2017 | Author: Tülay Öztürk | Category: N/A DOWNLOAD PDF (1MB) Share Embed Donate Report this link

Short Description

1 HTML Hyper Text Markup Language HTML hakkında internetteki bilgilerin derli toplu olduğu bilgi kaynağınız Yazar: Mert ...

Description

2 2011 HTML Hyper Text Markup Language HTML hakkında internetteki bilgilerin derli toplu olduğu bilgi kaynağınız… Yazar: Mert Şahin Blogum: medyablog.com.nu ÖNSÖZ Bu kitap bilgilerimi arşivlemeye başlamakla oluşmaya başladı. İnternette okuduğum ve sürekli ihtiyaç duyduğum bilgileri bilgisayarımda toplayarak bir kitap haline getirmek istedim. Bu doğrultuda da bu kitabı oluşturmaya karar verdim. Kitabım umarım sizler için son derece yararlı ve öğretici bir kitap olur. Yakın zamanlarda CSS kitabımı da yazmayı planlıyorum. Genelde kaynağımı geniş tutarım ama bu kitap için sadece bir kaynak kullandım. İnternetteki sitelerde siz daha da geniş bilgiler bulabilirsiniz. 3 HAKKIMIZDA Webmasterlık hayatım kendime ait bedava bir site açmak hayaliyle başladı. Bir arkadaşın böyle bir servis kullandığını öğrenince bende daha detaylı araştırmalara başladım ve Bedava Sitem gibi bedava site veren bir hizmetle tanıştım. İlk başlarda kendimi şartlandırmıştım ve webmaster olamayacağımı düşünüyordum. Sonra biraz hırsla bir şeyler öğrenemeye başladım. Bir şeyler öğrenmemde en önemli pay bu konular hakkında bilgi veren siteler(forum, blog vb.) ve Bedava Sitem’in kendi teknik forumu olmuştur. Sonra yavaş yavaş bu konuda başarılı olan arkadaşlar ile tanıştım ve webmasterlık alanında kendim için büyük adımlar attım. Bu nedenle Bedava Sitem forumuna ve Bedava Sitem’e çok borçluyum. Zamanla forumda tanınan biri olmuştum. Çok fazla adminlik ve moderatörlük teklifi geliyordu. Ben de gelişimim açısından en uygun kararı vermeye çalışıyordum. En sonunda VİKYMİKY.NET gibi bir sitede moderatörlük yapmaya başladım. Admini internette çok yakın olduğum bir ağabeyimdi ve forum işlerini bırakıp bana adminlik verdi ama teklifini kabul etmedim ve kendisi olmadığı sürece forumda olmayacağımı ona belirttim. Bu benim kaçırdığım en önemli fırsatlardan birisidir ama benim için önemli olan insanlara karşı duyduğum bağlılıktır. Bu nedenle teklifi reddettiğim için hiç üzülmedim. Zamanla ftp destekli bir siteye geçmeye karar verdim. Bu kararım ileride webmaster konularında gelişmemi olumlu etkileyecek bir karar. Arkadaşlarla şimdi bu siteyi idare etmeye çalışıyoruz. Bu site sayesinde de php öğrenmeye başlayacağım. Kendi gelişimim için yine olumlu bir adım. Ne de olsa php en çok kullanılan kodlama dili. Artık yazılarımı medyablog.com.nu’dan takip edebilirsiniz. 4 İÇİNDEKİLER 6 8 10 13 14 16 18 20 22 25 27 30 32 33 34 35 36 37 38 39 40 41 42 43 45 HTML'e Giriş HTML Öğeleri Temel HTML Etiketleri HTML Parametreler (Nitelikler) HTML Metin Biçimlendirme HTML Özel Karakterler HTML Bağlantılar (Linkler) HTML Çerçeveler HTML Tablolar HTML Listeleme HTML Form Oluşturma HTML Resimler HTML Arka Plan HTML Renkler HTML Renk Değerleri HTML Tasarım HTML Fontlar HTML Stiller HTML Başlık HTML Meta HTML Uniform Resource Locators (URL) HTML Script'ler HTML 4.0 Standard Parametreleri HTML 4.0 Olay Parametreleri Sayfanızı Yayınlamaya Hazır Mısınız? 5 HTML Giriş HTML dosyası nedir?  HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir.  Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir  Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.  Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.  Bir HTML dosyası basit bir text editör ile oluşturulabilir. Denemek İster Misiniz? Eğer Windows kullanıyorsanız not defterini açın. Eğer MAC kullanıyorsanız SimpleText programını açın. Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın: "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin. Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır! Aşağıdaki metini açtığınız editör içerisine yazın: Sayfa Başlığı Bu benim ilk sayfam Bu metin koyu Dosyayı "sayfam.htm" olarak kaydedin. Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır. 6 Örneğin Açıklaması HTML dökümanınızdaki ilk tag (etiket) 'dir. Bu etiket tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) 'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler. ve etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez. ve etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir. ve etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir. ve etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir. HTML Editörleri Hakkında Not: HTML dosyalarınızı kolay bir şekilde WYSIWYG (what you see is what you get), FrontPage veya Dreamweaver ile de hazırlayabilirsiniz. Bununla beraber, eğer profesyonel anlamda HTML çalışmak istşyorsanız mutlaka not defteri (notepad) kullanmanızı tavsiye ederiz. 7 HTML Öğeleri HTML dökümanları, HTML öğeleri kullanılarak oluşturulan metin dosyalarıdır. HTML öğeleri, HTML etiketleri kullanılarak tanımlanır. HTML Etiketleri:        HTML etiketleri, HTML öğelerini belirtmek için kullanılır. HTML etiketleri 2 karakter ile sınırlanır. < ve > Bu karakterlere grup parantezleri (angle brackets) denir. HTML etiketleri çift olarak kullanılır. Örn: Bu metin koyu fonttadır. Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi denir. Başlama ve bitiş etiketleri arasında kalan herşeye ise öğe içeriği (element contents) denir. HTML etiketleri büyük/küçük harfe duyarlı değildir, yani ve aynı görevi görür. (Türkçe karakter olan "İ" ve "ı" harflerinin bu durumun dışında kaldığını unutmayınız.) HTML Öğeleri: Önceki sayfadaki örneğimizi hatırlayalım: Sayfa Başlığı Bu benim ilk sayfam Bu metin koyu Bu bir HTML öğesidir: Bu metin koyu HTML öğesi başlangıç etiketi olan ile başladı. HTML öğesinin içeriği: Bu metin koyu HTML öğesi bitiş etiketi olan ile sonlandırıldı. etiketinin amacı, görüntülenecek olan metinin koyu gösterilmesi gerektiğini bildirmektir. 8 Etiketleri neden küçük harflerle belirtiriz? HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söylemiştik: ve aynıdır. Eğer Web'de gezintiye çıkarsanız bir çok sitenin kaynak kodunun bütük harflerle yapılmış olduğunu göreceksiniz.. Fakat biz her zaman küçük harf kullanırız. Neden? Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız. World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir. 9 Temel HTML Etiketleri HTML dilindeki en önemli etiketler, başlıklar, paragraflar ve satır atlama etiketleridir. HTML'i öğrenmenin en iyi yolu örneklerle çalışmaktır. Sizin için çok kullanışlı bir HTML deneme editörü hazırladık. Bu editör ile kendi kaynak kodlarınızı girip anında test edebilirsiniz. Başlıklar: Başlıklar ve dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. en büyük puntoyu belirtirken, ise en küçük puntoyu belirtir. Bu bir başlık Bu bir başlık Bu bir başlık Bu bir başlık Bu bir başlık Bu bir başlık HTML dili otomatik olarak başlık etiketlerinin öncesinde ve sonrasında bir satır atlar. Paragraflar: Paragraflar etiketi ile belirtilir. Bu bir paragraf Bu da başka bir paragraf HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. Etiketleri kapatmayı unutmayın! Bir önceki örnekte paragrafın etiketi ile bittiğini gördünüz: Bu bir paragraf Bu da başka bir paragraf Çoğu browser büyük ihtimalle yukarıdaki gibi yazsanız bile çalıştıracaktır ama buna pek fazla güvenmeyin çünkü gelecek versiyon HTML dili hiçbir etiketi atlamanıza izin vermeyecektir. 10 Satır atlama: Satır atlamak için etiketi kullanılır. Ancak bu etiketin yeni bir paragraf açmadığını da unutmayınız. Bu bir çok satırlı paragraftır. etiketi boş bir etikettir. gibi bir bitiş etiketi yoktur. mi mi? Bir çok yerde etiketinin olarak kullanıldığını göreceksiniz. Çünkü etiketi bir bitiş etiketi bulundurmaz ve bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır. Bu yüzden etiketini kullanmanızı tavsiye ederiz. HTML içinde açıklama (yorum) satırları yaratmak: Yorum satırları HTML kaynak kodu içerisine programcıların hangi satırın ne iş gördüğünü anlatmak için kullanılır. Bu satırlar, sayfa browser'da görüntülenirken dikkate alınmazlar. Temel Notlar - Yararlı İpuçları: HTML kodlarınızın başka browser'larda nasıl görüntüleneceğini asla bilemezsiniz. Ayrıca bazı kullanıcılar geniş ekran monitörlere sahipken bazıları küçük ekranlara sahiptir. Bu sebeple metinler, kullanıcı penceresini her yeniden boyutlandırmasında değişecektir. Asla metinlerinizi fazladan boşluk bırakmak gibi tekniklerle biçimlendirmeye çalışmayın. HTML koyduğunuz boşlukları sürekli teke indirecektir. Boş bir satır bırakmak için kullanmak kötü bir tekniktir, bunun yerine etiketini kullanınız. (Ama asla ile sıralı liste oluşturmayınız. HTML ile listeleme konusuna kadar bekleyiniz.) 11 Temel HTML Etiketleri: Etiket (Tag) to Açıklama Bir HTML dökümanını belirtir. Dökümanın görüntülenecek kısmını berlitir. Başlıkları belirtir. Bir paragraf belirtir Boş bir satır bırakır. Sayfada yatay bir çizgi çizer. Yorum satırı olduğunu belirtir. 12 HTML Parametreler (Nitelikler): Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar. HTML Etiket Nitelikleri: HTML etiketleri parametrelere sahip olabilir. Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar. Parametreler daima isim/değer çiftleri arasında gelir: name="value". Parametreler daima başlangıç etiketi içerisinde belirtilir. Parametre Örneği 1: başlık belirtir. başlık belirtmesinin yanında, metinin ortalanacağını da belirtir. Parametre Örneği 2: HTML'in body kısmını belirtir. Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir. Değerleri (Value) Daima Tırnak İçerisine Alın! Parametrelerin değerli her zaman tırnak içerisinde olmalıdır. Bazen değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine de alabilirsiniz: name='Cem "GORA" Yilmaz' 13 HTML Metin Biçimlendirme HTML, metini koyu veya italik yapmak için birçok tanımlama biçimi barındırır. HTML Kaynak Kodları Nasıl Görüntülenir? Tarayıcınızın araç çubuğunda "Görünüm" menüsüne geldikten sonra "Kaynağı Görüntüle" seçeneğini tıklayınız. Birçok tarayıcıda Ctrl+U bu görevi yerine getirir. ;) Metin Biçimlendirme Etiketleri Etiket (Tag) Açıklama Koyu metin Büyük metin Vurgulanmış metin İtalik metin Küçük metin Güçlü metin Alt indis metini Üst indis metini Altı çizili metin Üstü çizili metin Önemsiz etiket, bunun yerine kullanınız. Önemsiz etiket, bunun yerine kullanınız. Önemsiz etiket, bunun yerine styles kullanınız. "Programlama Dilleri" Etiketleri: Etiket (Tag) Açıklama Programlama dili metini Klavye metini Örnek bilgisayar kodu metini Tele tip metin Değişken Biçimlendirilmemiş metin Önemsiz etiket, bunun yerine kullanınız. Önemsiz etiket, bunun yerine kullanınız. Önemsiz etiket, bunun yerine kullanınız. 14 Alıntılar ve Açıklamalar İle İlgili Etiketler: Etiket (Tag) Açıklama Kısaltma Baş harfleri ile kısaltma Adres öğesi Metin yönü Uzun alıntı Kısa alıntı Alıntı Tanımlama terimi 15 HTML Özel Karakterler HTML içinde bazı karakterler (" View more...

Comments

Report "HTML Hyper Text Markup Language"

Please fill this form, we will try to respond as soon as possible.

Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Submit Share & Embed "HTML Hyper Text Markup Language"

Please copy and paste this embed script to where you want to embed

Embed Script Size (px) 750x600 750x500 600x500 600x400 URL Close Copyright � 2017 SILO Inc.