HTML'de Arka Plan Resmi Nasıl Belirlenir?

Bu Makalede:Dosyalarını AyarlamakHTML Dosyasını YazmakHTML Dosyasını İncelemekHTML Kodunu KavraCSS Kodunu Kavra5 Referans

Bir web sayfasına resim eklemek istiyorsan ihtiyacın olan tek şey HTML’dir. Bir resmi bir web sitesinin arka plan resmi olarak belirlemek istiyorsan hem HTML’e hem de CSS’e ihtiyaç duyarsın. HTML, Hypertext Markup Language’in (Hiper Metin İşaretleme Dili) kısaltmasıdır ve tarayıcıya bir web sayfasına ne göstereceğini söyleyen koddur.[1] CSS’in açılımı Cascading Style Sheets’dir (Basamaklı Stil Sayfaları) ve bir web sayfasının görünümünü ve taslağını değiştirmek için kullanılır.[2] Web sayfan için kullanmak istediğin bir arka plan resmine ihtiyacın olur.

Kısım 1
Dosyalarını Ayarlamak

  1. 1
    HTML dosyanı ve arka plan resmini tutacak bir klasör oluştur. Bilgisayarında, daha sonra kolayca bulabileceğin bir ismi olan bir klasör oluştur.
    • Klasöre istediğin ismi verebilirsin; ama HTML ile çalışırken dosyalara ve klasörlere kısa, tek kelimelik isimler vermeyi alışkanlık hâline getirmek en iyisidir.
  2. 2
    Arka plan resmini HTML klasörüne at. Arka plan olarak kullanmak istediğin resmi HTML klasörüne at.
    • Web sitenin yavaş İnternet bağlantıları olan eski cihazlarda iyi çalışıp çalışmayacağını pek dert etmiyorsan arka planında yüksek çözünürlüklü bir resim kullanman sorun olmaz. Hafif, tekrarlayan desenleri olan basit resimler de arka plan resmi için iyi bir tercihtir; çünkü üzerinde her metni okuyabilirsin.
    • Bir resmin yoksa ücretsiz bir arka plan resmi indirebilirsin. Bir resim indirdiysen onu oluşturduğun HTML klasörüne at.
  3. 3
    Bir HTML dosyası oluştur. Bir metin düzenleyici aç, ardından yeni bir dosya oluştur. Dosyayı index.html olarak kaydet.
    • İstediğin metin düzenleyicisini kullanabilirsin; Windows’un Not Defteri’ni veya Mac OS X’in TextEdit’ini bile.
    • HTML ile çalışmaya odaklı bir metin düzenleyici kullanmak istiyorsan Windows, Mac OS X ve Linux işletim sistemlerinde çalışan bir metin düzenleyici olan Atom’u indirmek için buraya tıkla.
    • TextEdit’i kullanıyorsan HTML dosyasını yazmaya başlamadan önce Biçim menüsüne tıklayıp Yalın Metne Dönüştür’e tıkla. Bu ayar, HTML dosyasının bir web tarayıcısında düzgün bir şekilde yüklenmesini sağlar.
    • Microsoft Word gibi kelime işleyiciler HTML yazmak için iyi değildir; çünkü HTML sayfasına, sayfayı web tarayıcısında düzgün görüntülenemeyecek şekilde bozacak karakterler ve biçimlendirmeler ekler.

Kısım 2
HTML Dosyasını Yazmak

  1. 1
    Standart HTML kodunu kopyalayıp yapıştır. Aşağıdaki HTML kodunu seç ve kopyala, ardından açık olan index.html dosyana yapıştır.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Sayfa Başlığı</title>
     
    <style>
    body {
            background-image: url(" ");
    } 
     
    </style>
     
    </head>
     
    <body>
     
    </body>
    </html>
    
  2. 2
    Arka plan resmi URL’ini ekle. index.html dosyasında background-image: url(" "); satırını bul. İmleci parantezlerin arasına götür, arından arka plan resminin adını yaz. Arka plan resminin uzantısını eklediğinden emin ol.
    Bitirdikten sonra kod şöyle görünmeli:
    background-image: url("background.png");
    Bir dosya adını dosya yolu veya URL olmadan kullandığın zaman web tarayıcısı o resmi web sayfasının klasöründe arar. Dosya, dosya sisteminde başka bir klasördeyse o dosyanın tam yolunu eklemen gerekir.[3]
  3. 3
    HTML dosyasını kaydet.

Kısım 3
HTML Dosyasını İncelemek

  1. 1
    HTML dosyasını bir web tarayıcısında aç. index.html dosyasına sağ tıkla ve dosyayı, tercih ettiğin web tarayıcısına aç.
    • Tarayıcı açılınca resmi göremezsen resim adının index.html metin düzenleyici penceresinde doğru yazıldığından emin ol.
    • Tarayıcı açılınca arka plan resmi yerine HTML kodu görürsen index.html dosyan zengin metin belgesi olarak kaydedilmiştir. HTML dosyasını farklı bir metin düzenleyicide düzenlemek isteyebilirsin.
  2. 2
    HTML dosyasında düzenlemeler yap. Metin düzenleyici penceresinde imleci <body> </body> etiketlerinin arasına götür, ardından "Merhaba dünya!" yaz. Metni arka plan resminin üstünde görmek için tarayıcı penceresini yeniden yükle.

Kısım 4
HTML Kodunu Kavra

  1. 1
    HTML ve CSS etiketlerini kavra. HTML kodu açık ve kapalı etiketlerden oluşur. <body> etiketi açık body etiketidir, </body> ise kapalı olandır. Bir HTML sayfasındaki her açık etiketin, sayfanın düzgün görüntülenmesi için bir kapanış etiketine ihtiyacı olur.
  2. 2
    DOCTYPE etiketini kavra. İyi yazılmış her HTML sayfası <!DOCTYPE html> ile başlamalıdır. Bu, web tarayıcına HTML sayfasının bir HTML sayfası olduğunu söyler.
  3. 3
    HTML sayfasında düzenlemeler yap. Metin düzenleyici penceresinde imleci <body> </body> etiketlerinin arasına götür, ardından "Merhaba dünya!" yaz. Metni arka plan resminin üstünde görmek için tarayıcı penceresini yeniden yükle.
  4. 4
    HTML ve CSS etiketlerini kavra. HTML kodu açık ve kapalı etiketlerden oluşur. <body> etiketi açık body etiketidir, </body> ise kapalı olandır. Bir HTML sayfasındaki her açık etiketin, sayfanın düzgün görüntülenmesi için bir kapanış etiketine ihtiyacı olur.
  5. 5
    Title etiketini kavra. <title> etiketi, tarayıcı pencerenin başlık çubuğunda ve tarayıcı sekmesinde görünen metindir.
  6. 6
    Style etiketini kavra. <style> etiketi CSS içeriğini belirtir. <style> etiketleri arasındaki her şey CSS kodudur.
  7. 7
    Body etiketini kavra. <body> etiketleri arasına yazılan tüm metinler, HTML veya CSS kodu olmadığı sürece yazıldığı gibi görünür.
  8. 8
    HTML sayfasında düzenlemeler yap. Metin düzenleyici penceresinde imleci <body> </body> etiketlerinin arasına götür, ardından "Merhaba dünya!" yaz. Metni arka plan resminin üstünde görmek için tarayıcı penceresini yeniden yükle.

Kısım 5
CSS Kodunu Kavra

  1. 1
    CSS kodunu kavra. index.html kodundaki <style> etiketleri arasındaki CSS kodu, tarayıcına, sayfa işlendiği zaman <body> etiketine belli bir isimle bir arka plan resmi eklemesini söyler.
  2. 2
    CSS kodunu incele.
    body {
            background-image: url("arkaplan.png");
    }
    
  3. 3
    CSS kodunun kısımlarını kavra. CSS stilleri iki kısımdan oluşur: Seçici ve tanımlama.[4]
    Örnekte "body" ibaresi seçici,
    background-image: url("background.png") ibaresi de tanımlamadır.
    Seçici, herhangi bir HTML etiketi olabilir.
    Tanımlamalar her zaman süslü parantezler { } arasına yazılır.
  4. 4
    CSS tanımlamasını kavra. CSS tanımlaması iki kısımdan oluşur: Özellik ve değer. Süslü parantezler arasında
    background-image ibaresi özellik, url("background.png") ibaresi de değerdir.[5]
    Özellik, neye stil eklendiğini tanımlarken değer de özelliğe nasıl stil ekleneceğini tanımlar.
    Özellik ve değer her zaman iki nokta üst üste ile ayrılır :.
    CSS tanımlamaları her zaman noktalı virgül ile biter ;.

Makale Bilgisi

wikiHow bir “wiki”dir. Bu, makalelerimizin çoğunun birden fazla yazar tarafından ortaklaşa yazıldığı anlamına gelir. Bu makaleyi oluşturmak için, zaman içinde makaleyi düzenlemek ve iyileştirmek üzere bazıları isimsiz, 35 kişi çalıştı.

Kategoriler: Bilgisayar ve Elektronik Cihazlar

Diğer dillerde:

English: Set a Background Image in HTML, Español: fijar una imagen de fondo en HTML, Italiano: Impostare lo Sfondo di Una Pagina HTML, Português: Definir um Plano de Fundo em HTML, Русский: добавить фоновое изображение в HTML, Deutsch: Ein Hintergrund Bild in HTML einfügen, Bahasa Indonesia: Mengatur Gambar Latar di HTML, Français: définir une image en fond de page en HTML, Nederlands: Een achtergrondafbeelding toevoegen aan HTML, ไทย: ใส่ภาพพื้นหลังด้วย HTML, العربية: ضبط صورة خلفية في لغة اتش تي ام ال, 한국어: HTML 배경화면 지정하는 법, Tiếng Việt: Thiết lập hình nền trong HTML, 日本語: HTMLで背景画像を設定する, हिन्दी: HTML में बैकग्राउंड इमेज सेट करें (Set a Background Image in HTML), 中文: 设置HTML背景图片

Bu sayfaya 90 defa erişilmiş.
Bu makale işine yaradı mı?