7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

Panduan Pemula untuk Web Design: Bagian 3

Scroll to top
Read Time: 6 mins

Indonesian (Bahasa Indonesia) translation by Heri Abdi (you can also view the original English article)

Dalam bagian terakhir dari seri kita akan menambahkan halaman baru ke situs kita di mana kita akan bereksperimen dengan beberapa elemen HTML, dan memperluas pengetahuan CSS kita.


Juga tersedia dalam seri ini:

  1. Panduan Pemula untuk Web Design: Bagian 1
  2. Panduan Pemula untuk Web Design: Bagian 2
  3. Panduan Pemula untuk Web Design: Bagian 3

Persiapan

Kita akan menambahkan satu halaman baru ke website kami yang kita akan menggunakan sebagai sanbox untuk pengujian berbagai elemen HTML dan belajar untuk menambahkan gaya ke mereka dengan CSS. Kita akan memanggil Halaman ini "html-elements.html", jadi hal pertama yang perlu kita lakukan adalah menambahkan link ke halaman di menu navigasi kita.

Dalam file "html-dari-scratch.html", temukan bagian navigasi (<nav>):

Dan ganti link tengah (Nettuts) dengan link ke file "html-elements.html"; dan atur teks link sebagai "Elemen":


Sekarang, buat salinan file "my-first-webpage.html" dan namai itu "html-elements.html".



Menyoroti halaman sekarang

Di dalam file HTML yang baru, hapus semuanya antara tag <section> untuk menghapus semua konten utama dari Halaman ini. Kita akan mengisi konten baru segera. Pertama, kita perlu membedakan dalam navigasi di halaman apa kita sekarang sebagai sekarang setiap link terlihat identik, yang mengarah ke berbagai macam masalah kegunaan.

Untuk membedakan sebuah link ke Halaman sekarang dari link lainnya, kami akan menambahkan kelas "current"<li>yang berisi link ke Halaman sekarang.

Jadi, di halaman "my-first-webpage.html", ubah link pertama menjadi:

Dan pada "html-elements.html" ubah link tengah menjadi:

Hal ini memungkinkan kita untuk menargetkan link dari halaman dengan "nav .current". Di dalam CSS file, temukan gaya berikut:

Gnati selector ke:

Anda dapat menargetkan beberapa elemen dengan selector dengan memisahkan masing-masing dengan koma (,). Sekarang, jika Anda melihat pada setiap halaman web di browser Anda, link yang sesuai harus digarisbawahi.



Elemen teks

Di dalam <section>untuk halaman baru, pasta berikut. Ini berisi beberapa elemen HTML baru:

Abaikan teks itu sendiri, itu hanya Lorem Ipsum teks placeholder yang telah digunakan dalam industri percetakan sejak tahun 1500an.

Di baris 3, kita memiliki tag <strong>yang secara default membuat teks tebal dalam browser. Gunakan strong untuk membuat sesuatu yang menonjol dalam teks. Versi HTML menggunakan <b> tag; namun ini telah usang. pakai saja <strong>.

Baris 4 memperkenalkan <em> yang menekankan teks dengan membuatnya miring. Gunakan ini untuk membuat teks yang menonjol - tapi tidak sebanyak <strong> lakukan. Versi lawas HTML menggunakan tag <i>; namun seperti <b>, bagaimanapun seperti <b>, ini sudah usang.

Pada baris berikut kami menunjukkan <q> yang menaikan kutipan kecil dalam teks Anda. Otomatis membungkus teks di dalam dalam ""  tanda kutip.

<cite> berkaitan dengan tag <q> dan harus digunakan untuk menambahkan kutipan untuk kutipan dalam teks Anda.


Kutipan besar

Kita telah melihat bagaimana kita dapat menyisipkan tanda kutip kecil di dalam teks menggunakan tag <q>, tapi HTML juga menyediakan <blockquote> untuk tanda kutip yang lebih besar, seperti ini satu di sini di Nettuts+

Ini adalah bagaimana <blockquote> terlihat seperti di sini, di Nettuts+

Tambahkan baris berikut ke HTML baru mengikuti teks yang sebelumnya:

Di sini, Anda dapat melihat bahwa kami menyertakan paragraf dalam <blockquote>. Kita juga dapat menggunakan tag <cite> di dalam untuk menambahkan kutipan.


Tambahkan gaya CSS berikut ke stylesheet Anda untuk gaya blockquote:


Menambahkan border kecil di sebelah kiri blockquote telah menjadi tren umum baru-baru ini.


List

Di sini Anda melihat penggunaan unordered list (<ul>), dan ordered list (<ol>).


Anda dapat mengubah gaya poin-poin menggunakan CSS properti list-style-type. Sebagai contoh, kita dapat mengubah buletan yang digunakan untuk daftar dari angka desimal kepada Romawi dengan berikut:

Menarget ke 'list item' dalam 'ordered list' di 'section'.


Tidak seperti tradisional lingkaran poin-poin digunakan pada daftar unordered? Bagaimana kalau kotak:


Lihat Halaman di W3Schools untuk semua gaya yang berbeda yang dapat Anda gunakan.


Tabel

Anda mungkin telah membaca bahwa Anda sebaiknya tidak menggunakan tabel dalam situs web Anda. Yang mengacu pada ketat menggunakan tabel untuk membuat tata letak situs web Anda, karena kami sekarang menggunakan CSS untuk membuat tata letak.

Tabel hanya boleh digunakan untuk tabel data.

Untuk membuat tabel gunakan tag <table>. Setiap baris dalam tabel kemudian dibuat menggunakan tag <tr>. Setiap baris dapat kemudian menjadi salah satu dari dua jenis sel:

  1. Sel header yang digunakan untuk bagian atas sel dalam kolom;
  2. Sel Standar yang berisi data yang normal.

Membuat tabel

Memulai dengan menambahkan kode berikut ke halaman Anda:

Anda dapat melihat di sini kita telah membuat sebuah tabel baru, dengan satu baris. Baris ini kemudian berisi tiga sel header yang berlabel "Column #1" hingga "Column #3".

Mari kita menambahkan beberapa konten ke tabel - tambahkan berikut sebelum tag penutup </table>:



Menambah gaya tabel

Baik konten di sana, dan itu pasti sebuah tabel, tapi mari kita menambahkan sedikit gaya untuk itu.

Pertama, kami ingin tabel untuk mengambil seluruh lebar wadah. Kita juga perlu untuk menghapus perbatasan dalam tabel sehingga kita dapat menambah gaya ke baris dan sel-sel dengan benar. Tambahkan baris berikut ke file CSS Anda:


Sekarang mari kita membuat sel header menjadi menonjol dengan menetapkan warna latar belakang abu-abu gelap, dan warna teks putih:


Tambahkan padding kecil untuk setiap sel, bersama dengan border untuk membantu memisahkan setiap sel dengan berikut:


Akhirnya kita akan menambahkan beberapa zebra-stiping (bolak-balik row latar belakang warna) ke tabel:

Di sini kita menggunakan CSS3 baru: nth-child(odd) dan: nth-child(even) selector untuk menargetkan setiap bahkan, dan setiap baris bernomor ganjil.



Itu adalah sebuah bungkus!

Sekarang Anda harus memiliki landasan yang solid dalam cara membuat halaman web sederhana menggunakan HTML dan pemahaman dalam bagaimana CSS digunakan untuk menarger dan menambah gaya tertentu ke elemen HTML pada halaman Anda. Kita telah membahas banyak, tapi kau masih di perairan dangkal. Tetap menjelajahi Tuts+ Premium untuk mempelajari lebih lanjut!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.