Banyak desainer tata letak pemula, yang baru mempelajari esensi pembuatan situs web, sering bertanya-tanya bagaimana cara membuat latar belakang gambar dalam html. Dan meskipun beberapa orang dapat mengatasi tugas ini, masalah masih muncul saat merentangkan gambar ke seluruh lebar monitor. Pada saat yang sama, saya ingin situs tersebut ditampilkan secara merata di semua browser, sehingga persyaratan lintas browser harus dipenuhi. Anda dapat mengatur latar belakang dengan dua cara: menggunakan gaya CSS. Setiap orang memilih opsi yang paling optimal untuk dirinya sendiri. Tentu saja, gaya CSS jauh lebih nyaman, karena kodenya disimpan dalam file terpisah dan tidak menggunakan kolom tambahan di tag utama situs, tetapi pertama-tama, mari kita lihat metode sederhana untuk menyetel gambar ke latar belakang situs.

Tag HTML dasar untuk membuat latar belakang

Jadi, mari kita beralih ke pertanyaan, latar belakang dalam html di seluruh layar. Agar situs terlihat indah, Anda perlu memahami satu detail yang cukup penting: cukup membuat latar belakang gradien atau mengecatnya dengan warna solid, tetapi jika Anda perlu memasukkan gambar ke latar belakang, itu tidak akan meregang. di seluruh lebar monitor. Awalnya, Anda perlu memilih gambar atau membuat desain sendiri dengan ekstensi di mana halaman situs Anda akan ditampilkan. Baru setelah gambar latar belakang siap, pindahkan ke folder bernama “Gambar”. Di dalamnya kita akan menyimpan semua gambar, animasi dan file grafik lainnya yang kita gunakan. Folder ini harus berada di direktori root semua file html Anda. Sekarang Anda dapat melanjutkan ke kodenya. Ada beberapa pilihan penulisan kode yang akan mengubah background menjadi gambar.

1. Tulis atribut tag.
2. Melalui gaya CSS dalam kode HTML.
3. Tulis gaya CSS dalam file terpisah.

Cara membuat latar belakang gambar dalam HTML terserah Anda, tetapi saya ingin menyampaikan beberapa patah kata tentang cara yang paling optimal. Cara pertama, menggunakan penulisan melalui atribut tag, sudah lama ketinggalan jaman. Opsi kedua digunakan dalam kasus yang sangat jarang, hanya karena banyak kode yang sama diperoleh. Dan opsi ketiga adalah yang paling umum dan efektif. Berikut adalah contoh tag HTML:

1. Cara penulisannya yang pertama adalah melalui atribut tag (body) pada file index.htm. Ditulis dalam bentuk berikut: (body background= "Nama_Folder/Nama_Gambar.ekstensi")(/body). Artinya, jika kita memiliki gambar dengan nama “Gambar” dan berekstensi JPG, dan kita menamai folder tersebut “Gambar”, maka entri kode HTML akan terlihat seperti ini: (body background="Images/Picture.jpg") … (/tubuh) .
2. Metode perekaman kedua mempengaruhi gaya CSS, tetapi ditulis dalam file yang sama bernama index.htm. (body style="latar belakang: url("../Images/Picture.jpg")").
3. Dan cara perekaman yang ketiga dibuat dalam dua file. Dalam dokumen bernama index.htm, baris berikut ditulis: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Dan di file style bernama style.css kita sudah menulis: body (background: url(Images/Picture.jpg")).

Kami telah membahas cara membuat gambar latar belakang dalam HTML. Sekarang Anda perlu memahami cara meregangkan gambar melintasi lebar seluruh layar.

Cara meregangkan gambar latar belakang ke lebar jendela

Bayangkan layar kita dalam bentuk persentase. Ternyata seluruh lebar dan panjang layar akan menjadi 100% x 100%. Kita perlu meregangkan gambar hingga lebar ini. Mari tambahkan baris ke entri gambar di file style.css, yang akan meregangkan gambar ke seluruh lebar dan panjang monitor. Bagaimana ini ditulis dalam gaya CSS? Sederhana saja!

latar belakang: url(Gambar/Gambar.jpg")

ukuran latar belakang: 100%; /* entri ini cocok untuk sebagian besar browser modern */

Jadi kami menemukan cara menjadikan gambar sebagai latar belakang dalam html untuk memenuhi seluruh layar. Ada juga cara untuk menulis di file index.htm. Meskipun cara ini sudah ketinggalan jaman, namun para pemula perlu mengetahui dan memahaminya. Dalam tag div (head)(style) ( background-size: cover; ) (/style) (/head), entri ini berarti kita memilih blok khusus untuk latar belakang, yang akan diposisikan di seluruh lebar jendela. Kami melihat 2 cara untuk membuat latar belakang situs web menjadi gambar HTML sehingga gambar tersebut membentang di seluruh lebar layar di browser modern mana pun.

Cara membuat latar belakang tetap

Jika Anda memutuskan untuk menggunakan gambar sebagai latar belakang sumber daya web masa depan, maka Anda hanya perlu mencari tahu cara membuatnya tidak bergerak agar tidak memanjang dan merusak tampilan estetika. Cukup mudah untuk menulis tambahan kecil ini dengan bantuan. Anda perlu menambahkan satu frasa di file style.css setelah background: url(Images/Picture.jpg") fixed; atau sebagai gantinya menambahkan baris terpisah setelah titik koma - position: fixed. Dengan demikian, gambar latar belakang Anda akan menjadi tidak bergerak. Selama Saat menelusuri konten di situs, Anda akan melihat bahwa baris teks bergerak, tetapi latar belakang tetap di tempatnya. Jadi, Anda telah mempelajari cara membuat latar belakang gambar dalam html dengan beberapa cara.

Bekerja dengan tabel dalam HTML

Banyak web developer yang belum berpengalaman, ketika dihadapkan pada tabel dan blok, seringkali tidak memahami cara menjadikan gambar sebagai background tabel di HTML. Seperti semua gaya CSS, bahasa pemrograman web ini cukup sederhana. Dan solusi untuk masalah ini adalah dengan menulis beberapa baris kode. Anda pasti sudah tahu bahwa penulisan baris dan kolom tabel masing-masing disebut dengan tag (tr) dan (td). Untuk membuat latar belakang tabel dalam bentuk gambar, Anda perlu menambahkan frasa sederhana ke tag (tabel), (tr) atau (td) yang menunjukkan tautan ke gambar: background = URL gambar. Untuk lebih jelasnya, mari kita berikan beberapa contoh.

Tabel dengan gambar dan bukan latar belakang: contoh HTML

Mari menggambar tabel 2x3 dan menjadikan latar belakangnya sebagai gambar yang disimpan di folder “Gambar”: (latar belakang tabel = “Gambar/Gambar.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabel). Dengan cara ini meja kita akan dicat menjadi latar belakang gambar.

Sekarang mari kita menggambar piring yang sama dengan dimensi 2x3, tetapi menyisipkan gambar ke dalam kolom bernomor 1, 4, 5 dan 6. (tabel)(tr)(td background = “Gambar/Gambar.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Gambar/Gambar.jpg”)4(/td) (td background = “Gambar/Gambar.jpg”) 5( /td) (td latar belakang = “Gambar/Gambar.jpg”)6(/td) (/tr) (/tabel). Setelah dilihat, kita melihat bahwa latar belakang hanya muncul di sel tempat kita mendaftar, dan tidak di seluruh tabel.

Kompatibilitas situs lintas browser

Ada juga yang namanya kompatibilitas lintas-browser dari sumber daya web. Artinya, halaman situs akan ditampilkan dengan benar di berbagai jenis dan versi browser. Dalam hal ini, Anda perlu menyesuaikan kode HTML dan gaya CSS dengan kebutuhan browser. Selain itu, di era modern perkembangan ponsel pintar, banyak pengembang web yang mencoba membuat situs yang disesuaikan baik untuk versi seluler maupun tampilan komputer.

Halo semuanya! Pelayan Anda yang rendah hati menghubungi Anda dengan sebagian materi yang berguna dan praktis tentang topik cara mengatur latar belakang untuk sebuah situs web. Ini adalah permulaan tata letak html dan di sini saya akan menunjukkan dengan jelas dengan contoh bagaimana Anda dapat membuat latar belakang yang indah untuk sebuah situs yang pasti akan menarik pengguna Internet dan menambah orisinalitas.

Jika Anda perhatikan, sebagian besar pebisnis online menggunakan latar belakang unik pada halaman penjualan dan langganan mereka. Hari ini kita akan menganalisis komponen teknis dari proses ini.

Jadi, pertama-tama kita perlu, tentu saja, sebuah gambar. Ada satu situs yang sangat bagus di Internet asing tempat Anda dapat mengunduh berbagai macam gambar untuk latar belakang situs web. Jumlah mereka sangat banyak di sana. Situs tersebut bernama Pola Halus.

Ini muncul pertama kali dalam daftar mesin pencari Google, jadi saya merekomendasikannya untuk bekerja. Anda juga dapat menemukan sejumlah besar situs lain jika Anda mengetik di mesin pencari sesuatu seperti “pola gambar latar belakang”, “unduh gambar latar belakang untuk situs” dan sebagainya.

Jika Anda tidak memiliki masalah dengan bahasa Inggris, Anda akan memahaminya tanpa kesulitan.

Pada artikel ini saya telah memilih topik dan disebut tweed. Anda dapat mengunduhnya.

Ini adalah tampilannya dalam versi kecil di situs web

Pertama, buat dokumen baru di program

Dan sebelum mengeditnya, pastikan untuk menyimpannya dengan nama, misalnya indeks.html dan membuat folder di komputer, misalnya Anda dapat membuat folder “Situs saya” dan meletakkan file indeks kita (index.html) di dalamnya. Sebaiknya buat folder dalam bahasa Inggris agar browser tidak bingung dan menampilkan situs secara tidak benar.

Selain itu, di folder utama "situs saya" Anda perlu membuat dua subfolder lagi, di satu folder kami akan menempatkan semua gambar kami dan itu akan disebut "gambar", dan yang lainnya kami akan memberi nama "CSS" (gaya berjenjang lembar) dan letakkan file di sana gaya.css

Sekarang kita dapat mengerjakan dokumen kita. Langkah selanjutnya adalah memasukkan kode HTML kosong, yang disebut kerangka utama tempat semuanya dimulai. Anda dapat mendownloadnya secara langsung. Selanjutnya, kami akan menyalin semuanya dari file ini dan mentransfernya ke file program kami. Hasil akhirnya akan seperti berikut

Di sebelah nama file Anda akan melihat floppy disk berwarna merah. Jadi jika berwarna merah berarti file belum disimpan, pastikan untuk mengklik tombol simpan agar disket berubah menjadi biru.

Pada tag judul Anda dapat mengubah judul dokumen, misalnya Anda dapat menjadikannya “Halaman web pertama saya”. Dan pastikan halaman Anda disimpan dalam pengkodean UTF-8

Sebaliknya, jika ada pengkodean yang berbeda, misalnya windows-1251, maka teks dokumen di browser akan ditampilkan dalam hieroglif. Anda dapat mengubah pengkodean di bagian “Encodings – Encode in Utf-8 (tanpa BOM)” pada toolbar program.

Dan jangan lupa untuk menyimpan setiap tindakan yang kita lakukan.

Sekarang mari kita mulai membuat latar belakang di dokumen kita. Saya akan segera mengatakan bahwa semua tindakan kita pada desain halaman web akan dilakukan menggunakan cascading style sheet yang disebut CSS, yaitu, kita akan membuat bingkai dalam html, dan kita akan membawanya ke gaya dan tampilan yang indah menggunakan CSS.

Dengan cara ini Anda akan membiasakan diri dengan urutan tindakan yang benar. Anda tidak boleh menangani gaya secara langsung di dokumen html; lebih baik meletakkannya di dokumen terpisah.

Untuk melakukan ini, di program Notepad++ kami, kami akan membuat file lain dan menamainya Style.css dan menyimpannya di folder css baru, yang akan ditempatkan di folder bersama “Situs saya”

Besar! Agar browser kita dapat menampilkan halaman dengan benar, kita perlu menghubungkan style sheet ke dokumen html kita. Begini cara melakukannya

Kita langsung masuk ke seluruh baris di atas. Dengan garis ini kita menghubungkan style sheet kita.
Sekarang kita akan menentukan gambar latar belakang untuk tag tubuh kita melalui style sheet. Untuk melakukan ini, kita membuat struktur berikut di dokumen style.css (ambil saja dan tulis di kode program)

Mari saya jelaskan sedikit di sini. Atribut background memiliki banyak nilai, salah satunya adalah background-repeat, yang bertanggung jawab untuk meregangkan gambar latar belakang kita untuk dokumen web.

LATAR BELAKANG-ULANG:

REPEAT //(meregangkan secara horizontal dan vertikal) REPEAT-X // (meregangkan secara horizontal saja) REPEAT-Y //(meregangkan secara vertikal saja) NO-REPEAT //(jangan mengulang gambar latar belakang)

Dalam kasus kami, kami mereplikasi gambar kecil kami secara vertikal dan horizontal. Hasilnya, seluruh halaman terisi dengan gambar kita. Ini tampilannya di browser:

Saya juga telah membuat pilihan situs khusus untuk Anda di mana Anda dapat mengunduh latar belakang yang indah untuk situs tersebut

Hari baik untuk semua orang yang ingin belajar dan mempelajari sesuatu yang baru! Pernahkah Anda memperhatikan tampilannya, yang pada saat pengembangannya pembuatnya terlalu malas untuk mendesain latar belakang halamannya? Dan saya melakukannya. Kelihatannya buruk. Seringkali, karena kurangnya pembagian yang biasa antara berbagai jenis informasi, informasi tersebut menjadi tercampur dan tidak ada keinginan untuk melihat lebih jauh pada sumber daya web tersebut.

Untuk mencegah bencana seperti itu terjadi pada saya, saya memutuskan untuk menulis artikel dengan topik: “Cara membuat latar belakang halaman dalam html.” Setelah membaca publikasinya, Anda akan mempelajari alat apa yang dapat Anda gunakan untuk mengatur desain latar belakang, cara memperbaiki atau mengubah latar belakang, dan banyak lagi yang akan membantu membuat situs Anda menarik. Sekarang mari kita mulai!

Alat dasar untuk mengatur latar belakang halaman web

Untuk mengatur gambar latar belakang, pengembang bahasa web menyediakan atribut latar belakang. Ini tersedia di , dan di css.

Dalam bahasa markup, ini adalah atribut dari tag body, dan dalam style sheet, ini adalah properti universal yang memungkinkan Anda mengatur hingga 5 karakteristik latar belakang secara bersamaan. Background merupakan elemen yang cukup fleksibel yang dapat digunakan untuk mengatur background berupa satu warna, gambar berwarna, atau bahkan animasi.

Nah, untuk mengatur gambar background melalui unit html cukup tulis kode berikut: ... dan alih-alih kata "alamat file", masukkan jalur ke gambar.

Namun, harap diperhatikan! Jika Anda ingin melihat kanvas satu warna sebagai latar belakang, ditentukan oleh nilai dari palet warna, maka ini dilakukan dengan menggunakan atribut bgcolor.

Misalnya, ..., kami telah menetapkan latar belakang hitam untuk situs kami.

Warna dalam css dan html ditentukan dengan kata bahasa Inggris (misalnya, merah) atau kode khusus, yang terdiri dari tanda # dan enam karakter setelahnya (misalnya, #FFDAB9).

Saat Anda mengetikkan opsi kedua dalam perangkat lunak khusus untuk pengembang, palet akan secara otomatis muncul di depan Anda. Jika Anda baru mulai mempelajari bahasa web ini, Anda dapat mencari kode warna di Internet.

Latar belakang sebagai properti dalam cascading style sheet

Itu diatur baik dalam file terpisah dengan gaya css, atau dalam sebuah elemen

Pada catatan ini kita dapat menyimpulkan pekerjaan kita. Bergabunglah dengan barisan pelanggan setia saya, ajukan pertanyaan jika ada yang kurang jelas, dan jangan serakah dengan link ke blog saya, tapi bagikan ke teman-teman Anda. Saya berharap Anda mendapatkan pengalaman belajar yang menyenangkan. Sampai jumpa!

Hormat kami, Roman Chueshov

Vlad Merzhevich

Karena kekhasan halaman web, gambar latar belakang memainkan peran penting dalam tata letak dokumen situs. Pada saat yang sama, mereka terlibat aktif dalam berbagai hal, misalnya mengotomatisasi proses melampirkan gambar ke teks, membuat transisi gradien, dan tentu saja menambahkan latar belakang di bawah konten. Berikut adalah beberapa aspek penggunaan gambar latar belakang.

Latar belakang pada halaman web

Menyetel gambar latar belakang ke halaman web biasanya dilakukan melalui atribut latar belakang dari tag. .

Pola ini diulangi secara horizontal dan vertikal, sehingga memenuhi seluruh jendela browser. Jelas bahwa tidak ada pilihan khusus untuk kreativitas di sini, jadi mari kita beralih ke gaya dan melihat apa yang bisa dilakukan menggunakan CSS.

CSS memiliki lima atribut yang mengontrol gambar latar belakang: penambahan, posisi, dan pengulangan. Namun, semua parameter ini digantikan oleh satu properti universal, background , yang akan kita gunakan di masa mendatang.

Menambahkan kertas dinding

Penambahan gambar terjadi dengan mengatur alamat gambar menggunakan kata kunci url. Untuk mengontrol pengulangan gambar, argumen no-repeat, repeat-x (ulangi secara horizontal) dan repeat-y (ulangi secara vertikal) digunakan. Berkat ini, Anda bisa mendapatkan halaman web seperti yang ditunjukkan pada Gambar. 1.

Untuk menyetel gambar ke halaman web, Anda perlu menambahkan properti gaya latar belakang ke pemilih BODY, seperti yang ditunjukkan pada Contoh 1.

Gambar latar belakang

Dalam contoh ini, grafik target.gif didefinisikan sebagai latar belakang halaman web tanpa pengulangan gambar. Untuk mencegah gambar menempel erat ke tepi browser, gambar digeser 30 piksel ke kanan dan 20 piksel ke bawah dari posisi semula.

Mengulangi suatu pola

Karena Anda dapat mengatur pola latar belakang agar berulang secara horizontal atau vertikal, tersedia beberapa opsi untuk desain halaman web. Misalnya, untuk membuat garis vertikal di sepanjang tepi kiri (Gbr. 2), Anda memerlukan gambar yang ditunjukkan pada Gambar. 3.

Desainnya harus sedemikian rupa sehingga menyatu secara vertikal tanpa jahitan yang terlihat, dan juga membentuk satu kesatuan dengan warna latar belakang halaman web yang ditentukan.

Contoh 2 menunjukkan cara membuat gambar latar belakang, sekali lagi menggunakan properti background dan nilai repeat-y-nya.

Untuk mendapatkan halaman web yang ditunjukkan pada Gambar. 4, pertama-tama Anda harus membuat gambar dengan transisi gradien. Lebarnya cukup untuk menentukan 20-40 piksel, dan tinggi gambar tergantung pada tujuan dokumen dan tinggi yang diharapkan dari konten halaman web. Jangan lupa juga bahwa gambar yang besar akan memperbesar ukuran file grafik. Dan ini akan berdampak negatif pada kecepatan pemuatannya dan, pada akhirnya, menyebabkan tampilan latar belakang lebih lambat. Untuk kasus ini, gambar berukuran 30x200 piksel cukup cocok (Gbr. 5).

Contoh 3 menunjukkan kode HTML untuk membuat latar belakang gradien.

Contoh 3: Pengulangan latar belakang horizontal

Desain gradien cocok dengan blok satu warna, jadi dalam contoh ini kita menambahkan lapisan untuk menampilkan konten halaman web.

Menambahkan gambar ke teks

Dengan menggunakan gambar latar belakang, Anda dapat mengotomatiskan proses penambahan grafik ke teks tertentu, seperti judul. Untuk melakukan ini, gunakan properti universal latar belakang, yang diterapkan pada pemilih yang diinginkan. Nilainya adalah jalur menuju gambar dan, agar tidak terulang, argumen larangan berulang (contoh 4).

Contoh 4: Menambahkan gambar

Menuju

Teks utama

Seperti yang ditunjukkan dalam contoh ini, gambar dapat dipindahkan secara horizontal dan vertikal dari posisi aslinya, secara default ini adalah sudut kiri atas elemen blok. Pergeseran latar belakang memungkinkan Anda memposisikan gambar dalam kaitannya dengan teks dengan cara yang diinginkan. Untuk mencegah teks tumpang tindih dengan gambar, Anda harus menambahkan properti padding-left, yang menyebabkan teks digeser ke kanan dengan jarak yang ditentukan. Ini bersifat individual dalam setiap kasus dan biasanya sama dengan lebar gambar ditambah jarak yang diinginkan antara gambar dan teks.

Selamat Datang di blog saya. Mari terus mempelajari dasar-dasar html. Tutorial ini akan sangat sederhana dan menarik sehingga saya harap Anda ingin mempelajari lebih lanjut tentang bahasa pemrograman. Hanya dalam beberapa menit Anda akan belajar cara menjadikan gambar sebagai latar belakang dalam HTML dan mencapai hasil yang luar biasa.

Saya juga akan membicarakan beberapa nuansa yang akan membuat latar belakang lebih rata dan indah. Baiklah, bisakah kita mulai?

Memilih gambar

Saya ingin memulai dengan memilih gambar. Sehingga tampilan halaman Anda lebih rata dan cantik, serta tidak perlu repot dengan ukuran dan perataannya. Saya sarankan segera mencari tekstur yang mulus. Apa itu?

Sayangnya, tidak mungkin meregangkan gambar dalam html untuk memenuhi seluruh layar. Foto digunakan dalam ukuran sebenarnya. Jika gambarnya kecil, maka akan menutupi seluruh area, seperti pada gambar di bawah. Untuk meregangkan gambar, Anda harus membuat dokumen CSS tambahan, tanpanya gambar tidak akan berfungsi.

Meskipun demikian, Anda memiliki kesempatan untuk melewati sistem. Untuk melakukan ini, gunakan Photoshop dan gambar hingga lebar layar (1280x720). Meskipun dalam hal ini, ketika digulir ke bawah, gambar akan menggantikan gambar lain.

Pilihan yang jauh lebih baik jika Anda tidak ingin menggunakan css adalah menggunakan tekstur yang mulus. Mereka tidak memiliki sambungan yang terlihat. Mereka seperti wallpaper atau ubin modern dalam desain. Yang satu menggantikan yang lain dan tidak ada sambungan yang terlihat.

Jika Anda tertarik dengan tidak adanya konsekuensi hukum atas penggunaannya, maka saya sarankan mencari di situs web Pixabay.com .

HTML

Sekarang mari kita bekerja dengan kodenya. Saya harus segera mencatat bahwa kami sekarang bekerja dengan html, yaitu, kami mengubah gambar bukan untuk keseluruhan situs, tetapi hanya untuk satu halaman tertentu tempat kode tersebut ditulis. Jika Anda tertarik untuk mengubah seluruh sumber daya, maka Anda perlu membuat kode menggunakan css, tapi akan dibahas lebih lanjut nanti.

Jadi, Anda bisa bekerja di notepad, saya lebih suka NotePad++. Jauh lebih nyaman untuk bekerja di dalamnya: kode telah selesai untuk Anda, tag disorot. Program ini gratis dan beratnya sekitar 3 MB. Saya sangat merekomendasikannya, terutama jika Anda seorang pemula.

Jadi, untuk tagnya tubuh Anda perlu menambahkan atribut latar belakang dan tunjukkan tautan ke gambar dari mana gambar itu akan diambil. Ini adalah apa yang tampak dalam program ini.

Anda cukup membuka notepad dan menyalin kode ini. Dalam tanda kutip, beri tautan ke gambar yang Anda suka.

Saya ingin mencatat untuk pemula, inilah intinya. Jika Anda mengambil gambar dari Pixabay, maka Anda perlu menempelkan tautannya bukan pada halaman dengan gambar tersebut, tetapi buka gambar tersebut di tab berikutnya.

Salin URL persis ini.

Simpan dokumennya. Jangan lupa kalau pakai notepad harus pakai extensionnya .html . Beri nama saja dokumennya, misalnya, kembali.html . Jika tidak, itu akan disimpan sebagai dokumen teks dan browser tidak akan mengerti apa yang perlu dilakukan.

Selesai, halaman diisi dengan warna berbeda.

Jika Anda ingin mempelajari lebih lanjut tentang html, saya sarankan Anda mengunduh kursus gratis oleh Evgeniy Popov . Dari sini Anda akan mempelajari lebih banyak tag, kemampuan bahasa, mencoba beberapa teknik baru, dan mengetahui lebih banyak.

Saya tidak akan mengatakan bahwa kursus Evgeniy Popov sangat populer. Banyak ahli yang memarahinya, dan jika Anda pernah menemukan pernyataan seperti itu, inilah pendapat saya. Pelajaran-pelajaran ini diberikan secara gratis dan meskipun demikian, mereka melakukan pekerjaan yang sangat baik dengan tugas utama mereka - untuk menunjukkan dasar-dasar kepada pemula dan memberinya informasi terkini.

Sama seperti setiap penulis memiliki pendapatnya sendiri tentang cara menulis, demikian pula programmer memiliki gayanya sendiri. Anda dapat menghabiskan seluruh hidup Anda untuk mempelajari cara membuat situs web, tetapi Anda harus memulainya dari suatu tempat. Dari buku? Bukan ini. Ya, mereka berisi informasi yang lebih andal, informasi terkini, tetapi sangat sulit untuk dikuasai.

Tidak setuju dengan saya? Saya bisa menawarkan alternatif. Buku oleh Elizabeth dan Erica Freeman Belajar HTML, XHTML dan CSS " Bukan buku terlaris yang terlalu membosankan dan dirilis belum lama ini, pada tahun 2016. Informasinya belum ketinggalan jaman.

CSS

Jika Anda ingin latar belakang diulang di semua halaman situs Anda, maka CSS adalah suatu keharusan. Tentu saja, Anda dapat menentukan jalurnya setiap saat, seperti pada bab sebelumnya. Namun bayangkan jika lama kelamaan Anda perlu menggantinya: tautannya menjadi usang atau Anda hanya ingin mengubah desainnya. Buka setiap halaman dan ubah kodenya? Ini tidak akan berhasil seperti itu.

CSS membantu memecahkan masalah ini. Anda perlu membuat file dengan ekstensi css dan memasukkan kode berikut:

Mari kita bicara sedikit tentang kode itu sendiri. Dalam tanda kurung, setelahnya url Anda dapat memasukkan link ke gambar dari sumber pihak ketiga, atau cukup nama dokumen jika gambar tersebut berada di folder yang sama dengan file ini.

Bagi yang ingin mengetahui lebih jauh

Dengan css Anda dapat melakukan peregangan gambar latar belakang, pastikan tidak terulang kembali, tambahkan animasi GIF dan masih banyak lagi.

Anda tidak bisa menulis semuanya dalam satu artikel. Dan saya tidak menetapkan tugas seperti itu untuk diri saya sendiri. Ada banyak seluk-beluknya, dan jika mereka berjanji untuk memberi tahu Anda semuanya dalam satu artikel, maka ini tidak lebih dari penipuan.

Apakah Anda ingin belajar cara menulis situs web dengan benar? Saya menyarankan Anda belajar bahasa pemrograman. Saya dapat merekomendasikan kursus Andrey Bernatsky “ HTML5 dan CSS3 dari Nol hingga Pro " Saya sangat menyukai penulis ini. Saya tidak mengambil kursus khusus ini; beberapa tahun yang lalu ada yang serupa, tetapi kurang modern.

Penulis berbicara dengan sangat baik, semuanya mudah dan dapat dimengerti. Puncak dari kursus ini adalah Anda tidak hanya belajar, Anda membuat situs web tertentu bersama dengan guru. Hasilnya, Anda akan mendapatkan kartu nama, blog bahkan toko online. Sangat keren. Anda dapat menyaksikan tiga pelajaran teori pertama tentang HTML5 dari kursus ini sekarang juga.

Omong-omong, bersama dengan kursus ini Anda mendapatkan 7 bonus: dasar-dasar html dan css oleh Andrei Bernatsky, tata letak untuk pemula, membuat halaman arahan di malam hari, dan banyak lagi. Sebelum Anda berkomitmen untuk pelatihan serius, cobalah kursus gratis " Berlatih HTML5 dan CSS3 ».

Ya, pada dasarnya itu saja. Berlangganan buletin untuk mempelajari lebih lanjut. Segera saya akan memberi tahu Anda lebih banyak tentang tata letak adaptif, meningkatkan penghasilan dari blog mana pun, dan memberikan banyak tips berguna untuk menyederhanakan pekerjaan Anda. Sampai jumpa lagi dan semoga sukses dalam usaha Anda.