HTML ile ilgili temel bilgiler – Özcan BAYRİ
Twitter, iOS kullanıcıları için yeni bir uygulama simgesi ve açılış ekranını test ediyor
Black Spot: Bu Orman Canlı!
Unit 42 Dizisinin Konusu ve Oyuncuları
Açılıştan Önce Önemli Fırsat! Davet Ettiğin Herkes için 20 TL Değerinde KOIN Kazan!
Yoast SEO vs Rank Math SEO Karşılaştırma Hangisi Daha İyi
WordPress Siteleri İçin En İyi Canlı Destek (Sohbet) Eklentileri
Diğer Sosyal Medya Platformları
A’dan Z’ye CSS
Reklamsız Film İzle
İnstagram Foto & Video İndirme
İnstagram ID Bulucu
Online Web Proxy (VPN)
Web Tasarım'a Başlarken
HTML ile ilgili temel bilgiler
Özcan BAYRİ, 3 ay ago 0 6 min read
Bir Önceki Ders : Web Tasarım’da Dosyalarla İlgilenmek
HTML ( lH yper t dahili M arkup L anguage) bir web sayfasını ve içerik yapısı için kullanılan bir koddur. Örneğin, içerik bir paragraflar kümesi, madde işaretli noktalar listesi veya resimler ve veri tabloları kullanılarak yapılandırılabilir. Başlıktan da anlaşılacağı gibi, bu makale size HTML ve işlevleri hakkında temel bir bilgi verecektir.
Peki HTML nedir?
HTML bir programlama dili değildir; içeriğinizin yapısını tanımlayan bir biçimlendirme dilidir . HTML, belirli bir şekilde görünmesini sağlamak veya belirli bir şekilde davranmak için içeriğin farklı bölümlerini örtmek veya sarmak için kullandığınız bir dizi öğeden oluşur . Çevreleyen etiketler başka bir yere bir kelime veya görüntü köprüsü yapabilir, kelimeleri italik hale getirebilir, yazı tipini büyütebilir veya küçültebilir vb. Örneğin, aşağıdaki içerik satırını alın:
My cat is very grumpy
Çizginin kendi başına kalmasını isteseydik, paragrafın paragraf etiketlerine ekleyerek bir paragraf olduğunu belirtebiliriz:
<p>My cat is very grumpy</p>
HTML öğesinin anatomisi
Bu paragraf öğesini biraz daha inceleyelim.
Öğemizin ana bölümleri aşağıdaki gibidir:
Açılış etiketi: Bu, açılış ve kapanış açılı parantez içine alınmış öğenin adından (bu durumda p) oluşur . Bu, öğenin nerede başladığı veya etkili olmaya başladığını belirtir – bu durumda paragrafın başladığı yer.
Kapanış etiketi: Bu, öğe adından önce eğik çizgi içermesi dışında açılış etiketi ile aynıdır . Bu, öğenin nerede bittiğini belirtir – bu durumda paragrafın nerede bittiği. Kapatma etiketi eklenememesi, standart başlangıç ​​hatalarından biridir ve garip sonuçlara yol açabilir.
İçerik: Bu, yalnızca metin olan öğenin içeriğidir.
Öğe: Açılış etiketi, kapanış etiketi ve içerik birlikte öğeyi oluşturur.
Öğeler ayrıca aşağıdakilere benzer niteliklere sahip olabilir:
Özellikler, gerçek içerikte görünmesini istemediğiniz öğe hakkında ek bilgiler içerir. Burada, classöznitelik adı ve editor-noteöznitelik değeridir . classÖzniteliği elemanının stil bilgisi ve diğer şeylerle elemanı hedeflemek için daha sonra kullanılabilir bir tanımlayıcı yapmamızı sağlar.
Bir özellik her zaman aşağıdakilere sahip olmalıdır:
Bu öğe ile öğe adı (veya öğenin zaten bir veya daha fazla niteliği varsa önceki özellik) arasındaki boşluk.
Özellik adı ve ardından eşittir işareti.
Tırnak işaretlerini açıp kapatarak öznitelik değeri.
Not : ASCII boşluk (veya karakterlerden herhangi biri " ' ` = < >) içermeyen basit özellik değerleri tırnaksız kalabilir, ancak kodu daha tutarlı ve anlaşılır hale getirdiği için tüm özellik değerlerini alıntılamanız önerilir.
Öğeleri diğer öğelerin içine de koyabilirsiniz – buna yuvalama denir . Kedimizin çok huysuz olduğunu belirtmek istersek, “çok” kelimesini bir <strong>öğeye sarabiliriz, bu da kelimenin güçlü bir şekilde vurgulanması gerektiği anlamına gelir:
<p>My cat is <strong>very</strong> grumpy.</p>
Bununla birlikte, öğelerinizin doğru şekilde yuvalandığından emin olmanız gerekir. Yukarıdaki örnekte, önce <p>öğeyi sonra öğeyi açtık <strong>; bu yüzden önce <strong>elemanı sonra da <p>elemanı kapatmalıyız . Aşağıdakiler yanlış:
<p>My cat is <strong>very grumpy.</p></strong>
Elemanlar, açıkça birbirlerinin içinde veya dışında olacak şekilde doğru bir şekilde açılıp kapanmalıdır. Yukarıda gösterildiği gibi çakışırlarsa, web tarayıcınız söylemeye çalıştığınız şeyi en iyi şekilde tahmin etmeye çalışır ve bu da beklenmedik sonuçlara yol açabilir. Öyleyse yapma!
Bazı öğelerin içeriği yoktur ve boş öğeler olarak adlandırılır . <img>HTML sayfamızda zaten bulunan öğeyi alın :
<img src="images/website-icon.png" alt="My test image">
Bu iki özellik içerir, ancak kapanış </img>etiketi ve iç içerik yoktur. Bunun nedeni, bir görüntü öğesinin onu etkilemek için içeriği sarmamasıdır. Amacı, görüntüyü HTML sayfasına göründüğü yere yerleştirmektir.
Bir HTML belgesinin anatomisi
Bu, tek tek HTML öğelerinin temellerini tamamlar, ancak kendi başlarına kullanışlı değildir. Şimdi tek bir öğenin tüm HTML sayfasını oluşturmak için nasıl birleştirildiğine bakacağız. index.htmlÖrneğimize koyduğumuz kodu (ilk olarak Dosyalarla ilgilenme makalesinde tanıştığımız) tekrar gözden geçirelim :
<img src="images/firefox-icon.png" alt="My test image">
Burada aşağıdakiler var:
<!DOCTYPE html>– doktrin. Önsöz gereklidir. Zamanın sisinde, HTML gençken (1991/92 civarında), doktipler, HTML sayfasının iyi HTML olarak kabul edilmesi için uyması gereken bir dizi kurala bağlantı görevi görüyordu; bu, otomatik hata kontrolü ve diğer kullanışlı şeyler. Ancak bu günlerde pek bir şey yapmıyorlar ve temelde sadece belgenizin doğru şekilde çalıştığından emin olmak için ihtiyaç duyuyorlar. Şimdilik bilmeniz gereken her şey bu.
<html></html>– <html>eleman. Bu öğe, tüm sayfadaki tüm içeriği sarar ve bazen kök öğe olarak da bilinir.
<head></head>– <head>eleman. Bu öğe, HTML sayfanıza , sayfanızın görüntüleyenlerine gösterdiğiniz içerik olmayan eklemek istediğiniz tüm öğeler için bir kap görevi görür . Bu, arama sonuçlarında görünmesini istediğiniz anahtar kelimeler ve sayfa açıklaması, içeriğimizi şekillendirmek için CSS, karakter kümesi bildirimleri ve daha fazlasını içerir.
<meta charset="utf-8">– Bu öğe, belgenizin kullanması gereken karakter kümesini, yazılı dillerin büyük çoğunluğunun çoğunu içeren UTF-8 olarak ayarlar. Esasen, şimdi üzerine koyabileceğiniz herhangi bir metinsel içeriği işleyebilir. Bunu ayarlamak için hiçbir neden yoktur ve daha sonra bazı sorunlardan kaçınmaya yardımcı olabilir.
<title></title>– <title> eleman. Bu, sayfanızın yüklendiği tarayıcı sekmesinde görünen başlık olan sayfanızın başlığını belirler. Ayrıca, yer işareti eklediğinizde / favorilere eklediğinizde sayfayı tanımlamak için de kullanılır.
<body></body>– <body>eleman. Metin, resim, video, oyun, oynatılabilir ses parçaları veya başka herhangi bir şey olsun, web kullanıcılarına sayfanızı ziyaret ettiklerinde göstermek istediğiniz tüm içeriği içerir .
Dikkatimizi <img>tekrar öğeye çevirelim:
Daha önce söylediğimiz gibi, sayfamıza göründüğü konumda bir resim yerleştirir. Bunu, srcgörüntü dosyamızın yolunu içeren (kaynak) özniteliğiyle yapar.
Ayrıca alt(alternatif) bir özellik de ekledik . Bu öznitelikte, muhtemelen aşağıdaki nedenlerden dolayı görüntüyü göremeyen kullanıcılar için açıklayıcı metin belirtirsiniz:
Görme engelli. Önemli görme bozukluğu olan kullanıcılar, alt metni okumak için genellikle ekran okuyucu adı verilen araçları kullanır.
Görüntünün görüntülenmemesine neden olan bir şeyler ters gitti. Örneğin, srcyanlış yapmak için özelliğinizin içindeki yolu bilinçli olarak değiştirmeyi deneyin . Sayfayı kaydedip yeniden yüklerseniz, görüntünün yerine böyle bir şey görmelisiniz:
Alternatif metin için anahtar kelimeler “açıklayıcı metin” tir. Yazdığınız alternatif metin, okuyucunun görüntünün ne aktardığına dair iyi bir fikre sahip olması için yeterli bilgi sağlamalıdır. Bu örnekte, şu andaki “Test resmim” metnimiz hiç de iyi değil. Firefox logomuz için çok daha iyi bir alternatif “Firefox logosu: Dünyayı çevreleyen yanan bir tilki” olacaktır.
Resminiz için şimdi daha iyi alternatif metinler bulmayı deneyin.
Bu bölüm, metni işaretlemek için kullanacağınız bazı HTML öğelerini kapsayacaktır.
Başlık öğeleri, içeriğinizin belirli bölümlerinin başlık – veya alt başlık olduğunu belirtmenize olanak tanır. Bir kitabın ana başlığı, bölüm başlıkları ve alt başlıkları olduğu gibi, bir HTML belgesi de olabilir. HTML 6 başlık seviyeleri içerir <h1>– <h6>, yaygın olarak sadece en az 3 ila 4 kullanacağız rağmen:
<h1>My main title</h1>
<h2>My top level heading</h2>
Şimdi HTML sayfanıza öğenizin hemen üstünde uygun bir başlık eklemeyi deneyin <img>.
Yukarıda açıklandığı gibi, <p>elemanlar metin paragrafları içerir; normal metin içeriğini işaretlerken bunları sıklıkla kullanırsınız:
<p>This is a single paragraph</p>
Senin örnek metin ekleyin (eğer onu olmalıdır gibi Web sitenizin görünür? Gerekenler birine veya birkaç paragraflar halinde, sizin altına doğrudan yerleştirilen) <img>elemanı.
Web içeriğinin çoğu listelerdir ve HTML’nin bunlar için özel öğeleri vardır. İşaretleme listeleri her zaman en az 2 öğeden oluşur. En yaygın liste türleri sıralı ve sırasız listelerdir:
Sırasız listeler , alışveriş listesi gibi öğelerin sırasının önemli olmadığı listeler içindir. Bunlar bir <ul>öğeye sarılır .
Sıralı listeler , tarif gibi öğelerin sırasının önemli olduğu listeler içindir. Bunlar bir <ol>öğeye sarılır .
Listelerin içindeki her öğe bir <li>(liste öğesi) öğesinin içine yerleştirilir .
Örneğin, aşağıdaki paragraf parçasının bir kısmını bir listeye dönüştürmek isteseydik
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
İşaretlemeyi buna göre değiştirebiliriz
<p>At Mozilla, we’re a global community of</p>
<p>working together ... </p>
Örnek sayfanıza sıralı veya sırasız bir liste eklemeyi deneyin.
Bağlantılar çok önemlidir – web’i bir web yapan şeydir! Bir bağlantı eklemek için basit bir eleman kullanmamız gerekir – <a>– “a”, “çapa” için kısa biçimdir. Paragrafınızdaki metni bir bağlantıya dönüştürmek için şu adımları izleyin:
Biraz metin seçin. “Mozilla Manifesto” metnini seçtik.
Metni <a>, aşağıda gösterildiği gibi bir öğeye sarın :<a>Mozilla Manifesto</a>
Öğeye aşağıda gösterildiği gibi <a>bir hrefözellik verin :<a href="">Mozilla Manifesto</a>
Bu özelliğin değerini, bağlantının bağlanmasını istediğiniz web adresiyle doldurun:
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
Web adresinin başlangıcında protokol adı verilen kısmı https://veya http://bölümü atlarsanız beklenmedik sonuçlar alabilirsiniz . Bir bağlantı oluşturduktan sonra, bağlantıyı istediğiniz yere gönderdiğinden emin olmak için tıklayın.
hrefilk başta bir özellik adı için oldukça belirsiz bir seçim gibi görünebilir. Bunu hatırlamak sorun yaşıyorsanız, bunun açılımı unutmayın h ypertext ref uzakliginda .
Henüz yapmadıysanız, sayfanıza şimdi bir bağlantı ekleyin.
Bu makaledeki tüm talimatları izlediyseniz, aşağıdakine benzeyen bir sayfa bulmalısınız (buradan da görüntüleyebilirsiniz ):
Sıkışırsanız, çalışmanızı her zaman GitHub’daki bitmiş örnek kodumuzla karşılaştırabilirsiniz.
Bir Sonraki Ders :
Tags	#HTML ile ilgili temel bilgiler
Instagram Fotoğraflarını Web Sitesinde Gösterme
Web Tasarım'da Dosyalarla İlgilenmek
Özcan BAYRİ, SEO, Google AdWords, Sosyal Medya, Dijital Pazarlama, E-Ticaret ve Teknoloji'nin tüm alanları ile ilgili güncel konuları kaleme alan ve okuyucularını bilgilendirmeyi amaçlayan bir girişimciyim :)
Web Tasarım’a Başlarken
Web siteniz nasıl görünecek?
Web Tasarım’da Dosyalarla İlgilenmek
Web Tasarım İçin Gerekli Olan Temel Yazılımları Yüklemek
Ortaya Karışık !!
FELIXO Nedir, Hediye FLX Coin Nasıl Alınır – Felixo Güvenilir Bir Borsa Mıdır?
Themeforest Temmuz Ayı Ücretsiz WordPress Temaları
Web Geliştiricileri için 15 Tane Yararlı Kod Paylaşma Sitesi
SASS ve SCSS Nedir?
Her Web Tasarımcının Bilmesi Gereken 20 Temel CSS Hilesi
ANKET: CSS PROGRAMLAMA DİLİ GİBİ OLMALI MI?
Aklınızı Başınızdan Alacak 11 CSS Projesi
3 Tane Harika CSS3 Görüntülü Geçiş Efekti
CSS Dikey Hizalama: İpuçları ve Teknikler
WordPress Sitenizi Daha Hızlı Hale Getirmek için İpuçları
Sekme Değişince Sayfa Başlığını Değiştirme
Koindex olarak hazırlıklarımıza hızla devam ediyor ve açılıştan önce yeni bir kampanyayla takipçilerimize KOIN kazanma fırsatı sunuyoruz. Kampanyaya dahil olmak için yapılması gereken çok basit iki adım var: Sisteme üye olup kimlik doğrulamayı tamamla Sana ait…
FELIXO BORSASI 30 Ekim 2018’de “Türkiye’nin en güvenilir borsası” sloganı ile lansmanı yapılan Felixo kripto para borsası bir buçuk yılı aşkın bir süredir hizmet veriyor. Bugüne kadar yerli ve yabancı pek çok firma ile yazılım projeleri…
Responsive kelime anlamı olarak duyarlı, hassas, uyumlu anlamlarına gelmektedir. İnternetin ceplerimize girmesinin akabinde bilgisayarlar için tasarlanmış olan sitelerin ziyaretçiler tarafından görüntülenmesinde maalesef uyumsuzluklar başlamıştır. Yani mesela bir cep telefonundan herhangi bir siteye giriş olduğunda ziyaretçi bu siteyi…
Web geliştirme nadiren tecrit altında yapılır. Yalnız bir kodlayıcı olsanız bile, bazen kodu başkalarıyla paylaşmanız gerekebilir. Belki de bu işlevi kodlayıcı arkadaşınızla paylaşmanız veya bir meslektaşınıza hata ayıklamak için bir pasaj göstermeniz gerekir? Bu gibi durumlarda, kod paylaşım web…
PageRank 0 ila 10 arasında belirlemek için bir web sayfasına bağlantıların kalitesini ve miktarını değerlendirir. PageRank Nedir? PageRank 0 ila 10 arasında belirlemek için bir web sayfasına bağlantıların kalitesini ve miktarını değerlendirir. Google kurucuları Larry Page…
Google, her yıl olduğu gibi bu yıl da Türkiye’de ve dünyada yükselen arama trendleri içeren listesini açıkladı.Yılın Arama Trendleri 2019’un Türkiye’de beş farklı kategoriden oluşan yükselen arama trendleri listelerinin ilk sıralarında Genel kategoride “İstanbul Seçim Sonuçları”,…
Dijital pazarlamanın en önemli metriklerinin başında, dönüşüm yer alır. Websitenize gelen kullanıcıların beklediğiniz hareketleri gerçekleştirip gerçekleştirmediklerini belirlemek adımlarınızı daha doğru atmaya yardımcı olur. Bunun birçok analiz aracını kullanıyoruz. Bunların en olmazsa olmazı Google Analytics, websitemizi ziyaret eden…
Google Data Studio Nedir ?
Bir websitenin en doğru şekilde hareket etmesi, müşterilerine en hızlı şekilde ulaşabilmesi için metrikler oldukça hayati önem taşır. Birçok farklı analiz sonucunu değerlendirerek stratejinizi o yönde geliştirmek gerekir. Analytics, Search Console, Ads gibi birçok hizmeti bize sunan ve bunların…
A'dan Z'ye CSS (11)
Filmler & Diziler (2)
Diğer Sosyal Medya Platformları (11)
Web Tasarım'a Başlarken (5)
Instagram vs Pinterest: İşiniz İçin En İyisi Hangisi ?
Pinterest’le Web Sitesi Trafiğini Arttırmanın 5 Yolu
Rose’un A’dan Z’ye Türkçe Kullanma Rehberi
Spotify ‘ da Hikayeler Özelliğine Kavuşuyor
Instagram’da Gönderi Zamanlamak İçin Üçüncü Parti Yazılımlardan Yararlanma Devri Bitti
VK Nedir? VK Hakkında Bilinmeyenler
Kategoriler Kategori seçin A’dan Z’ye CSS AdSense AdWords Diğer Sosyal Medya Platformları E-ticaret Facebook Filmler & Diziler Genel Google Instagram Seo Sosyal Medya Web Tasarım’a Başlarken Wordpress Youtube
6 ay ago 217
7 ay ago 134
1 sene ago 114
1 sene ago 130
Adsense Nasıl Alınır? 3 Adımla Adsense Elinde!
1 sene ago 249
Google Adwords Sertifikası Nasıl Alınır ?
1 sene ago 143
© 2017 - 2020 - Özcan Bayri' nin Blog Sitesi. Tüm hakları saklıdır.