Cara Membuat Website: Untuk Pemula

Cara Membuat Website: Untuk Pemula

Apakah Anda selalu ingin membuat situs web? Mungkin Anda sudah membaca beberapa HTML kami ( memahami HTML ) dan tutorial CSS , tetapi tidak tahu cara menggunakan bahasa tersebut pada proyek yang lebih besar.





Hari ini saya akan memandu Anda melalui proses pembuatan website lengkap dari awal. Jangan khawatir jika ini tampak seperti tugas yang sulit, saya akan memandu Anda melalui setiap langkahnya.



Anda akan membuat website ini menggunakan HTML, CSS, dan JavaScript dengan sentuhan jQuery (panduan ke jQuery). Anda tidak akan melakukan apa-apa Betulkah tepi berdarah, jadi kode ini akan bekerja dengan cukup baik di sebagian besar browser modern.





Jika Anda tidak yakin dengan CSS apa pun, lihat panduan CSS pada W3Schools.com .

Desain

Berikut desain untuk website ini. Lihatlah gambar resolusi tinggi jika Anda ingin tampilan yang lebih baik, atau bahkan lebih baik, unduh proyek lengkapnya di sini.



Saya merancang situs web ini untuk perusahaan fiksi di Adobe Photoshop 2017. Jika Anda tertarik, pastikan Anda mengambil file .PSD dari bundel unduhan. Inilah yang Anda dapatkan di file photoshop:

Di dalam PSD, Anda akan menemukan semua lapisan yang dikelompokkan, diberi nama, dan diberi kode warna:



Anda memerlukan beberapa font yang diinstal agar semuanya terlihat benar. Yang pertama adalah Font Mengagumkan , digunakan untuk semua ikon. Dua font lainnya adalah PT Serif dan Myriad Pro (disertakan dengan Photoshop). Jika Anda tidak yakin cara memasang font, baca panduan kami.

Jangan khawatir jika Anda tidak memilikinya Adobe Photoshop , Anda tidak memerlukannya untuk melanjutkan.



Kode Awal

Sekarang setelah desainnya jelas, mari kita mulai coding! Buat file baru di editor teks favorit Anda (saya menggunakan Teks Sublim 3 ). Simpan ini sebagai index.html . Anda dapat menyebutnya apa pun yang Anda suka, alasan mengapa banyak halaman disebut indeks adalah karena cara kerja server web. Konfigurasi default untuk sebagian besar server adalah untuk melayani halaman index.html jika tidak ada halaman yang ditentukan.

Jika Anda tidak ingin mempelajari detailnya, ambil kode lengkapnya dari unduhan .

Berikut kode yang Anda butuhkan:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


Ini melakukan beberapa hal:

  • Mendefinisikan HTML minimal yang diperlukan.
  • Mendefinisikan judul halaman 'Noise Media'
  • Termasuk jQuery yang dihosting di Google CDN (apa itu CDN).
  • Termasuk Font Awesome yang dihosting di Google CDN.
  • Mendefinisikan gaya tag untuk menulis CSS Anda.
  • Mendefinisikan naskah tag untuk menulis JavaScript Anda.

Simpan file Anda lagi dan buka di browser web Anda. Anda mungkin tidak akan melihat banyak, dan itu pasti tidak akan terlihat seperti situs web dulu.

Perhatikan bagaimana judul halamannya Media Kebisingan . Ini didefinisikan oleh teks di dalam judul menandai. Ini memiliki berada di dalam kepala tag.

tema windows xp untuk windows 10

Header

Mari kita buat headernya. Berikut tampilannya:

Mari kita mulai dengan sedikit abu-abu di bagian atas. Warnanya abu-abu muda dengan sedikit abu-abu gelap di bawahnya. Berikut close upnya:

Tambahkan HTML ini di dalam tubuh tandai di atas:

Saat Anda di sini, mari kita pecahkan ini. A div seperti wadah untuk menaruh barang lain. 'Barang lain' ini bisa lebih banyak wadah, teks, gambar, apa saja. Ada beberapa batasan tentang apa yang bisa masuk ke tag tertentu, tetapi div adalah hal yang cukup umum. Ini memiliki Indo dari bar bagian atas . Ini akan digunakan untuk menatanya dengan CSS, dan menargetkannya dengan JavaScript jika diperlukan. Pastikan Anda hanya memiliki satu elemen dengan id tertentu -- elemen tersebut harus unik. Jika Anda ingin beberapa elemen memiliki nama yang sama, gunakan a kelas sebagai gantinya -- untuk itulah mereka dirancang! Inilah CSS yang Anda butuhkan untuk menatanya (letakkan di bagian atas di dalam . Anda gaya menandai):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

Perhatikan bagaimana tanda hash (#, hashtag, tanda pound) digunakan sebelum nama. Ini berarti bahwa elemen tersebut adalah ID. Jika Anda menggunakan kelas, Anda akan menggunakan tanda titik (.) sebagai gantinya. NS html dan tubuh tag memiliki padding dan margin yang disetel ke nol. Ini mencegah masalah spasi yang tidak diinginkan.

Saatnya beralih ke logo dan navbar. Sebelum memulai, Anda memerlukan wadah untuk memasukkan konten ini. Mari kita jadikan ini sebagai kelas (sehingga Anda dapat menggunakannya kembali nanti), dan seperti ini bukan situs web responsif, buat lebar 900 piksel.

HTML:


CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

Mungkin sulit untuk mengetahui apa yang terjadi sampai Anda menyelesaikan kode, jadi akan sangat membantu untuk menambahkan latar belakang berwarna (sementara) untuk melihat apa yang terjadi:

background: red;

Saatnya membuat logo sekarang. Font Mengagumkan diperlukan untuk ikon itu sendiri. Font Awesome adalah sekumpulan ikon yang dikemas sebagai font vektor -- mengagumkan! Kode awal di atas sudah menyiapkan Font Awesome, jadi semuanya siap untuk digunakan!

Tambahkan HTML ini dalam NS pembungkus normal div:



CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

Jangan khawatir tentang font lain yang tidak cocok dengan desain -- Anda akan merapikannya nanti. Jika Anda ingin menggunakan ikon yang berbeda, pergilah ke Font Ikon Keren halaman, lalu ubah fa-volume-turun dengan nama ikon yang ingin Anda gunakan.

Pindah ke bilah navigasi, Anda akan menggunakan daftar tidak berurutan ( NS ) untuk ini. Tambahkan HTML ini setelah NS logo-wadah (tapi masih di dalam pembungkus normal ):

NS href digunakan untuk menghubungkan ke halaman lain. Situs web tutorial ini tidak memiliki halaman lain, tetapi Anda dapat memasukkan nama dan jalur file (jika diperlukan) di sini, mis. review.html . Pastikan Anda memasukkan ini ke dalam kedua tanda kutip ganda.

Berikut CSSnya:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

CSS ini dimulai dengan daftar tidak berurutan . Kemudian menghapus poin-poin menggunakan list-style-type: tidak ada; . Tautan diberi jarak sedikit, dan diberi warna saat Anda mengarahkan mouse ke atasnya. Pembagi abu-abu kecil adalah batas kanan pada setiap elemen, yang kemudian dihapus untuk elemen terakhir menggunakan tautan terakhir kelas. Berikut tampilannya:

Yang tersisa untuk bagian ini adalah sorotan warna horizontal merah. Tambahkan HTML ini setelah pembungkus normal :

Dan inilah CSSnya:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

Itu bagian atas selesai. Begini tampilannya -- sangat mirip dengan desainnya kan?

Area Konten Utama

Sekarang saatnya beralih ke area konten utama -- yang disebut 'paro atas'. Berikut tampilan bagian ini:

Ini adalah bagian yang cukup sederhana, beberapa teks di sebelah kiri dengan gambar di sebelah kanan. Daerah ini akan menjadi longgar dibagi menjadi tiga, kira-kira mendekati Rasio Emas .

Anda akan membutuhkan contoh gambar untuk bagian ini. Ini termasuk dalam unduhan. Gambar ini memiliki lebar 670px, dan berasal dari Review Panasonic Lumix DMC-G80/G85 kami.

Tambahkan HTML setelah NS top-warna-percikan elemen:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

yang memperbaiki layar iphone dengan harga murah

Alternatively, check out our review of the Panasonic G80 shown on the right!






Perhatikan bagaimana pembungkus normal elemen telah kembali (itulah kesenangan menggunakan kelas). Anda mungkin bertanya-tanya mengapa gambar ( gambar ) tag tidak menutup. Ini adalah tag penutup diri. Garis miring ke depan ( /> ) menunjukkan ini, karena tidak selalu masuk akal untuk menutup tag.

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

Atribut yang paling penting di sini adalah ukuran kotak: kotak perbatasan; . Ini memastikan elemen akan selalu menjadi 40% atau 60% lebar. Defaultnya (tanpa atribut ini) adalah lebar yang Anda tentukan ditambah padding, margin, dan batas apa pun. kelas gambar ( gambar unggulan ) mempunyai sebuah lebar maksimum dari 500px . Jika Anda hanya menentukan satu dimensi (lebar atau tinggi), dan membiarkan yang lain kosong, css akan mengubah ukuran gambar sambil mempertahankan rasio aspeknya.

Area Kutipan

Mari kita buat area kutipan. Berikut tampilannya:

Ini adalah area sederhana lainnya. Ini berisi latar belakang abu-abu gelap, dengan teks putih di tengah.

Tambahkan HTML ini setelah sebelumnya pembungkus normal :



makeuseof is the best website ever


Joe Coburn



Dan kemudian CSS ini:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

Tidak banyak yang terjadi di sini. Ukuran adalah penyesuaian utama yang diperlukan -- ukuran font, spasi, dan sebagainya. Begini tampilannya sekarang -- mulai terlihat seperti situs web!

Area Ikon

Mari terus menekan -- hampir selesai! Inilah area berikutnya yang perlu dibuat:

Bagian ini akan menggunakan beberapa kelas. Tiga ikon sebagian besar sama, dengan pengecualian konten, jadi masuk akal untuk menggunakan kelas alih-alih id. Tambahkan HTML ini setelah sebelumnya area kutipan :






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



Ketiga ikon ini juga Font-Mengagumkan . HTML sekali lagi menggunakan pembungkus normal kelas. Berikut CSSnya:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

Ada beberapa hal baru yang terjadi di CSS. Sudut membulat sedang diatur oleh batas-radius: 200px; . Mengatur nilai ini sama dengan lebar menghasilkan lingkaran sempurna. Anda dapat mengurangi ini jika Anda lebih suka persegi dengan sudut membulat. Perhatikan bagaimana tindakan hover diterapkan pada div -- tindakan ini tidak terbatas pada tautan saja. Berikut tampilan bagian ini sekarang:

Hal terakhir yang harus dilakukan adalah footer! Ini sangat sederhana, karena ini hanya area abu-abu tanpa teks. Tambahkan HTML ini setelah area ikon ' pembungkus normal :

Berikut CSSnya:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

Lihat - hal yang sangat sederhana.

Tambahkan Beberapa Pizzazz

Itu saja, pengkodean selesai! Anda benar-benar dapat membiarkan hal-hal apa adanya, ini adalah halaman web yang sudah jadi. Anda mungkin telah memperhatikan, bahwa itu tidak terlihat tepat seperti desain. Alasan utama untuk ini adalah font yang digunakan. Mari kita selesaikan itu.

Font yang digunakan untuk sebagian besar judul adalah Segudang Pro . Ini datang dengan Adobe Buat Cloud, tetapi tidak tersedia sebagai webfont. Font yang saat ini digunakan di halaman web adalah Helvetica . Ini terlihat baik-baik saja, jadi kamu bisa membiarkannya apa adanya PT Sans tersedia sebagai webfont. Font yang digunakan untuk semua teks adalah PT Serif , yang tersedia sebagai webfont.

Webfont adalah proses yang sederhana. Sama seperti memuat font baru ke komputer Anda, halaman web dapat memuat font sesuai permintaan. Salah satu cara terbaik untuk melakukan ini adalah melalui Google Font .

Tambahkan CSS ini untuk beralih ke font yang lebih baik:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

Sekarang ubah html dan elemen tubuh Anda untuk menggunakan font baru:

font-family: 'PT Serif', 'Helvetica', 'Arial';

Perhatikan bagaimana elemen h3 tidak termasuk dalam daftar -- ini akan menjadi default untuk PT-Serif dari pada PT-Sans .

Sebagai sedikit kecantikan terakhir, mari gunakan beberapa JavaScript untuk menggulir tiga gambar unggulan yang berbeda. Anda akan perlu Gambar_2 dan Gambar_3 untuk bagian ini, dan sekali lagi, ini opsional. Situs web sepenuhnya berfungsi pada saat ini tanpa fitur ini. Begini tampilannya (dipercepat):

Ubah HTML Anda untuk menyertakan tiga gambar unggulan. Perhatikan bagaimana dua di antaranya memiliki kelas CSS tersembunyi . Setiap gambar telah diberikan ID sehingga JavaScript dapat menargetkan masing-masing secara mandiri.





Inilah CSS yang diperlukan untuk menyembunyikan gambar unggulan tambahan:

.hidden {
display: none;
}

Sekarang setelah HTML dan CSS diurus, mari beralih ke JavaScript. Ini berguna untuk memahami Document Object Model (DOM) untuk bagian ini, tapi itu bukan keharusan.

Temukan naskah area di bagian bawah halaman:


/* JavaScript goes here, at the bottom of the page */

Tambahkan JavaScript berikut di dalam naskah menandai:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

Ada beberapa hal yang terjadi di sini. Kodenya ada di dalam $(dokumen).siap() . Ini berarti ini akan berjalan setelah browser Anda selesai merender halaman -- ini adalah praktik yang baik. NS setInterval() fungsi digunakan untuk memanggil ganti gambar () berfungsi secara teratur pada interval yang telah ditentukan dalam milidetik (1000 milidetik = 1 detik). Ini disimpan di waktu variabel. Anda dapat menambah atau mengurangi ini untuk mempercepat atau memperlambat pengguliran. Akhirnya, pernyataan kasus sederhana digunakan untuk menampilkan gambar yang berbeda, dan melacak gambar yang sedang ditampilkan.

Tantangan Pengkodean

Itu dia! Semoga Anda belajar banyak selama prosesnya. Jika Anda menyukai tantangan, dan ingin menguji keterampilan baru Anda, mengapa tidak mencoba menerapkan modifikasi ini:

Tambahkan catatan kaki: Tambahkan beberapa teks ke footer (petunjuk: Anda dapat menggunakan kembali pembungkus normal dan sepertiga/dua pertiga kelas.).

Tingkatkan pengguliran gambar: Ubah JavaScript untuk menganimasikan perubahan gambar (petunjuk: lihat jQuery memudar dan animasi ).

Terapkan beberapa kutipan: Ubah tanda kutip untuk mengubah salah satu dari beberapa tanda kutip yang berbeda (petunjuk: lihat kode pengguliran gambar untuk titik awal).

Siapkan server: Siapkan server dan kirim data antara halaman web dan server (petunjuk: baca panduan kami untuk JSON dan Python ).

cara mengatur halaman di word

Setelah Anda merasa nyaman menggunakan JavaScript atau jika Anda memiliki pengalaman dengan Ruby, Anda dapat mencoba membuat situs web dengan pembuat situs web statis seperti GatsbyJS atau Jekyll .

Membagikan Membagikan Menciak Surel Cara Mengubah Tampilan dan Nuansa Desktop Windows 10 Anda

Ingin tahu cara membuat Windows 10 terlihat lebih baik? Gunakan penyesuaian sederhana ini untuk menjadikan Windows 10 milik Anda.

Baca Selanjutnya Topik-topik yang berkaitan
  • Pemrograman
  • HTML
  • Desain web
  • CSS
Tentang Penulis Joe Coburn(136 Artikel Diterbitkan)

Joe adalah lulusan Ilmu Komputer dari University of Lincoln, Inggris. Dia adalah pengembang perangkat lunak profesional, dan ketika dia tidak menerbangkan drone atau menulis musik, dia sering terlihat sedang mengambil foto atau membuat video.

More From Joe Coburn

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan