Alıştırma - HTML sayfası oluşturma
Bu alıştırmada özgeçmişiniz için web sayfası oluşturmaya başlayacaksınız. Adınız ve bölüm üst bilgileriniz gibi bazı üst düzey bilgileri ekleyerek işe başlarsınız. Ayrıca, sonraki bir alıştırmada bilgileri nereye ekleyeceğinize yönelik işaretçiler olarak kullandığımız birkaç açıklama da eklersiniz.
Bu alıştırmada Visual Studio Code ve CodeSwingweb tabanlı sürümü olan vscode.dev kullanılır. Bu araçlar geliştirme sürecini kolaylaştırmaya yardımcı olur. Aşağıdaki alıştırmaları tamamlamak için yerel yükleme gerekmez.
CodeSwing ile HTML sayfası oluşturma
İlk olarak bir klasör oluşturur, araçlarınızı kurar ve vscode.dev üzerinde CodeSwing'i kullanarak bir "swing" oluşturursunuz. Bir salınım, vscode.dev'de yazdığınız kodun sonuçlarını otomatik olarak görüntüler. Bu, hızlı bir şekilde değişiklikler yapmanıza ve güncelleştirmelerin gerçek zamanlı olarak gerçekleşmesine olanak tanır.
Aşağıdaki videoda Visual Studio Code'da CodeSwing'in nasıl yükleneceği gösterilmektedir. Bu adımlar, alıştırma adımlarında da yer alır.
- masaüstünüzde özgeçmiş adlı bir klasör oluşturun.
- vscode.devaçın.
- klasör aç seçin.
- Daha önce oluşturduğunuz özgeçmiş klasörüne gidin ve Klasörü Seçdüğmesini tıklayın.
- Sitenin dosyaları görüntülemesine izin ver sorulduğunda, Dosyaları Görüntüleöğesini seçin.
-
Uzantıları düğmesini seçin.
- Market'teki Arama Uzantıları metin kutusuna CodeSwingyazın.
- CodeSwingyüklemek için Yükle'yi seçin.
- Mac'te Ctl-Shift-P veya Cmd-Shift-P seçerek Komut Paletini açın.
- Komut Paleti'ne CodeSwing yazın ve CodeSwing: New Swing in Directory...öğesini seçin.
- Geçerli dizini (önceki adımda oluşturduğunuz dizin) kullanmak için klasör seçin seçin.
- Temel: Yalnızca HTML'i seçin.
- Devam etmek için değişiklikleri kaydetmeniz istendiğindeDeğişiklikleri kaydetseçin.
Visual Studio Code yan yana iki pencere oluşturur. Sol taraf, HTML'nizi girebileceğiniz düzenleyicinizdir. Sağ, HTML kodunuzun sonuçlarını görüntüleyen bir tarayıcı gibi davranır.
Sayfanızın yapısını oluşturmak için HTML ekleme
Ardından, sayfanızın yapısını oluşturmak için HTML'yi eklersiniz. Üç ana öğe olan html, head ve body öğelerini oluşturursunuz. içinde body, adınız ve sosyal medya bilgileriniz gibi sizinle ilgili genel bilgileri içeren bir bölüm eklersiniz. Ardından eğitiminizi ve deneyiminizi listeleyen bölümler eklersiniz.
Aşağıdaki videoda Visual Studio Code'da HTML yazma ve kodun CodeSwing'de işlenmesini sağlama işlemleri gösterilmektedir. Bu adımlar, alıştırma adımlarında da yer alır.
Adınız ifadesini kendi adınızla değiştirebilirsiniz. Diğer alıştırmalarda, e-posta adresinize, sosyal medya tanıtıcılarınıza, eğitim ve deneyime yönelik listeler ve bağlantılar oluşturursunuz.
Kodu ekledikten sonra hangi kodun eklendiğini gözden geçireceksiniz.
- index.htmliçine aşağıdaki HTML'yi ekleyin:
<html>
<head>
<title>Your Name resume</title>
</head>
<body>
<h1>My Name</h1>
<!-- email address -->
<h2>Social Media</h2>
<!-- social media -->
<h2>Education</h2>
<!-- education -->
<h2>Experience</h2>
<!-- experience -->
</body>
</html>
HTML'deki öğelerin her biri belirli şeyler yapar. Aşağıdaki tabloda, HTML'nizde kullandığınız etiketler ve tarayıcının bunları nasıl anladığı açıklanmaktadır.
| Etiket | Açıklama |
|---|---|
<html> |
HTML belgesinin tamamı için "kapsayıcı" etiketi. Diğer tüm etiketler HTML öğesinin içine yazılır. |
<head> |
Üst bilgi kapsayıcısı. Üst bilgi genellikle sayfanın veya sitenin ihtiyaç duyduğu diğer dosyalara başvurular içerir. Ayrıca arama motorlarının ve sosyal medya sitelerinin web sitenizi daha iyi bulmak için kullandığı verileri de içerebilir. |
<body> |
Bu etiket, web sayfası için gövde kapsayıcısını oluşturur. Gösterim öğelerinin çoğu gövde öğesi içerisine konur. |
<div> |
Bölme etiketi HTML'de bir bölüm oluşturur. Bölümler genellikle birbiriyle ilgili benzer içeriğe veya içeriğe sahiptir. |
<h1> - <h6> |
Bunlar üst bilgi etiketleridir. HTML belgesine biraz yapı verir. Tarayıcıya, hiyerarşiyi göstermek için aralarındaki metni belirli bir şekilde biçimlendirmesini söyler. |
<!-- comment text --> |
Bu etiketler HTML'deki açıklamalardır. İşlenmiş bir çıktı oluşturmazlar. Geliştiriciler tarafından kodlarının bulunmasını, paylaşılıp anlaşılmasını kolaylaştırmak için kullanılır. |
/* CSS comment */ |
Bu açıklama etiketleri Basamaklı Stil Sayfalarında kullanılır. |
- Siz yazarken sayfa otomatik olarak güncelleştirilir; sonuç aşağıdaki görüntüye benzer şekilde görünür:
Kodu gözden geçirme
Her HTML sayfası, kök çekirdek öğesi olarak html içerir ve tüm içerik bu elemanın içindedir.
html normalde meta verileri içeren head ve görüntülenecek bilgileri içeren body olmak üzere iki doğrudan alt öğeye sahiptir.
Adınız için yalnızca bir h1 öğesi ve bölümlerin her biri için üst bilgiler için h2 öğeleri nasıl kullandığınıza dikkat edin. Bu, sayfanın en önemli bölümlerini vurgulamada yardımcı olmaktır. Adınız sayfadaki en önemli bilgi parçasıdır; bu nedenle h1ile en üst sırada yer alır.
Son olarak, e-posta adresi, sosyal medya, eğitimve deneyimiçin yorumlar vardır. Bunlar yer tutucu olarak kullanılır ve bu modülün sonraki bir alıştırmasında değiştirilir.