Alıştırma - Web uygulamanıza temel HTML ekleme

10 dakika

Şu anda web sitenizde boş bir HTML dosyası var. Şimdi kod ekleyelim! Amaç, müşterilerinizin tarayıcılarının görüntülemesi gereken web sayfasını açıklamak için köprü metni işaretleme dilini (HTML) kullanmaktır. Başlangıç şablonuna sahip olmak güzel olmaz mı? Düzenleyiciler sizin için tipik ortak yapı veya HTML yapılarından bazılarını rahatça doldurabilir.

Bu ünitede temel HTML içeriği ekleyecek, HTML sayfasını tarayıcıda açacak ve geliştirici araçlarına ilk kez göz atacaksınız.

Html kodu ekleme

Visual Studio Code, html programlama için kullanıma hazır olarak temel destek sağlar. Söz dizimi vurgulama, IntelliSense ile akıllı tamamlamalar ve özelleştirilebilir biçimlendirme vardır.

Visual Studio Code'da web sitesi klasörünüzü açın, ardından dosyayı Gezgin'de index.htmlseçerek açın.
Sayfaya index.html yazın html:5ve enter tuşuna basın. HTML5 şablon kodu dosyaya eklenir.

Not

HTML5 şablon kodu dosyaya eklenmiyorsa index.html dosyayı kapatıp yeniden açmayı deneyin.

Şablon kodunu aşağıdakine benzer şekilde düzenleyin. Ardından Windows'ta Control+S veya macOS üzerinde Command+S'yi seçerek dosyayı kaydedin.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

HTML'nin farklı sürümleri vardır. Belge türü<!DOCTYPE html>, bu HTML belgesinin HTML5 kodu içerdiğini gösterir.

Tüm HTML öğelerinin anlamını ayrıntılı olarak ele almasak da, birkaç önemli öğeye dikkat etmek istiyoruz. etiketi, meta kaynak kodu tarayıcılarında görüntülemedikleri sürece görüntüleyici tarafından normalde görünür olmayan meta veri bilgilerini gösterir. Meta öğeler veya etiketler web sayfası hakkında açıklayıcı bilgiler sağlar. Örneğin, arama motorlarının web sayfalarınızdaki hangi bilgileri arama sonuçlarında döndüreceklerini işlemesine yardımcı olur.

UTF-8 için karakter kümesi (charset) önemsiz görünebilir, ancak bilgisayarların karakterleri nasıl yorumlayacağını belirlemek için çok önemlidir. Karakter kümesinin meta verileri eksikse, bu güvenliğin tehlikeye atılmasına neden olabilir. Charset özniteliğinin arkasında oldukça fazla geçmiş ve teknik bilgi vardır, ancak bu alıştırmadan önemli olan Visual Studio Code ortak özelliğinin bazı mantıklı varsayılanlar sağlamasıdır.

Başı düzenleme

<head> HTML kodunuzdaki öğe, web siteniz hakkında tarayıcı sekmesinde görünmeyen bilgiler içerir.

Meta veriler , HTML belgesiyle ilgili karakter kümesi, betikler ve web sayfasının hangi tarayıcıda açıldığı gibi verileri tanımlar.

Web sayfasının başlığı tarayıcı penceresinin en üstünde görünür ve birçok açıdan önemlidir. Örneğin, başlık tarafından kullanılır ve arama motorlarında görüntülenir. Şimdi bir başlık ekleyelim.

Önemli

Bu noktadan sonra, üç nokta (...) önceden bildirilen kodun önce veya takip ettiğini gösterir. Gerekli değişiklikleri yapmak veya çalışmanızı güncelleştirmek için bağlam olarak sağlanan yeterli kod olmalıdır, ancak üç noktayı kopyalayıp kodunuz içine yapıştırmamalısınız.

Düzenleyicide, öğesini aşağıdaki örneğe benzeyecek şekilde değiştirin <title> .

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Web sayfasındaki HTML öğelerine stil uygulamak için CSS kodunu doğrudan web sayfasının başına yazabilirsiniz. HTML sayfasında CSS yazma işlemi iç CSS olarak adlandırılır. Ancak, HTML yapısını ve CSS stillerini ayırmak en iyi yöntemdir. Ayrı bir CSS sayfasına sahip olmak dış CSS olarak adlandırılır. Kısa ve bölümlere ayrılmış kodlar daha kolay okunur. Birden çok web sayfasına hizmet vermek için bir veya daha fazla dış stil sayfası kullanabilirsiniz. Her HTML sayfasını çoğaltılmış CSS koduyla güncelleştirmek yerine, tek bir CSS dosyasında değişiklik yapabilir ve bu güncelleştirmelerin bağımlı web sayfalarının tümüne uygulanmasını sağlayabilirsiniz. Şimdi bir dış CSS dosyasına bağlanalım.

Visual Studio Code düzenleyicisinde, öğesinin <title> arkasına boş bir satır ekleyin, yazın linkve enter tuşuna basın. Visual Studio Code aşağıdaki satırı dosyanıza index.html eklemelidir.
```
<link rel="stylesheet" href="">
```

öğesini olarak href=güncelleştirin href="main.css" ve Windows'ta Control+S veya macOS üzerinde Command+S'yi seçerek dosyayı kaydedin.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Gövdeyi düzenleme

Şimdi öğesini doldurmaya <body> başlayalım.

<body> öğesi, web sitenizin tarayıcılarında müşterileriniz tarafından görülebilen içeriğini içerir.

öğesinin <body> içine bir başlık<h1> öğesi ekleyin, ardından bir öğesi ekleyin ve ardından birkaç <p> öğesi içeren sıralanmamış <ul>liste oluşturun.

Kodunuzu düzenleyin veya kopyalayıp yapıştırın; böylece aşağıdaki örneğe benzer.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Bir öğenin stili için bir ID özniteliği (öğesinde <p> kullanılır), sınıf özniteliği ise (öğesinde <li> kullanılır) aynı sınıfın tüm öğelerini şekillendirmek için kullanılır.

Sonraki adımdan önce Control+S veya Command+S tuşlarına basarak dosyanızın kaydedildiğinden emin olun.

Tarayıcıda aç

HTML dosyasını tarayıcıda açarak web sayfanızın önizlemesini yerel olarak görebilirsiniz. ile https://başlayan bir web sitesi adresi yerine, tarayıcınız gibi C:/dev/simple-website/index.htmlgörünmesi gereken yerel dosya yolunu işaret eder.

Visual Studio Code kullanarak önizleme yapmak için sağ tıklayıp index.html Varsayılan Tarayıcıda Aç'ı seçin veya dosyayı seçip index.html Alt+B klavye kısayolunu kullanın.

Önemli

Sorun yaşıyorsanız dosya adı simgesine veya metnine doğrudan sağ tıkladığınızdan emin olun. Visual Studio Code iletişim kutusu görüntülenirse Evet, yazarlara güveniyorum'ı seçin; bu, proje klasörlerinizin otomatik kod yürütülmesine izin verip vermemesine veya bunları kısıtlamasına karar vermenizi sağlayan Çalışma Alanı Güveni özelliğidir. Dosyayı yeni oluşturdunuz, böylece güvenlidir.

Web sayfası varsayılan tarayıcınızda açılır.

Geliştirici araçlarını kullanarak sayfayı görüntüleme

Tarayıcınızdaki geliştirici araçlarını kullanarak bir web sayfasını inceleyebilirsiniz. Şimdi deneyelim.

Web sayfasına sağ tıklayıp İncele'yi seçerek Geliştirici Araçları'nı açın veya şu kısayolları deneyin:
- Geliştirici Araçları'nın klavye kısayolu olan F12'ye basın.
- Windows ve Linux'ta Ctrl+Shift+I tuşlarına veya Mac'te Option+Command+I tuşlarına basın.
Bu klavye kısayolları Microsoft Edge, Chrome ve Firefox'ta çalışır. Safari kullanıyorsanız bkz. Web Geliştirme Araçları. Yüklendiğinde Safari Tercihleri'ni>ardından Gelişmiş'i seçin. Bölmenin en altında, Menü çubuğunda Geliştirme menüsünü göster onay kutusunu seçin. Web Denetçisini Göster'i geliştir'i > seçin. Daha fazla bilgi için Safari Web Denetçisi belgelerine bakın.

Geliştirici Araçları'nı ve başlıca kullanılabilir özellikleri açma hakkında daha fazla bilgi edinmek için Geliştirici Araçlarına Genel Bakış makalesine bakın.
Öğeler sekmesini seçin.
Farenizi Öğeler sekmesinde görüntülenen HTML öğelerinin üzerine getirin ve çeşitli öğelerin içeriğini genişletin.

Geliştirici araçlarındaki Öğeler sekmesi, tarayıcıda işlendiği şekilde belge nesne modelini (DOM) gösterir. Hata ayıklama sırasında, tarayıcının kaynak kodunuzu nasıl yorumladiğini görmek genellikle önemlidir.

Sayfayı tarayıcıda incelemek her türlü yararlı bilgi sağlar ve sorunları gidermenize yardımcı olabilir. Sonraki bölümde göreceğiniz gibi CSS ayrıntılarını denetçiyle de görüntüleyebilirsiniz.