Layout üçün iş mühiti

Layihəni fayllara ayır

Kod redaktoru mətn fayllarını yazmağa, brauzer nəticəni yoxlamağa, tapşırıq izləyicisi isə görüləcək işi sıralamağa kömək edir. VS Code-da tək fayl əvəzinə layihə qovluğunu aç: beləliklə faylların əlaqəsini görmək asandır.

my-page/
  index.html
  styles.css
  images/
    portrait.jpg

Nümunə

<!-- index.html faylının head hissəsində -->
<link rel="stylesheet" href="styles.css">
<!-- body daxilində -->
<img src="images/portrait.jpg" alt="Şəxsi portret">

Nümunə

Redaktə və yoxlama dövrü

Faylı redaktə et, saxla və brauzeri yenilə. Lokal server istifadə etdikdə səhifə http://localhost:... ünvanından açılır; xüsusən sonrakı fetch dərslərində bu vacibdir. Redaktor əlavələri rahatlıq üçündür, düzgün fayl yollarını və HTML strukturunu əvəz etmir.

Tapşırıqları kiçilt: əvvəl struktur, sonra üslub, sonra ekran uyğunluğu. Hər tapşırığın bitmə meyarını yaz. İlkin statik yayımda hostinqə HTML, CSS və şəkil faylları gedir; sənəd adını index.html saxla və yayımdan sonra resurs yollarını yenidən yoxla. Yayımlama addımları ayrıca sayt yayımlamaq mövzusunda dərinləşdirilir.

Əlavə qeydlər və mənbələr

Real layihəni əlaqəli HTML, CSS və şəkil faylları kimi təşkil et. Kod redaktoru, brauzer və tapşırıq izləyicisinin rolunu ayır; redaktordakı dəyişiklikləri saxlayıb lokal nəticəni yoxla.

Niyə vacibdir?

Redaktor, terminal və brauzer gündəlik işinin üç əsas alətidir.

Əvvəlki biliklər

Veb necə işləyir?

Bu mövzuda

VS Code və layihə qovluğu
Fayllar və nisbi yollar
Tapşırıq izləyicisi və ilkin yayım

Mövzuya baxış

Bir qovluq, bir layihə

Faylları bir layihə qovluğunda saxla. index.html səhifənin məzmunu, style.css görünüşü, script.js isə davranışı üçün istifadə oluna bilər. Fayl adlarında sadə latın hərfləri və defis seçmək ünvanlarla işləməyi asanlaşdırır.

VS Code-da qovluğu aç, yeni fayl yarat və yadda saxla. Terminalın cari qovluğunun layihə qovluğu olduğunu yoxla. Əmr işlətməzdən əvvəl onun hansı fayllara təsir etdiyini anla.

Brauzerin Developer Tools panelini açmağı öyrən: Elements struktur və üslubları, Console JavaScript mesajlarını, Network isə sorğuları göstərir.

Mövzu üzrə praktika

ilk-saytim qovluğu yarat. İçində index.html aç, bir başlıq yaz və faylı brauzerdə göstər.

Faylı redaktə edib yadda saxladıqdan sonra dəyişiklik brauzerdə görünür.

Mövzunun yoxlama siyahısı

VS Code quraşdır və layihə qovluğunu aç
Fayl, qovluq və uzantı anlayışlarını öyrən
Terminalda cari qovluğu tap və qovluqlar arasında keç

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Layihənin fayllarını birləşdir

Əvvəl səhifəni, sonra üslub faylını hazırla və nisbi yolu qoş.

Prosesi son vəziyyətə çatdır.

Boş qovluq
HTML faylı
CSS faylı
Fayllar bağlıdır

Boş qovluq

Yeni layihə üçün qovluq ayırdın.

my-page/

Bu məşq prosesi modelləşdirir.

Özün sına

index.html, styles.css və images qovluğu yarat. CSS və şəkli nisbi yolla qoş, sonra başqa kompüterdə açıla bilən layihə qovluğu hazırla.

Nəticəni necə yoxlayım?

Qovluqdakı HTML, CSS və şəkil faylları nisbi yollarla əlaqəlidir və layihə köçürüldükdə də açılır.

Gözlənilən nəticə

Bütün layihe qovluğunu başqa yerə köçürəndə CSS və şəkil yenə yüklənir.
Fayl yollarında şəxsi kompüterin mütləq ünvanı yoxdur.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Nisbi yollar layihə qovluğunun bütöv köçürülməsinə imkan verir. Şəkli də qovluğa əlavə etmək lazımdır.

qovluq.txt

layihe/
  index.html
  styles.css
  images/
    avatar.svg

index.html

<!doctype html>
<html lang="az"><head><meta charset="UTF-8"><title>Layihəm</title><link rel="stylesheet" href="./styles.css"></head><body><h1>Salam</h1><img src="./images/avatar.svg" width="96" height="96" alt="Mavi dairəli avatar nümunəsi"></body></html>

styles.css

body{font:18px/1.6 Arial,sans-serif;padding:24px}

images/avatar.svg

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96"><circle cx="48" cy="48" r="40" fill="#214e80"/></svg>

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.