HTML ve CSS Öğrenme Rehberi
Web geliştirme dünyasına adım atmak isteyen herkesin bilmesi
gereken ilk iki teknoloji HTML ve CSS'tir. HTML, web sayfalarının iskeletini
oluştururken, CSS ise bu sayfaların görsel tasarımını yapmamızı sağlar. Bu rehber
yazımızda, HTML ve CSS'i öğrenmeye başlamak için gereken adımları, kaynakları
ve ipuçlarını paylaşalım istedik.
HTML Nedir?
HTML, bir web sayfasının içeriğini yapılandırmak için
kullanılan bir işaretleme dilidir. Metin, resim, bağlantı, video gibi çeşitli
öğeleri tanımlamak için HTML etiketleri kullanılır. Aşağıda temel HTML
etiketleri belirtilmiştir:
: Tüm HTML belgesini sarar.
: Belge hakkında meta bilgiler içerir.
: Tarayıcı sekmesinde görünen başlığı belirler.<o:p></o:p></p>
<p class="MsoNormal"><body>: Görünen içeriği içerir.<o:p></o:p></p>
<p class="MsoNormal"><h1> - <h6>: Başlık etiketleri, h1 en büyük ve
h6 en küçük.<o:p></o:p></p>
<p class="MsoNormal"><p>: Paragraf metnini tanımlar.<o:p></o:p></p>
<p class="MsoNormal"><a>: Bağlantı oluşturur.<o:p></o:p></p>
<p class="MsoNormal"><img>: Görsel ekler.<o:p></o:p></p>
<p class="MsoNormal"><ul>, <ol>, <li>: Sırasız ve sıralı
listeler oluşturur.<o:p></o:p></p>
<h3><b>CSS Nedir?</b></h3>
<p class="MsoNormal">CSS, web sayfalarının stil ve düzenini tanımlamak için
kullanılan bir stil dilidir. HTML'in görünümünü değiştirir ve sayfanın
renklerini, yazı tiplerini, yerleşimini kontrol eder. Temel CSS kavramları
aşağıda belirtilmiştir:<o:p></o:p></p>
<p class="MsoNormal"><b>Seçiciler</b>: Hangi HTML elemanlarının stil alacağını
belirler (p, .sınıf, #id).<o:p></o:p></p>
<p class="MsoNormal"><b>Özellikler ve Değerler</b>: Elemanların stilini tanımlar
(ör. color: red;).<o:p></o:p></p>
<p class="MsoNormal"><b>Kutu Modeli</b>: HTML elemanlarının genişlik, yükseklik,
dolgu (padding), sınır (border), ve marjin (margin) özelliklerini içerir.<o:p></o:p></p>
<h3><b>HTML ve CSS'in Temellerini Öğrenme</b></h3>
<p class="MsoNormal">HTML ve CSS'in temel yapı taşlarını anlamak önemlidir. HTML,
içeriği yapılandırırken CSS, bu içeriğin nasıl görüneceğini belirler.<o:p></o:p></p>
<p class="MsoNormal">HTML dosyaları .html uzantısı ile kaydedilirken, CSS
dosyaları .css uzantısını kullanır. CSS, HTML içinde <style> etiketleri
ile yerleştirilebilir veya ayrı bir dosya olarak bağlanabilir.<o:p></o:p></p>
<p class="MsoNormal">Farklı tarayıcıların aynı kodu farklı şekillerde
yorumlayabileceğini unutmayın. Bu nedenle, sitenizin tüm büyük tarayıcılarda
düzgün çalıştığından emin olmak için test yapın.<o:p></o:p></p>
<p class="MsoNormal"><b>Pratik Yaparak Öğrenme<o:p></o:p></b></p>
<p class="MsoNormal">Teorik bilgiyi pratiğe dökerek öğrenmek, web geliştirme
becerilerinizi hızla geliştirir. İşte pratik yapabileceğiniz bazı yöntemler:<o:p></o:p></p>
<p class="MsoListParagraphCxSpFirst" style="margin-left:14.2pt;mso-add-space:
auto;text-indent:-14.2pt;mso-list:l0 level1 lfo1"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:
Symbol">·<span style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 7pt; line-height: normal; font-family: "Times New Roman";">
</span></span><!--[endif]-->Kendi blog sitenizi, portföyünüzü veya basit bir
oyun gibi projeleri oluşturun.<o:p></o:p></p>
<p class="MsoListParagraphCxSpLast" style="margin-left:14.2pt;mso-add-space:auto;
text-indent:-14.2pt;mso-list:l0 level1 lfo1"><!--[if !supportLists]--><span style="font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:
Symbol">·<span style="font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-alternates: normal; font-size-adjust: none; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-variant-position: normal; font-stretch: normal; font-size: 7pt; line-height: normal; font-family: "Times New Roman";">
</span></span><!--[endif]-->Beğendiğiniz bir web sitesini kopyalayarak
tasarım ve yapıyı anlamaya çalışın.<o:p></o:p></p>
<h3><b>İleri Düzey HTML ve CSS Konuları</b></h3>
<p class="MsoNormal"><b>Responsive Tasarım</b>: Farklı cihazlarda iyi görünen web
siteleri oluşturmak için medya sorgularını ve esnek düzen tekniklerini
kullanın.<o:p></o:p></p>
<p class="MsoNormal"><b>CSS Grid ve Flexbox</b>: Kompleks düzenleri daha kolay
bir şekilde oluşturmak için bu güçlü düzenleme araçlarını öğrenin.<o:p></o:p></p>
<p class="MsoNormal"><b>Animasyonlar ve Geçişler</b>: Web sitenizi daha dinamik
ve etkileşimli hale getirmek için CSS animasyonları kullanın.<o:p></o:p></p>
<p class="MsoNormal">Web teknolojileri sürekli gelişmektedir. Bu yüzden, yeni
trendleri ve en iyi uygulamaları takip etmek önemlidir. Blogları okumak,
forumlara katılmak ve sürekli pratik yapmak, bilgilerinizi güncel tutmanın
harika yollarıdır.<o:p></o:p></p>
<p class="MsoNormal">HTML ve CSS, web geliştirmenin temel taşlarıdır. Yukarıdaki
yazımızda, temel kavramlardan ileri düzey konulara kadar birçok başlık ele
alınmıştır. Öğrenme sürecinizi daha etkili kılmak için sürekli pratik yapın,
kaynakları takip edin ve kendi projelerinizi oluşturmaktan çekinmeyin. <o:p></o:p></p>
<span style="font-size:11.0pt;line-height:115%;font-family:"Calibri",sans-serif;
mso-ascii-theme-font:minor-latin;mso-fareast-font-family:Calibri;mso-fareast-theme-font:
minor-latin;mso-hansi-theme-font:minor-latin;mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;mso-ansi-language:TR;mso-fareast-language:EN-US;
mso-bidi-language:AR-SA">Web sitesi hizmeti için bizimle <a href="https://www.timsahajans.com.tr/" target="_blank"><b>https://www.timsahajans.com.tr/</b></a>
adresinden bizimle iletişime geçebilirsiniz.</span></p>
</div>
<div class="social-media-area-share-widget mb-5 mt-5">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_button_linkedin"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_button_email"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
</div>
</div>
<div class="col-md-4">
<div class="blog-sidebar">
<div class="sidebar-box ">
<div class="sidebar-heading">POPÜLER YAZILAR</div>
<div class="blog-box-mini">
<a href="https://www.timsahajans.com.tr/instagram-hesabi-bot-ve-olu-hesaplardan-nasil-temizlenir/" class="blog-image">
<img src="data/uploads/instagram-hesabi-bot-ve-olu-hesaplardan-nasil-temizlenir.png" alt="Instagram Hesabı Bot ve Ölü Hesaplardan Nasıl Temizlenir?">
</a>
<div class="text-inner">
<a href="https://www.timsahajans.com.tr/instagram-hesabi-bot-ve-olu-hesaplardan-nasil-temizlenir/" class="title">
Instagram Hesabı Bot ve Ölü Hesaplardan Nasıl Temizlenir?
</a>
<div class="stats">
<div class="date">03 Eylül 2020</div>
<div class="status comment"><span class="icon-comment icon"></span> <span class="text">0</span></div>
<div class="status seen"><span class="icon-eye icon"></span> <span class="text">32829</span></div>
</div>
</div>
</div>
<div class="blog-box-mini">
<a href="https://www.timsahajans.com.tr/dijital-icerik-ureticisi-nedir-4-adimda-dijital-icerik-uretimi" class="blog-image">
<img src="data/uploads/507448525_dijital_icerik_ureticisi_nedir_4_adimda_dijital_icerik_uretimi.jpg" alt="Dijital İçerik Üreticisi Nedir? 4 Adımda Dijital İçerik Üretimi">
</a>
<div class="text-inner">
<a href="https://www.timsahajans.com.tr/dijital-icerik-ureticisi-nedir-4-adimda-dijital-icerik-uretimi" class="title">
Dijital İçerik Üreticisi Nedir? 4 Adımda Dijital İçerik Üretimi
</a>
<div class="stats">
<div class="date">21 Eylül 2022</div>
<div class="status comment"><span class="icon-comment icon"></span> <span class="text">0</span></div>
<div class="status seen"><span class="icon-eye icon"></span> <span class="text">16323</span></div>
</div>
</div>
</div>
<div class="blog-box-mini">
<a href="https://www.timsahajans.com.tr/grafiker-ve-grafik-tasarimcisi-arasindaki-fark/" class="blog-image">
<img src="data/uploads/Instagram-paylaşımlarıyla-ana-sayfanızı-renklendirecek-tasarımcı-hesapları.jpg" alt="Grafiker ve Grafik Tasarımcısı Arasındaki Fark">
</a>
<div class="text-inner">
<a href="https://www.timsahajans.com.tr/grafiker-ve-grafik-tasarimcisi-arasindaki-fark/" class="title">
Grafiker ve Grafik Tasarımcısı Arasındaki Fark
</a>
<div class="stats">
<div class="date">02 Mart 2020</div>
<div class="status comment"><span class="icon-comment icon"></span> <span class="text">0</span></div>
<div class="status seen"><span class="icon-eye icon"></span> <span class="text">14407</span></div>
</div>
</div>
</div>
<div class="blog-box-mini">
<a href="https://www.timsahajans.com.tr/gorsel-mail-imza-ekleme-ve-link-verme/" class="blog-image">
<img src="data/uploads/outlook-kpk.jpg" alt="Görsel Mail İmza Ekleme ve Link Verme">
</a>
<div class="text-inner">
<a href="https://www.timsahajans.com.tr/gorsel-mail-imza-ekleme-ve-link-verme/" class="title">
Görsel Mail İmza Ekleme ve Link Verme
</a>
<div class="stats">
<div class="date">01 Haziran 2021</div>
<div class="status comment"><span class="icon-comment icon"></span> <span class="text">0</span></div>
<div class="status seen"><span class="icon-eye icon"></span> <span class="text">11241</span></div>
</div>
</div>
</div>
<div class="blog-box-mini">
<a href="https://www.timsahajans.com.tr/javascript-nedir-javascript-kullanim-alanlar-nelerdir/" class="blog-image">
<img src="data/uploads/javascript-nedir-javascript-kullanim-alanlar-nelerdir.jpg" alt="JavaScript Nedir? JavaScript Kullanım Alanlar Nelerdir?">
</a>
<div class="text-inner">
<a href="https://www.timsahajans.com.tr/javascript-nedir-javascript-kullanim-alanlar-nelerdir/" class="title">
JavaScript Nedir? JavaScript Kullanım Alanlar Nelerdir?
</a>
<div class="stats">
<div class="date">20 Temmuz 2020</div>
<div class="status comment"><span class="icon-comment icon"></span> <span class="text">0</span></div>
<div class="status seen"><span class="icon-eye icon"></span> <span class="text">11026</span></div>
</div>
</div>
</div>
</div>
<div class="sidebar-box categories">
<div class="sidebar-heading">Kategoriler</div>
<a href="https://www.timsahajans.com.tr/blog-kategori/genel/"> <i class="fas fa-caret-right"></i>Genel (799) </a>
</div>
<div class="instagram-widget">
<div class="row no-gutters">
<div class="col">
<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/967450" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
</div>
</div>
<div class="text-right mt-4">
<a href="https://www.instagram.com/timsahajans/" target="_blank" class="follow-button">
<i class="fab fa-instagram"></i> Takip Et
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
@media (max-width: 745px) {
.blog-post-conten img {
width: 100%;
height: auto;
}
}
</style>
<script>
function commentAnswer(id)
{
$('#parent_comment').val(id);
$('html,body').animate({
scrollTop: $(".comment-form").offset().top},
'slow');
$('#commentText').focus();
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="insta-section">
<a href="https://www.instagram.com/timsahajans/" target="_blank" class="follow-link">TAKİP ET @timsahajans</a>
<div class="row no-gutters">
<div class="col">
<!-- SnapWidget -->
<iframe src="https://snapwidget.com/embed/967447" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:2235px; height:413px"></iframe>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="description-box">
<a href="https://www.timsahajans.com.tr/" class="logo">
<img src="views/default/img/logo_beyaz.svg" alt="Timsah Ajans">
</a>
<p class="company-name">Timsah Ajans Reklam Yazılım <br>
Bilişim Hizmetleri San. ve Tic. Ltd. Şti.</p>
<p class="light">
Timsah Ajans olarak güncel teknolojileri takip ederek firmaların ihtiyaçları doğrultusunda hizmet sunan bir firmayız. Sektörde güvenilirliğini ve kalitesini kanıtlamış bir firma olarak yüksek referans sayısı ile ulusal ve uluslararası pek çok firmaya danışmanlık hizmeti veriyoruz. Genç, dinamik ve alanında uzman kadromuzla 18 yıllık deneyimimizi birleştirerek müşterilerimize ihtiyaç duydukları tüm hizmetleri sağlıyoruz. Müşterilerimize en iyi ve kaliteli hizmeti vermek için çalışıyoruz.
</p>
</div>
</div>
<div class="col-md-auto ml-md-auto">
<div class="link-container">
<div class="footer-heading">
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/">Hizmetlerimiz</a>
</div>
<div class="footer-link">
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/seo-danismanligi/"> SEO Danışmanlığı</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/web-tasarim/"> Web Tasarım</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/grafik-tasarim"> Grafik Tasarım</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/kurumsal-kimlik-calismasi"> Kurumsal Kimlik Çalışması</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/ui"> UI</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/mobil-uygulama"> Mobil Uygulama</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/e-ticaret/"> E-Ticaret Danışmanlığı</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/yazilim"> Yazılım</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/sosyal-medya-yonetimi/"> Sosyal Medya Yönetimi</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/dijital-pazarlama"> Dijital Pazarlama</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/video-animasyon"> Video & Animasyon</a>
<a href="https://www.timsahajans.com.tr/hizmetlerimiz/marka-itibar-yonetimi"> Marka ve İtibar Yönetimi</a>
</div>
</div>
</div>
<div class="col-auto ml-md-auto">
<div class="contact-box">
<div class="footer-heading">
<a href="https://www.timsahajans.com.tr/iletisim/">İletişim Bilgilerimiz</a>
</div>
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="icon-mail icon"></span>
</div>
<div class="col">
<a href="mailto:info@timsahajans.com.tr">info@timsahajans.com.tr</a>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="icon-phone icon"></span>
</div>
<div class="col">
<a href="tel:+902162322324">+902162322324</a>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="icon-phone icon"></span>
</div>
<div class="col">
<a href="tel:+902162322325">+902162322325</a>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-auto">
<span class="icon-location icon"></span>
</div>
<div class="col">
<a target="_blank" href="https://goo.gl/maps/2378cXkSuD6jePpu7">
<p>Bumerang Kartal Rezidans. Soğanlık Yeni Mah.<br>
Aliağa Sokak No:8 D:21 PK: 34880<br>
Kartal - İSTANBUL</p></a>
</div>
</div>
</div>
<div class="social-media-area">
<a href="https://www.instagram.com/timsahajans/" target="_blank" class="ml-0"><img src="views/default/img/instagram_beyaz.svg" > </a>
<a href="https://www.facebook.com/timsahajans/" target="_blank"><img src="views/default/img/facebook_beyaz.svg" ></i></a>
<a href="https://twitter.com/timsahajans/" target="_blank"><img src="views/default/img/twitter_beyaz.svg" ></a>
<a href="https://www.youtube.com/channel/UCqtrlLdyM8Jf5RXIVoX3E7w/videos?view=0&sort=dd&shelf_id=0" target="_blank"><img src="views/default/img/youtube_beyaz.svg" ></a>
<a href="https://www.linkedin.com/company/timsah-ajans/" target="_blank"><img src="views/default/img/linkedin_beyaz.svg" ></a>
</div>
</div>
</div>
</div>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-auto">
<a href="https://www.timsahajans.com.tr/gizlilik-politikasi/">Gizlilik Politikası</a>
<a href="https://www.timsahajans.com.tr/kvkk/">KVKK</a>
<a href="https://www.timsahajans.com.tr/kullanim-kosullari/">Kullanım Koşulları</a>
<a href="https://www.timsahajans.com.tr/cerez-politikasi/">Çerez Politikası</a>
</div>
<div class="col-md-auto ml-md-auto">
<p>Copyright © <a class="footer2" href="https://www.timsahajans.com.tr/" target="_blank" >Timsah Ajans</a> </p>
</div>
</div>
</div>
</div>
<script src="views/default/js/jquery-3.5.1.min.js"></script>
<script src="views/default/js/bootstrap.bundle.min.js"></script>
<script src="views/default/js/swiper-bundle.min.js"></script>
<script src="views/default/js/isotope.pkgd.min.js"></script>
<script src="views/default/js/jquery.enllax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
<script src="views/default/js/site.js"></script>
<script>
$(document).ready(function(){
var $grid = $('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
$('.filter-portfolio').click(function(){
filterItem = $(this).attr('data-filter');
$grid.isotope({ filter: filterItem })
});
});
</script>
<script type="text/javascript" src="https://cookieconsent.popupsmart.com/src/js/popper.js"></script><script> window.start.init({Palette:"palette2",Mode:"floating right",Theme:"classic",Location:"https://www.timsahajans.com.tr/cerez-politikasi/",LinkText:"okumak için tıklayın.",Message:"Sitemizin, çalışması için çerezler kullanılmaktadır. Site üzerinde kullanılan çerezler hakkında detaylı bilgi almak için Çerez Politikası’nı incelemenizi rica ederiz.",ButtonText:"Kabul Et",Time:"3",})</script>
</body>
</html> 
