Cara Install Laravel Di Localhost Xampp Untuk Pemula

Cara Install Laravel Di Localhost Xampp Untuk Pemula – Tutorial mudah instalasi laravel di xampp localhost windows menggunakan composer.

banyak developer atau pengembang website yang memutuskan memakai bahasa pemrograman php di website atau proyek yang di kelolanya.

hal tersebut di karenakan bahasa pemrograman php di kenal dengan kemudahan dalam proses pengelolaannya dan banyak konten yang di sediakan.

salah satu framework bahasa pemrograman php yang banyak di gunakan adalah laravel, pasti sudah tidak asing lagi kan mendengar kata laravel?.

Tentang Laravel

Laravel merupakan sebuah framework pemrograman php, yang paling banyak di gunakan untuk proyek website mulai dari proyek kecil hingga besar.

framework laravel ini sering di gunakan oleh banyak developer karena kinerja yang bagus, memiliki fitur yang banyak dan skalibitasnya.

hal inilah yang menyebabkan framework laravel banyak di gunakan oleh developer untuk membuat, mengembangkan website maupun proyeknya.

Cara Install Laravel Di Localhost Xampp Untuk Pemula

cara install framework laravel ini pun bisa di katakan cukup mudah, kali ini admin akan kasih tau caranya bagaimana cara install laravel di localhost xampp.

sebelum memulai installasi di localhost silahkan download terlebih dahulu software aplikasi xampp yang akan di gunakan untuk menjalankan laravelnya, kalian bisa download di sini.

Sesuaikan dengan os yang kalian punya (windows / linux / os x), pada tutorial kali ini admin akan menggunakan os windows tapi tenang intinya sama saja.

1. Install XAMPP

setelah kalian mendownload xampp selanjutnya install seperti biasa.

2. Setting Xampp

konfigurasi xampp sama seperti di bawah ini.

3. Jalankan Xampp

setelah di setting dan terpasang jalankan xampp, start pada bagian apache dan mysql saja.

4. Install composer

setelah xampp di jalankan, selanjutnya kalian perlu install composer terlebih dahulu pada link berikut.

download pada bagian yang tertera di atas gambar.

klik next.

pastikan alur file yang nantinya tersimpan seperti di atas (C:\xampp\php\php.exe) lalu next.

jika muncul halaman untuk memasukan url proxy, klik next saja.

jika php version berbeda tidak apa, mungkin akan ada update versi setelah tutorial ini di publish, klik install.

selamat composer telah di install, klik finish.

5. Install Laravel

step selanjutnya yaitu tinggal menginstall laravel pada localhost, buka CMD kalian dengan cara WINDOWS + R, ketik cmd lalu enter, atau bisa melalui halaman search.

composer

untuk mastikan kembali apakah composer kalian sudah terinstall silahkan ketik pada CMD composer, maka akan tampil seperti gambar di bawah.

jika sudah sama kita akses terlebih dahulu folder htdocs, yang nantinya folder laravel tersebut berada dengan cara

cd C:\xampp\htdocs

jika sudah kita akan install laravelnya

composer create-project --prefer-dist laravel/laravel mylaravel

pada bagian mylaravel kalian bisa ubah menjadi nama proyek kalian, sebagai contoh proyek saya namakan mylaravel, tunggu sampai installasi berhasil.

jika sudah berhasil selanjutnya kita akan mengakses proyek laravel kita dengan cara

cd C:\xampp\htdocs\mylaravel

seperti biasa pada kata mylaravel masukan nama proyek kalian seperti yang sudah admin jelaskan di atas.

jika sudah berhasi mengaksesnya selanjutnya akan kita coba jalankan webservernya di localhost agar dapat di akses dengan cara

php artisan serve

sesudah itu jika berhasil maka akan seperti gambar diatas dan untuk mengaksesnya ketikan url http://127.0.0.1:8000/ pada browser kalian.

taraaa… selamat kalian sudah berhasi menginstal laravel di localhost xampp menggunakan composer!! :)), cukup mudah bukan?.

6. Mengakses Proyek Laravel

jika sudah berhasil terinstall di localhost selanjutnya kalian bisa mengakses file proyek laravel kalian melalui visual studio code, jika belum punya install melalui link berikut.

setelah terinstall buka visual studio code kalian pada bagian atas kiri file > open folder

sesudah itu kalian tinggal cari proyeknya di folder htdocs,folder htdocs seharusnya berada di folder xampp.

setelah ketemu dan di pilih sekarang folder proyek kamu sudah dapat di akses dan bisa kamu kembangkan!!.

Kesimpulan

sangat mudah bukan untuk menginstall laravel di localhost xampp menggunakan composer?, setalah terinstall kamu bisa berkreasi sesukamu dan membuat proyek yang kamu inginkan.

demikian cara install laravel di localhost xampp untuk pemula, jika ada pertayaan silahkan komentar di bawah dan semoga tutorial kali ini dapat bermanfaat. :))

Apa itu Framework?

 

Jika kamu sudah terbiasa hidup dalam lingkungan web developer, kamu pasti sudah tidak asing dengan istilah framework. Apa itu framework? Framework ini dapat diartikan sebagai kerangka kerja yang berguna untuk membantu web developer dalam menulis baris kode.

Sebelum kita masuk ke dalam pembahasannya, kami punya sedikit info jika kamu ingin belajar cara membuat sebuah website baik front end maupun back end kamu dapat mempelajarinya di Dicoding loh.Ayo segera daftarkan dirimu dan selesaikan learning path-nya.

Pada artikel kali ini kita akan membahas pengertian, fungsi, manfaat menggunakan framework, dan jenis-jenis framework yang biasa digunakan oleh para web developer. Jadi, simak artikel ini dengan baik ya agar tidak ada informasi yang terlewat.

Apa itu Framework?

Framework adalah sebuah kerangka kerja yang digunakan untuk mengembangkan website. Framework ini diciptakan untuk membantu web developer dalam menulis baris kode. Dengan menggunakan framework penulisan kode akan jauh lebih mudah, cepat, dan terstruktur rapi.

Fungsi Framework

Framework memiliki fungsi utama untuk memudahkan web developer dalam membuat sebuah website. Selain itu, framework juga memiliki fungsi lain. Berikut di antaranya:

• Membuat kode program menjadi lebih terstruktur

Framework biasanya memiliki pola arsitektur dalam menuliskan kode. Sehingga, kode yang dituliskan lebih mudah dan struktur. Dampaknya, kamu dapat dengan cepat menemukan kesalahan dan langsung memperbaikinya.

• Meningkatkan keamanan

Selain membuat kode lebih terstruktur, framework dapat meningkatkan keamanan website kamu. Seperti contohnya framework Laravel yang sudah mengadopsi berbagai sistem keamanan seperti autentikasi, enkripsi, dan hashing.

• Mempercepat pembuatan website

Berikutnya adalah framework ini dapat mempercepat pembuatan website. Hal itu karena pengembang dapat menggunakan komponen-komponen yang sudah disediakan dan tidak perlu menulis kode dari awal, sehingga dapat mempercepat pembuatan sebuah website.

• Pemeliharaan dan perawatan website lebih mudah

Yang terakhir adalah framework ini dapat mempermudah kamu dalam memperbaiki dan merawat website. Perbaikan bug, maintenance menambah fitur dan meningkatkan keamanan website akan jadi lebih mudah karena kebanyakan framework sudah menggunakan pola arsitektur yang beragam.

Jenis-Jenis Framework

Ada beragam jenis framework yang sering digunakan untuk membuat website. Setiap framework memiliki fungsinya masing-masing dan juga menggunakan bahasa pemrograman yang berbeda juga. Nah, berikut ini adalah jenis-jenis framework untuk membuat suatu website.

• Framework CSS

Cascading Style Sheet atau yang disingkat menjadi CSS adalah bahasa pemrograman yang digunakan untuk mengatur layout dan tampilan pada HTML agar menjadi lebih menarik. Biasanya CSS ini dibuat oleh front end developer. Berikut ini adalah beberapa contoh dari framework CSS.

• • Bootstrap

Yang pertama adalah Bootstrap. Framework ini memiliki tampilan yang modern, dinamis, dan juga lebih ramah pengguna. Fitur lain dari framework ini adalah website yang dibuat menggunakan bootstrap ini akan responsive jika dibuat dengan mengikuti aturan-aturan yang disediakan bootstrap.

• • Semantic UI

Framework ini memiliki kelebihan dalam penulisan class yang lebih mudah dibandingkan framework lain. Selain itu ia juga menyediakan banyak komponen UI yang berguna untuk membuat tampilan HTML menjadi lebih menarik.

• • Materialize

Framework ini dibuat dengan tujuan untuk mengembangkan desain yang memungkinkan pengguna merasakan pengalaman yang serupa saat menggunakan produk di semua platform. Materialize ini mengadaptasi Material Design yang dibuat dan dikembangkan oleh Google.

• Framework JavaScript

JavaScript merupakan bahasa pemrograman yang sering digunakan oleh para front end developer dalam pembuatan tampilan website menjadi lebih interaktif. JavaScript merupakan bahasa pemrograman yang berjalan pada sisi front end dan masuk ke dalam golongan bahasa pemrograman tingkat tinggi. Berikut ini merupakan beberapa framework JavaScript yang sering digunakan.

• • AngularJS

Framework AngularJS ini bersifat open source dan ia berjalan pada sisi client dengan menggunakan konsep MVC untuk membuat tampilan dari website menjadi lebih dinamis.

• • ReactJS

ReactJS adalah framework yang dikembangkan oleh Facebook. Ia sering digunakan untuk membuat UI untuk suatu website atau aplikasi mobile karena ReactJS ini dapat digunakan secara multi platform. ReactJS ini merupakan inti dari React Native yang dapat memungkinkan kamu untuk mengembangkan aplikasi mobile di dua sistem operasi secara bersamaan, yaitu Android dan iOS.

• Framework PHP

PHP atau Hypertext Preprocessor adalah bahasa pemrograman yang digunakan untuk komunikasi dari sisi server. Berikut ini adalah beberapa framework PHP yang populer digunakan dalam pembuatan website.

• • CodeIgniter

CodeIgniter atau dapat disingkat menjadi CI merupakan framework dengan arsitektur yang khas, yaitu arsitektur MVC (Model, View, controller). Dengan begitu kamu dapat menulis kode dengan lebih terstruktur dan spesifik.

• • Laravel

Laravel ini biasanya digunakan oleh para developer untuk mengembangkan website dengan kompleksitas yang tinggi. Ia memiliki library yang lengkap serta memilih sintaksis atau kode yang elegan, ringkas, dan rapi.

• • Symfony

Symfony ini cocok digunakan untuk mengembangkan website dengan skala yang besar dan kompleks. Ia juga memakan sedikit memori jika dibandingkan dengan framework lainnya dan menghasilkan performa yang tinggi.

Jadi, Apa itu Framework?

Jadi, itulah pembahasan kali ini. Framework ini dapat diartikan sebagai kerangka kerja yang digunakan untuk mempermudah web developer dalam mengembangkan website. Banyak fungsi yang menguntungkan para developer jika ia menggunakan framework ini seperti dapat menghemat waktu dan biaya pembuatan aplikasi.

Kamu juga dapat menggunakan berbagai jenis framework sesuai dengan kebutuhanmu. Ada tiga jenis framework yang sering digunakan oleh para web developer, yaitu framework CSS, framework JavaScript, dan framework PHP. Masing-masing framework memiliki fungsi dan kegunaan masing-masing ya, jadi pilihlah framework yang sesuai dengan kebutuhanmu.

Demikian artikel kali ini. Semoga artikel ini dapat membantu kamu untuk mempelajari framework lebih baik lagi. Sampai jumpa di artikel selanjutnya.

Apa itu Framework? Developer Wajib Tahu – end

Web Scraping: Pengertian, Teknik, dan Manfaatnya

Jika kamu sedang mengelola sebuah bisnis online, maka salah satu kebutuhan kamu untuk menganalisis pesaing adalah dengan melakukan web scraping. Lalu, bagaimana caranya mengembangkan bisnis dengan web scraping? Nah, di artikel ini akan membahas seputar web scraping, manfaat, hingga teknik-tekniknya.

Apa Itu Web Scraping?

Web scraping adalah salah satu teknik yang dapat digunakan untuk menyusun strategi dalam menghadapi kompetitor bisnis (Sumber: Shutterstock)

Web scraping mengacu kepada pembuatan atau penggunaan perangkat lunak komputer untuk mengumpulkan data dari seluruh website kompetitor atau beberapa halaman website kompetitor.

Bahkan ketika melakukan web scraping kamu bisa mengunduh seluruh halaman website dan juga hal-hal yang berkaitan dengan aspek utama dari sebuah website kompetitor seperti tag (title) atau isi konten artikel yang ada di website tersebut untuk kebutuhan analisis lebih lanjut.

Teknik-Teknik Web Scraping

Sekarang segalanya sudah dipermudah, untuk melakukan web scraping kamu akan dimudahkan dengan adanya sebuah extension di browser dan juga aplikasi. Akan tetapi, hasilnya tidak sebaik dengan cara yang manual dan menggunakan koding. Nah, didalam artikel ini akan dibahas mengenai teknik web scraping dan kurang lebih terdapat empat teknik web scraping yang biasa dilakukan, di antaranya:

Mendapatkan Data Secara Manual

Ini adalah termasuk teknik yang paling sederhana yaitu kamu bisa mendapatkan data website lain secara manual. Teknik ini cukup memakan waktu, karena kamu harus mengambil dan juga menyimpan informasi yang sudah didapatkan secara satu persatu.

Teknik Regular Expression

Salah satu manfaat menggunakan teknik ini adalah konsistensi syntaxnya di dalam beragam bahasa pemrograman. Teknik ini termasuk teknik yang fleksibel. Ditambah dengan menggunakan teknik ini, kamu bisa mendapatkan data berdasarkan jenisnya misalnya harga, nama produk, dan alamat email.

Teknik Parsing HTML

Metode ini dilakukan dengan cara mengirimkan request HTTP kepada server yang menyimpan data website tersebut. Dengan menggunakan teknik ini, kamu tidak hanya melakukan web scraping ke website yang sifatnya statis saja.

Kamu juga bisa mendapatkan data dalam jumlah besar, namun kekurangannya adalah teknik ini dapat dicegah dengan sebuah proteksi website. Bahkan, kamu juga bisa diblokir dari suatu situs tertentu ketika sering menggunakan teknik ini.

Teknik Menggunakan Google Sheet

Kita mengenalnya sebagai sebuah aplikasi Google yang digunakan untuk membuat file spreadsheet. Ternyata, tidak hanya untuk kebutuhan tersebut. Google Sheet bisa kamu gunakan juga untuk melakukan web scraping dengan sangat mudah.

Selain google sheet, kamu juga memerlukan sebuah browser yang memiliki fitur inspect element. Lalu, copy expression XPathnya dari elemen halaman website yang datanya ingin kamu dapatkan ke dalam sebuah command IMPORTXML yang biasanya sudah tersedia di Google Sheet.

Manfaat Web Scraping

Setelah mengenal apa itu web scraping dan teknik yang sering digunakan, di bawah ini adalah lima manfaat yang bisa kamu dapatkan dengan web scraping, di antaranya:

Memonitor Pesaing

Pasar e-Commerce di Indonesia memang membuat sebuah lonjakan yang besar terlebih masa pandemi sekarang dan pasar ritel digital ini akan terus tumbuh seiring perangkat digital yang semakin bisa diintegrasikan di dalam kehidupan nyata kita dan dapat mengubah perilaku konsumen dalam berbelanja.

Target pasar semakin mudah dijangkau, akan tetapi persaingan pun semakin ketat dan tidak sedikit yang merasa bahwa ruang digital semakin sempit untuk para pendatang baru. Apakah ada cara agar bisnis bisa bertahan? Maka kamu perlu mempelajari bagaimana kompetitor kamu bekerja! Seperti yang dikatakan salah satu jenderal Tiongkok Kuni yang kita sering mengenalnya dengan Sun Tzu bahwa “Jika kamu mengenal musuh kamu dan diri kamu sendiri, maka kamu tidak akan pernah dikalahkannya” Nah, hal ini juga berlaku dalam bisnis.

Kamu dapat memperoleh data dan juga mengenal kompetitor sehingga kamu bisa melakukan perubahan. Seperti yang sudah dijelaskan sebelumnya bahwa web scraping adalah teknik untuk mendapatkan informasi dari produk di situs website/e-commerce kompetitor, sehingga dengan data tersebut kamu bisa menentukan strategi baru agar tidak kalah dari kompetitor.

Selain produk, kamu juga bisa mendapatkan data iklan produk kompetitor berupa wawasan anggaran dan lain sebagainya. Bahkan, kamu juga bisa mendapatkan sebuah data berupa prediksi tren produk.

Optimasi Harga

Jika kamu termasuk pengusaha yang mengalami kesulitan dalam menetapkan harga, maka kamu bisa mendapatkan optimasi harga dari teknik web scraping dan ini sangat membantu. Masalah dalam sebuah optimasi adalah kita tidak dapat menyeimbangkan titik dimana kita tidak bisa meningkatkan keuntungan tanpa kehilangan pelanggan.

Ingat sebuah prinsip bahwa pelanggan bersedia membayar lebih untuk sebuah produk dengan nilai lebih. Sedangkan dalam bisnis ritel digital, hal ini penting untuk meningkatkan layanan kamu.

Dengan web scraping kamu bisa mendapatkan informasi terkait pelanggan, sehingga kamu dapat mencari tau bagaimana kamu bisa mendapatkan peningkatan kepuasaan pelanggan terhadap tawaran kamu, salah satu caranya dengan menyempurnakan strategi pasar.

Dengan web scraping juga, kamu bisa menetapkan strategi harga yang dinamis. Pasar bisnis digital tidak statis dan kamu harus mengikuti semua perubahan harga yang terjadi untuk memaksimalkan sebuah layanan dan keuntungan. Web scraping memungkinkan kamu untuk mengawasi perubahan harga pasar dan strategi cara promosi yang tepat.

Tertarget Secara Personal

Web scraping dapat memudahkan kamu dalam menetapkan target personal berdasarkan data calon pelanggan, sehingga kamu bisa menentukan bagaimana cara promosi kepada mereka. Biasanya data yang bisa kamu dapatkan dari web scraping berupa pendidikan calon pelanggan, perusahaan, jabatan mereka, jenis kelamin, dan masih banyak lagi.

Dengan data tersebut kamu bisa menentukan strategi kampanye dan kamu juga bisa menentukan niche yang relevan untuk menerapkan kampanye dan mengirimkan buletin secara masal. Namun, pastikan kamu selalu mengirimkan informasi yang relvan dengan minat pelanggan kamu ya.

Keputusan Dalam Berinvestasi

Web scraping dalam dunia investasi bukanlah hal asing lagi. Bahkan dari waktu ke waktu, telah banyak orang yang menggunakan teknik ini untuk mengumpulkan data alternatif dalam menghindari resiko kegagalan dan hal ini bisa membantu dalam mendeteksi risiko yang tidak terduga dan peluang yang lebih potensial.

Keputusan investasi itu kompleks, karena biasanya akan melibatkan serangkaian proses sebelum memutuskan langkah yang tepat di dalam menyiapkakan keputusan investasi. Cara paling efektif untuk menguji investasi di masa lalu adalah melalui analisis data historis. Hal ini bisa menunjukan kepada kamu penyebab sebuah kegagalan dan keberhasilan dalam berinvestasi di masa lalu.

Sebagai sarana, web scraping dapat mengekstrak data historis dengan lebih efektif lagi dimana kamu bisa memasukkan data tersebut ke dalam sebuah database. Dengan menggunakan data yang sudah diperoleh dapat meningkatkan akurasi dari hasil analisisnya dalam pengambilan keputusan yang lebih baik.

Mengoptimasi Produk

Masuk akal bagi siapa saja yang mencari tahu terlebih dahulu tentang ulasan online terhadap sebuah produk sebelum melakukan pembelian. Ulasan ini dapat mempengaruhi keputusan pembelian calon pelanggan terhadap produk kita secara deterministik. Maka dari itu, kamu dapat menganalisis apa yang calon pelanggan pikirkan tentang brand kamu agar sesuai dengan harapan mereka.

Katakanlah tim produk kamu akan meluncurkan sebuah produk terbantu. Namun, kamu sangat mencemaskan produk baru ini dan bertanya-tanya apakah produk tersebut bisa melakukan terobosan dan membantu menghasilkan pendapatan terhadap perusahaan. Nah, hal ini penting untuk mengumpulkan umpan balik terhadap pelanggan untuk memeriksa secara silang produk-produk dan melakukan sebuah perbaikan jika ditemukan sebuah kekurangan.

Kamu bisa melakukan teknik analisis sentimen secara lebih luas untuk meganalisis sikap pelanggan, apakah hal tersebut bisa berdampak positif, netral atau justru negatif. Namun, analisis ini membutuhkan sebuah data yang cukup besar. Nah agar proses pengumpulan data besar ini menjadi lebih cepat dan menghemat banyak waktu dan juga tenaga maka kamu bisa menggunakan web scraping.

Kesimpulan

Bagaimana sudah terbayang apa itu web scraping dan teknik apa saja yang digunakan didalamnya? Lima manfaat di atas hanya sebagian kecil dari apa yang dapat dicapai oleh web scraping. Kamu bisa melakukan pengumpulan data dan mendapatkan manfaat tersebut dari referensi yang kami jelaskan atau bahkan kamu memiliki ide sendiri dalam proses penerapannya sehingga mendapatkan manfaat lainnya yang tidak disebutkan di tulisan ini.

Contoh Coding HTML untuk Pemula

 

Tahukah Anda halaman website yang Anda kunjungi saat ini adalah salah satu contoh HTML?

Faktanya, 92.3% website di dunia ini dibuat menggunakan HTML, lho.

HTML (Hyper Text Markup Language) adalah bahasa markup untuk membuat halaman web. Bahasa markup yaitu bahasa komputer untuk memformat teks dan berbagai media di dalamnya.

Biasanya, HTML didukung dengan bahasa lainnya. Seperti CSS, JS, ataupun bahasa pemrograman lain yang lebih rumit.

HTML memungkinkan Anda mampu membuat website, membangun template, dan berbagai karya lain yang banyak orang bersedia beli.

Bagaimana? Menarik kan mempelajari coding HTML? Kabar gembiranya, di artikel ini Anda akan mendapatkan segudang info tentang contoh HTML yang ramah pemula, lho. Sudah tidak sabar kan? Yuk langsung saja simak daftarnya! 

25+ Contoh Coding HTML untuk Pemula

Agar tidak bingung, sebaiknya Anda mengenal dulu beberapa istilah untuk belajar HTML:

• Tag: awalan instruksi atau perintah yang akan dibaca browser. Misalnya: tag <bold>.
• Elemen: keseluruhan kode yang terdiri dari tag pembuka (< >) hingga tag penutup (/< >).
• Atribut/property: informasi atau perintah tambahan yang berada di dalam elemen (Contoh: style)

Nah sekarang, Anda sudah siap belajar contoh HTML untuk pemula. Di bagian akhir, kami juga akan memberikan bonus contoh desain web HTML keren yang layak Anda coba, lho. Penasaran? Yuk lanjut membaca!

1. HTML Basic

Segala template HTML di dunia memiliki bentuk dasar, yaitu HTML Basic. Apa saja yang pasti ada dalam coding HTML Basic? Kami akan membedahnya satu per satu.

<!DOCTYPE html>
<html>
<head>
  <title>Title of the document</title>
</head>
<body>
  <h1>Heading</h1>
  <p>Paragraf.</p>
</body>
</html>

Pertama, dokumen HTML harus diawali dengan <!DOCTYPE html>. Fungsinya sebagai deklarasi sehingga browser tahu dokumen ditulis dalam HTML.

Berikutnya, ada tag <html>. Tag ini akan menampung seluruh tag HTML dari awal hingga penutupan, yaitu </html>.

Setelah <html>, masuk ke tag <head>. Seperti namanya, tag ini berisi coding HTML untuk membuat kepala dokumen. Hasilnya akan terlihat sebagai judul pada tab browser Anda.

Lalu, tibalah Anda ke tag <body>. Coding HTML ini memuat inti dokumen HTML Anda, yaitu isian website.

Di akhir, jangan lupa tutup dokumen HTML dengan tag penutup yang sesuai (</html>, </body>, dll).

2. Heading

Heading adalah judul hingga sub-judul yang ada di dalam website. Fungsinya, untuk memetakan info dari umum ke khusus.

Selain memudahkan visitor menangkap inti informasi, heading juga mendongkrak SEO website.

Alasannya, Google jadi lebih paham struktur dan konteks artikel, deskripsi produk, ataupun media teks lainnya pada website.

Berikut contoh HTML untuk berbagai macam heading.

<h1> Heading 1 <h1> <h2> Heading 2 <h2> <h3> Heading 3 <h3> <h4> Heading 4 <h4>

Makin spesifik info dan pemilihan sub-judulnya, makin kecil juga ukuran heading. Tentunya dengan coding HTML tag heading, Anda tak perlu repot-repot format ukuran heading secara manual. Praktis, bukan?

3. Paragraf

Nah, contoh HTML berikutnya yaitu membuat paragraf.

Paragraf itu penting. Sekarang, bayangkan Anda membaca artikel website yang tidak punya paragraf. Setiap ide pokok terlihat samar dan melelahkan mata gara-gara tak punya jeda.

Karena itu, setiap paragraf perlu dipisah. Nah untuk membuat paragraf dengan coding HTML, gunakan saja tag P.

<p>text</p>

Setelah itu, paragraf baru akan muncul menjadi baris baru. Alhasil, tulisan jadi lebih enak dibaca dan rapi, bukan?

4. Bold/Strong

Contoh coding HTML berikutnya, ada bold/strong.

Pasti, Anda sudah tahu tag HTML ini akan memberi efek tebal pada tulisan. Tapi, apa sih beda antara bold dan strong?

Tulisan dengan efek bold (atas) dan strong (bawah)

Pertama, coding HTML bold dan strong memiliki tag yang berbeda:

<b>Afiliasi adalah kerja sama promosi dan penjualan produk</b> <strong>Afiliasi adalah kerja sama promosi dan penjualan produk</strong>

Dan meskipun outputnya terlihat sama, Google memandangnya lain.

Coding HTML bold sekadar memberi efek tebal, sedangkan tag strong memiliki pengaruh bagi web crawling. Sebab, tag strong mampu memberitahu Google kata atau keyword penting yang memperkuat info dari konten website.

Jadi, manakah yang Anda butuhkan? Tag bold atau tag strong?

5. Italic/Emphasize

Mirip seperti tag bold/strong, ada dua coding HTML yang bisa Anda pakai untuk memiringkan kata-kata.

Berikut contoh HTML dengan tag italic/emphasize.

<i>Bug adalah istilah bahasa Inggris yang artinya serangga.<i> <em>Bug adalah istilah bahasa Inggris yang artinya serangga.<em>

Lalu, manakah yang sebaiknya Anda pakai?

Kembali lagi ke kebutuhan Anda. Jika hanya ingin memiringkan kata-kata saja, gunakanlah coding HTML italic. Sedangkan jika mau menekankan kata tertentu agar Google lebih mudah mengindeks konten, pakailah tag <em>.

6. Line Break

Sekilas, coding HTML Line Break mirip dengan coding HTML paragraf.

Seperti namanya, Line Break berfungsi membuat baris baru. Namun, baris tersebut masih dalam paragraf yang sama. Ini dia contoh HTML Line Break.

<p> <br>Text <br> Text </p>

Hasilnya akan terlihat seperti ini.

Lalu, apa sih yang membedakan coding HTML Line Break dengan Paragraf?

Untuk outputnya sendiri memang sepintas sama. Namun, tag <p> lebih berisiko error pada beberapa browser. Sedangkan tag <br> digadang-gadang akan lebih di-support oleh HTML5 daripada tag <p>.

Beda dari contoh HTML-lainnya, coding HTML <br> memang tidak memiliki tag penutup </br>. Jadi, Anda cukup menggunakan <br> saja.

7. Images

Siapa yang suka website tanpa gambar? Mungkin, hampir tidak ada orang yang menyukainya!

Selain membosankan, info dalam website jadi kurang jelas. Faktanya, memasukkan ilustrasi meningkatkan views hingga 45%, loh.

Nah untuk memasukkan gambar, gunakan coding HTML images. Ukurannya juga bisa Anda atur sendiri pada atribut Style.

<img src=”url atau lokasi penyimpanan gambar” alt=”text” style=”width:500px;height:333px;”>

Berikut hasil contoh HTML images.

Eits, tunggu sebentar. Jika Anda perhatikan, dalam contoh coding HTML images tadi ada atribut ‘alt’. Apakah itu?

Alt text adalah kata yang diselipkan ke dalam gambar. Fungsinya sebagai antisipasi jika gambar invalid. Artinya, saat gambar tidak muncul, alt text akan menggantikannya sehingga visitor web tetap memahami deskripsi image.

8. Horizontal line

Contoh HTML selanjutnya, horizontal line.

Sederhana saja, coding HTML ini memungkinkan Anda membuat garis horizontal.

Contoh coding HTML-nya juga simple. Cukup masukkan tag <hr> pada bagian yang Anda inginkan.

<p> text </p> <hr> <p> text </p>

Penting!

Beda dari tag lainnya, tag <br>, <img>, dan <hr> memang tidak memiliki tag penutup (/br>, </img>, </hr>).

9. Cross-through text

Cross-through text atau teks yang dicoret mampu menekankan makna tertentu pada tulisan/informasi.

Biasanya, para penulis menggunakan strategi ini untuk menunjukkan versi benar atau lebih baik dari suatu hal.

Membuat cross-through text mudah, kok. Langsung saja gunakan contoh HTML ini.

<del>text.</del>

Sekarang, Anda sudah bisa mencoret tulisan sendiri bukan?

10. Quote

Banyak orang, termasuk Anda, menyukai quote. Selain indah, quote mampu memotivasi seseorang melakukan action tertentu pada website. Entah itu lanjut membaca artikel, membeli produk, dan hal lainnya.

Lalu, gimana sih cara membuat quote pada website dengan coding HTML?

Nah, Anda bisa membuat dua jenis quote: blockquote atau short quote.

Blockquote adalah quote panjang yang terpisah dari teks utama. Sedangkan short quote yaitu quote ringkas yang bisa menjadi satu bagian atau terpisah dari teks utama.

Blockquote

Short Quote

Di bawah ini contoh HTML yang bisa Anda gunakan.

<blockquote>text</blockquote> <q>text</q>

11. Font

Dari contoh-contoh HTML sebelumnya, mungkin Anda bosan karena hasil testing syntax selalu tampil dalam Times New Roman.

Tenang, Anda bisa kok mengubah jenis font. Baik itu pada header, paragraf, ataupun jenis teks lainnya. Caranya, masukkan property style ke dalam tag.

<h2 style=“font-family:Georgia;”>text</h2> <p style=“font-family:Comic Sans MS;”>text</p>

Contoh coding HTML di atas kira-kira menghasilkan output seperti ini.

Oh ya, penting Anda tahu, setiap browser menyediakan jenis font berbeda. Jadi jangan bingung jika ada browser yang tidak mau menampilkan jenis font permintaan Anda.

12. Highlighted

Pernahkah Anda menstabilo catatan penting di buku yang sedang Anda baca?

Nah, Anda juga bisa lho highlight kata penting pada website Anda. Berikut contoh coding HTML untuk melakukannya.

<p> text <mark> catatan penting </mark> text </p>

Secara otomatis, highlight text Anda akan berwarna kuning.

Nah bagi Anda yang ingin memakai warna lain, bisa kok modif sendiri. Caranya yaitu dengan menambahkan CSS berikut.

mark {
  background-color: yellow;
  color: black;
}

13. Text Colour

Butuh warna teks selain hitam? Bisa lho mengatur warna teks sendiri.

Caranya, gunakan property style seperti contoh HTML berikut.

<p style=”color:#ff471a;”>The flower is red </p>

Nah, Anda harus memasukkan warna sesuai dengan kode warna HTML. Nantinya, browser akan memproses dan menampilkan hasil sesuai permintaan warna.

14. Text Size

Selain mengubah warna teks, bisa juga lho mengatur ukuran tulisan. Caranya juga mudah, ikuti saja contoh HTML di bawah.

<p style=”font-size:48px;”>text</p> <p style=”font-size:20px;”>text</p>

Hasilnya akan terlihat seperti ini.

15. Text Alignment

Ingin mengubah posisi teks? Caranya gampang kok! Masukkan saja property style seperti ini:

<p style=”text-align:right;”>Geser teks ke kanan</p> <p style=”text=align:left;”>Geser teks ke kiri</p>

Lihat hasilnya. Teks langsung bergeser sesuai perintah. Tapi, kalau yang Anda masukkan adalah “text-align: center”, jangan kaget kalau teks tidak berpindah. Lho, kenapa begitu?

Saat ini, HTML5 tidak support  “text-align: center”. Sehingga, Anda harus menggunakan CSS property style jika ingin memindah posisi teks ke tengah.

<html>
<head>
<style>
   p {text-align: center;}
</style>
</head>
<body>
<p>Text</p>
</body>
</html>

16. Anchor Text

Anchor text adalah kata yang bisa diklik sehingga visitor bisa membuka halaman web tertentu.

Kenapa kata-kata tersebut bisa di-klik? Tentunya, karena ada link tersemat di dalamnya. Dengan anchor text, visitor web bisa menemukan info lain yang masih relevan. Selain itu, Google jadi lebih terbantu dalam memahami konteks web.

Berikut contoh html anchor text.

<a href=”link”>text</a>

Nantinya, teks pilihan Anda akan memiliki warna berbeda sekaligus bisa di-klik.

17. CTA Button

Tak cuma menyematkan link ke dalam teks, coding HTML memungkinkan Anda membuat CTA (Call-to Action) Button. CTA Button adalah tombol dengan link yang mengarahkan visitor website menuju konversi.

Gimana sih cara membuat CTA Button dengan coding HTML? Berikut contoh HTML-nya.

<div class="button-wrapper">
  <a class="button cta-button" href="link">text</a>
</div>

Beda dari tag lainnya, Anda melihat tag <div> pada syntax di atas. Yap, tag <div> berfungsi membungkus elemen ke dalam satu grup/class.

Tag <div> memudahkan Anda saat mendesain dengan CSS. Sebab, CSS akan diterapkan pada kelompok yang diinginkan saja. Dalam hal ini, class button-wrapper. 

Lho, maksudnya gimana?

Begini, syntax CTA Button tadi hanya menghasilkan output yang lebih mirip seperti anchor text daripada sebuah tombol.

Alasannya, contoh coding HTML itu hanya untuk membangun kerangka CTA Button saja. Agar ada desainnya, perlu mendesain tombol CTA menggunakan CSS untuk class button-wrapper.

Penting!

Sisipkan syntax <link href=”style.css” rel=”stylesheet”> pada coding HTML supaya file CSS terhubung dan desain bisa ditampilkan.

.button-wrapper {
  display: block;
  text-align: center;
}

.button {
  border: none;
  border-radius: 3em;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  width: auto;
}

.cta-button {
  background-color: #000;
  color: #fff ;
}

.cta-button:hover {
  background-color: #777;

Source Code: drivencreativelymad.com

Oh ya, jangan lupa juga terapkan tips membuat CTA agar tombol konversi Anda makin oke dan efektif ya!

18. Ordered List

Seperti namanya, Ordered List berfungsi membuat poin secara urut. Bisa berupa numbering, alfabet, ataupun romawi.

Cara membuatnya, pakailah coding HTML tag <ol>. Berikut contoh HTML Ordered List.

<ol>
  <li> Point 1 </li>
  <li> Point 2 </li>
</ol>

Sekarang, mungkin Anda penasaran: kok di sana ada tag <li>?

Nah, tag <ol> memang biasanya diikuti tag <li>. Tag <ol> berfungsi menentukan kelompok info yang mau diurutkan, sedangkan tag <li> untuk membuat list-nya. Tanpa tag <ol>, daftar list secara otomatis menjadi bullet points (Unordered List).

Lalu, bagaimana jika Anda ingin Ordered List Anda menggunakan alfabet ataupun angka romawi?

Simple saja. Anda cukup memasukkan atribut type:

Type	Fungsi
type=”1″	Item angka
type=”A”	Item huruf besar
type=”a”	Item huruf kecil
type=”I”	Item romawi besar
type=”i”	Item romawi kecil

Lho, memasukkan atributnya di mana? Mudah saja, silakan bubuhkan di sebelah tag <ol>. Sudah nggak bingung lagi, kan?

<ol type="A">
  <li> Point 1 </li>
  <li> Point 2 </li>
</ol>

19. Unordered List

Kebalikan dari Ordered List, Unordered List memungkinkan Anda membuat daftar item tanpa peduli urutannya. Biasanya menggunakan icon seperti bullet, persegi, dll.

Untuk membuatnya, Anda bisa menggunakan contoh HTML berikut.

<ul>
  <li> Point 1 </li>
  <li> Point 2 </li>
</ul>

Dengan contoh coding HTML di atas, output-nya adalah list item dengan bullet points. Lalu, bagaimana jika Anda ingin ganti icon?

Mirip seperti cara pada Ordered List, Anda bisa menggunakan property list-style-type berikut.

Value	Fungsi
disc	List item berupa bullet hitam
circle	List item berupa bullet putih
square	List item berupa kotak
none	List item tidak terlihat

Cara menyelipkan property list-style-type juga mudah, kok. Hanya begini saja:

<ul style="list-style-type:square;">
  <li> Point 1 </li>
  <li> Point 2 </li>
</ul>

Sekarang, icon list item Anda pasti sudah berubah sesuai keinginan Anda.

20. Superscript

Pernahkah Anda menemukan huruf kecil melayang di atas tulisan normal seperti DC Comics^TM? Atau angka pangkat seperti 4²?

Tipografi ini disebut juga sebagai superscript. Kami yakin, superscipt sudah cukup familiar bagi Anda. Biasanya, ini digunakan sebagai angka pangkat hingga logo trademark.

Pertanyaannya, gimana sih cara membuat superscript?

Nah, caranya gampang, kok. Bikin saja dengan coding HTML <sup>. Tanpa waktu lama, Anda sudah berhasil membuat superscript.

text<sup>TM</sup>

21. Subscript

Lawan dari superscript adalah subscript. Biasanya, Anda menjumpai subscript sebagai huruf/angka kecil di bagian bawah tulisan normal. Senyawa kimia, misalnya.

Penasaran contoh coding HTML Subscript? Lihat saja syntax ini.

Text <sub> tags </sub>

Sekarang, Anda pun bisa menulis senyawa kimia dengan coding HTML.

22. Tabel

Contoh HTML berikutnya, tabel. Seumumnya membuat tabel, Anda harus membuat baris dan kolom.

Sebagai langkah awal, silakan buat tabel dengan contoh coding HTML berikut.

<table border="1">
        <tr>
            <td>Baris 1 Kolom 1</td>
            <td>Baris 1 Kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2 Kolom 1</td>
            <td>Baris 2 Kolom 2</td>
        </tr>
    </table>

Namun, contoh HTML di atas hanya memberikan Anda sebuah tabel sederhana saja. Kurang menarik, bukan?

Nah, kalau Anda ingin tabel yang lebih keren dan fungsional, silakan ikuti Cara Membuat Tabel HTML ini. Dijamin, tabel Anda jadi jauh lebih kece!

23. Form

Apakah membuat form dengan coding HTML susah?

Jawabannya, tidak juga. Dengan tag <form>, bisa kok langsung membuat form dengan HTML. Seperti contoh coding HTML di bawah.

<form>
    <label>Username</label><br>
    <input type="text"><br>
    <label>Password</label><br>
    <input type="password"><br>
</form>

Lalu, jadilah tampilan form yang seperti ini. Sekarang Anda memiliki kolom username dan password standar untuk form.

Meski begitu, form tersebut masih bisa dipercantik sehingga visitor website Anda akan menyukainya. Gimana sih caranya? Nah, langsung saja meluncur ke Panduan Membuat Form Login yang ramah pemula ini.

Nah, sampai sini Anda sudah memahami coding HTML dasar untuk pemula. Artinya, Anda sudah siap mempelajari contoh desain web HTML yang menggabungkan berbagai tag HTML.

Berikut beberapa contoh desain web HTML sederhana dari Doctor Code untuk Anda coba.

24. Contoh Desain Web HTML Landing Page Responsive

Coding HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width , initial-scale=1.0">
    </head>
   
   
    <body>
       
        <div class="filter">
        </div>
        <div class="nav">
              <div class="container">
                  <h1>Logo</h1>
             
              </div>
               
        </div>      
        <div class="description">
            <h1>Welcome to our website</h1>
            <p>discover our amazing website with our amazing services and contact us </p>
        </div>
    </body>
</html>

CSS Markup:

@import url('shorturl.at/btNO5');
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background-image: url(shorturl.at/dkFT0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.nav{
    width: 100%;
    height: 80px;
    position: relative;
    z-index: 9;
}
.container{
    width: 80%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

.nav h1{
    color: #fafafa;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Marck Script",cursive;
    font-size: 38px;
}


.filter{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

.description{
   
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fafafa;
}
.description h1{
    font-size: 60px;
    text-transform: uppercase;
    font-family: 'Oleo Script', cursive;
}
.description p{
    font-size: 40px;
    font-family: 'Oleo Script', cursive;
}
@media screen and (max-width:700px){
    .container{
        width: 100%;
    }
   
    .nav h1{
       
        left: 50%;
        transform: translateX(-50%);
    }
   
    .description{
        z-index: 0;
       
    }
    .description h1{
        font-size: 1.8rem;
    }
    .description p{
        font-size: .9rem;
    }
}

Output:

Landing Page versi desktop

25. Contoh Desain Web HTML Website Travel

Coding HTML:

<!DOCTYPE HTML>
<html>
        <head>
            <link rel="stylesheet" href="style.css">
        </head>

        <body>
              <div class="nav">
                <div class="container">
                    <img src="shorturl.at/clsI1" class="logo">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">services</a></li>
                        <li><a href="#">about us </a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
            </div>
   
            <div class="header">
                <div class="search">
                    <input type="text" placeholder="search your destination">
                    <button>Search</button>
</div>
            </div>  
           
            <div class="footer">
                <p>copyright &copy; All rights reserved to DoctorCode</p>
            </div>
        </body>
    <script src="tab.js"></script>
</html>

CSS Markup:

*{
    margin: 0;
    padding: 0;
    outline: 0;
}
.container{
    width: 80%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: auto;
}
.contact-nav{
    background-color: #424242;
    padding: 5px 10px;
    color: #fafafa;
}

.nav img{
    height: 100px;
}
.nav ul{
    float: right;
    padding-top: 45px;
}
.nav ul li{
    display: inline-block;
    margin-right: 15px;
}
.nav ul li a{
    font-size: 1.2rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #212121;
    transition: .4;
}
.nav ul li a:hover{
    color: #3e7a7e;
}

.header{
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url("shorturl.at/inqZ6");
    background-size: cover;
    background-position: center;
}
.header .search{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
   
    border-radius: 4px;
}
.header .search input{
    padding: 15px 10px;
    border: none;
    width: 500px;
    font-size: 1.1rem;
}
.header .search button{
    padding: 17px 6px;
    border: none;
  width: 100px;
    border-radius: 0 4px 4px 0;
    background-color: #8ed1d5;
    color: #fafafa;
    font-size: 1.2rem;
    transition: .4s;
}
.header .search button:hover{
    background-color: #3e7a7e;
}

.footer{
    padding: 15px;
    background-color: #3e7a7e;
}
.footer p{
    text-align: center;
   
}

Output:

Coding HTML Nggak Mau Jalan? Kenapa ya?

Ada berbagai penyebab browser tidak bisa merespon coding HTML, yaitu:

1. File HTML dan CSS Belum Terhubung

Anda membangun halaman web dengan HTML dan menata style-nya menggunakan CSS, tapi desain tidak mau tampil?

Bisa jadi, Anda belum menyambungkan file HTML dengan file CSS. Nah, cara menghubungkannya adalah dengan menyematkan tag berikut dalam file HTML

<link href=”style.css” rel=”stylesheet” />

Style.css di sana adalah nama file CSS Anda. Oh ya, jangan lupa juga pastikan file HTML dan CSS berada dalam satu folder yang sama.

2. Link Source Tidak Valid

Ada kalanya Anda bingung karena browser tidak menampilkan gambar atau media apapun. Padahal, Anda sudah menggunakan tag HTML yang tepat.

Eits, jangan panik dulu. Coba cek URL yang Anda gunakan. Apakah link-nya sudah valid? Bisa diakses?

Kalau tidak, itu artinya Anda harus menggantinya dengan alternatif link yang lain.

3. Ada Kesalahan pada Coding HTML

Penyebab HTML tidak mau jalan berikutnya, yaitu ada kesalahan pada codingnya. Cek kembali apakah Anda sudah menulis semua tag dengan benar.

Proses checking ini mungkin memang menyita waktu. Namun, Anda bisa meminimalisirnya dengan menggunakan Editor HTML terbaik.

Adanya fitur seperti highlight syntax, auto-complete, hingga find-and-replace tentunya akan meringankan pekerjaan Anda. Sebab, editor HTML terbaik mampu menunjukkan syntax yang error. 

Oh ya, setelah memodifikasi code, jangan lupa refresh browser terlebih dahulu untuk melihat hasil perubahannya ya. Hehe..

4. Halaman Web Belum Di-Online’kan

Sudah bikin coding HTML susah-susah, tapi kok halaman web nggak bisa ditemukan orang lain di internet?

Jelas saja, kemungkinan besar itu gara-gara Anda belum mengonlinekan project tersebut. Sehingga, halaman web hanya mau tampil di komputer pribadi Anda saja.

Sudah Paham Coding

 HTML Pemula? Cus Buat Website Sendiri!

Sekarang, Anda sudah jauh memahami contoh HTML dan melihat berbagai contoh desain web HTML keren. Ternyata, belajar HTML tidak sesulit itu, bukan?

Untuk menyegarkan ingatan Anda, kami sudah merangkum beberapa contoh coding HTML di atas.

Tag HTML	Fungsinya untuk Membuat…
<h1> Heading 1 <h1>	Heading
<p> paragraf </p>	Paragraf
<b> bold </b><strong> strong </strong>	Bold/strong
<i> italic </i><em> emphasize <em>	Italic/emphasize
<br>	Line break
<img src=”url gambar” alt=”text” style=”width:…px;height:…px;”>	Images
<hr>	Horizontal Line
<del>text</del>	Cross-through text
<blockquote>text</blockquote><q>text</q>	Quote
<p style=”font-family:…;”>text</p>	Font
<mark> highlighted text </mark>	Highlighted
<p style=”color:…;”>text</p>	Text Colour
<p style=”font-size:..px;”>text</p>	Text Size
<p style=”text-align:right/left;”>text</p>	Text Alignment
<a href=”link”>text</a>	Anchor Text
<button type=”button”>Click Me!</button>	CTA Button
<ol type=”…”><li> Point 1 </li><li> Point 2 </li></ol>	Ordered List
<ul style=”list-style-type:…;”><li> Point 1 </li><li> Point 2 </li></ul>	Unordered List
text<sup>TM</sup>	Superscript
Text <sub> tags </sub>	Subscript
<table> </table><tr></tr><td></td>	Tabel
<form></form>	Form

Meski sudah paham coding HTML, kurang oke rasanya kalau belum praktik. Karena itu, cus buat website versi Anda sendiri!