ev borcu WordPress sitesi
HTML'ye Giriş – HTML Eğitimi – Web Uygulaması Geliştirme
HTML veya Köprü Metni İşaretleme dili aslında bir programlama dili değildir, sadece bir işaretleme dilidir. Dolayısıyla HTML, web sayfalarının yapısını oluşturmak için yalnızca standart bir İşaretleme dilidir. HTML, tarayıcılara neyi nerede göstereceklerini söyleyen farklı öğelerin birleşimidir. Bir öğe, html etiketlerini kapatma ve başlatma kombinasyonudur, örneğin <p> ve </p>.
p, ol, ul, h1, h2 , img, a, güçlü ve daha pek çok HTML etiketi vardır. Sadece tarayıcıya nasıl ve neyin görüntüleneceğini söylerler. Tarayıcı etiketleri görüntülemez, ancak tarayıcı içeriği web sayfasına dönüştürmek için etiketleri kullanır.
HTML Sürümleri
Web'in piyasaya sürülmesinden bu yana, HTML'nin birkaç sürümü vardı, daha önce tablolar web sitesinin tüm mizanpajlarını oluşturmak için kullanılıyordu, ancak şimdi HTML5, kendi öğelerinizi tanımlamanız için size güç veren eylemde. Örneğin <footer> , <header> yani bu eleman etiketleri önceki sürümlerden daha açıklayıcıdır.
| sürüm | Yıl |
|---|---|
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
İlk HTML Sayfasını Oluşturma
Bir html sayfası oluşturmak için her zaman html uzantısının .html veya .htm olduğunu bilmelisiniz. .html kullanabilir veya .htm kullanabilirsiniz, ikisi de fark etmez, hangi dosya uzantısıyla devam etmek istediğiniz size kalmış. Ancak biz örneklerimizde .html dosya uzantısını kullanıyoruz.
Öncelikle notepad++'ı önerdiğimiz bir kod düzenleyiciniz olmalıdır. notepad++ veya istediğiniz başka bir kod düzenleyiciyi indirin ve yükleyin.
Şimdi notepad++ çalıştırın ve yeni bir dosya oluşturun. Aşağıdaki kodu yapıştırın.
<html> <head> <title>HTML Introduction</title> </head> <body> <h1>I am heading 1</h1> <h2>I am heading 2</h2> <h3>I am heading 3</h3> <h4>I am heading 4</h4> <h5>I am heading 5</h5> <h6>I am heading 6</h6> </body> </html>
Şimdi Dosyayı kaydet'e tıklayın ve dosya türünde Hiper Metin İşaretleme dili .html uzantısını seçtiğinizden emin olun. Editörünüz .html için yerleşik bir uzantıya sahip değilse, dosya adınızla birlikte .html yazın. Ve dosya türünü Tüm Türler olarak seçin. Kaydedin ve şimdi açmaya çalıştığınızda dosya tarayıcıda açılacaktır.
Web sayfanızı web tarayıcısında görüntüleyin
Dosyanızı açmaya çalışırken .html uzantısına doğru kaydettiyseniz. Dosyanın şimdi web tarayıcısında açıldığını göreceksiniz, bu gerçekleşmiyorsa lütfen önceki adımlara tekrar gidin.
HTML dosyası tekrar kod düzenleyicide nasıl açılır?
Bazı değişiklikler yapmak için dosyanızı tekrar kod düzenleyicide açmak isteyebilirsiniz. Ancak HTML dosyanıza çift tıkladığınızda web tarayıcısına mı açılıyor? Endişelenmeyin, sadece sağ tıklayın ve istediğiniz uygulamayla düzenleyin. Sağ tıklayın ve istediğiniz uygulamayla açın. Bu şekilde bir html dosyasını tekrar kod düzenleyicide açabilirsiniz.
İpucu: <h1> 1 etiket başlığıyla başlıyor ve </h1> 1 başlık başlığıyla bitiyor . Hemen hemen tüm html öğelerinin bir başlangıç ve bitiş etiketleri vardır.
HTML Kodunu Anlama
HTML, web uygulaması geliştirme yolculuğunuzda öğreneceğiniz en basit dildir. Önce aşağıdaki basit HTML web sayfasının koduna bir göz atalım.
<html> <head> <title>HTML Introduction</title> </head> <body> <h1>I am heading 1</h1> <h2>I am heading 2</h2> <h3>I am heading 3</h3> <h4>I am heading 4</h4> <h5>I am heading 5</h5> <h6>I am heading 6</h6> </body> </html>
Her şeyin <html></html> öğesine sarıldığını görebilirsiniz; bu, tüm web sayfasının html öğesi etiketlerinin içinde olması gerektiği anlamına gelir.
HTML'de Başlık Etiketi
Head öğesi bir web sayfasının çok önemli bir parçasıdır. <head ile başlar ve </head> etiketleri ile biter. Belge başlığı, stil sayfaları, favicon, duyarlı yakınlaştırma özellikleri. Her şey head etiketlerinde gelir, çünkü bu web sayfasının gövdesinde görünmez, ancak web sayfasıyla ilgili önemli dosyaları ve etiketleri içerirdi. Şimdilik kafanız karışmasın, CSS kursumuzda daha iyi anlayacaksınız.
HTML'de Gövde Etiketi
Yukarıdaki örnekte de görebileceğiniz gibi body öğesi <body> etiketi ile başlar ve </body> bitiş etiketi ile biter. <body> içindeki her şey aslında web tarayıcısında görüntülenecek. Yukarıdaki örnekte olduğu gibi 6 farklı başlığımız var h1, h2, h3, h4, h5, h6 ve kendi kendilerine başlayıp kapanıyorlar. Böylece body, etiketler ve yorumlar dışında tarayıcıdaki her şeyi görüntüleyecektir. Neden etiketleri, yalnızca yapıyı veya türü oluşturmak ve yapmak için kullanılır. Övgüler, yalnızca kodu daha anlaşılır kılmak ve web tarayıcısında görüntülenmemek için özel öğeler olsa da.
HTML'de Başlık Etiketleri
<h1>I am heading 1</h1> <h2>I am heading 2</h2> <h3>I am heading 3</h3> <h4>I am heading 4</h4> <h5>I am heading 5</h5> <h6>I am heading 6</h6>
Html'de 6 farklı başlığımız var. Her başlığın 1'den 6'ya kadar kendi numarası vardır, unutmayın başlıklar arama motorları için çok önemlidir. h1 sayfanın ana başlığı, h2 bölüm başlığı ve h3 h3'ün çocukları olduğundan vb. Şimdilik başlıklar hiyerarşisini anlamadıysanız, görmezden gelin ve sadece hatırlamanız gerekir. Bir metni kalın olarak biçimlendirmek istediğinizde, bu amaçla başlık kullanmamalısınız. Başlık, sayfanın veya bölümün kendisidir. <h1> etiketi ile başlar ve </h1> etiketi ile biter. Yukarıdaki örneğe bakın.
HTML'deki yorumlar
<!-- I am a comment /-->
Yorumlar sadece kodu daha anlaşılır kılmak için kullanılan kod yorumlarıdır. Html'de yorum <!– ile başlar ve –> ile biter, bu etiketler arasındaki hiçbir şey tarayıcınızda görüntülenmez. Neden tarayıcı yorumları görmezden gelir. Yorumlar sadece kendiniz veya daha sonra bir bölümün ne olduğuna dair ipuçları vermek için kodunuzu değiştirecek olan diğer kodlayıcılar içindir. Her zaman yorumlu ve güzel kodlar oluşturmaya çalışın bu uygulama hem gelecekte size zaman kazandıracak hem de kodunuzu sevdirecektir.
HTML'de Paragraf, Kalın, İtalik ve Altı Çizili
<p>Lorem Ipsum is industry. <em>Lorem Ipsum</em> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It <u>has survived</u> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <strong>popularised</strong> in with the release of Letraset sheets containing <i>Lorem Ipsum</i> passages..</p>
HTML paragraflarında <p> etiketiyle başlar ve </p> etiketiyle biter, içindeki her şey bir paragraf tanımlar.
Bir paragrafın içindeki kelimeyi veya satırı biçimlendirmek istiyorsanız, örneğin kalın, o kelime veya satırın etrafındaki <strong> ve </strong> etiketlerini daha kalın yapmak için kullanırsınız.
Bir satırın altını çizmek istediğinizde, o kelimenin veya satırın altını çizmek için <u> </u> kullanın.
Ve bir metni veya satırı italik olarak biçimlendirmek istediğinizde, o kelime veya satırın etrafında <i> </i> etiketini kullanmanız yeterlidir. Ayrıca <em> </em> hem <i> hem de <em> etiketleri aynı işi görür.
HTML'de Yatay Kurallar
<hr />
Yatay cetvel, html belgenize <hr /> kodu ile koyabileceğiniz bir satırdır. Bu, <hr> etiketi için kapanış etiketi olmadığını görebileceğiniz gibi kendi içinde kapanan özel bir html etiketidir. Çünkü bu etiketin içine girmesi gereken hiçbir şey yok. Bu nedenle, HTML'nize bir satır eklemek istediğinizde sadece <hr /> kullanın.
HTML'de ön
<pre> Introduction I We Then What Quality System Ready </pre>
Bildiğiniz gibi tarayıcı, kodunuzdaki tüm boşlukları yok sayar. Örneğin, kodunuzda iki etiket arasında birkaç satır var ve iki kelime arasında çok fazla boşluk var ama tarayıcı tüm bu boşlukları görmezden geliyor. Ve web sayfanızı bu boşluklar olmadan gösterir. Evet, çünkü tarayıcı, kodunuzu daha okunabilir hale getirmek için kullandığınız tüm bu boşlukları yok sayar. Bu nedenle, bu beyaz boşlukları görüntülemeniz ve tarayıcının bunları görmezden gelmemesini sağlamanız durumunda, sadece görüntülemek istediğiniz metin veya kodun etrafında <pre> </pre> öğesini kullanın.
HTML'de Sıralı Listeler
<ol> <li>USA</li> <li>UK <ol type="A"> <li>London</li> <li>Manchester</li> </ol> </li> <li>Canada</li> <li>Australia</li> </ol>
Liste görünümünde bir şey görüntülemek istediğinizde. Sıralı liste veya sırasız listeler kullanırsınız. Her iki liste türünde de, bu her iki liste türündeki liste öğelerini tanımlayan <li> liste öğesi etiketleri bulunur.
Sıralı ve sırasız listeler arasındaki en büyük fark, sıralı listelerin sayı, a, x veya nitelik türüne bağlı olarak herhangi bir şey göstermesidir. Sıralı liste, liste öğesinin başında bir disk veya nokta görüntülerken. Yukarıdaki örnekte, iç içe sıralı liste ile sıralı listeyi görebilirsiniz. Ana listenin varsayılan türe sahip olduğu ve alt sıralı listenin tür özniteliği A olarak ayarlanmışken liste öğelerini 1, 2, 3 olarak gösterdiği yerde. Böylece, A , B'yi gösterirdi. Sıralı liste <ol> etiketi ile başlar ve </ol> etiketi ile biter, liste öğeleri <li></li> etiketleri arasında gelir, böylece her liste öğesi kendi etiketlerinde bulunur.
HTML'de Sırasız Listeler ul
<ul> <li>USA</li> <li>UK <ol> <li>London</li> <li>Manchester</li> </ol> </li> <li>Canada</li> <li>Australia</li> </ul>
Tıpkı sıralı liste gibi, sırasız liste <ul> etiketi ile başlar ve </ul> etiketi ile biter, içindeki öğeler ise <li> ve </li> etiketleri arasında gelir. Böylece sırasız liste, liste öğelerinin başlangıcında nokta veya disk gösterecektir. Hangisini CSS ile değiştirebilirsiniz, size daha sonra rehberlik edeceğiz. Bu, HTML sayfalarında kullanılan en popüler liste türüdür, örneğin kenar çubuğu widget'larında, üstbilgi gezinmelerinde, altbilgi gezinmelerinde kullanılır ve CSS ile biçimlendirilir.
HTML'deki tanım listeleri
<dt>Pakistan</dt> <dd>Karachi</dd> <dd>Lahore</dd> <dd>Islambad</dd>
Tanım listesi, bir başlığı ve alt başlıkları olan bir listedir. <dt> başlık etiketi olan tanım başlık etiketidir. Liste öğeleri <dd> </dd> etiketine sarılırken, olası olmayan ul ve ol <li></li> ile sarılır. Tanım listeleri kod örneği için yukarıdaki örneğe bakın.
HTML Özel Karakterleri
© ♥ ♣ <p>I will display €</p> <p>I will display €</p> <p>I will display €</p>
HTML'de telif hakkı, ticari marka ve diğer birçok karakter gibi çeşitli karakter türleri vardır. Bu karakterleri kullanmanız gerektiğinde, bunları doğrudan klavyenizi kullanarak yazamazsınız. Bunun için html, HTML özel Karakterler tablosunda bulabileceğiniz özel karakterlere sahiptir. HTML'nizde istediğiniz karakteri yapmak için kodu alabileceğiniz yer.
HTML Özellikleri
<ol type="A"> </ol> <a href="https://google.com">Google</a> <img src="images/src.jpg" /> <div class="red"></div>
HTML nitelikleri aslında html etiketlerinin bir parçasıdır. Yukarıdaki örnekte, <ol>'un kendisinin kullanabileceğiniz farklı niteliklere sahip bir HTML etiketi olduğunu görebilirsiniz. Yukarıdaki örnekte olduğu gibi A değerine sahip öznitelik türünü kullanırsanız, <ol> gösterimi varsayılan 1, 2 , 3 yerine A, B, C olacaktır. Benzer şekilde, bağlantı <a> etiketinde href="” özelliği, bağlantıya nereye başvuracağını veya nereye bağlantı vereceğini söyler. Benzer şekilde <img'de src=”” niteliği, görüntünün kaynağına görüntünün <img etiketinde gösterileceği yeri söyler. Ve Div etiketinde class niteliği, yalnızca CSS'de kendi stiline sahip bir sınıfı uygulamak için kullanılır. CSS ve Div'i daha sonra ele alacağız.
HTML etiketleri ve Nitelikler arasındaki fark
Etiket, örneğin <img ve özniteliği alt değerlerini veya tanımlarını etiketleyen HTML etiketidir. Örneğin <img src=”image.jpg” bu örnekte <img bir HTML etiketidir, src ise <img etiketinin bir niteliğidir. Her etiketin, gereksinimlere göre kullanacağınız kendi etiketleri vardır.
Kodun tamamını almak istiyorsanız lütfen aşağıdaki bağlantıdan indirin.
Canlı Önizleme İndirme Kodu
Sonraki Ders HTML Bağlantıları – HTML Eğitimi – Web Uygulaması Geliştirme