HTML Nedir? HTML (Hyper Text Markup Language) Internet

HTML Nedir? HTML (Hyper Text Markup Language) internet ortamında gönderdiğimiz metin belgeleri için işaretleme dilidir. HTML'in amacı bir internet sayfasının kullanıcıya nasıl gösterilmesi gerektiğini belirlemektir. HTML, bir programlama dili olarak tanımlanamaz. HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. HTML birçok programalam dili ile birlikte kullanılabilen bir işaretleme dilidir. Özellikle web programlama dilleri olan ASPX ve PHP dilleri ile bütünleşik çalışabilmektedir. Versiyon Yıl HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013 HTML Temel Kavramlar HTML Dosyası Nedir? HTML, Hyper Text Markup Language'in kısaltmasıdır. HTML kodlamalar (tag) ve düz metinden oluşur. Taglar ancak bir Web Browser (Firefox, IE, Chrome) tarafından anlamlı hale gelirler. HTML kodlarıyla yazılmış dosyaların uzantıları html veya htm'dir. HTML, en basit yolla bir not defteri ile yazılabilir. HTTP Nedir? HTTP (Hyper Text Transfer Protocol) HTML sayfalarının internet ortamında yayınlanmasını sağlayan bir protokoldür. Browser'larınızın adres satırına baktığınızda ilk önce http:// ifadesi görünmektedir. Bu ifade sayfanın http protokolü üzerinden görüntülenmekte olduğunu belirtir. FTP Nedir? FTP (File Transfer Protokol) Uzaktaki bilgisayarların aralarında doğrudan dosya göndermelerini sağlayan bir protokoldür. FTP sayesinde bilgisayarımızdaki bir dosyayı uzaktaki bir bilgisayara gönderebiliriz. WWW Nedir? WWW (World Wide Web) Geniş Dünya Ağı anlamına gelen dünyadaki bilgisayarların birbirleriyle iletişim kurabildiği, veri paylaşımının yapılabildiği global bir network'dür. Bu network'e bağlı olan milyarlarca bilgisayar web sayfalarını düzenleyip belirli bir sunucu üzerinden yayın yaparlar. Her web sayfasının kendine ait www ile başlayan bir adresi vardır. Bu adresleri İnternet Gezginleri (Browsers : IExplorer, Firefox, Chrome) ile görüntüleyebildiğimiz yazılımlar vardır. URL Nedir? URL (Uniform Resource Locator) İnternet ortamında gidilecek olacan adresin ifadesidir. HTML, en basit yolla bir not defteri ile yazılabilir. Fakat not defteri ile web sayfası oluşturmak oldukca zaman alıcı ve yorucu olabilir. Bu nedenle hata kontrolü yapabilen, tablo ve yerleşim konusunda hazır araçlar sunabilen, oluşturma aşamasında sihirbazlarla çalışmaya olanak sağlayan birçok Web Tasarım Editörü ortaya çıkmıştır. Profesyonel anlamda HTML çalışmak istiyorsanız mutlaka not defteri (tercihen notepad++) kullanmanızı tavsiye ediyorum. Popüler Web Tasarım Editörleri • Adobe Dreamweaver • Amaya W3C's Editor • RapidWeaver • WYSIWYG Web Builder • CoffeeCup HTML Editor • Notepad++ HTML Sayfasının Yapısı <html> <head> <title> baslik </title> </head> <body> gövde </body> </html> <html> </html> : Sayfamızın ana etiketidir. <head> </head> : Sayfamıza ait başlık, meta, stil gibi tanımlamaları yapacağımız bölümdür. <title> </title> : Sayfamızın başlığını bu etiket ile belirleriz. <body> </body> : Sayfamızın gövdesidir. İçeriğimizi burada oluştururuz. İlk Web Sayfam HTML sayfaları aslında birer metin dökümanlardır. Windows'un not defteri yada notepad++ tarzı metin editörlerini kullanılarak kod yazılabilir. Bir not defteri açın ve aşağıdaki yazılanları bu not defterine yazıp test.html olarak kaydedin. Ve bu dosyayı bir browser ile görüntüleyin. <html> <head> <title> baslik </title> </head> <body> ilk web sayfam... </body> </html> HTML Görünümü Örneğin Açıklaması <html> </html> html tagları browser'mıza bir html dosyasının işleneceğini bildirir. Sayfamızdaki son tag </html>'dir. Bu da html dosyasının sonunun geldiğini ifade eder. <head> </head> head tagları başlık bilgilerini içerir. <title> </title> title tagları sayfamızın başlık bilgilerini içerir. buradaki başlık tarayıcı penceresinin en üstünde görüntülenmektedir. <body> </body> tagları browser penceresinde görüntülenecek olan kısmı belirtir. HTML Tag'ları • HTML öğelerini belirtmek için kullanılır. • HTML etiketleri 2 karakter ile sınırlanır ve çift olarak kullanılır. • Bu çiftlerden birincisine start tag, ikincisine ise end tag denir. • Başlama ve bitiş arasında kalan herşeye ise element contents denir. • HTML etiketleri büyük/küçük harfe duyarlı değildir, yani ve aynı görevi görür. Start tag End tag <a href="test.html"> </a> World Wide Web Consortium (W3C) küçük harf kullanımını önerir. HTML Elementler Başlangıç etiketi ile bitiş etiketi arasında yer alan her şeye HTML element denir. • HTML elementi başlangıç etiketi ile başlar bitiş etiketi ile biter. • Başlangıç etiketi ve bitiş etiketi arasında yer alan herşeye HTML elementi denir. • Bazı HTML elementlerinin içeriği boştur. Bu elementler başlangıç etiketi ile kapatılır. • Birçok HTML elementi attribute içerir. • HTML elementleri içlerinde bir çok HTML elementleri içerebilirler. • HTML belgeleri iç içe geçmiş elementlerden oluşur. Basit Kodlar - HTML Başlıklar HTML başlıkları <h1> <h6> aradaki tüm rakamlar kullanılarak tanımlanabilir. <h1>Bu bir başlık</h1> <h2>Bu bir başlık</h2> <h3>Bu bir başlık</h3> Bu bir başlık Bu bir başlık Bu bir başlık Basit Kodlar - HTML Paragraflar HTML paragrafları etiketi ile tanımlanır. HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. Bu bir paragraf Bu da başka bir paragraf HTML Görünümü Bu bir paragraf Bu da başka bir paragraf Basit Kodlar - HTML Linkler HTML bağlantıları <a> etiketi ile tanımlanır. <a href="http://www.omercirak.com">Link ornegi</a> HTML Görünümü Link ornegi Basit Kodlar - HTML Resimler HTML'de resimler <img> etiketi ile tanımlanır. <img> etiketi kapalıdır, bu etiket parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz. <img src="ornek.png" alt="Örnek Resim"> HTML Görünümü Basit Kodlar - HTML Özellikler • İngilizcede “attributes” denir, dilimizde ise özellik veya öznitelik denir. • HTML elementlere/etiketlere ilave bilgi sağlarlar. • Öznitelikler her zaman başlangıç/açılış etiketinde olur. • Öznitelikler isim ve değer (name=”value”) olarak iki kısımdan oluşur., • <h6> ise en küçük puntoyu belirtir. HTML bağlantıları <a> etiketi ile tanımlanır. <a href="http://www.omercirak.com">Link ornegi</a> HTML Görünümü Link ornegi Bağlantı adresleri href özniteliği ile belirtilir. Öznitelik değerleri her zaman çift tırnak arasında olur. Bir değer arasında zorunlu olarak çift tırnak işareti varsa tek tırnak ile yazılabilir. Bazı HTML öznitelikleri: class: Bir element için bir veya birden fazla sınıf belirtir. id: Bir element için benzersiz bir kimlik belirler. style: Element için bir satır içi CSS stili belirler. title: Element için ilave bilgi sağlar. HTML Biçimlendirme Biçimlendirme Web sayfalarındaki en temel unsurlardan biride metinlerdir. Bu dersimizde HTML sayfamızdaki metinleri biçimlendirirken (kalınlık, italik yazma, vurgu, vb.) kodlardan nasıl yararlanabileceğimizi göreceğiz. ve etiketleri : Kalın veya italik metin gibi, biçimlendirme çıkışı için ve etiketleri kullanır. etiketi : Yine etiketi gibi kalın olarak biçimlendirme çıkışı sağlar. Fakat ve etiketleri, okuyucu için sayfayı tarayıcıda görsel olarak izlerken herhangi bir farklılık yaratmamasına karşın ikisi de sonuçta yazının kalın görünmesini sağlar. Ayrıldıkları nokta şudur etiketi sadece yazının stilini değiştirir. etiketi ise, yazının stilini değiştirmekle kalmayıp, ona önem katar. Arama motorları sayfayı indekslerken takıları arasındaki kelimelerin, diğer kelimeler ile karşılaştırıldığında daha önemli olduğunu varsayar. Aynı şekilde, sayfayı bir okuma yazılımına okutursanız, takıları arasındaki kelimeleri daha yüksek sesle okuduğunu görebilirsiniz. Diğer yandan takısının böyle bir işlevi yoktur, tek yaptığı yazıyı kalın göstermedir. (emphasize) etiketi : İçerdiği metnin italik gösterilerek öneminin vurgulanmasını sağlar. <code> etiketi : İçerdiği metnin bilgisayar kod parçası olduğunu belirtir. etiketi gibi metin bloklarının içinde kullanılması durumunda blok ile uyumlu gösterilerek, metni kesintiye uğratmaz. İçerdiği metin sabit genişlikli yazı tipi ile gösterilir. (subscript) ve (superscript> etiketleri : İçerdiği metnin güncel fontun ufak puntosu ile normal karakterlerin biraz altında alt yazı olarak gösterilmesini sağlar. Aynı şekilde kullanımı satır yüksekliğini normal karakterlerin biraz üstünde bir üst yazı olarak gösterilmesini sağlar. Etiketlerin bir arada kullanım örneği <html> <head> <title> metin bicimlendirme etiketleri </title> </head> <body> Kalın bir metin Güclü bir metin Saga yatık bir metin Vurgulanmis bir metin <code>Programlama dili metni</code> Bu metin altsimge ve üst simge </body> </html> HTML Görünümü Kalın bir metin Güclü bir metin Saga yatık bir metin Vurgulanmis bir metin Programlama dili metni üst simge Bu metin altsimge ve Metin Biçimlendirme Etiketleri Kalın Metin Vurgulanmış Metin İtalik Metin Küçük Yazı Güçlü Metin Alt hizada yazmak Üst hizada yazmak <ins> Altı çizgili metin <del> Üstü çizgili metin İşaretlenmiş metin Programlama Dilleri Etiketleri <code> Programlama dili metini <kbd> Klavye metini <samp> Örnek bilgisayar kodu metni <tt> Tele tip metin <var> Değişken <pre> Biçimlendirilmemiş metin HTML Atıf, Alıntı ve Tanım Etiketleri <abbr> Kısaltma <acronym> Baş harfleri ile kısaltma <address> Adres öğesi <bdo> Metin yönü <blockquote>

HTML Nedir? HTML (Hyper Text Markup Language) Internet

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support