Merhabalar, bu yazımda VSC Extension’larından Emmet’i anlatmaya çalışacağım.
Emmet, Html ve CSS iş akışını büyük ölçüde geliştiren, biz web geliştiricilerinin sıklıkla kullandığı, kodları daha hızlı yazıp zamandan tasarruf etmek için tercih ettiğimiz bir eklentidir.
Emmet’in temel mantığı, yazılımcıya kodlama yaparken zaman kazandırmasıdır. Bu yüzden çoğu yazılımcı text editöründe Emmet eklentisini kullanır.
Emmet VS Code’a entegre şekilde default bir extension olarak gelir. Ayrıca kurulum gerektirmez.
Visual Studio Code kurulu değilse aşağıdaki linkten yararlanarak bu kurulumu yapabilirsiniz.
Emmet’in sayfasına giderek özelliklerini ve dokümantasyonunu inceleyebilirsiniz.
Emmet ile yapabileceklerimize kısaca bir göz atalım.
Bir Html sayfası açtığımızda Html sayfasının ana yapısı şu şekildedir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Bu yapıyı Emmet sayesinde şu şekilde oluşturabilirsiniz.
Bir Html sayfası oluşturun ve en başa ! işareti koyup Tab tuşuna basın. Sizin için bu yapıyı hızlıca oluşturacaktır.
Sayfa içinde kullanabileceğimiz pek çok Tag vardır. Bu Tag’lerin oluşturulma anında mutlaka olması gereken attribute’ları ve bir yapısı vardır. Bunun hızlı oluşturulabilmesi için yapmanız gereken tek şey Tag’in ismini yazıp Tab’a basmaktır.
a yazın ve Tab’a basınız. Aşağıdaki yapının otomatik oluştuğunu görürsünüz. Bu şekilde tüm Tag’leri oluşturabilirsiniz.
<a href=""></a>Html dosyaları iç içe yazılan Tag’ler ile oluşur. Tüm yapı içinde iç içe Tag’leri kullanabilmek için > işaretini kullanabilirsiniz.
<nav>
<ul>
<li></li>
</ul>
</nav>Bu yapıyı oluşturmak için yapmanız gereken tek şey şudur.
nav>ul>li yazıp Tab'a basmaktır.Etiketleri iç içe değil de birbirinden bağımsız olarak oluşturmak istersek + işaretini kullanabilirsiniz.
<div></div>
<p></p>
<blockquote></blockquote>Yukarıdaki yapıyı oluşturmak için yapmanız gereken şudur.
div+p+bq yazıp Tab'a basınız.Aynı etiketten örneğin 20 tane üretmeniz gerekiyor bunun için yapmanız gereken etiketadı * adet olacaktır.
li*5 yazıp Tab’a basarsanız. Alt alta 5 tane li etiketi üretir.
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>Aşağıdaki yapıyı oluşturmak için yapmanız gereken şudur.
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>div>(header>ul>li*2>a)+footer>pHtml ve CSS için bu şekilde bir çok kodlamamızı kolaylaştıracak Emmet kısa yolları vardır.
Bunları aşağıda paylaştığım Cheat Sheet’den bakabilirsiniz.
https://docs.emmet.io/cheatsheet-a5.pdf
Bir sonraki yazımda görüşmek üzere.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…
View Comments