Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz.
Blog Yaz!Web tasarımı, internet üzerinde var olan her şeyin temelidir ve öğrenmesi oldukça eğlencelidir. Yeni başlayanlar için HTML ve CSS, basit ve etkili bir başlangıç noktasıdır. Bu makalede, 'HTML temel kodlar', 'CSS başlangıç', 'web sayfası oluşturma' ve 'basit web tasarımı' konularına odaklanarak, adım adım basit bir web sayfası oluşturmayı öğreneceksiniz.
HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturur. HTML kodları ile sayfanızın içeriğini yapılandırabilirsiniz. Temel HTML etiketlerini kullanarak bir sayfa oluşturma sürecine bakalım.
Bir web sayfasının temel HTML yapısı aşağıdaki gibi olur:
<!DOCTYPE html>
<html>
<head>
<title>Basit Web Sayfası</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>
</body>
</html>
Açıklama:
CSS (Cascading Style Sheets), HTML ile oluşturulan yapıya stil ve düzen kazandırır. CSS ile renk, yazı tipi, yerleşim gibi görsel özellikleri ayarlayabilirsiniz.
Bir CSS dosyası oluşturarak veya HTML dosyasının içinde stil ekleyerek sayfanıza stil verebilirsiniz. İşte temel bir CSS örneği:
/* style.css dosyası */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: blue;
}
p {
color: green;
}
HTML dosyanızda bu CSS dosyasını şöyle dahil edebilirsiniz:
<!DOCTYPE html>
<html>
<head>
<title>Basit Web Sayfası</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>
</body>
</html>
Açıklama:
Şimdi HTML ve CSS bilgilerini kullanarak daha gelişmiş bir web sayfası oluşturalım.
<!DOCTYPE html>
<html>
<head>
<title>Kişisel Web Sayfam</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Hoşgeldiniz</h1>
</header>
<nav>
<ul>
<li><a href="#hakkimda">Hakkımda</a></li>
<li><a href="#projeler">Projeler</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
<section id="hakkimda">
<h2>Hakkımda</h2>
<p>Ben bir web geliştiricisiyim ve HTML & CSS öğreniyorum.</p>
</section>
<section id="projeler">
<h2>Projeler</h2>
<p>Burada projelerimi bulabilirsiniz.</p>
</section>
<section id="iletisim">
<h2>İletişim</h2>
<p>Benimle iletişime geçmek için <a href="mailto:email@example.com">e-posta gönderin</a>.</p>
</section>
</body>
</html>
/* style.css dosyası */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
section {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 5px;
}
h2 {
color: #333;
}
Açıklama:
1. Kod Düzenleme: Kodlarınızı düzenli ve okunabilir tutun. HTML ve CSS dosyalarını ayrı tutmak, kod yönetimini kolaylaştırır.
2. Tarayıcı Uyumluluğu: Web sayfanızın farklı tarayıcılarda uyumlu çalıştığından emin olun. Tüm modern tarayıcılarda test yaparak tasarımın düzgün göründüğünü kontrol edin.
3. Responsive Tasarım: Mobil uyumluluk için responsive tasarım tekniklerini öğrenin. CSS media query'leri kullanarak, web sayfanızın farklı cihazlarda iyi görünmesini sağlayabilirsiniz.
4. Öğrenmeye Devam Edin: HTML ve CSS temel bilgileri öğrendikten sonra JavaScript, framework'ler (Bootstrap, React gibi) ve daha gelişmiş konulara yönelin. Web tasarım dünyası sürekli gelişiyor, bu yüzden kendinizi güncel tutun.
HTML ve CSS kullanarak basit bir web sayfası oluşturmak, web tasarımına giriş için harika bir adımdır. 'HTML temel kodlar', 'CSS başlangıç', 'web sayfası oluşturma' ve 'basit web tasarımı' konularında edindiğiniz bilgilerle, kendi projelerinizi oluşturabilir ve geliştirebilirsiniz. Bu adımları takip ederek, web tasarımının temellerini öğrenebilir ve daha ileri seviyelere geçiş yapabilirsiniz.
Lisans Yönetim Scripti 2
Canlı Radyo Dark Scripti
Canlı Radyo Light Scripti
Rüzgar Radyo Scripti
Radyo Minimal
Ekitap Scripti
Aşk Sevgililer GünüEvlilik
Sohbet Scripti
Dialog Whatsapp Benzeri Sohbet
Firebase Chat
Web Ajans Scripti
Ajans Scripti Kolay Kullanım
Ajans Scripti V2
Ajans Scripti V3
Avukat Ve Hukuk Bürosu Scripti
Avukat Ve Hukuk Bürosu Web Tasarım V2
Mobil Uyumlu Çilingir Scripti
Kuaför Güzellik Salonu Spa Merkezi Web Tasarım
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2
İlaçlama Şirketi Web Tasarımı
İlan Web Tasarımı
İlan Web Tasarımı V2
İnşaat Firması Web Tasarımı
İnşaat Firması Tasarımı V2
Kitapçı Kırtasiye Web Tasarımı
Kombi Klima Servisi Web Tasarımı
Korku Evi Eğlence Mekanı Web Tasarımı
Kurumsal Firma Web Tasarımı V2
Kurumsal Firma Web Tasarımı V3
Ajans Web Tasarımı V4
Kurumsal Firma Web Tasarımı V4
Kurumsal Firma Web Tasarımı V5
Kurumsal Firma Web Tasarımı V6
Kurumsal Firma Web Tasarımı V7
Kurumsal Firma Web Tasarımı V8
Mobilya Dekorasyon Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V2
Nakliyat Taşımacılık Web Tasarımı V3
Ana Okulu Ve Kreş Web Tasarımı
Otel Pansiyon Web Tasarımı
Özel Oto Servis Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı V2
Restaurant Cafe Bar Lokanta Web Tasarımı
Restaurant Cafe Bar Lokanta Web Tasarımı V2
Teknik Servis Web Tasarımı
Sigorta Acenta Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V2
Sürücü Kursu Web Tasarımı
Tek Ürün Satış Web Tasarımı
Tek Ürün Satış Web Tasarımı V2
Tek Ürün Yaprak Web Tasarımı
Tek Ürün Yaprak Web Tasarımı V2
Tek Ürün Satış Web Tasarımı V3
Temizlik Şirketi Web Tasarımı
Temizlik Şirketi Web Tasarımı V2
Ajans Web Tasarımı V5
Ajans Web Tasarımı V6
Werock Radyo Web Tasarımı
Avukat Ve Hukuk Bürosu Tasarımı V3
Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3
İnşaat Firması Web Tasarımı V3
Kurumsal Firma Web Tasarımı V9
Mimarlık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V4
Ana Okulu Ve Kreş Web Tasarımı V2
Psikolog Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V3
Sürücü Kursu Web Tasarımı V2
Teknik Servis Web Tasarımı V3
Ajans Web Tasarımı V7
Google Indexing Api
Milando Radyo Wordpress Teması
Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.
