NieR

WordPress telah menjadi platform blogging yang paling banyak digunakan di dunia, diperkirakan digunakan pada seperempat miliar situs online saat ini. 

WordPress berfungsi sebagai blog, tetapi juga sebagai sistem manajemen konten langsung, siap digunakan dengan URL yang ramah mesin pencari dan HTML dan CSS yang sepenuhnya valid. 

Dengan begitu banyak situs yang menggunakan WordPress dan hanya sekitar 1.200 tema yang terdaftar di WordPress.org, ada pasti ada banyak situs yang tampak persis sama. Anda dan klien Anda harus menonjol, atau akhirnya dicap sebagai "hanya blog WordPress lainnya". 

Dalam artikel ini, saya akan menunjukkan kepada Anda cara mengambil template situs HTML dan CSS yang ada dan mengubahnya menjadi tema untuk WordPress. Tentu saja, tema WordPress adalah topik yang terlalu luas untuk dibahas seluruhnya dalam satu artikel, jadi saya akan memberi Anda beberapa sumber daya di bagian akhir untuk memajukan pembelajaran Anda. 

Diharapkan, Namun, artikel ini akan berfungsi sebagai pengantar yang baik dan memberi Anda dasar yang kuat untuk mulai belajar membuat tema WordPress Anda sendiri. Saya anggap Anda sudah tahu HTML dan CSS, dan sudah memiliki desain situs yang ingin Anda adaptasi ke WordPress. 

Mengenal PHP tidak diperlukan, karena saya akan menjelaskan setiap fungsi yang Anda butuhkan saat kami menggunakannya.

Namun, sebelum kita memulai, Anda perlu menyiapkan lingkungan pengembangan WordPress. Jika Anda biasanya hanya bekerja dengan HTML / CSS, Anda mungkin tidak terbiasa dengan "penyiapan pengembangan".

Saat menggunakan WordPress (atau kerangka kerja PHP lainnya) Anda perlu bekerja dengan pengaturan pengembangan, karena mereka menjalankan kode sisi server yang membutuhkan database seperti MySQL untuk berfungsi, dan itu berarti Anda tidak dapat memeriksa apakah suatu tema berfungsi hanya dengan membuka file di browser. Entah Anda membuat situs pengembangan di server sebenarnya, atau Anda dapat menyiapkan lingkungan pengembangan lokal.

Keuntungan Pengembangan Tema WordPress Kustom

Tema yang dibuat khusus jauh lebih dari yang terlihat. Dan ada manfaat yang bisa didapat di mana-mana. Misalnya, dengan memulai dari awal, Anda tidak perlu membongkar kode pengembang lain untuk menyesuaikan berbagai elemen. Pada saat yang sama, Anda tidak dibatasi oleh pengaturan apa pun yang telah dibangun oleh pengembang ke dalam tema.

Selain itu, ada juga beberapa keuntungan signifikan yang bisa didapat dalam kinerja situs. Tema siap pakai cenderung menyertakan banyak skrip dan gaya - beberapa di antaranya mungkin tidak digunakan. Dengan mengembangkan sendiri tema WordPress, Anda hanya dapat menambahkan item yang Anda butuhkan. Ini mengurangi pembengkakan dan dapat meningkatkan waktu muat halaman.

Sejujurnya, kami hanya menggores permukaan dari apa yang bisa dicapai. Secara keseluruhan, ini tentang membangun tema WordPress yang memenuhi kebutuhan proyek Anda - tidak lebih dan tidak kurang. Bukankah itu seharusnya menjadi tujuan untuk setiap situs web yang Anda buat?

Jadi, mari kita lihat di balik layar tentang cara membuat tema WordPress Anda sendiri!

Pengembangan Tema WordPress untuk Pemula

Untuk pemula, pengembangan tema WordPress bisa jadi mengintimidasi. Itu bisa dimengerti, karena ini adalah subjek yang sangat luas dengan banyak kemungkinan. Dan jika Anda pernah melihat-lihat kode sumber dari tema yang sudah jadi , Anda akan mudah merasa kewalahan. Ada banyak hal yang harus dicerna.

Salah satu cara untuk meratakan kurva pembelajaran adalah memulai dari yang paling dasar. Karena, setelah Anda memahami apa yang membuat tema WordPress berfungsi, Anda dapat membangun fondasi itu satu per satu.

Sebelum kita membahas masalah ini, mari kita kurangi tugas mengembangkan tema WordPress menjadi beberapa konsep inti.

Keterampilan Dasar Yang Diperlukan Untuk Pengembangan Tema Wordpress

Hal pertama yang pertama: Anda tidak harus menjadi programmer ahli untuk membuat tema WordPress Anda sendiri. Itu tidak membutuhkan pengetahuan lanjutan tentang ilmu komputer.

Untuk memulai, Anda harus memiliki pemahaman dasar tentang bahasa-bahasa berikut:

• CSS
• HTML
• PHP

Dan tidak, kami belum melupakan JavaScript. Ini banyak digunakan dan penting untuk fungsionalitas tingkat lanjut. Tetapi bagi mereka yang baru belajar tentang cara kerja tema WordPress, itu tidak 100% diperlukan pada saat ini.

Kuncinya: jangan takut dengan apa yang tidak Anda ketahui. Mengembangkan tema WordPress sebenarnya adalah peluang bagus untuk meningkatkan keterampilan Anda di bidang-bidang ini. Semakin banyak Anda berlatih, semakin banyak Anda akan belajar.

Pelajari Hirarki Template Wordpress

Apa yang dimaksud dengan tema WordPress? Anda mungkin terkejut mengetahui bahwa tema dapat terdiri dari sedikitnya dua file:

index.php - Menyediakan template untuk tema Anda untuk menampilkan konten;

style.css - Berfungsi sebagai lembar gaya utama untuk tema Anda;

Cukup ringan, bukan? Untuk menambahkan sedikit lebih banyak fleksibilitas, tema "barebones" mungkin juga mencakup berikut ini:

header.php - Menampilkan bagian tajuk situs web Anda di setiap halaman;

footer.php - Menampilkan bagian footer situs Anda di setiap halaman;

functions.php - Mendefinisikan fungsionalitas opsional untuk tema Anda, termasuk skrip dan gaya yang diantrekan, bersama dengan potongan kode PHP, dll .;

Secara teori, setidaknya, Anda dapat menjalankan seluruh situs web hanya dengan file-file ini. Tetapi kami sering ingin menyesuaikan lebih lanjut. Di situlah Hierarki Template WordPress berperan.

Mengonversi Situs HTML ke Situs WordPress Bagaimana Anda memilih untuk mengubah situs HTML statis Anda menjadi situs WordPress tidak diragukan lagi akan bergantung pada preferensi pribadi Anda, investasi waktu / uang yang diinginkan, dan tingkat keahlian dengan kode. Anda harus menjadi orang yang memutuskan mana yang terbaik untuk Anda, tetapi dengan ringkasan di bawah ini Anda harus dapat memutuskan dengan cepat dan langsung beralih ke informasi yang paling relevan dalam posting ini untuk situasi spesifik Anda.

Ada tiga opsi utama:

1. Buat tema WordPress secara manual berdasarkan situs HTML statis Anda saat ini.

Ini akan meminta Anda untuk memasukkan kode Anda. Anda harus mengakses direktori situs Anda saat ini melalui FTP dan menggunakan kode yang ada sebagai titik awal. Dari sana Anda perlu membuat file yang diperlukan untuk tema WordPress dan menyalin sedikit kode dari kodeks WordPress. Ini cukup sederhana dan lurus ke depan jika Anda memiliki pengalaman dengan HTML, CSS, dan sedikit PHP.

2. Pasang tema yang sudah dibuat sebelumnya dan cukup migrasikan konten Anda.

Ini mungkin pilihan terbaik di persimpangan antara kesederhanaan dan nilai. Dengan asumsi Anda sudah memiliki hosting untuk situs web Anda saat ini, Anda hanya perlu mengeluarkan uang jika Anda memilih untuk membeli tema premium. Plugin yang akan kami gunakan untuk mengimpor konten tersedia secara gratis di Repositori Plugin WordPress resmi.

3. Membayar agar layanan konversi HTML ke WordPress membuat ulang situs Anda.

Ini adalah solusi termudah, karena tidak mengharuskan Anda melakukan banyak hal. Namun itu tidak akan berbuat banyak untuk membiasakan Anda dengan WordPress dan biayanya akan bervariasi tergantung pada siapa yang Anda pilih untuk dipekerjakan. Saya tidak akan membahas opsi ini di bagian di bawah ini karena jika ini adalah rute yang Anda minati, Anda cukup melakukan pencarian cepat untuk penyedia layanan dan mereka akan mengurus sisanya. Berikut cara Mengonversi Situs HTML ke Situs WordPress

Secara Manual Mengubah Situs HTML Statis Anda ke WordPress

Jika tujuan Anda adalah tidak hanya memasukkan konten dari situs HTML statis Anda ke WordPress tetapi juga menduplikasi desain Anda saat ini, ini berarti Anda perlu membuat tema kustom Anda sendiri. Untungnya, itu tidak seseram kedengarannya pada awalnya. Ini hanya melibatkan pembuatan beberapa folder dan file, sedikit salin dan tempel, dan kemudian mengunggah hasilnya.

Anda akan membutuhkan editor kode seperti Sublime atau Notepad ++ dan akses ke direktori situs HTML dan direktori instalasi WordPress baru Anda.

Langkah 1: Buat Folder Tema Baru dan File yang Diperlukan

Di desktop Anda, buat folder baru untuk menyimpan file tema Anda. Beri nama apa pun yang Anda inginkan untuk dinamai tema Anda.

Selanjutnya, buat beberapa file (yang semuanya masuk ke folder tema baru Anda) di editor kode Anda. Jangan lakukan apa pun untuk mereka dulu. Biarkan saja terbuka untuk pengeditan lebih lanjut.

Style.css

Index.php

header.php

sidebar.php

footer.php

Langkah 2: Salin CSS yang Ada Ke Stylesheet Baru

Jika Anda ingin menduplikasi desain, ini mungkin berarti Anda memiliki setidaknya beberapa CSS yang ingin Anda simpan. Jadi file pertama yang ingin Anda edit adalah file Style.css Anda.

Untuk memulai, tambahkan berikut ini ke atas file Anda.

/*

Theme Name: Replace with your Theme's name.

Theme URI: Your Theme's URI

Description: A brief description.

Version: 1.0

Author: You

Author URI: Your website address.

*/

Setelah bagian ini cukup tempelkan CSS yang ada di bawah ini. Simpan dan tutup file.

Langkah 3: Pisahkan HTML Anda Saat Ini

Sebelum kita masuk ke langkah ketiga, izinkan saya memberi Anda catatan singkat tentang cara kerja WordPress. WordPress menggunakan PHP untuk memanggil dan mengambil potongan data dari database dasarnya. Setiap file yang kami gunakan dalam tutorial kecil ini dirancang untuk memberi tahu WordPress bagian mana dari konten situs Anda yang akan ditampilkan dan di mana.

Jadi ketika saya mengatakan kami akan "memotong" HTML Anda yang ada, yang sebenarnya kami lakukan hanyalah memotong dan menempelkan bagian kode yang ada ke dalam file berbeda yang baru saja kami buat, sehingga WordPress akan tahu di mana harus menampilkan mereka.

Kita mulai.

Pertama, buka file index.html situs Anda saat ini  . Sorot semuanya mulai dari bagian atas file hingga tag pembuka  class = ”main” . Salin dan tempel bagian ini ke file header.php Anda  , simpan dan tutup.

Kedua, kembali ke file index.html Anda  . Sorot elemen  pinggir class = "sidebar" dan semua yang ada di dalamnya. Salin dan tempel bagian ini ke file sidebar.php Anda  , simpan dan tutup.

Ketiga, di index.html Anda   pilih semuanya setelah sidebar Anda dan salin dan tempel ke file footer.php Anda  , simpan dan tutup.

Terakhir, di file index.html Anda  , pilih semua yang tersisa (ini harus menjadi bagian konten utama) dan tempelkan ke file index.php Anda  . Simpan, tapi jangan tutup dulu.

Anda  dapat menutup file index.html Anda  sekarang dan melanjutkan ke langkah terakhir. Hampir selesai!

Langkah 4: Selesaikan File Index.php Anda

Untuk menyelesaikan file index.php tema baru Anda,  Anda perlu memastikannya dapat memanggil bagian lain (selain konten utama) yang disimpan di file lain yang telah Anda buat. Atau dengan kata lain, kumpulkan kembali elemen-elemen yang baru saja kita “potong”.

Di bagian paling atas file index.php Anda  , tempatkan baris berikut php.

<?php get_header(); ?>

Kemudian, di bagian paling bawah file index.php Anda  , tempatkan baris-baris php ini.

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Dan terakhir, kita harus menambahkan apa yang disebut The Loop. Ini adalah php utama yang digunakan WordPress untuk menampilkan konten posting Anda kepada pengunjung. Jadi langkah terakhir dalam membuat file index.php tema baru Anda  adalah menambahkan kode di bawah ini di dalam bagian konten.

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <div class="post-header">

       <div class="date"><?php the_time( 'M j y' ); ?></div>

       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

       <div class="author"><?php the_author(); ?></div>

    </div><!--end post header-->

    <div class="entry clear">

       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>

       <?php the_content(); ?>

       <?php edit_post_link(); ?>

       <?php wp_link_pages(); ?> </div>

    <!--end entry-->

    <div class="post-footer">

       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>

    </div><!--end post footer-->

    </div><!--end post-->

<?php endwhile;

/* rewind or continue if all posts have been fetched */

?>

    <div class="navigation index">

       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>

       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>

    </div><!--end navigation-->

<?php else : ?>

<?php endif; ?>

Langkah 5: Unggah Tema Baru Anda

Sekarang setelah Anda membuat file tema dan menyimpannya dalam folder tema baru, Anda perlu mengakses direktori pemasangan WordPress baru Anda.

Tempatkan folder tema baru Anda di dalam  / wp-content / themes / . Kemudian navigasikan kembali ke  Admin WP> Tampilan> Tema dan tema yang baru Anda buat akan muncul di sana. Silakan dan aktifkan!

Semua yang tersisa untuk dilakukan pada saat ini adalah mengisi situs WordPress baru Anda dengan konten situs lama Anda. Ikuti bersama dengan bagian di bawah ini (melompati bagian tentang menggunakan tema yang sudah dibuat sebelumnya) untuk melihat bagaimana hal itu dilakukan. selamat anda telah berhasil Mengonversi Situs HTML ke Situs WordPress.

Pada topic kali ini kita akan membahas mengnai bootstrap untuk web development. Untuk membuat sebuah web dari awal pastinya tidak mudah. Selain itu, waktu pembuatan website juga tidak sebentar. Yang mana developer benar-benar merancang website tersebut dari awal html, css bahkan java script. Hal ini pastinya sudah sangat tidak flexible.

Maka dari itu ada toolkit bernama bootstrap yang membantu dalam web development. Sehingga proses pengerjaan web tidak memakan waktu yang lama. Bootstrap awalnya dibuat oleh pengembang Twitter untuk penggunaan internal, tetapi setelah beberapa saat, bootstrap dibuat dalam akses terbuka dan menjadi seperangkat alat yang nyaman untuk mengembangkan antarmuka pengguna dengan kerumitan apa pun.

Bootstrap adalah kumpulan besar kode berguna dan dapat digunakan kembali yang ditulis dalam HTML, CSS, dan JavaScript. Ini juga merupakan kerangka kerja pengembangan frontend yang memungkinkan pengembang dan desainer untuk dengan cepat membangun situs web yang sepenuhnya responsif. Pada dasarnya, Bootstrap sudah menyelamatkan kita dari menulis banyak kode CSS yang bahkan sampai ribuan baris, memberi kita lebih banyak waktu untuk dihabiskan untuk mendesain halaman web.

Jadi, sekarang Bootstrap adalah toolkit HTML, CSS dan JS terbuka dan gratis yang digunakan oleh pengembang web untuk membuat desain situs web yang responsif dengan cepat dan efektif. Kerangka Bootstrap digunakan tidak hanya oleh pengembang independen tetapi juga oleh seluruh perusahaan. Area utama aplikasinya adalah pengembangan situs komponen front-end dan antarmuka admin.

Berikut adalah 5 alasan mengapa harus menggunakan bootstrap untuk web development:

Grid yang sudah responsive

Dengan ini kita tidak pelu menghabiskan waktu berjam-jam untuk membuat grid kita pribadi. Bootstap sudah menyediakannya.  Dimana kita bisa mendefinisikan breakpoint kustom untuk setiap kolom sangat mudah menggunakan jeda ekstra kecil, kecil, sedang, besar, dan ekstra besar. Kita juga dapat tetap menggunakan default karena mungkin sudah memenuhi kebutuhan situs.

Gambar yang responsive

Dengan menggunakan bootstrap untuk mengubah ukuran image agar sesuai dengan device lebih mudah.  Bootstrap memiliki kodenya sendiri untuk mengubah ukuran gambar secara otomatis berdasarkan ukuran layar saat ini. Cukup tambahkan kelas .img-responsive ke gambar, dan aturan CSS yang telah ditentukan akan menangani sisanya. Bootstrap bahkan dapat mengubah bentuk gambar website dengan penambahan kelas seperti img-circle dan img-rounded, dan itu tanpa bolak-balik antara kode dan perangkat lunak desain kita.

Mudah untuk dipelajari

Banyak tema untuk sistem manajemen konten (CMS) populer yang dikembangkan menggunakan Bootstrap, yang membuktikan tingkat kualitasnya. Intinya, ini adalah kerangka kerja yang berisi komponen CSS, HTML, dan JavaScript, serta gaya dan fontnya sendiri. 

Komponennya yang lengkap

Bootstrap memiliki banyak sekali komponen yang dapat kitatempelkan dengan mudah ke halaman web, termasuk: Bilah navigasi, Dropdown, Bilah kemajuan, Gambar kecil. Tidak hanya mudah untuk menambahkan elemen desain yang menarik ke halaman web , kita juga akan yakin mengetahui bahwa setiap elemen akan terlihat bagus tidak peduli ukuran layar atau perangkat yang digunakan untuk melihatnya. Ada banyak fungsi siap pakai di ujung jari Anda.

Template eksternalnya yang menarik

Seiring popularitasnya tumbuh, orang-orang mulai membuat template berdasarkan Bootstrap untuk mempercepat proses pengembangan web lebih jauh. Ada banyak situs web di luar sana yang didedikasikan untuk berbagi dan membeli templat khusus berdasarkan Bootstrap.

Apa itu Bootstrap ?

Bootstrap adalah kerangka kerja CSS yang khusus digunakan untuk pengembangan situs web front-end. Nama asli framework ini adalah Twitter Blueprint. Kata “Twitter” ada karena pada awalnya dikembangkan untuk media sosial. Twitter sangat populer saat ini, dengan hampir 326 juta pengguna.

Sebelum Bootstrap muncul, ada kerangka kerja lain yang tersedia. Hanya saja tingkat konsistensi dalam proses pembangunan masih kurang. Selain itu juga membutuhkan biaya perawatan yang mahal.

Berdasarkan pertanyaan tersebut, akhirnya pengembang menemukan Bootstrap. Tidak seperti framework sebelumnya, Boot-strap dikenal konsisten dan sederhana.

Boot-strap adalah kerangka kerja yang memungkinkan pengembang mengembangkan situs web dengan mudah dan cepat. Pengembang hanya perlu memanggil kelas tertentu untuk membuat tombol, panel, tabel, pesan peringatan, dll.

Fungsi Bootstrap

Sebagai pengguna, Anda hanya perlu menggunakan setiap kelas yang ada, misalnya navigasi, tabel, tombol, dll. Banyak fungsi bootstrap tersedia untuk situs web. Fungsi-fungsinya adalah berikut ini:

Dapat mempercepat waktu pengerjaan front end website.

Menunjukkan sisi situs web yang lebih modern dan juga merupakan representasi khas dari anak-anak masa kini.

Tampilan dari boot-strap sendiri sangatlah sensitif, sehingga sangat berguna untuk semua jenis resolusi seperti tablet, smartphone ataupun PC dan laptop.

Situs web yang menggunakan boot-strap umumnya lebih ringan karena lebih terstruktur secara logis.

Keunggulan Bootstrap

Menghemat waktu

Bootstrap sendiri menyediakan banyak pustaka, yang berisi berbagai skrip, yang dapat digunakan pemrogram saat mengembangkan situs web front-end. Dengan cara ini, pengembang tidak lagi menghabiskan waktu untuk menulis berbagai skrip SCC dari awal. Tentunya dengan menggunakan fragmen script tersebut, situs tersebut akan sangat menguntungkan.

Di tangan programmer yang handal, struktur website dapat meningkatkan produktivitas. Perlu Anda ketahui bahwa versi terbaru dari boot-strap dibuat dengan menggunakan fungsi LESS. Ini berarti boot-strap memiliki banyak aspek menguntungkan dalam desain situs web, yang membuatnya sangat mudah bagi pemrogram.

Lebih fleksibel

Menggunakan situs web panduan juga dapat membuat pekerjaan pengembang dan pemrogram lebih fleksibel. Ya, karena frameworknya bisa digunakan sesuka hati, dan gratis. Anda bisa lebih mudah memodifikasi berbagai script yang sudah ada. Tidak ada aturan khusus untuk menggunakan panduan Twitter ini.

Ini adalah bagaimana Anda bisa berkreasi dalam bentuk yang Anda inginkan dengan menggunakan berbagai alat yang sudah ada di boot-strap itu sendiri. Hal inilah yang membuat developer lebih leluasa dalam membangun website sendiri.

Kali ini kita akan ngerefresh sejenak ingatan kita mengenai HTML. Yah, artikel ini mungkin cocok buat yang baru mendalami pemrograman web.

HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendisain dan

memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C,

C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak

dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode.

Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang

relevan.

Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu.

Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan

>.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.

Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan

tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang

berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1.

Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini

sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java.

Struktur

Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan

Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih

baik

mempraktekan langsung struktur ini sbg perancangan halaman web kita.

Listing 1 menunjukkan struktur suatu halaman HTML sederhana:

Listing 1

• <!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>
• 
  
• <HTML>
• <HEAD>
• <TITLE>
• Welcome to HTML
• </TITLE>
• </HEAD>
• <BODY>
• <!–halaman CONTENT dimulai –>
• <B>Yang ditampilkan di browser, cuma tulisan ini.
• </BODY>
• </HTML>

Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?

Listing 2

• <B>Untuk menampilkan tulisan cetak tebal</B><BR>
• <I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>
• <U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>
• <BR> digunakan untuk menampilkan baris baru.

Listing 3

<Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.

</P>

Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup

tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.

Listing 4

Bekerja dengan Heading

Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai

tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:

• <H1>Level – 1 </H1>
• <H2>Level – 2 </H2>
• <H3>Level – 3 </H3>
• <H4>Level – 4 </H4>
• <H5>Level – 5 </H5>

Listing 5

Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.

sebagai berikut

• Ordered List
• Unordered List

Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan

Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.

Cobalah kode di bawah ini:

<OL>

<LI>Java

<LI>C++

</OL>

kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita

menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>

sebagai di bawah ini:

Listing 6

• <UL>
• <LI>Java
• <LI>C++
• </UL>

Listing 7

Penerapan Definisi List

Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>

dan <DT> seperti ditunjukkan listing 7 dibawah ini.

<DL>

<DT>Java

<DD>Developed by Sun Microsystems Inc

<DT>Yang kedua

<DD>Developed by saya sendiri

</DL>

Listing 8

Indenting Text

Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara

otomatis dari kiri ke kanan. Cobalah contoh berikut :

<BLOCKQUOTE>

You can use Sound Recorder to record, play, and edit sound files.

To use Sound Recorder, you must have a sound card and speakers

installed on your computer. If you want to record live sound,

you also need a microphone.

</BLOCKQUOTE>

Membuat Links

Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling

berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,

pada browser secara otomatis Kita ke halaman web itu .

Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks

Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan

tag </a> dan itu mewakili anchor.

Listing 9

<A href =“http://www.rumahweb.com”>Rumahweb </A>

href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili

Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan

bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,

kode berikut memanggil lokasi Rumahweb.com didalam suatu jendela browser baru

ketika seseorang mengklik teks.

Listing 10

<A href = http://mhdfzl.com>Fzl </A>

Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html

Langkah satu: Buat sketsa wireframe Anda

Perkiraan waktu: 1-2 jam. Saya merekomendasikan melakukan latihan ini dengan pemangku kepentingan utama.

Mari kita mulai dengan premis bahwa Anda telah ditugaskan untuk membuat aplikasi seluler. Hal pertama yang harus Anda tanyakan adalah, "Masalah apa yang saya selesaikan dan untuk siapa saya menyelesaikannya?" Jawaban atas pertanyaan majemuk ini akan menetapkan dasar untuk desain Anda karena jawaban tersebut akan memberikan wawasan yang dapat mendorong fitur dan fungsi desain Anda. Jawaban ini juga pasti akan membantu Anda memutuskan apa MVP (produk yang layak minimum) akan untuk desain Anda.

Misalnya, Anda mungkin memiliki banyak fitur di peta jalan produk, tetapi Anda hanya perlu fokus pada fitur penting agar berhasil meluncurkan versi pertama aplikasi. Anda dapat memulai dengan menanyakan "Fitur dan fungsi apa yang perlu kami buat agar demografis target kami dapat menyelesaikan tujuan / tugas mereka?"

Untuk menjawab pertanyaan ini, Anda dapat membuat alur pengguna berdasarkan "jalur menyenangkan" dari pengguna utama Anda (Anda dapat fokus pada semua kasus edge nanti). Saya merekomendasikan papan tulis tempat Anda pertama kali menuliskan semua langkah kunci pengguna. Setelah Anda menuliskan langkah-langkah penting tersebut, Anda dapat mulai membuat sketsa tingkat tinggi dari langkah-langkah ini. Ini membantu Anda menentukan kemampuan apa yang dibutuhkan pengguna di setiap langkah dan menjaga ruang lingkup merayap.

Catatan: Cobalah untuk menghentikan diri Anda dari membuat sketsa tanpa terlebih dahulu menulis alur pengguna. Pikiran kita bisa menjadi sangat kreatif dan keluar jalur jika kita langsung membuat sketsa.

Berikut tampilan latihan ini setelah Anda menuliskan alur pengguna dan membuat sketsa kasar di bawahnya. Ingat, itu tidak harus cantik, tetapi harus cukup menyampaikan ide-ide Anda sehingga Anda melanjutkan ke langkah berikutnya, gambar rangka digital. 

Warna

Warna merupakan hal penting dalam desain sebuah web, membuat sebuah web menjadi lebih menarik

Menurut teori Brewster, untuk menyederhanakan warna yang ada di alam, warna dibagi menjadi 4 kelompok, yaitu:

• Warna Primer

• Warna Sekunder

• Warna Tersier

• Warna Netral

Psikologi Warna

Psikologi warna dapat kita pahami salah satunya dengan mengetahui perlambangan warna. Warna memiliki pengaruh yang kuat terhadap sikap dan emosi.

Memahami psikologi warna akan membantumu merancang antarmuka yang efektif dan tepat sasaran.

Warna Yang Disukai Wanita

Dalam survei tentang warna dan gender:

• 35% wanita suka warna biru
• 23% wanita suka warna ungu
• 14% wanita suka warna hijau
• 33% wanita tidak suka warna oranye
• 33% wanita tidak suka warna coklat
• 17% wanita tidak suka warna abu-abu

Warna Yang Disukai Pria

• Pria menyukai biru
• Pria menyukai hijau
• Pria menyukai hitam
• Pria tidak menyukai ungu
• Pria tidak menyukai orange
• Pria tidak menyukai coklat

Palette Warna

Color palette adalah sekumpulan warna yang di mix and match sehingga menghasilkan kombinasi warna yang unik dan menarik. Contoh: https://colorhunt.co.

RGB

Warna umum yang digunakan untuk website model RGB

Kode RGB menggunakan bilangan Hexadecimal basis 16

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Contoh kode warna RGB:

Type Font

Serif menggunakan tips atau flag dekoratif. Serif biasanya digunakan untuk dokumen atau layar yang mengandung banyak text

Sans Serif tidak menggunakan tips atau flag dekoratif. Sans Serif biasanya digunakan untuk komputer karena dianggap memiliki kontras yang lebih tajam

Pemilihan Font

• Pahami target pengunjung website
• Perhatikan tingkat keterbacaan website
• Perhatikan type font (serif & sans serif)
• Perhatikan style font (B, I, U)
• Perhatikan lowercase atau UPPERCASE font
• Perhatikan pewarnaan font (Nyaman di lihat)
• Tidak menggunakan terlalu banyak jenis font(Rekomendasi 2 font berbeda)
• Perhatikan lisensi font (free atau tidak), disarankan font yang benar-benar gratis untuk apapun.

Tipografi

1. Judul (Heading)

• H1
• H2
• H3
• H4
• ...

2. Body (Paragraf)

• Ketegasan dan keterbacaan
• Nyaman untuk dibaca

3. Aksen (Penekanan)

• Bold
• Italic
• Underline

Metode Pembuatan Desain UI Website

Ada 3 prinsip dalam mendesain sebuah website menurut Veen’s design principles, yaitu bisa menjawab pertanyaan:

1. Di mana saya?

2. Kemana saya bisa pergi?

3. Ada apa di sini?

Veen’s Design Principles

1. Menggambarkan websiteharus memiliki header yang menjelaskan website apa (Di mana saya?)

2. Menggambarkan adanya navigasi yang diposisikan di sidebar (Kemana saya bisa pergi?)

3. Menggambarkan konten dari website (Ada apa di sini?)

Jenis Layout Desain Website

• Static - Desain web memiliki ukuran tetap pada semua resolusi browser (pixel)

• Fluid - Desain web dapat menyesuaikan lebar layout sesuai dengan resolusi browser (%)

• Responsive – Desain web dapat berganti layout pada resolusi tertentu (desktop&mobile)

• Responsive fluid – Gabungan Responsive & Fluid (%)

• Horizontal Scrolling -Desain web dengan menampilkan konten Horizontal atau menyamping)

• Parallax Scrolling- Desain web dengan layer atau hanya 1 halaman (one page/single page)

Responsive Web Design

2010 Ethan Marcotte memperkenalkan istilah Responsive Web Design yaitu sebuah metode untuk mengoptimalkan pengalaman pengguna melakukan surfing internet di berbagai perangkat, baik mobile, tablet, maupun desktop.

Dapat dikatakan bahwa desain web adalah bagian penting dalam menjalankan bisnis saat ini. Bukan hanya untuk bisnis tetapi bisa juga untuk personal. Bahkan kesalahan desain web terkecil pun dapat merusak pengalaman pelanggan Anda, yang pada akhirnya dapat menghabiskan banyak uang.

     1. Mengidentifikasi pengguna utama Anda

        Ini mungkin tampak seperti no-brainer, tetapi Anda akan terkejut betapa banyak proyek situs web yang telah diselesaikan tanpa analisis profil pengguna yang tepat. Untuk membuat situs web yang memenuhi kebutuhan audiens target Anda yang paling penting, Anda harus terlebih dahulu menyelidiki siapa orang-orang itu, dan mengapa mereka datang ke situs Anda. Tidak jarang satu bisnis memiliki beberapa grup pengguna utama.

        Misalnya, situs web untuk klinik dokter kemungkinan akan memilih pasien mereka sebagai audiens utama mereka. Tetapi jika profesional perawatan kesehatan yang bekerja di klinik juga mengakses situs web untuk memperbarui informasi klien, menjadwalkan janji temu, menanggapi pertanyaan publik, dan memposting pembaruan, maka profesional perawatan kesehatan internal juga harus dianggap sebagai pengguna utama.

    2. Kecepatan Akses

        Situs web dapat membuat atau menghancurkan seluruh perusahaan Anda. Terlepas dari teknologi gila yang terlibat dalam menghubungkan orang ke berbagai halaman di seluruh dunia, jika halaman tidak dimuat dalam tiga hingga lima detik, pengguna akan menjadi gila. Mereka kemungkinan besar akan keluar dari halaman web Anda dan tidak pernah kembali, menyebabkan Anda kehilangan potensi bisnis mereka. 

    3. Menjadikan seluler sebagai prioritas utama 

        Pada tahun 2018, tidak ada bisnis yang berinvestasi di situs web yang tidak dibuat untuk yang mengutamakan seluler . Dengan 51% lalu lintas web global yang berasal dari perangkat seluler, melewatkan daya tanggap adalah salah satu cara paling pasti untuk menghalangi kesuksesan situs Anda. Anda ingin memastikan bahwa desain Anda dioptimalkan untuk tampilan gambar, teks, logo, dan elemen lain di layar yang lebih kecil karena banyak pengunjung Anda akan mengakses situs Anda dari tablet atau ponsel.

        Tanyakan kepada perusahaan pengembang web Anda apakah mereka sudah familiar dengan desain yang mengutamakan seluler, desain sensorik, dan desain adaptif - yang masing-masing diperlukan saat membuat situs web dengan mempertimbangkan pengguna seluler.

    4. Konten 

        Sangat pemilih. Meskipun laman web Anda mudah diakses, berfungsi dengan baik, berfungsi dengan cepat, dan tampak hebat, mereka tetap tidak akan senang kecuali Anda memiliki konten yang menarik dan menarik di situs Anda. Pemasaran konten memainkan peran utama dalam kampanye iklan perusahaan mana pun. Orang lebih suka konten video daripada tertulis, itulah sebabnya penayangan video konten telah melebihi 50 miliar tampilan per bulan.

    5. Memilih Domain dan Host

        Nama domain yang bagus (lihat Google dan Yahoo, untuk dua) mengatakan banyak hal sambil mengatakan sangat sedikit. Selain mudah diingat, nama domain harus secara akurat mencerminkan suara merek Anda dan hampir tidak mungkin salah eja. Menemukan nama yang tepat untuk merek Anda sangat penting, karena menggabungkan kombinasi SEO , ejaan sederhana, dan identitas merek ke dalam nama domain mengarah pada peluang yang lebih tinggi untuk ditempatkan di hasil mesin pencari. Sederhananya, bisnis yang mudah diakses secara online mendapatkan lebih banyak pelanggan.

        Saat membandingkan paket hosting, penting untuk mempertimbangkan sifat situs web dan bisnis Anda. Akankah situs web kaya media, dengan banyak gambar, video, dan presentasi? Apakah Anda memiliki dukungan teknis internal, atau apakah Anda memerlukan dukungan yang andal dan responsif dari penyedia hosting Anda? Juga pikirkan tentang jumlah lalu lintas yang akan diterima situs web Anda. Apakah perusahaan hosting menawarkan solusi yang dapat diskalakan? Cadangan, keamanan, dan fitur tambahan apa yang ditawarkan? Jangan lupa untuk meneliti ulasan tentang kinerja perusahaan di media sosial dan situs web pihak ketiga sebelum membuat keputusan akhir.

    6. Fungsionalitas

        Saat memikirkan tentang fungsionalitas, ada beberapa hal yang perlu dipertimbangkan. Yaitu, apakah situs web berfungsi secara harfiah? Apakah ada masalah memuat atau tautan rusak? Apakah fitur keamanan situs memadai untuk kebutuhan bisnis Anda? Selain masalah operasional ini, penting untuk melihat fitur situs web Anda dari sudut pandang pengguna. Apakah bagian formulir kontak, survei, dan umpan balik pelanggan di situs Anda berfungsi dengan baik? Satu atau semua masalah fungsional ini dapat mendorong pelanggan untuk meninggalkan situs Anda.

    7. Navigasi

        Jika situs web membingungkan dan sulit dinavigasi, pelanggan Anda mungkin pergi dan tidak pernah kembali. Untuk meningkatkan efisiensi dan daya tarik navigasi situs Anda, lakukan tinjauan situs mendalam seolah-olah Anda adalah pengunjung baru. Perhatikan aliran navigasi yang masuk akal dan yang tidak. Salah satu cara untuk meningkatkan kemampuan pengunjung dalam menavigasi situs Anda dengan mudah (dan membantu mesin telusur merayapi situs Anda) adalah dengan menambahkan peta situs. Selain itu, menyederhanakan navigasi dengan menghilangkan halaman yang tidak perlu atau berkinerja buruk dapat mengurangi waktu muat sekaligus meningkatkan kualitas kehadiran online merek Anda.

    8. Keamanan Efektif

        Dengan evolusi teknologi, risiko keamanan yang lebih baru dan lebih canggih mengancam integritas situs web Anda. Dari malware dan virus hingga aplikasi berbahaya dan ancaman peretas, situs web harus mencegah pelanggaran keamanan di bagian depan dan belakang. Situs web yang dibangun untuk melakukan transaksi online, seperti situs e-niaga, memerlukan tindakan pengamanan tambahan untuk melindungi informasi pelanggan. Untuk mengurangi potensi ancaman berbasis browser, bisnis harus menambahkan sertifikat SSL ke situs web mereka. Selama pengembangan, penting untuk meninjau fitur keamanan yang disertakan dalam kerangka kerja dan desain situs Anda. Bisnis juga perlu melakukan pemeriksaan keamanan rutin atau bekerja sama dengan penyedia yang menawarkan layanan ini.

    Jelas bahwa ada banyak faktor yang perlu dipertimbangkan saat membuat situs web bermerek. Selain meningkatkan lalu lintas dan menghasilkan prospek, desain, navigasi, dan konten situs Anda harus melibatkan pelanggan dan menginspirasi interaksi lebih lanjut dengan merek Anda.