Sadə HTML saytı yaratmaq
1. Niyə bizə HTML sayt lazımdır?
Web-developmentın maraqlı dünyasına xoş gəlmisiniz! Bu gün biz sadə statik bir HTML-sayt yaradacağıq və onu əvvəlki mühazirələrdə qurduğunuz web-serverdə yerləşdirəcəyik. Əgər əvvəllər heç HTML yazmamısınızsa, narahat olmayın – hər şey çox sadə olacaq. Bizim məqsədimiz yalnız HTML əsaslarını anlamaq deyil, həm də saytınızı web-server vasitəsilə dünyaya necə əlçatan edəcəyinizi öyrənməkdir.
İndi isə növbəti addımı atacağıq – öz HTML saytımızı yaradacaq və onun görünüşünü web-serveriniz vasitəsilə quracağıq. Web-məkanı fəth etməyə hazırsınız? O zaman başlayaq!
HTML (HyperText Markup Language) – bütün web-səhifələrin əsasını təşkil edir. O, saytın strukturuna və məzmununa cavabdehdir. Standart HTML-də başlıqları, mətni, şəkilləri, linkləri və hətta cədvəlləri təsvir edə bilərsiniz. Öyrənilməsi asandır, amma hər hansı bir saytın bazası olmaq üçün kifayət qədər güclüdür.
Real həyatda statik HTML-səhifələrlə işləmək bacarığı müxtəlif vəziyyətlərdə faydalıdır:
- Web-tətbiqlər üçün prototipləri tez bir zamanda yaratmaq.
- Sənədlər üçün statik səhifələr yazmaq və test etmək.
- Server tətbiqləri üçün baza interfeysi hazırlamaq.
Həmçinin HTML – veb-səhifə şəklində CV yaratmaq üçün əla bir üsuldur (bəli, bəzən recruiter-lər bunu sevir). Proqramçı olaraq bizim üçün isə HTML-in əsaslarını bilmək tam must-have-dir.
2. Addım 1. HTML əsasları: ilk səhifəmizi yaradırıq
Proqramlaşdırma – LEGO kimi bir şeydir: hər yaş üçün sevilən məşğuliyyətdir. İlk "kərpicimizlə" başlayaq – ilk veb səhifəmizi yaradaq.
Minimal HTML sənəd nümunəsi
index.html adlı bir fayl yaradın (məsələn, nano, vim və ya bir az qrafika istəyirsinizsə, gedit-də) və aşağıdakı kodu yazın:
<!DOCTYPE html>
<html>
<head>
<title>Mənim ilk saytim</title>
</head>
<body>
<h1>Salam, dünya!</h1>
<p>Bu mənim HTML-dəki ilk veb səhifəmdir.</p>
</body>
</html>Kodun izahı
<!DOCTYPE html>– brauzerə HTML5-dən istifadə etdiyimizi bildirir.<html>– bütün sənədi açır. Səhifənin bütün məzmunu bu teqin içərisində yerləşir.<head>– saytdakı meta məlumatlar üçün bölmədir (məsələn, səhifənin başlığı, stil və ya scriptlərin qoşulması).<title>– brauzerin nişanında göstərilən səhifənin adı.<body>– əsas bölmə, bütün görünən məzmun burada yerləşir.<h1>– birinci dərəcəli səhifə başlığıdır (rəqəm nə qədər kiçik olsa, başlıq bir o qədər böyükdür).<p>– mətn üçün abzas.
Bəli, bu cəmi yeddi sətirdir, amma bu sətirlər saytınız üçün əsas olacaq!
3. Addım 2. HTML-saytı serverdə yerləşdiririk
İndi, səhifəmiz hazır olduqca, onu dünyaya göstərmək vaxtıdır. Bunun üçün veb-serverdən istifadə edəcəyik.
Sayt qovluğunun hazırlanması
Sayt fayllarınızı saxlamaq üçün bir qovluq yaradın. Məsələn, əgər virtual hostda example.com domeni ilə saytı yerləşdirmək istəyirsinizsə, aşağıdakı əmri icra edin:
sudo mkdir -p /var/www/example.com
Daha sonra index.html faylınızı bu qovluğa köçürün:
sudo cp index.html /var/www/example.com/
Haqiqi sehr buradan başlayır – fayl artıq istifadəyə hazırdır.
4. Addım 3. Saytı xidmət etmək üçün veb serverin sazlanması
Nginx üçün konfiqurasiya
Virtual hostun konfiqurasiya faylını açın:
sudo nano /etc/nginx/sites-available/example.comAşağıdakı konfiqurasiyanı əlavə edin:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Virtual hostu aktiv edin və serveri yenidən başladın:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Apache üçün konfiqurasiya
Virtual hostun konfiqurasiya faylını açın:
sudo nano /etc/apache2/sites-available/example.com.confAşağıdakı konfiqurasiyanı əlavə edin:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Virtual hostu aktiv edin və serveri yenidən başladın:
sudo a2ensite example.com.conf sudo systemctl restart apache2
Saytın yoxlanılması
İndi brauzerinizi açın, http://example.com (və ya serverinizin IP ünvanını) daxil edin və nəticədən zövq alın. Əgər sizin möhtəşəm "Salam, dünya!"nızı görürsünüzsə – təbriklər, hər şey işləyir!
5. Addım 4. Saytımızı bəzəyirik
Statika yaxşıdır, amma bir az CSS heç kimə xətrinə dəyməz. Gəlin sayta bir az stil əlavə edək.
/var/www/example.com/ qovluğuna yeni bir style.css faylı əlavə edin:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}İndi index.html faylınızı yeniləyin və CSS üçün link əlavə edin:
<!DOCTYPE html>
<html>
<head>
<title>Mənim ilk saytım</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Salam, dünya!</h1>
<p>Bu mənim HTML-dəki ilk veb səhifəmdir.</p>
</body>
</html>Səhifəni yenilədikdən sonra üslubda kiçik dəyişikliklər görəcəksiniz. İndi saytınız bir az daha cazibədar oldu!
6. Tipik problemlər və onların həlli
Veb-saytlarla işləyərkən bir sıra problemlərlə qarşılaşmaq olar, amma narahat olmayın, biz tədbir görmüşük:
"403 Forbidden" xətası. Sayt qovluğuna olan hüquqları yoxlayın. İstifadə edin:
sudo chmod -R 755 /var/www/example.com"404 Not Found" xətası. Sayt fayllarının düzgün qovluqda olduğunu və düzgün adlandırıldığını yoxlayın.
Sayt göstərilmir. Veb-server xidmətinizin başladığını yoxlayın:
sudo systemctl status nginx sudo systemctl status apache2
İndi saytınız onun ünvanını bilən hər kəs üçün əlçatandır. Bu, motivasiya verici deyilmi? Növbəti mühazirələrdə daha çox şey öyrənəcəksiniz: təhlükəsizlik üçün HTTPS əlavə etmək və server parametrlərini idarə etmək.
GO TO FULL VERSION