Mengapa Anda Harus Belajar Kode (Sedikit): Pengantar HTML & CSS

Diterbitkan: 2021-08-15
Catatan: Sebelum membuat perubahan apa pun pada kode toko Anda, selalu pastikan untuk mencadangkan situs Anda.

Tidak pernah semudah ini untuk memulai toko online. Berkat platform seperti Shopify, Anda dapat membeli tema, mengunggah produk, dan menjual kepada pelanggan Anda dalam hitungan jam! Hambatan untuk masuk sangat rendah sehingga hampir semua orang bisa melakukannya.

Meskipun mudah untuk memulai, sama mudahnya untuk menerima kesederhanaan itu begitu saja. Akhirnya, Anda ingin menambahkan atau mengubah sesuatu di toko Anda dan Anda akan menyadari bahwa tema Anda tidak mendukungnya. Pengembang tidak murah dan hal terakhir yang ingin Anda lakukan adalah membayar orang lain untuk sesuatu yang bisa Anda lakukan sendiri.

Bagaimana jika saya memberi tahu Anda bahwa Anda dapat meluangkan sedikit waktu di muka untuk mempelajari dasar-dasar cara kerja situs web dan Anda akan menghemat waktu dan uang di kemudian hari?

Pada akhir artikel ini, Anda harus mengetahui dasar-dasar HTML & CSS dan cukup tahu untuk mulai mengotak-atik toko Anda sendiri.

Jadi luangkan beberapa menit untuk bersiap-siap dan mari kita mulai!

Apa itu HTML & CSS?

HTML adalah singkatan dari Hypertext Markup Language. Ini adalah salah satu bahasa dasar tertua dan terpenting dari web. Ini bertanggung jawab untuk menyusun dan menyajikan konten di halaman ini!

CSS adalah singkatan dari Cascading Style Sheets. Ini bertanggung jawab untuk menyediakan gaya dan format HTML-nya.

Bersama-sama, ini adalah blok bangunan yang diperlukan dari situs web apa pun. Dalam artikel ini, saya akan memandu Anda melalui dasar-dasar dan menunjukkan cara membuat kode dan gaya halaman web pertama Anda.

Karena saya penggemar berat Bill Murray (yang bukan penggemar beratnya), kami akan membuat kuil kami sendiri di web untuk Bill.

Namun pertama-tama, mari selami lebih dalam HTML dan CSS untuk benar-benar mendapatkan pemahaman menyeluruh tentang kekuatan dan kemampuannya.

Anatomi Situs Web

Kita dapat dengan mudah memahami bagaimana HTML dan CSS bekerja sama dengan membandingkannya dengan bagian struktural sebuah rumah.

Di balik dinding setiap rumah terdapat bingkai yang bertanggung jawab atas strukturnya. Pikirkan HTML seperti bingkai rumah. Ini bertanggung jawab atas struktur situs web.

Berpegang pada analogi rumah kami, CSS bertanggung jawab untuk hal-hal seperti warna cat, dimensi ruang makan, warna lantai kayu, dan bentuk dan gaya meja ruang makan.

Mari kita lihat beberapa markup HTML dasar dan menelusurinya baris demi baris.

Contoh Markup HTML

Doctype

Tag <!DOCTYPE html> membantu browser mengetahui bahwa jenis dokumen yang ingin kita kerjakan adalah HTML.

Kepala

Di dalam tag <head> adalah tempat kita menyimpan semua metadata dari dokumen kita. Data ini mencakup hal-hal seperti judul, gaya (CSS), deskripsi, dan lainnya. Data ini tidak ditampilkan ke pengguna akhir, tetapi browser menggunakannya untuk menentukan judul dokumen atau gaya apa yang harus digunakan saat menampilkannya ke pengguna akhir.

Iklan

Beberapa elemen lain yang ditemukan di <head> halaman HTML dapat mencakup informasi penulis, deskripsi halaman, atau tautan ke gambar yang digunakan untuk favicon (ikon kecil di tab browser).

Contoh Favicon

Tubuh

Tag <body> berisi semua markup (kode) untuk situs web. Ini adalah satu-satunya kode yang akan dilihat pengguna akhir ketika mereka melihat situs kami.

Alat yang Anda Butuhkan untuk Membangun Situs Web

Untuk mulai menulis HTML, Anda mungkin berpikir bahwa Anda memerlukan perangkat lunak yang mahal dan mewah, tetapi ternyata tidak. Bahkan, Anda sudah memiliki apa yang Anda butuhkan.

Jika Anda menggunakan PC, buka program NotePad. Jika Anda menggunakan Apple Mac, buka TextEdit.

Sekarang setelah program pengeditan teks Anda terbuka, ikuti saya sementara kami memperluas markup HTML dasar di atas. Salin (Ctrl + C di Windows / Cmd + C di Mac) dan tempel (Ctrl + p di Windows / Cmd + P di Mac) kode berikut ke editor teks Anda.

<!DOCTYPE html>
<html>
<kepala>
<title>Judul halaman Anda</title>
</head>
<tubuh>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama kami.</p>
</tubuh>
</html>

Simpan file ini di desktop Anda dan buka di browser web Anda. Anda sekarang akan melihat kode Anda diterjemahkan, atau dirender oleh browser dan seharusnya terlihat seperti ini:

Contoh Rendering Kode

Elemen Judul (<h1>)

Tag <h1> digunakan saat Anda ingin memberikan perhatian dan definisi pada teks tertentu. Dalam hal ini, kami ingin teks "Hello World!" menjadi lebih besar dan lebih menonjol dari teks berikutnya.

Di luar kotak, HTML memiliki enam tag heading berbeda yang dapat Anda gunakan: h1, h2, h3, h4, h5, dan h6.

Contoh Judul HTML
Ukuran font akan semakin kecil setiap "langkah mundur" yang Anda ambil; H1 akan menjadi yang terbesar dan H6 akan menjadi yang terkecil. Secara default, mereka akan memiliki beberapa margin (atau spasi di sekitarnya) untuk memisahkannya dari elemen lain di halaman dan untuk memberikan hierarki visual kepada pengguna.

Luangkan waktu sebentar untuk bereksperimen dengan mengubah judul, judul, dan/atau tag paragraf. Setelah Anda membuat perubahan, simpan, lalu segarkan browser Anda. Selamat, Anda baru saja mengedit HTML untuk pertama kalinya!

Meski terlihat membosankan, bukan?

Mari tambahkan beberapa gaya ke halaman kita dan pelajari lebih lanjut tentang kekuatan CSS yang sebenarnya.

Untuk menambahkan gaya kita sendiri ke elemen HTML ini, kita perlu menambahkan tag <style> di dalam <head> dokumen kita.

Tag ini membungkus semua CSS kita. Pikirkan apa yang ada di dalam tag <style> sebagai panduan gaya browser.

Di bawah tag <title> pada baris baru, tambahkan tag gaya seperti ini:

<title>Judul halaman Anda</title>

Iklan

<gaya>

 </ gaya>

Di dalam tag gaya adalah tempat kita dapat memasukkan semua deklarasi kita. Deklarasi CSS terdiri dari properti diikuti oleh nilai .

Deklarasi CSS

Mari kita buat warna <h1> kita berbeda dari teks kita yang lain karena itu yang paling penting dan kita ingin itu menonjol. Tambahkan yang berikut di antara tag <style> Anda , simpan file Anda, dan segarkan kembali browser Anda.

<gaya>
h1 { warna: biru; }
</ gaya>

Anda sekarang diharapkan melihat sesuatu yang terlihat seperti ini! Anda akan melihat bahwa "Halo Dunia!" teks sekarang berwarna biru. Sederhana, bukan?

Modifikasi CSS ke H-Tag

Di sana, Anda telah melakukannya! Anda telah berhasil mengubah gaya elemen HTML menggunakan CSS. Apa kita sudah bersenang - senang?

Menambahkan gambar ke halaman kami

Ada banyak elemen lain yang dapat Anda sertakan di halaman Anda, tetapi salah satu yang paling menonjol di situs web mana pun adalah gambar yang maha kuasa. Kita dapat dengan mudah menambahkan gambar dengan menyertakan tandai seperti ini:

<img src= “https://www.fillmurray.com/400/500” >

Catatan: Demi demonstrasi, saya menggunakan layanan placeholder gambar bernama www.fillmurray.com. Anda dapat menggunakan gambar di komputer lokal Anda jika Anda menginginkannya.

Cara alternatif (Kiat Pro) untuk mengambil gambar dari situs web: Temukan gambar di situs web yang ingin Anda gunakan dan klik kanan di atasnya. Klik Salin Alamat Gambar dan URL gambar itu akan ada di papan klip Anda. Tergantung pada browser Anda, kata-katanya mungkin sedikit berbeda. Saya menggunakan Google Chrome. Saya tidak merekomendasikan penggunaan hotlinking yang berlebihan tetapi untuk demo ini bukan masalah besar.

Cara Menyimpan Gambar dari Situs Web

Salin dan tempel elemen gambar ini dan letakkan di bawah tag paragraf Anda sehingga blok kode lengkap Anda terlihat seperti milik saya:

<!DOCTYPE html>
 <html>
 <kepala>
 <title> Judul halaman Anda </title>
 <gaya>
 h1 { warna : biru;}
 </ gaya>
 </head>
 <tubuh>
 <h1> Halo Dunia! </h1>
 <p> Ini adalah paragraf pertama kami. </p>
 <img src= “ https://www.fillmurray.com/400/500 ” alt=”gambar Bill Murray” >
 </tubuh>
 </html>

Simpan file Anda dan muat ulang browser Anda dan sekarang Anda akan melihat sesuatu seperti ini:

Bagaimana Memulai Pengkodean Situs Web Pertama Anda

Jika Anda memperhatikan, Anda melihat atribut lain pada tag <img> , alt="image of Bill Murray" . Karena browser menguraikan kode dan tidak dapat melihat output yang diberikan seperti Anda dan saya, diperlukan beberapa cara untuk mengetahui konteks dari apa yang ditampilkan.

Iklan

Dengan menambahkan tag ALT (teks alternatif) ke gambar kami, kami dapat memberi tahu browser tentang subjek gambar kami.

Ini juga sangat penting untuk SEO (optimasi mesin pencari) dan yang lebih penting, teks ini dibacakan untuk pengguna tunanetra menggunakan pembaca layar.

Tapi Bagaimana Dengan Tautan?

Pengenalan HTML/CSS tidak akan lengkap tanpa menyertakan tautan! Saat Anda membangun situs web, Anda akan menginginkan kemampuan untuk menautkan, baik itu ke sumber eksternal atau ke halaman internal lainnya di dalam situs web Anda sendiri.

Mari kita bicara tentang elemen jangkar. Keajaiban sebenarnya dari elemen jangkar sebenarnya adalah atribut href-nya. Mari kita tunjukkan struktur tag jangkar dengan menambahkan tautan ke halaman Wikipedia milik Bill.

<a href= “www.google.com” > Baca entri Wikipedia-nya </a>

Kode ini memberi tahu browser bahwa ketika pengguna mengklik teks: "Baca entri Wikipedia-nya", bawa mereka ke www.google.com.

Mari tambahkan kode ini tepat di bawah elemen heading kita sehingga blok kode kita sekarang terlihat seperti ini:

<!DOCTYPE html>
 <html>
 <kepala>
 <title> Judul halaman Anda </title>
 <gaya>
 h1 { warna : biru;}
 </ gaya>
 </head>
 <tubuh>
 <h1> Halo Dunia! </h1>
 <a href= “https://en.wikipedia.org/wiki/Bill_Murray” > Baca entri Wikipedia-nya </a>
 <p> Ini adalah paragraf pertama kami. </p>
 <img src= “https://www.fillmurray.com/400/500” alt= “gambar Bill Murray” >
 </tubuh>
 </html>

Tekan simpan dan segarkan browser dan semoga, milik Anda terlihat seperti milik saya.

Dasar-dasar Pengkodean

Membawanya Melewati Garis Finish

Saya melanjutkan dan memberi penghormatan kecil saya kepada Bill Murray dan inilah hasil akhir saya. Saya akan membahas beberapa gaya tambahan di bawah ini.

Drumroll silahkan…

Dasar-dasar HTML dan CSS

Sekarang, Anda dapat melihat bahwa ini bukan sesuatu untuk ditulis di rumah, tetapi itu adalah desain. Ini hanyalah puncak gunung es dalam hal bagaimana halaman ini dapat terlihat atau ditata. Saya ingin membuat semuanya tetap sederhana sehingga Anda memahami apa yang dilakukan masing-masing metode penataan di bawah ini.

Iklan

Mari masuk ke CSS kecil yang harus saya tambahkan untuk membawa kita sejauh ini.

Menata Tubuh:

Pertama, ke badan halaman, saya menambahkan:

tubuh {
 warna-latar belakang: #eee;
 font-family: Helvetica, Arial, sans-serif;
 perataan teks: tengah;
 margin: 25px;
 }

warna latar belakang
Saya mengatur warna latar belakang halaman menjadi abu-abu terang menggunakan nilai warna heksadesimal #eee. Anda dapat mempelajari lebih lanjut tentang itu dan melihat beberapa contoh di sini di MOZ.

font-family
Saya ingin mengubah font dari default yang digunakan browser Times New Roman. Untuk ini, saya memilih Helvetica sebagai pilihan pertama saya (jika pengguna telah menginstal font itu di komputer mereka), Arial sebagai pilihan kedua saya (jika pengguna tidak memiliki Helvetica, itu akan default ke Arial), dan sebagai cadangan terakhir , font sans serif dasar.

perataan teks
Saya memilih untuk membuat semua teks di halaman saya rata tengah. Ada beberapa opsi lain untuk nilai seperti kiri dan kanan, tetapi saya pikir ini terlihat paling terpusat.

batas
Saya menambahkan sedikit margin ke badan dokumen untuk memberikan ruang bernapas.

Menata gambar kami:

Terakhir, saya menata wajah cantik Bill, eh, maksud saya elemen gambar

gambar {
 batas: 10px solid #41bcd6;
 bayangan kotak: 2px 5px 5px #999;
 bantalan: 10 piksel;
 batas-radius: 5px;
 }

Saya tidak berbuat banyak tetapi ingin memberikan foto Bill beberapa kehadiran di halaman.

berbatasan
Saya menambahkan batas 10px di sekitar gambar. #41bcd6 adalah nilai warna heksadesimal lain yang menghasilkan warna biru muda (bagian dari tema warna bawah sadar Steve Zissou rahasia saya).

bayangan kotak
Saya ingin memberikan kesan tiga dimensi pada gambar, jadi saya menambahkan bayangan cahaya ke dalamnya. Properti box-shadow menerima nilai piksel dan warna yang menentukan panjang, blur, dan warna bayangan. Untuk mempelajari lebih lanjut tentang deklarasi bayangan kotak, Moz menguraikannya dengan baik untuk Anda di sini.

lapisan
Untuk membuat gambar terlihat lebih seperti bingkai foto, saya menambahkan 10px padding antara itu dan perbatasan.

radius batas
Untuk mengilustrasikan salah satu kemampuan CSS yang lebih keren, saya membuat sudut-sudut gambar dibulatkan dengan menggunakan border-radius. Ketika saya mulai membangun situs web, tidak ada yang seperti itu, dan menghasilkan sudut bulat di web sebenarnya cukup menantang. Kami telah menempuh perjalanan jauh sejak itu, dan sekarang ini agak sederhana. Ia menerima nilai seperti px atau ems, dan di sini saya memilih untuk membulatkannya cukup untuk diperhatikan dengan mengatur nilainya ke 5px.

Kesimpulan

Sepanjang artikel ini kami bekerja sama untuk mempelajari anatomi dasar sebuah situs web. Kami juga mempelajari beberapa HTML dan CSS sederhana yang, pada akhirnya, berubah menjadi penghargaan satu halaman kecil yang sangat menakjubkan untuk salah satu aktor terhebat sepanjang masa dari satu generasi

Namun dengan segala keseriusan, saya harap Anda dapat mengikuti saya dan membangun situs web dasar pertama Anda. Sekarang jika Bill Murray bukan aktor favorit Anda, saya tantang Anda untuk mengedit kode ini untuk menampilkan aktor, band, atau apa pun favorit Anda.

Jika Anda perlu mereferensikan kode ini kapan saja, kembalilah dan baca artikel ini, atau untuk kenyamanan, saya telah memasangnya di CodePen di sini.

Ada begitu banyak hal menyenangkan yang dapat Anda lakukan hanya dengan HTML + CSS. Berikut adalah beberapa sumber yang bagus bagi Anda untuk memperluas pembelajaran Anda:

Iklan

  • Akademi Kode: Pengantar 100% GRATIS untuk Kursus HTML/CSS
  • CSS Zen Garden: Contoh pertama di web yang benar-benar “mengklik” bagi saya, untuk membantu saya menyadari bahwa Anda dapat memiliki 100 situs web dengan tampilan berbeda yang semuanya menggunakan markup HTML yang sama
  • Animasi CSS
  • Mona Lisa hanya menggunakan CSS
  • Anjing husky animasi hanya menggunakan CSS
  • CodePen: CodePen adalah alat online untuk pengujian LANGSUNG dan menampilkan kode HTML, CSS, dan JavaScript Anda

Kami serius hanya menggores permukaan dalam artikel ini, jadi saya mendorong Anda untuk membaca lebih lanjut, mengikuti beberapa kursus online, dan terus mendorong pengetahuan Anda!