BİL205U-WEB ARAYÜZ PROGRAMLAMA
Ünite 1: HTML (Hiper Metin İşaretleme Dili)
Giriş
Bu bölümde HTML dilinin gelişimi, yapısı ve özellikleri ve web programcılığı için geliştirme ortamının hazırlanması da anlatılmıştır.
HTML’ye Giriş
Bilgisayarları birbirine bağlamak amacıyla kurulan bilgisayar ağlarının temelinde 1960’larda Amerika Birleşik Devletleri Savunma Bakanlığı tarafından çalışmalarına başlanan ARPANET vardır. İnternet, ARPANET üzerine inşa edilen yapılarla geliştirilmiştir. Bu yapıların en önemlilerinden olan HTML ile internetin yaygınlaşması hızlanmıştır.
World Wide Web Kavramı
Dünya Çapında Ağ anlamına gelen World Wide Web (WWW), belge ve diğer bilgilerin URL tarafından tanımlandığı bir sistemdir. URL, İngilizce Uniform Resource Locators kelimelerinden türetilen ve Türkçeye Tekdüzen Kaynak Belirleyici olarak geçen bu kavram, web sayfalarının paylaşıldığı sunucu adreslerini tanımlar. İnternet ile birbirine bağlı bilgisayarlarda tutulan dosyalar linklerle birbirine köprülenir. Web kaynakları olarak adlandırılan bu dosyalar HTTP (İng. Hyper Text Transfer Protocol) protokolü aracılığıyla aktarılır. Sunucu adı verilen bilgisayarlarda yayımlanan dosyalara kullanıcılar bilgisayarlarında bulunan web tarayıcısı adı verilen programlarla erişebilir.
Cern araştırmacılarından olan Tim Berners-Lee, HTML (Hyper Text Markup Language) dilini 1989 yılında tasarlayıp 1991’de tüm dünyanın kullanımına sundu. HTML sayesinde bugün web sayfaları tarayıcılar tarafından kolaylıkla kullanılabilir hâle geldi. Lee 1994’te World Wide Web Consortium (W3C) adını verdiği, dünya çapında tüm ağlar için standartların belirlenmesini amaçlayan topluluğu kurdu. Günümüzde HTML standartlarını bu örgüt belirlemekte ve duyurmaktadır. SEO adı verilen arama motorları W3C kurallarına göre web sayfalarını etiketler. SEO, Search Engine Optimize kelimeleri ile oluşturulan Google, Bind, Yandex gibi arama motorlarının web sitelerini etiketlerken kullandığı yapıdır. Bu yapıya uygun web siteleri aramalarda üst sıralarda gösterilir.
HTML Nedir?
Web 1.0’dan itibaren hayatımızda yerini alan HTML, Türkçeye Zengin Metin İşaretleme Dili olarak çevrilmiştir. Basit bir yapıya sahip olan HTML internet üzerinde dokümanların görüntülenebilmesini sağlar.
HTML bir programlama dili değildir. Adında da belirtildiği şekilde işaretleme (markup) dilidir. Sunulmak istenen veri etiketler yardımıyla işaretlenir. Etiketlenen veriler herhangi bir derleme işlemine tabi tutulmaksızın tarayıcı tarafından işlenebilir. HTML için çeşitli etiketler vardır. Etiketler yardımıyla HTML içeriği anlamlandırılır. Bu etiketler tarayıcılara içeriklerin nasıl gösterileceğini anlatır. Sadece HTML ile web sayfaları hazırlamak mümkündür. Bu web sayfaları Statik Web Sayfaları olarak adlandırılır.
İlk Web Sayfası
Bir web sayfası hazırlamak için bilgisayarınızdaki herhangi bir metin editörünü kullanarak ‘ilk_sayfa.html’ dosyasını oluşturun. İçerisine aşağıdaki kodları yazıp kaydedin. Görüntülemek için herhangi bir internet tarayıcısını seçebilirsiniz. Kitabınız sayfa 4’de verilen ilk kod web sayfalarının en temel hâlidir diyebiliriz. Kodu inceleyelim.
<!DOCTYPE html> komutu bu dosyanın HTML5 formatında olduğunu ve içeriklerin bu formata uygun hazırlandığını tarayıcıya bildiren komuttur ve etiket olmadığı için kapatılmasına gerek yoktur.
<html> etiketleri arasına HTML kodu yazılarak sayfa oluşturulur. Bu etiketin içerisindeki lang="tr" ise tarayıcıya bu sayfanın Türkçe dilinde olduğunu söylemektedir. HTML dosyaları iki ana kısımdan oluşur. (i) dosyanın içeriği, yazarı gibi genel bilgilerin olduğu <head>; (ii) ekranda gösterilen tüm ögelerin bulunduğu <body>.
<head> kısmı sadece <title> etiketi içermektedir. <title> açılış ve kapanış etiketlerinin içerisine yazdığımız başlık tarayıcınızın sekme kısmında görünen adıdır.
<body> etiketinin içerisi bizim sayfamızın gösterilecek tüm içeriklerin olduğu yerdir.
<div> etiketi HTML sayfalarını bölmek için kullanılır.
<p> etiketi ise sayfada paragrafı işaretlemek için kullanılmaktadır.
<head> kısmında kullanılan diğer bir etiket ise <meta charset="utf-8"> sayfadaki kullanılan karakter seti hakkında bilgi vermektedir. Yazdığınız karakter bu karakter seti dışındaysa görüntülenmesi sırasında hata ile karşılaşırsınız. Sayfanın yazarı hakkında bilgi vermek için ise <meta name="author" content="Anadolu Üniversitesi"> komutunu kullanabilirsiniz.
HTML Sürümleri
Geliştirilen ilk HTML sürümü, metin kontrolleri ve resimler gibi temel ögeleri destekledi ve HTML 1.0 olarak adlandırıldı. İçeriğin tarayıcıda nasıl oluşturulacağı ile ilgili stil şablonları, tablolar, yazı tipi desteği gibi özellikleri desteklemiyordu. HTML 2.0, 1995 yılında geliştirildi. Bu sürümle birlikte farklı tarayıcılar arasında HTML’yi kullanabilmek için standartlar geliştirilmeye başlandı. form kavramı, tablo etiketi bu sürümle geldi. W3C bu sürümle birlikte HTML standartlarını geliştirmeye başlamıştır. 1997 yılında HTML 3.2 geliştirildi. Bu sürümle birlikte HTML etiketleri daha fazla gelişti. Form kavramı standartlaştırılmış, geliştirilmeye devam etmiştir. CSS bu sürümle birlikte desteklenmiştir. 1999 yılında HTML 4.01 duyuruldu. Bu sürümde CSS desteği geliştirildi. CSS, HTML 3.2 sürümünde sayfanın içerisine yerleştirilebiliyordu ve sürekli tekrar etmek gerekiyordu. HTML 4.01 ile harici bir stil dosyası HTML sayfaya dahil edilebilir oldu. Bu sürümde de yeni etiketler eklendi. 2014 yılında HTML5 geliştirildi. Birçok yenilikle gelen bu sürüm halen daha geliştirilmekte olan sürümdür.
HTML5
Geliştiriciler için 2014 yılından itibaren kullanılabilen bu sürüm önceki sürümler gibi birçok yeni etiketle birlikte geldi. Bu etiketlerin yanında farklı türdeki girdi öge tipleri de bu sürümde duyuruldu. Bu sayede oluşturulan HTML sayfanın form elemanı istenilen girdi değerine göre etiket ve tip ile birlikte işaretlenip kullanıcı bu türde veri girmeye zorlanabilir oldu. En çok kullanılan etiketlerden bazıları:
email: Eklenen bu yeni etiket e-Posta türünün giriş ögesidir. Bir form öge tipi olmasına rağmen form dışında da kullanılabilir. Giriş değerinin geçerli bir e-Posta olup olmamasını kontrol eder.
password: Kullanıcıdan parola almak için kullanılan ögedir.
audio etiketi: HTML5 ile uygulanan yeni bir ses etiketidir. Web sayfalarına ses dosyası eklemeye yardımcı olur. Bu ses dosyası web sayfasına entegre edilebilir ve oynatılabilir.
semantik (anlamsal) etiketler: Anlamsal şeklinde Türkçeye çevrilebilen “semantik” etiketler yapısal etiketler de denir. Bu etiketler sayesinde oluşturulan komponentler birleştirilerek anlamlı HTML sayfalar tasarlanabilir.
section etiketi: HTML sayfasındaki belirli bir bölümü anlamlandırmak için bu etiket kullanılabilir.
HTML Yapısı
Tarayıcınızın dosyaları yorumlayabilmesi için dosya içeriğinin HTML formatına uygun olması gerekmektedir. Bu formatın diğer bir faydası da arama motorlarının içerik hakkında fikir sahibi olabilmesidir. Arama motorları web sayfasının içeriğini kontrol ederken kullandığınız HTML etiketlerinden yola çıkarak arama sonuçlarında alaka düzeyini belirler.
Biçimlendirilmek istenilen içerik, etiket ile kapsanmalıdır. Aşağıdaki kod bloğunda da görebileceğiniz gibi içerikten önce büyüktür (<) ve küçüktür (>) işaretleri içerisinde kullanılmak istenen etiket yazılır. İçerik yerleştirildikten sonra ise kapanış etiketi girilmedir. Kapanış etiketinin yapısında “<” işaretinden sonra gelen “/” işareti yazılır.
İç içe birden fazla türde etiket tanımlanabilir. Aşağıdaki kod bloğunda da gördüğünüz gibi iç içe etiketler kullanırken en son açılan etiket ilk kapatılmalıdır.
<etiket-1> ←1. Açılış etiketi <etiket-2> ←2. Açılış etiketi içerik ←İçerik </etiket-2> ←2. Kapanış etiketi </etiket-1> ←1. Kapanış etiketi
Bunların yanında yapısı <etiket/> olan kapanış etiketi gerektirmeyen etiketler (örneğin <br/>) de vardır.
Program Geliştirme Ortamının Hazırlanması
Geliştirici Araçları
Web Arayüz Programlamada geliştirdiğimiz kodların hedefi web tarayıcılarıdır. Kodların nasıl göründüğünü
kullanıcı gözünden takip edebilmek ve hata takibi yapabilmek için bilgisayarınızda bulunan web tarayıcısından faydalanabilirsiniz.
Chrome tarayıcısında geliştirici araçlarını açmak için sayfa üzerinde mouse ile sağ tıkladıktan sonra “İncele” butonuna basabilir veya klavye üzerinden “F12” tuşuna basabilirsiniz. Kitabınız sayfa 8, Görsel 1.2’de yer alan 2 numaralı alandaki HTML kodları sayfanın kaynak kodları değildir. İlerleyen bölümlerde inceleyeceğimiz DOM (Doküman Nesne Modeli) yapısının kodlarıdır. Sayfanın kodlarını görüntülemek için sağ tıklayarak “Sayfa Kaynağını Görüntüle” seçeneğini seçmeniz gerekmektedir.
Geliştirme Ortamı
Program geliştirme aşamasında programcıya yardım için birden çok amaca hizmet eden IDE (Integrated Development Environment) programları vardır. Web Programlama için geliştirilmiş IDE’ler bulunmaktadır. IDE, kodun yazıldığı dile göre kodu renklendiren, tamamlayan, şekil kontrolü yaparak kodu vurgulayan, hata ayıklaması yaparak programcıya uyarı veren, veri tabanı bağlantısı, versiyon kontrol sistemleri entegrasyonu gibi çeşitli ortamlarla entegrasyonu sağlayan araçları içinde barındıran yazılım türüdür.
Web Arayüz Programlama için Visual Studio Code, WebStorm, Sublime Text gibi birçok program kullanılabilmektedir. Bu kitapta öğreneceğimiz diller için Microsoft’un ücretsiz sunduğu Visual Studio Code (VSC) programından faydalanacağız.
VSC üzerine kurulan eklentiler ile birçok dil için destek vermektedir. VSC’yi https://code.visualstudio.com/ adresinden işletim sisteminize uygun olan en son sürümü indirerek kurabilirsiniz.
Versiyon Kontrol Sistemi
Versiyon Kontrol Sistemi (VCS-Version Control System) farklı kişiler tarafından geliştirilen dosyaların versiyonlamasını yaparak kişiler ve ekipler arasında senkronizasyonu mümkün kılar. Bu programlar sayesinde düzenleme, silme, ekleme, kopyalama gibi işlemler kayıt altına alınıp takip edilebilir. Gerekli olduğu durumlarda ön- ceki versiyona dönebilmeye imkân sağlar.
Versiyon Kontrol Sisteminde çalışan yazılımcılar proje altında kendilerine ait “branch” adı verilen dallar oluşturarak bu alan üzerinde çalışmaya devam ederler. Yazılımcı bilgisayarında yaptığı geliştirmeleri bu branch’a göndererek “master branch” adı verilen ana projeyle birleştirilmesi için proje yöneticisinin onayına sunar.
HTML Etiketleri
Başlık Etiketleri
HTML sayfalarda bulunan metinlerin başlıklarını belirtmek için “Başlık Etiketleri” olarak adlandırılan özel tanımlamalar vardır. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> sırasıyla en büyük başlıktan en küçük başlığa doğru gitmektedir. İçerikteki başlık hiyerarşisini bu etiketler
vasıtasıyla belirleyebilirsiniz. En büyük etiket boyutu olan <h1> 2 em font büyüklüğüne sahipken en küçük olan <h6> 0,67 em font büyüklüğüne sahiptir. em, ekran boyutuna göre değişen ölçü birimidir. (örn: <h1>Başlık</h1>).
Paragraf Etiketi
Paragraf etiketinden daha önce bahsettiğimiz gibi HTML sayfalarının içerisindeki paragrafları etiketlemek için <p> etiketi kullanılır.
<p>Metin içeriği</p>
Arama motorları sayfalarınızı tararken semantik etiketlerin yanında kullanıcıların sayfanızda ne kadar durduğu bilgisinden de faydalanır. Sayfanızdaki metinlerin fazla uzun olması ya da birden farklı konunun tek paragrafta anlatılması kullanıcıların sayfanızda kalma süresini azaltacağı gibi sonraki aramalarda da SEO algoritmaları arama sıralamalarında sayfalarınızı geriye atacaktır.
Metinlerinizin daha kolay okunabilmesi ve arama motorlarına önemli kelimeleri belirtebilmeniz için HTML ile kullanabileceğiniz bazı biçimlendirme etiketleri vardır.
Biçimlendirme Etiketleri
Oluşturduğunuz metinde bazı kelime veya cümleleri işaretleyebilir, farklı boyut ve renklerde yazabilirsiniz. Metin içerisinde kalın göstermek istediğiniz kelime bloğunu <b></b> etiketi içerisinde yazabilirsiniz. SEO algoritmasına metin içerisindeki anahtar kelimeleri vermek için <strong></ strong> etiketini kullanabilirsiniz. Metni sağa yatık (italik) yazmak için <i></i> etiketini kullanabilirsiniz. <em></em> etiketi italik gibi metni vurgular ve metin seslendirme algoritmalarında içindeki kelime bloğunun farklı ses tonuyla okunmasını sağlar.
Paragraf içerisinde arka planı vurgulamak istediğiniz kelimelere <mark></mark> etiketi uygularsanız metnin arka planını sarı ile işaretlendiğini göreceksiniz.
Metin üzerinde bir kelimeyi <del></del> etiketi ile işaretlerseniz bu kelimenin üzeri çizilecektir. Bu etiketle birlikte genelde <ins></ins> etiketi kullanılır. <ins></ins> etiketi kelimenin altını çizecektir. Kelimenin altını çizmek <u></u> etiketinin kullanılması daha uygundur.
Yazının diğer bölümlerine göre daha küçük yazmak istediğiniz kısımlarında <small></small> etiketini kullanabilirsiniz.
Metni biçimlendirirken kullanılan alıntılama için kullanılan etiketlerde vardır. Kısaltmalarda kullanılan <abbr title=""></abbr> etiketi kısaltılan kelimenin uzun hâlini title özelliği içerisine alır ve mouse kısaltılan kelimenin üzerine geldiğinde bu kelimeyi gösterir. <q> etiketi kısa alıntılar diye adlandırılan cümlelerde kullanılabilir. Bu etiket ile kullanılan metnin dışına kesme işaretini ekler. Uzun alıntılarda ise <blockquote> etiketi kullanılabilir. Bu etiket içerisindeki metnin etrafında boşluklar bırakırken içerisine aldığı cite="" özelliği ile referans verilmek istenen siteyi alabilir.
Resim Etiketi
Web sayfalarında resim göstermek için kullanılan <img> etiketi kapanış etiketi gerektirmeyen, resim yolunu içerisindeki alt özellikler yoluyla alan bir etikettir.
<h1>Resim Örneği</h1> <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Kodda src özelliği ile resmin yolu ve adresi belirtilmiştir. Resim dosya ile aynı klasörde ise sadece resim adı yeterlidir. Resimleri projenizde barındırabileceğiniz gibi internette bulunan resimleri de gösterebilirsiniz. Bunun içinde src özelliğine resmin url adresini girmeniz yeterlidir. alt özelliği ile resim hakkında kısa bir açıklama yapılmıştır. width ve height özellikleri ile resmin boyutlandırması yapılmıştır.
Web sayfalarında paylaştığınız her resim, ses veya video dosyası için tarayıcınız sunucunuza bir istek yapar. Bu dosyalarının veri boyutu ve kullanıcının internet hızına göre sayfanın yüklenme süresi uzar. Bu yüzden web sayfalarında büyük veri boyutlu resimler kullanmanız tavsiye edilmez.
Linkler
Dosyalar arasında geçiş yapmak için <a> etiketini kullanabiliriz. Bu etiketin içerisindeki href özelliği ile gidilecek sayfanın konumu belirtilir. Bu etiketin aldığı başka bir özellik olan target ile sayfanın açılacağı konumu belirleyebilirsiniz. Sayfayı aynı sekmede açmak için bu özellik boş bırakılmalı ya da target="_self" yazılmalı, başka bir sekmede açılması için target="_blank" yazılmalıdır.
Bu etiket içerisinde yazdığınız metin yerine resimde açabilirsiniz. Bir önceki başlıkta gördüğünüz resim etiketini ve özelliklerini <a> etiketi içerisine yazabilir ve istediğiniz hedefe yönlendirebilirsiniz.
Bir başka özellik ise title="" özelliğidir. Hazırlandığınız linkin üzerine mouse ile geldiğiniz zaman tırnaklar içerisindeki yazının imleç üzerinde göründüğünü fark edebilirsiniz.
Listeler
Liste etiketlerini HTML sayfalarda verileri sıralamak için kullanabilirsiniz. Eklenen elemanları sıralı ve sırasız gösterebileceğiniz iki tür etiket vardır. İngilizce “Order List” kelimelerinden türetilen <ol> etiketi içerisindeki <li> elemanlarını rakamla sıralayarak gösterir. Yine İngilizce “Unordered List” kelimelerinden türetilen <ul> ile <li> elemanlarını sıralarken rakam yerine başında nokta ile işaretleyerek gösterir.
Sıralı listelerde rakam tipini değiştirmek isterseniz type="" özelliğini kullanabilirsiniz. Kabul edilen tip özellikleri “1”, “A”, “a”, “I” ve “i” dir. Roma rakamı ile sıralamak için type="I" yazabilirsiniz. Varsayılan olarak “1” gelmektedir. Başlangıç sırasını belirlemek isterseniz start="" özelliğinin içine başlangıç sayısını verebilirsiniz.
Bu iki liste türünün haricinde açıklama amaçlı kullanılan İngilizce “Description List” kelimesinden türetilen <dl> etiketi de vardır. Alt eleman olarak <dt> ve <dd> elemanlarını alır.
Görüntü Seviyeleri (DIV&SPAN)
Her HTML etiketinin sayfayı kaplama özelliğine göre bir görüntü seviyesi vardır. Temelde iki görüntü seviyesi vardır. Etiket tüm satırı kaplıyorsa block ve sadece içeriği kadar alan kaplıyorsa inline olarak adlandırılır.
Bu konuyu anlatmak için tüm html sayfalarda yaygın olarak kullanılan ama kesin bir amacı olmayan <div> ve <span> etiketleri seçildi.
İngilizce “Division” kelimesinden türetilen <div> etiketi genel olarak sayfayı bölümlemek için kullanılır. Bu etiketin genişliği tüm sayfayı kaplayan %100 boyutundadır. İçerisine aldığı nesnenin genişliğinden bağımsız olarak tüm satırı kapladığı için block elemanıdır. <span> ise sadece içerdiği eleman kadar alan kaplar. Block elemanlardan sonra gelen her eleman bir alt satırdan başlar. Örneğin içerisindeki metnin genişliği ekranın yarısını kaplıyorsa <span> o etiket için gerekli olan kadar yer ayırır. Sayfa içerisindeki herhangi bir elemanı şekillendirirken diğerlerinden ayırmak için <span> etiketi kullanılır.
Bu iki etiketi sayfanın her yerinde kullanabilsek de hiçbir anlam içermedikleri için arama motorları bunları etiketleyemez. Bunların yerine eğer karşılığı varsa semantik (anlamsal) etiketlerin kullanılması tavsiye edilir.
Semantik Etiketler
Arama motorlarının web sitelerini etiketlerken semantik etiketlerden yararlandığından bahsetmiştik. Sitenin tasarımında <div> ve <span> etiketleri yerine kullanabileceğiniz etiketlerden bazılarını inceleyeceğiz.
Web sayfasının başlık kısmının <header> etiketiyle, uygulama linklerinin bulunduğu navigasyon kısmının <nav> etiketiyle ya da genelde site hakkında bilgilerin verildiği alt kısmın <footer> etiketiyle kapsanması tavsiyesinde bulunulmuştur. Tasarladığınız yapıya göre sayfa içerisindeki bölümleri <section> etiketi ile sayfa içerisinde bir makaleleri <article> etiketiyle kapsayarak tasarlayabilirsiniz.
Tablolar
Tablo hazırlamak için <table> etiketi kullanılır. Tablo etiketi genel olarak başlık ve içerik olarak iki kısımdan oluşur. Başlık kısmının <thead> ile içerik kısmının ise <tbody> ile kapsanması beklenir.
Başlık kısmında <thead> kullanıldıktan sonra içerisine bir <tr> etiketi alır ve bu etiket içerisine hücre başlıkları <th> ile eklenir. İçerik kısmı ise <tbody> etiketi ile kapsandıktan sonra her satır için <tr> etiketi ile istenen satır sayısı kadar satır oluşturulur. Satırlar içerisinde hücre oluşturmak <td> etiketi kullanılmalıdır.
HTML tür satırda eşit hücre sayısının olmasını bekler. Ancak gerekirse hücreleri dikey veya yatay olarak birleştirilmesine imkân sağlar. Yatay birleştirme için colspan dikey için rowspan özelliklerini kullanabiliriz.
Formlar
Bütün web sayfaları sadece kullanıcıya hazır metin, görsel gibi şeyler göstermek için değil kullanıcıdan veri almak için de hazırlanmaktadır.
Kullanıcılardan verileri topladıktan sonra daha önceden belirlenen aksiyonu alan <form> etiketi vardır. Bu etiket action özelliği ile çalışır. Kullanıcı butona (gönder butonu veya kaydet butonu gibi) bastığında veriler action özelliği ile belirtilen adrese gönderilir ve orada gerekli işlemler yapılır. Butonu ifade etmek için <button> elemanı kullanılabilir.
Kullanıcının veriyi girebileceği farklı giriş elemanları vardır. Bunlardan en sık kullanılanı <input> elemanı diyebiliriz. type özelliği bu elemanın beklediği veri türü belirlenir.
Kullanıcıdan uzun metinler girmesi beklendiğinde ise <textarea> etiketi seçilmelidir. Bu etiket birden fazla satırda metin girilmesine izin verir. Metin alanının boyutları cols ve rows özellikleri ile belirtilebilir.
Açılan listeler için <select> etiketi kullanılmalıdır. Bu etiketin aldığı <option> elemanları seçilebilecek verileri içerir ve value özelliği ile sunucu tarafından anlaşılacak değer gönderilir. Örneğin “Bilişim” seçeneği sunucu tarafında “1” ile ifade ediliyorsa value="1" olmalıdır.
Bu etiketlere başlık girmek için ise <label> etiketi kulla- nılabilir. <label> etiketi ile giriş elemanını bağlamak için giriş elemanına bir “id” özelliği verilmelidir. <label> elemanının for özelliği bu “id” yi işaret etmelidir. id, “id” özelliği html elemanlarına doğrudan ulaşabilmek için kullanılır. Web sayfasında aynı “id” birden fazla elemanda kullanılamaz.
iFrameler
Web sayfalarınızda bazen farklı sayfaları bir çerçeve içerisinde göstermek isteyebilirsiniz. Bunun için <iframe> etiketini kullanmanız gerekir.
VSC editöründe iframe yazdıktan sonra “tab” tuşuna basarsanız kod editörünün src özelliği ile tamamladığını göreceksiniz. Burada src çerçevede göstereceğiniz sayfanın linkini belirlemeye yarıyor. Bu özelliğin haricinde width ve height özellikleri ile çerçeve boyutu belirlenebilir.
HTML ile Uygulama
Kitabınız sayfa 20’den itibaren pratik yaparak HTML ile öğrendiklerinizi pekiştirebilirsiniz. Uygulamada basit birkaç sayfadan oluşan kitap uygulaması yapılmaktadır.