Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 3

Kategori │Cara Membuat Website

Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 3 : Sebuah Situs dari Start ke Finish

Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 3

Sekarang bahwa Anda punya dasar-dasar HTML dan CSS bawah, kita akan lihat bagaimana menggunakan pengetahuan itu untuk membuat situs web yang sebenarnya . Hari ini , kami akan membawa Anda melalui proses menciptakan sebuah situs dari awal sampai akhir .

Pelajaran ini menganggap Anda tahu bagaimana menyusun tata letak situs di Photoshop ( atau beberapa aplikasi lain ) . Jika Anda tidak, untungnya kita telah membahas yang sudah sehingga Anda dapat mengejar ketinggalan .

Membuat situs web bukan hanya tentang coding . Anda ( atau orang lain ) perlu memiliki beberapa keterampilan desain dasar . Anda perlu tahu bagaimana mempersiapkan grafis untuk web . Anda juga perlu mengetahui beberapa hal dasar tentang server web untuk menyebarkan situs Anda selesai . Kami sudah rusak semuanya ke dalam empat tugas besar dan membawa Anda melalui seluruh proses .

By the way , jika Anda ingin bermain-main dengan kode sumber untuk situs web demo kami , Anda dapat mengunduhnya di sini . Kami tidak akan masuk ke dalam bagaimana merancang sebuah situs web , teknis atau artistik . ( Kami sudah semacam melakukan yang sudah . ) Anda harus memiliki desain situs Anda tahu sudah, tapi ada beberapa hal yang kita perlu bicara tentang sebelum Anda mulai mencari tahu bagaimana menerjemahkannya ke dalam kode .

Pertama , hal yang paling penting untuk diketahui adalah bahwa pilihan font yang semacam dibatasi online. Meskipun Anda dapat menggunakan @ font face aturan dalam CSS untuk eksternal memuat font , ini tidak didukung oleh browser lama . 

Anda juga mungkin perlu hak untuk menggunakan tipografi tertentu dengan tag ini . Yang mengatakan , Anda dapat menggunakan @ font face untuk memecahkan masalah pilihan font yang terbatas di web , tetapi jika Anda tidak siap untuk melompat ke dunia yang belum cukup anda harus menggunakan layanan font web seperti WebType ( yang dapat gratis tergantung pada penggunaan ) atau membatasi diri Anda untuk font web aman. 

Font yang web aman ? Times New Roman dan Arial adalah pilihan yang paling umum , tetapi sebagian besar sistem operasi datang dengan beberapa lainnya built in font yang dianggap web aman. Ini termasuk font seperti Arial , Verdana , Lucida Grande , Gill Sans , Trebuchet MS , Courier New , dan Georgia . Lakukan pencarian untuk font web aman jika Anda sedang mencari opsi tambahan .

Kedua , Anda perlu mempertimbangkan apa yang akan menjadi gambar dan apa yang tidak . Saat ini Anda tidak benar-benar perlu menggunakan gambar untuk lebih dari grafis kompleks dan foto sebagai HTML dan CSS dapat menangani banyak hal kompleks yang biasa kita lakukan dengan gambar . Menu , misalnya , dapat dibuat dengan sangat mudah di CSS dengan daftar unordered . Umumnya Anda tidak perlu teks yang akan diberikan sebagai gambar , tapi mungkin ada beberapa keadaan di mana Anda akan perlu untuk melakukan itu (misalnya jika teks dikombinasikan dengan grafis ) .

Akhirnya , Anda perlu mempertimbangkan gambar yang akan ditampilkan sebagai gambar yang sebenarnya atau sebagai latar belakang untuk salah satu DIVs Anda . Bagaimana Anda menentukan ini? Jika Anda memiliki teks yang akan pergi di atas gambar ( misal dengan menu a) , maka Anda memiliki jawaban Anda : gambar Anda akan latar belakang . 

Alasan ini penting untuk mengetahui karena Anda perlu untuk ekspor itu tanpa hiasan dengan teks , gambar , atau apa pun yang Anda akan menambahkan kemudian dalam kode . Setelah Anda punya yang tahu , kepala ke langkah berikutnya ( " Persiapan " ) di mana kita membahas mempersiapkan tata letak Anda untuk coding dan mengekspor setiap gambar yang diperlukan .

Persiapan

Pertama , Anda ingin mengukur desain Anda . Ini adalah sesuatu yang biasanya Anda ingin lakukan sebelum Anda mulai tata letak Anda , tetapi Anda perlu mereka pengukuran spesifik untuk memulai coding sehingga Anda pasti perlu tahu mereka sekarang . 

Anda tidak perlu tahu setiap pengukuran sedikit, tapi Anda perlu mengetahui pengukuran struktur tata letak utama Anda . Misalnya , jika Anda memiliki sisi kiri halaman dan sisi kanan halaman , Anda harus tahu lebar ( dan tinggi , jika tidak bervariasi ) masing-masing . 

Anda juga harus tahu lebar jarak antara mereka dan lebar total semuanya dikombinasikan . Jika desain Anda sangat banyak didasarkan pada grid dan garis dengan segala sesuatu baik , kemungkinan header situs Anda akan lebar ini juga. Pada dasarnya , Anda perlu mengetahui dimensi setiap elemen utama di situs . Anda harus tahu yang kecil , juga, tapi itu tidak benar-benar informasi yang Anda butuhkan untuk memulai .

Setelah Anda punya pengukuran Anda, kami dapat mulai mengekspor gambar . Dalam banyak kasus, Anda tidak perlu mengekspor sangat banyak gambar karena Anda dapat menciptakan sebagian besar desain Anda dengan HTML dan CSS ( dan JavaScript , jika Anda ingin pergi ke sana ) . Untuk beberapa gambar Anda perlu untuk ekspor , namun, Anda akan perlu untuk memilih antara JPEG dan PNG . Ketika gambar Anda Foto kompleks seperti , atau ilustrasi dengan banyak warna dan lebar tonal berbagai -kau umumnya akan menjadi lebih baik dengan JPEG dari sudut pandang ukuran file . Jika Anda memiliki gambar sederhana , atau mengharuskan gambar Anda memiliki latar belakang transparan , Anda akan perlu untuk menyimpannya sebagai 24 - bit file PNG .

Jika Anda menyimpan 24 - bit PNG dari Photoshop , Anda akan perlu untuk menyembunyikan layer background sebelum memilih " Save for Web " dari menu File sehingga Photoshop tahu untuk mengabaikannya .

Ketika Anda menyimpan gambar Anda akan perlu tempat untuk menempatkan mereka . Untuk alasan ini , dan karena Anda akan memiliki banyak file lainnya setelah Anda mulai berkembang , Anda harus mulai mengatur situs Anda sekarang . Jika Anda sedang membuat sebuah situs yang lebih kompleks , saya akan merekomendasikan penataan segala sesuatu dengan menggunakan Model View Controller ( MVC ) arsitektur, tapi karena kami hanya berurusan dengan situs sederhana saya akan merekomendasikan menciptakan direktori berikut di direktori root situs Anda :
  • css
  • images
  • scripts
Jika tidak jelas , Anda akan menyimpan gambar Anda ke dalam images direktori dan CSS Anda stylesheet di css direktori. Itu scripts direktori di mana Anda dapat menyimpan file JavaScript dan skrip lain yang mungkin berakhir dengan menggunakan ketika mengembangkan situs Anda . Di direktori root , Anda juga akan ingin membuat  index.html file dalam persiapan untuk pembangunan. Apa index.html ? Katakanlah Anda hanya memiliki satu file HTML dan itu disebut mydoc.html .

 Jika Anda upload yang ke web server Anda , yang hosting mywebsite.com situs Anda , kapan saja seseorang mengunjungi mywebsite.com mereka akan baik mendapatkan daftar direktori dari file yang telah Anda upload atau mungkin tidak sama sekali . menggunakan index.html  

sebagai nama file memberitahu web server yang harus menampilkan file yang jika seseorang pergi ke direktori tertentu . Jika Anda menempatkan index.html file dalam direktori gambar Anda , kapan saja seseorang mengunjungi http;//mywebsite,com/images mereka akan melihat render HTML yang terkandung dalam Pada dasarnya , sebuah index.html file HTML default untuk menampilkan sehingga Anda akan selalu membutuhkan satu . 

Pengembangan

pengembangan website

Sekarang Anda mengembangkan situs Anda menggunakan keterampilan yang Anda pelajari dalam dua pelajaran masa lalu dan HTML dan CSS tambahan keterampilan Anda akan memperoleh karena Anda terus belajar pengembangan web . Karena kita sudah cukup banyak menutupi dasar-dasar HTML dan CSS , tidak ada banyak lagi untuk mengatakan di sini . Daripada pengulangan dua pelajaran pertama , kita akan pergi selama beberapa hal ekstra yang harus Anda ketahui sebelum Anda mulai mengembangkan situs Anda untuk nyata dan juga menyediakan Anda dengan kode sumber untuk situs demo kami ciptakan untuk pelajaran ini .

DocType

Ketika membuat dokumen HTML Anda dalam Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 2 , kami fokus pada dasar-dasar struktur HTML tapi tidak beberapa praktek terbaik. Satu hal yang Anda ingin ingin menambah bagian paling atas dokumen HTML Anda DocType nya . Anda dapat mempelajari lebih banyak tentang DocType di Wikipedia , tetapi pada dasarnya adalah deklarasi tipe dokumen yang mengatakan " ini adalah aturan yang saya ikuti dalam dokumen HTML saya . " Hal ini penting jika Anda perlu untuk memvalidasi kode Anda ( untuk melihat apakah Anda membuat kesalahan apapun ) , sebagai aturan yang sedikit berbeda untuk setiap DocType , tetapi juga memberitahu browser apa elemen dan struktur harus dicari ketika render halaman HTML Anda . Jika Anda tidak mematuhi DocType , dapat menyebabkan masalah , jadi ini adalah sesuatu yang Anda akan ingin menjelajahi lebih lanjut . Untuk saat ini , di sini adalah cepat melihat apa deklarasi DOCTYPE terlihat seperti :

<!DOCTYPE html PUBLIC
 "_//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Check Out Source Code 

Seperti yang Anda lihat di video , kami menggunakan banyak menyenangkan teknik CSS seperti bayangan dan sudut bulat . Jika Anda ingin menjelajahi teknik ini lebih lanjut , download kode sumber situs demo dan melihat-lihat di CSS . Setelah Anda memiliki pemahaman tentang dasar-dasar HTML dan CSS , cara terbaik untuk belajar hal-hal baru adalah dengan melihat kode sumber situs web lainnya . 

Meskipun Anda tidak dapat melihat kode sisi server yang telah dibuat dalam bahasa pemrograman server-side seperti PHP , Anda dapat melihat kode sumber HTML hanya dengan browsing ke halaman web dan memilih " View Source " dari menu " View " browser Anda ( kecuali jika pada menu lain , tapi umumnya di " View " ) . situs besar yang memiliki banyak konten , seperti Lifehacker , belum tentu model yang baik untuk melihat . Banyak dari kode HTML yang Anda lihat di sini adalah dihasilkan oleh kode PHP server-side . Umumnya Anda akan belajar lebih banyak dengan melihat situs yang lebih kecil , sebagai kode sering statis dan / atau situs ini cukup kecil bahwa jumlah kode sumber tidak mengerikan luar biasa .

Setelah Anda selesai mengembangkan situs Anda , saatnya untuk menyebarkan itu.

Penyebaran

Setelah Belajar Cara Membuat Website Sendiri situs web Anda selesai , Anda perlu mengerahkan itu . Hal ini sering tidak melibatkan lebih dari meng-upload ke server web Anda . Anda biasanya akan mencapai hal ini dengan FTP atau SFTP , sehingga Anda akan perlu sebuah aplikasi untuk melakukan itu . Kami menggunakan Transmit dalam video , tapi Cyberduck adalah transfer file aplikasi gratis yang berjalan pada kedua Mac dan Windows . Yang perlu Anda lakukan adalah menggunakan aplikasi transfer file pilihan Anda untuk terhubung ke server web Anda melalui FTP . Dari sana , Anda hanya menyalin file ke server web dan mereka harus segera dilihat di situs web Anda .

Tentu saja Anda akan memerlukan web host untuk melakukan hal ini. Nah itu dia sobat http://ddsobirin.wagomu.id/ sedikit informasi yang bisa admin bagikan. Mudah-mudahan ada guna dan manfaat bagi Anda semuanya. Jangan lupa untuk membaca juga postingan lainnya terkait Staedtler Pensil Terbaik Untuk Anak dan juga ada postingan mengenai Tips Memilih Jasa Ekspedisi Pengiriman Barang. Terima kasih sudah berkunjung dan membaca postingannya, demikianlah mengenai Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 3.