HTML 5’e Giriş
Hakan Dagli
Merhaba, bugün ki bloğumuzun konusu web geliştirmenin olmazsa olmaz bir parçası olan HTML. Şu an için neredeyse tüm tarayıcıların desteklediği ve en gelişmiş olan versiyon olan 5. versiyonunu anlatmaya çalışacağım. Blog bittikten sonra Html 5'i temel olarak öğrenmiş olacaksınız. Geri kalan kısmı da ilerleyen bloglarda sizlerle paylaşacağım. Hepsini okuduğunuzda "ben de Html 5 biliyorum" diyebileceksiniz :D.
Bu blogdan sonra gelmesini planladığım blog başlıkları; "Html Semantic Elements", "Html Table" ,"Html 5 Forms", "Css3", "Css Display: Flex özelliği", "Bootstrap". Böylelikle Front'end Developer olmak isteyen biri olarak sayfaların tasarımını nasıl yapılacağını bu bloglarla öğrenmiş olacaksınız.
HTML 5 Nedir?
Öncelikle HTML'in açılımından bahsedelim "Hyper Text Markup Language" yani Türkçesi "Hiper Metin İşaretleme Dili". Adından da anlaşılacağı üzere bir programlama dili değil işaretleme-biçimlendirme dilidir. "Web sayfalarımızın ön yüzdeki iskeletini oluşturan yapıdır" dersek aslında birçok şeyi açıklamış oluruz. Web sayfaları oluşturmak için standart biçimlendirme dili HTML'dir. HTML, CSS ve JS teknolojileri ile birlikte web sayfalarımızın ön yüzlerini oluşturan temel şeylerdir.
Html tarihçesi
TML, CERN'de müteahhit olarak çalışan Tim Berners-Lee tarafından 80'li yıllarda geliştirilen, 90'lı yıllarda ise adının konduğu bir web standardıdır. Tim Berners-Lee aynı zamanda açılımı World Wide Web Consortium olan W3C'nin de kurucusudur.
HTML de tek başına görsel olarak bir şey ifade etmiyordu. 96 yılının sonunda CSS'in ilk sürümü yayınlandı ve artık siteler görsel olarak daha kullanışlı ve esnek bir hâle geldi.
HTML geliştikçe gelişti ve yıllar geçtikçe CSS'in yeni özellikleri ile birlikte dördüncü sürüme kadar geldi. HTML 4 her ne kadar yeterli gibi gözükse de CSS ile yazılan fazladan kodlar hatalara sebep oluyordu ve bunu önlemek için HTML 5 geliştirildi.
1- Html 5 giriş
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Html sayfalarının temel yapısı yukarıdaki gibidir. Bu arada ben editör olarak "Visual Studio Code" kullanmayı tercih ediyorum. Geniş extension havuzu açısından birçok teknoloji ile uyumlu bir editör size de öneririm. Kod olarak belirttiğim yerleri html uzantılı bir dosyada kaydedip, herhangi bir taracıyla açarak siz de test edebilirsiniz.
Element
Bir HTML elementi, bir başlangıç etiketi, bir miktar içerik ve bir bitiş etiketi ile tanımlanır.
Burada "< > " içerisine yazılan yapıya tag (etiket) denir. Html sayfası elementlerden-etiketlerden meydana gelmektedir.
Doctype Declaration
Doctype bir HTML etiketi değildir. Bu, tarayıcıya isminden de anlaşılacağı üzere (Document Type) hangi belge türünün bekleneceği hakkında bir bilgi vermek için tanımlanır.
Doctype tanımlanırken sayfa kodlarının en üst bölümünde yer alması gerekmektedir.
Head
Head kısmında ise sayfalarımızın görsel olarak düzenlemesinde kullandığımız css dosyaları, sayfalarımıza dinamik hale getiren javascript dosyaları, arama motoru optimizasyonu sağlayan etiketler, telefon ve tablet ekranlarına duyarlı bir tasarım olmasını sağlayan etiketler, yazı stili, iconlar gibi birçok şeyi tanımladığımız kısımdır.
Head içerisine tanımladığımız bazı temel html etiketleri;
Title Element
<title> öğesi, belgenin başlığını tanımlar. Başlık salt metin olmalıdır ve tarayıcının başlık çubuğunda veya sayfa sekmesinde gösterilir.
<title> öğesi HTML belgelerinde gereklidir!
Bir sayfa başlığının içeriği, arama motoru optimizasyonu (SEO) için çok önemlidir! Sayfa başlığı, arama sonuçlarında sayfaları listelerken sıraya karar vermek için arama motoru algoritmaları tarafından kullanılır.
Link Element
<link> öğesi, geçerli belge ile bir dış kaynak arasındaki ilişkiyi tanımlar.
Etiket <link>, çoğunlukla harici stil sayfalarına bağlanmak için kullanılır.
Style Element
Öğe , <style>tek bir HTML sayfası için stil bilgilerini tanımlamak için kullanılır.
Meta Element
<meta> öğesi tipik olarak karakter setini, sayfa açıklamasını, anahtar sözcükleri, belgenin yazarını ve görüntü alanı ayarlarını belirtmek için kullanılır.
Meta veriler sayfada görüntülenmez, ancak tarayıcılar (içeriğin nasıl görüntüleneceği veya sayfanın nasıl yeniden yükleneceği), arama motorları (anahtar kelimeler) ve diğer web hizmetleri tarafından kullanılır.
Comment – Yorum
Aşağıdaki sözdizimini kullanarak HTML kaynağınıza yorum ekleyebilirsiniz:
Kod:
<!-- Buraya commentlerinizi yazabilirsiniz -->
Örnek Head Elementi Kodu:
<head>
<!--Meta Tags-->
<!--Kullanılan karakter setini tanımlayın:-->
<meta charset="UTF-8">
<!-- Arama motorları için anahtar kelimeleri tanımlayın:-->
<meta name="keywords" content="HTML, CSS, JavaScript, arksoft, devteam">
<!--Web sayfanızın bir açıklamasını tanımlayın:-->
<meta name="description" content="Arksoft devTeam front-end blogları">
<!--Sayfanın yazarını tanımlayın:-->
<meta name="author" content="Hakan Dağlı">
<!--Web sitenizin tüm cihazlarda iyi görünmesini sağlamak için görünüm alanını ayarlama:-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arksoft devTeam</title>
<link rel="stylesheet" href="mystyle.css">
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
Body
Body kısmı ise sitenin içeriğinin barındığı kısımdır diyerek özetleyebiliriz. Yani metinler, linkler, resimler, formlar, inputlar, butonlar gibi kullanıcının gördüğü ve etkileşime geçtiği şeyler burada tanımlanır.
2- Basic HTML tags - temel html etiketleri
<h1-h6> Heading - Başlık Etiketleri
Sayfamızda başlık eklemek istediğimizde kullandığımız bir etikettir. Arama motoru optimizasyonunun kötü etkilenmemesi için dikkatli kullanılmalıdır. Çok fazla kullanmak olumsuz yönde etkileyecektir. H1 etiketinin bir html sayfasında 1 tane olmasına dikkat edilmelidir. Etiketlerin kullanım sayısı azdan çoğa h1-h2-h3-h4-h5-h6 şeklinde olmalıdır.
Kod:
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>
<p> Paragraphs – Paragraf etiketi
Paragraf her zaman yeni bir satırda başlar ve genellikle bir metin bloğudur.
Kod:
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga blanditi
dicta perferendis odit reprehenderit culpa temporibus in quidem, atque aut?
</p>
Formating - Metin Formatlama
Css koduna ihtiyaç duymadan sayfa üzerindeki metinlerimizin formatını değiştirebiliriz. Önemli bir kelimeyi daha kalın yazmak, ya da üzerini çizmek gibi birçok şeyi html5 destekliyor.
-Strong metnin yazı fontunu bold yapar. <b></b> etiketi de aynı işlevi görür.
-Em metni italik-eğik yapar. <i></i> etiketi de aynı işlevi görür.
-Small metnin font-size'ını küçültür.
-Mark metni vurgulamak için arka planını boyar.
-Del metnin üzerini çizer.
-Sub metnin pozisyonu varsayılanın daha aşağısında olur.
-Sup metnin pozisyonu varsayılanın daha yukarısında olur.
Kod:
<strong>Hakan</strong>
<em>Hakan</em>
<small>Hakan</small>
<mark>Hakan</mark>
<del>Hakan</del>
<ins>Hakan</ins>
<sub>Hakan</sub>
<sup>Hakan</sup>
<a> Links – Bağlantı Etiketi ve Element Attribute Kavramı
Kod:
<a href="https://www.youtube.com/" target="_blank">youtube.com</a>
Html etiketleri içerisinde o etiketin desteklediği attribute'ler (nitelikler-özellikler) olabilir. A etiketi link vermek için kullandığımız bir etikettir. Burada "href" özelliği linkin adresini, "_blank" değerini verdiğimiz "target" ise linkin yeni sekmede açılacağını belirtiyor. "Tag"lar arasında yazdığımız kısım ise tarayıcıda bizim gördüğümüz ve tıkladığımız kısmı oluşturuyor.
Link Bookmark
Html elementlerine class ve id tanımlaması yapabiliriz. Css bloglarımızda da sıkça örneği göreceğiz. Bir tag'a vereceğimiz ad'yi "a" etiketinin href attribute'unda tanımlayarak sayfa içerisinde yönlendirme yapabiliriz.
Kod:
<a href="#home">Home'a git</a>
<div id="home">home</div>
<img> image – resim etiketi
Kod:
<img src="./images/fatihterim.png" alt="fatih terim resmi">
<img src="https://cdn.sporx.com/img/59/2022/terr-1643439434.jpg"
alt="fatih terim resmi">
"img" etiketi sayfa içerisine resim eklemek istediğimiz zaman kullandığımız bir etikettir. "Src" resmin-dosyanın kaynağını tanımladığımız kısımdır. İlk satırda olduğu gibi projemizin dosya dizinindeki bir resmi veya ikinci satırda olduğu gibi resmin bulunduğu bağlantı adresini verebiliriz.
Alt kısmı ise resmin yüklenemediği durumlarda gözükecek metni belirttiğimiz yerdir. Ayrıca görme engelli kişilerin web içerisinde gezindiklerinde sesli olarak tanımlanacağı için erişilebilirlik için de önemli olduğunu söyleyebiliriz. İmg etiketine Width, height gibi özelliklerde verilebilir ama onu css ile vermemiz daha doğru olacaktır. İlerleyen yazılarımda detaylı bir şekilde css göreceğiz.
Html list - liste
Kod:
<ul>
<li>Yerel Başarılar</li>
<ul>
<li>8 Türkiye Lig Şampiyonluğu</li>
<li>3 Türkiye Kupası</li>
<li>4 Türkiye Süper kupası</li>
</ul>
<li>Global Başarılar</li>
<ul>
<li>1 Uefa Avrupa Ligi Şampiyonluğu</li>
</ul>
</ul>
Ul etiketi içerisine listemizin maddelerini li etiketi içerisinde tanımlarız. Buradaki gibi sırasız olarak kullanmak istiyorsak <ul></ul> etiketlerini, yada numara ile sıralamak istiyorsak <ol></ol> etiketini kullanabiliriz. Sıranın kaçıncı sayıdan başlasını istiyorsak "start" özelliğine bir sayı vererek bunu sağlayabiliriz.
Kod:
<ol>
<li>Orhan Gencebay</li>
<li>Müslüm Gürses</li>
<li>Neşet Ertaş</li>
</ol>
<video> <audio> - video ve ses etiketleri
Kod:
<video src="./videos/ornekvideo.mp4" controls autoplay></video>
Src video kısayolunu belirttiğimiz kısımdır. "controls" videoyu oynatma, ilerletme, süresini görme, sesini ayarlama gibi butonların gösterilip gösterilmeyeceğini belirttiğimiz özelliktir. "autoplay" ise sayfa açıldığında videonun otomatik oynatılmasını sağlar.
<iframe> etiketi
Kod:
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
Sayfa içerisine başka bir web sayfası koymamızı sağlar. "src" kısmına dilediğiniz web sayfasını koyarak deneyebilirsiniz. Genel kullanım örneği verecek olursak Google-maps'den konumu göstermek için kullanılır diyebiliriz.
"block" ve "inline" elements
Html taglarının bazı özellikleri default olarak tanımlanır. Bu default olarak tanımlanan özellikler o etiketin sayfa içerisindeki görüntüsünü, ve özelliğini belirler. Her elementte varsayılan olarak tanımlı bir özellikten bahsedeceğim "display" özelliği.
Bazı etiketlerde bu özelliğin değeri default olarak "block", bazılarında ise default olarak "inline"dır. Bunları kısaca açıklamak gerekirse daha önce gördüğümüz p etiketi "block" elementdir ve sayfada tanımlı olduğu yerin tamamını kaplar. Yani p etiketini kapattıktan sonra kullanacağımız metin veya "tag" artık alt satırdan başlamak zorundadır. "inline" özelliğe sahip etiketler ise örneğin a etiketi sadece içeriği kadar alan kaplar. "A" etiketinin bitiminde ikinci bir etiket ya da metin tanımlamak istersek, yanında boş yer varsa orada tanımlı olacaktır.
<div> ve <span> etiketleri
"Div" etiketi en çok karşılaşacağımız etiket diyebiliriz. İsmi "division"dan geliyor. En temel özelliği ise display özelliğinin "block" olmasıdır ve arama motorlarının sevdiği bir etikettir. Paragraf, article gibi bir kalıba sokamayacağımız şeyleri tanımlarken, özellikle web uygulaması geliştirirken daha rahat "style" vermemizi sağlayan, en temel html etiketlerinden biridir.
"Span" etiketi ise display özelliğinin inline olmasını istediğimiz durumlarda sıkça kullandığımız bir etiketdir.
Symbols
Bir HTML sayfasına semboller eklemek için, sembol için varlık adını veya varlık numarasını (ondalık veya onaltılık referans) kullanabilirsiniz.
Kod:
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
Emojis
Aynı özel karakter tanımladığımız gibi "😀" emojide tanımlayabiliriz. Emoji ve özel karakterlerin tam listesini https://www.w3schools.com/ adresinden bulunuz.
Final
Bugün temel olarak html'i öğrenebileceğiniz bir doküman oluşturmaya çalıştım. Çok fazla detaya girmeden temel şeyleri öğrenebileceğiniz Türkçe güncel bir kaynak oluşturmaya çalıştım. Bloğumu oluştururken udemy eğitimlerinden, web deki çeşitli sayfalardan ve size de tavsiye edeceğim https://www.w3schools.com/ ve https://developer.mozilla.org/ sitelerinden yararlandım. İsterseniz daha fazla detay için bu sayfaları inceleyebilirsiniz, html için w3schools u özellikle öneririm. Bir sonraki html ile ilgili planladığım blog başlıkları ise şöyle
1- Temel Html 2- Html Tables
3- Html Forms 4- Html Semantic Elements and SEO
Gelecek yazılarda görüşmek üzere…
Öneri ve görüşleriniz için buradan ulaşabilirsiniz:
Hakan DAĞLI
Last updated