HTML & CSS

Dijital çağda, web siteleri bilgi ve etkileşimin temel taşı olarak hizmet vermektedir. Basit bir sayfadaki metinden karmaşık etkileşimli unsurlara kadar, web geliştirme uzun bir yol kat etmiştir. Bu makale, web geliştirmenin temellerini ele alarak, HTML ve CSS’ye odaklanır ve bu iki dilin birlikte nasıl çalışarak dinamik web sayfaları oluşturduğunu açıklar.

HTML’yi Anlamak

HTML veya HiperMetin İşaretleme Dili, web sayfalarını oluşturmak ve yapılandırmak için kullanılan standart bir dildir. İnternetin temel yapı taşı olan HTML, web tarayıcıları tarafından okunur ve web sayfalarının nasıl görüntüleneceğini belirleyen bir dildir. HTML’nin temel işlevleri ve yapısı hakkında daha fazla bilgi edinmek için aşağıdaki temel kavramları inceleyelim.

Elemanlar ve Etiketler:

HTML, sayfanın yapısını tanımlamak için kullanılan elemanları (tags) ve etiketleri (markup) kullanır. Bir HTML elemanı, açılı parantezlerle işaretlenmiş bir etiketle başlar ve aynı etiketi kapatmak için kapanış etiketi kullanılır. Örneğin, bir başlık oluşturmak için <h1> ile <h6> etiketleri kullanılır. En büyük başlık <h1> ile belirtilir ve en küçük başlık <h6> ile belirtilir. Örnek:

<h1>Bu bir başlık</h1

İç İçe Geçme ve Yapı:

HTML, elemanları iç içe geçirerek karmaşık yapılar oluşturmanıza olanak tanır. Örneğin, bir tablo (<table>) içinde satırlar (<tr>) bulunabilir ve her satırın içinde veri hücreleri (<td>) olabilir. Bu yapılar, sayfanızda verileri düzenlemeniz için kullanışlıdır. Örnek:

<table>
<tr> 
<td>Satır 1, Hücre 1</td> 
<td>Satır 1, Hücre 2</td> 
</tr> 
<tr> 
<td>Satır 2, Hücre 1</td> 
<td>Satır 2, Hücre 2</td> 
</tr> 
</table>

Belge Nesne Modeli (DOM):

DOM, HTML elemanlarını ve içeriklerini hiyerarşik bir ağaç yapısı içinde temsil eder. Bu, web geliştiricilerinin web sayfalarının içeriğini dinamik olarak değiştirmelerine ve manipüle etmelerine olanak tanır. JavaScript gibi programlama dilleri kullanılarak DOM’a erişebilir ve sayfanızdaki öğeleri güncelleyebilirsiniz. Örneğin, bir butona tıklama işlemi DOM kullanılarak işlenebilir ve sayfa içeriği dinamik olarak değiştirilebilir.

HTML, web geliştiricilerinin içerik oluşturmasına, yapılandırmasına ve stil vermesine yardımcı olan temel bir teknolojidir. CSS (Cascading Style Sheets) ile birleştirilerek web sayfaları görsel olarak çekici ve kullanıcı dostu hale getirilebilir. HTML’nin temel prensiplerini anlayarak, web geliştirme sürecine başlamak için güçlü bir temel oluşturabilirsiniz. HTML ile ilgili daha fazla bilgi edinmek ve pratik yapmak, web geliştirme becerilerinizi geliştirmenize yardımcı olacaktır.

CSS ile Stil Verme

CSS (Cascading Style Sheets), web sayfalarına stil ve düzen eklemek için kullanılan güçlü bir teknolojidir. CSS, HTML elemanlarına görsel özellikler (renkler, yazı tipleri, boyutlar, aralıklar vb.) uygulamanıza ve web sayfanızın tasarımını geliştirmenize olanak tanır. Aşağıda CSS ile ilgili temel konuları inceleyelim:

Stil Uygulama

CSS, HTML elemanlarına stil özelliklerini belirlemek için kullanılır. Bu stil özellikleri, özel HTML etiketlerinin “style” özelliği aracılığıyla veya ayrı bir CSS dosyasında tanımlanabilir. Örneğin, bir başlığın rengini değiştirmek için HTML etiketi içinde “style” özelliği kullanılabilir:

<h1 style="color: blue;">Bu bir mavi başlık</h1>

Basamaklı Stil Sayfaları (CSS Dosyaları)

En yaygın ve etkili yöntem, basamaklı stil sayfaları (CSS dosyaları) kullanmaktır. Bu, stilinizi ayrı bir dosyada tanımlayarak kodunuzun düzenini ve bakımını kolaylaştırır. CSS dosyaları .css uzantılıdır ve aşağıdaki gibi bir yapıya sahiptir:

/* styles.css */ 
h1 { 
color: blue; 
font-size: 24px; 
} 
p {
color: green;
line-height: 1.5; 
}

HTML dosyanızda bu CSS dosyasını kullanmak için aşağıdaki gibi bir bağlantı eklersiniz:

<link rel="stylesheet" type="text/css" href="styles.css">

Bu şekilde, birden fazla HTML sayfasında aynı stil kurallarını kullanabilirsiniz, bu da tutarlılık sağlar ve tasarım değişikliklerini tek bir yerde yapmanıza olanak tanır.

CSS Seçiciler:

CSS ile belirli HTML elemanlarını hedeflemek için seçiciler kullanılır. Yukarıdaki örnekteki “h1” ve “p”, seçicilerdir ve ilgili HTML etiketlerini hedefler. CSS, çok çeşitli seçiciler sunar, bu da istediğiniz öğeleri belirlemek için esneklik sağlar.

Özetle, CSS ile web sayfalarına stil vermek, web geliştirme sürecinde önemli bir adımdır. CSS’nin temel kavramlarını öğrenmek ve CSS dosyaları oluşturarak web sayfalarınızı görsel olarak özelleştirmek, web tasarımınızı iyileştirmenize ve kullanıcı deneyimini geliştirmenize yardımcı olur. CSS ile ilgili daha fazla detaylı bilgi edinmek ve uygulama yapmak, web geliştirme becerilerinizi geliştirmenize katkı sağlar.

Etkileşimli Web Sayfaları Oluşturma

Web geliştirme, internet üzerindeki sayfaların oluşturulması ve düzenlenmesi sürecini ifade eder. Bu süreç, web sayfalarını yapılandırmak ve görsel olarak çekici hale getirmek için temel iki bileşen olan HTML ve CSS kullanılarak gerçekleştirilir.

Formlar ve Kullanıcı Etkileşimi:

Web sayfaları, kullanıcıların bilgi girişi yapmasını veya seçenekler arasından seçim yapmasını sağlayan formlar içerebilir. HTML, bu tür formların oluşturulmasını kolaylaştırır. Örneğin, bir kullanıcı adı ve şifre girişi için bir form oluşturmak için aşağıdaki gibi HTML kodu kullanabiliriz:

<form> <label for="username">Kullanıcı Adı:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Şifre:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Giriş Yap"> </form>

Bu form, kullanıcılardan kullanıcı adı ve şifre girmelerini isteyecek ve “Giriş Yap” düğmesine tıkladıklarında bilgileri göndermelerine olanak tanıyacaktır.

Sayfaları Bağlama:

HTML, farklı sayfalar veya harici siteler arasında gezinmeyi kolaylaştırmak için “<a>” (anchor) etiketini kullanır. Bu etiket, bağlantılar oluşturur ve kullanıcıları başka bir sayfaya veya kaynağa yönlendirebilir. Örneğin, aşağıdaki HTML kodu bir bağlantı oluşturur:

<a href="https://www.example.com">Örnek Web Sitesi</a

Bu bağlantı, “Örnek Web Sitesi” metnini içeren ve kullanıcıları “https://www.example.com” adresine yönlendiren bir bağlantıdır.

Web geliştirme sürecinde HTML, web sayfasının yapısını oluştururken CSS, bu yapının görsel stilini ve düzenini ayarlar. Bu iki bileşen bir araya geldiğinde, etkileyici ve işlevsel web sayfaları oluşturmak mümkün hale gelir. Temel HTML ve CSS kavramlarını anlayarak, web geliştirme yolculuğuna başlayabilir ve kullanıcılar için çekici, etkileşimli ve bilgilendirici dijital deneyimler oluşturabilirsiniz.

Programlamaya Giriş Dersi Linki

https://pll.harvard.edu/course/cs50-introduction-computer-science