info@newtasarim.com
HTML, CSS ve Bootstrap ile Web Sitesi Oluşturma
Web sitesi geliştirmeye başlamak mı istiyorsunuz? HTML, CSS ve Bootstrap, web sitesi oluşturmak için kullanılan temel teknolojilerdir. Bu yazıda, bu üç teknolojinin temellerini inceleyeceğiz ve basit bir web sitesi oluşturmak için nasıl kullanabileceğimizi göstereceğiz.
HTML:
HTML, web sayfalarının temelini oluşturan bir işaretleme dilidir. Metin, resimler, videolar ve bağlantılar gibi içerikleri eklemek için kullanılır. HTML etiketleri, tarayıcılara sayfadaki içeriğin nasıl görüntüleneceğini söyler.
Örnek:
HTML
<h1>Başlık</h1>
<p>Bu bir paragraftır.</p>
<img src="resim.jpg" alt="Resim">
<a href="https://www.google.com">Google</a>
CSS:
CSS, HTML sayfalarının stilini kontrol etmek için kullanılır. Renkler, yazı tipleri, boyutlar ve konumlar gibi öğeleri ayarlayarak web sayfalarınızı daha güzel ve kullanışlı hale getirebilirsiniz.
Örnek:
CSS
h1 {
color: red;
}
p {
font-size: 16px;
}
img {
width: 200px;
height: 200px;
}
Bootstrap:
Bootstrap, web sitesi geliştirmeyi kolaylaştıran bir CSS çerçevesidir. Önceden tasarlanmış bileşenler ve stiller içerir, böylece sıfırdan başlamak yerine bu bileşenleri kullanarak web sitenizi hızlı bir şekilde oluşturabilirsiniz.
Örnek:
HTML
<div class="container">
<h1>Başlık</h1>
<p>Bu bir paragraftır.</p>
<button class="btn btn-primary">Buton</button>
</div>
Web Sitesi Oluşturma:
- HTML Dosyası Oluşturun:
HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Sitem</title>
</head>
<body>
<h1>Başlık</h1>
<p>Bu bir paragraftır.</p>
<img src="resim.jpg" alt="Resim">
<a href="https://www.google.com">Google</a>
</body>
</html>
- CSS Dosyası Oluşturun:
CSS
h1 {
color: red;
}
p {
font-size: 16px;
}
img {
width: 200px;
height: 200px;
}
- Bootstrap Kullanın:
Bootstrap’ı CDN’den (Content Delivery Network) ekleyebilirsiniz:
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqx61gVWgIGe338jSzvRTNL686Y9D5I9Iwd4t06d93A5skq59CC7ERKc" crossorigin="anonymous">
- Dosyaları Bir Araya Getirin:
HTML, CSS ve Bootstrap dosyalarınızı aynı klasöre kaydedin ve HTML dosyanızı tarayıcıda açın. Web sitenizin görüntülendiğini göreceksiniz.
