Postingan

Menampilkan postingan dari Agustus, 2022

Belajar CSS Dasar : Mengatur Font dengan CSS

Gambar
          Pada tutorial belajar css mengatur font dengan css ini akan di jelaskan tentang cara melakukan pengaturan font dengan css. misalnya seperti merubah font, mengatur ukuran font, warna font serta jenis bentuk font(garis miring, huruf tebal, tulisan miring). Beberapa syntax css yang digunakan untuk mengatur font: font-size digunakan untuk mengatur ukuran font  font-weight di gunakan untuk mengatur ketebalan font  font-family untuk mengubah jenis font  font-style digunakan untuk merubah gaya pada font.  font-color digunakan untuk merubah warna font. berikut ini adalah contoh cara mengatur font dengan css. --index.html-- --style.css--          D apat di lihat pada contoh mengatur font dengan css di atas. untuk merubah warna font bisa menggunakan perintah ‘color’, font-family digunakan untuk merubah jenis font, font-style digunakan untuk mengatur gaya font, italic,normal dan lainnta. font-size digunakan untuk mengatur ukuran dari font. dan font-weight digunakan untuk menentukan leba
Posting Komentar
Baca selengkapnya

Belajar CSS Dasar : Margin dan Padding pada CSS

Gambar
 Margin dan padding merupakan yang paling banyak di gunakan dalam mendesain sebuah website dengan menggunakan CSS. karena margin dan padding di gunakan untuk mengatur sisi dalam dari pada sebuah element dan mengatur sisi sebelah luar dari sebuah element. untuk itu pada tutorial belajar CSS Dasar Margin dan Padding pada CSS ini akan dijelaskan tentang apa itu margin? apa itu padding? dan bagaimana cara penggunaannya pada CSS. Mengenal Margin pada CSS Margin adalah sisi luar dari sebuah element. misalnya anda ingin mengatur jarak antar element. anda bisa menggunakan syntax margin untuk mengaturnya. terdapat beberapa sisi luar margin yaitu, margin atas di tuliskan pada css dengan ‘margin-top’, margin bawah atau jarak luar bagian bawah di tulis di CSS dengan ‘margin-bottom’, ‘margin-left’ sebagai jarak luar sebelah kiri element, dan ‘margin-right’ adalah sisi luar pada bagian sebelah kanan. tetapi jika anda hanya menggunakan syntax ‘margin’ saja maka akan secara otomatis mengatur jarak ata
Posting Komentar
Baca selengkapnya

Belajar CSS Dasar : Mengubah gambar background dengan CSS

Gambar
 Pada sub judul mengubah gambar background dengan css ini akan di jelaskan bagaimana cara mengubah background sebuah halaman website dengan menggunakan gambar. oleh sebab itu anda harus menyediakan sebuah file gambar untuk dijadikan background untuk halaman website anda. di sini saya sudah menyediakan sebuah gambar sederhana yang akan saya jadikan gambar pada background. letakkan file gambar satu folder dengan file html dan css agar tidak kebingungan nantinya. nama file gambar yang akan kita pakai adalah malasngoding.png --index.html-- <!DOCTYPE html> <html> <head>                <title>Membuat background dengan gambar</title>                <link rel="stylesheet" type="text/css" href="style.css"> </head> <body>                <   h1>Membuat background gambar dengan CSS</h1> </body> </html> --style.css-- body{             background: url('malasngoding.png');             color:
Posting Komentar
Baca selengkapnya

Belajar CSS Dasar : Mengubah Warna Background Dengan CSS

Gambar
          Background atau latar belakang pada sebuah halaman website merupakan salah satu bagian yang wajib di design untuk menghasilkan sebuah halaman website yang terlihat menarik dan modern. ada beberapa cara mempercantik background atau latar belakang website. bisa mempercantik background website dengan menggunakan gambar. jika tidak ingin menggunakan gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah background dengan CSS, gunakan property background pada CSS. property background selain di gunakan untuk mengubah background body website, bisa juga di gunakan untuk mengubah gambar background pada sebuah elemen HTML yang di inginkan. Cara mengubah background dengan CSS           pada tutorial belajar CSS mengubah background dengan css ini akan di jelaskan bagaimana cara mengubah background dengan menggunakan CSS. langsung saja masuk ke cara mengubah background menggunakan CSS. buat sebuah file html dengan nama file html nya terserah anda. di sini say
Posting Komentar
Baca selengkapnya

Belajar CSS Dasar : Teknik penulisan CSS External Style

Gambar
Teknik penulisan CSS External Style      Teknik penulisan Syntax CSS dengan External Style adalah teknik penulisan yang memisahkan file css dan html. penggunaan css yang baik adalah menggunakan teknik penulisan CSS ini karena kode program kita tidak akan berantakan karena syntax css di simpan pada file css. file css dan html di hubungkan menggunakan: <link rel="stylesheet" type="text/css" href="file css anda"> Contoh penulisan CSS menggunakan External Style :      Untuk membuat contoh penulisan CSS dengan External style siapkan satu buah file html dan satu buah file css. di sini saya membuat sebuah file dengan nama index.html dan style.css index.html style.css dan jika di jalankan maka hasilnya: Penjelasan ini sangat berguna sebelum anda melanjutkan ke tutorial CSS selanjutnya.
Posting Komentar
Baca selengkapnya

Belajar CSS Dasar : Teknik penulisan CSS Internal Style

Gambar
P enulisan CSS Internal Style          Teknik penulisan syntax CSS dengan Internal style adalah teknik cara penulisan syntax css yang di letakkan satu file dengan file html atau file php. syntax CSS di letakkan di dalam tag <style> dan di akhiri dengan tag </style>. biasa nya tag <style> .. </style> di letakkan pada bagian tag <head> pada HTML. Contoh penulisan internal CSS Style :      Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu file dengan file html. syntax css di letakkan di dalam tag <style>. syntax css padding berfungsi sebagai pengatur jarak pada sisi dalam element. pada contoh ini kita memberikan jarak sebesar 10px atau 10 pixel. CSS memanggil selector class dengan tanda titik ” . ” dan memanggil selector id dengan tanda pagar ” # “. Dan ini hasilnya:
Posting Komentar
Baca selengkapnya

Belajar CSS Dasar : Cara Penulisan CSS

Gambar
          CSS(Cascading Style Sheet) merupakan sebuah bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari HTML seperti elemen dan tag. dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element HTML. Mengganti font, mengatur margin dan mengatur padding dan banyak lagi yang dapat di lakukan menggunakan CSS untuk mempercantik atau men-design halaman website.           CSS menggunakan selector (id dan class) untuk menentukan element yang akan di modifikasi atau yang akan di beri sentuhan css. jika di ibaratkan HTML sebagai tiang pada sebuah bangunan rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah tersebut.  Ada tiga teknik metode penulisan CSS, yaitu :   Inline CSS Style   Internal CSS Style   External CSS Style       Ketiga teknik metode cara penulisan CSS(inline, internal, external) tersebut akan kita bahas dan pelajari pada tutorial ini. Teknik penulisan CSS Inline Style           T
Posting Komentar
Baca selengkapnya

Belajar CSS Dasar : Fungsi Kegunaan dan Pengenalan CSS

Belajar CSS Dasar : Pengenalan CSS CSS dapat mengubah font, ukuran font, warna dan format font. Mengatur ukuran layout, lebar, tinggi dan warna element, mengubah tampilan form, membuat halaman website yang responsive dan masih banyak lagi yg dapat di lakukan oleh CSS yang tidak akan habis saya tuliskan semuanya di tutorial belajar CSS dasar ini. Untuk mendesain font dapat dilakukan dengan mendefinisikan font, untuk mengatur warna bisa mengunakn color, margins digunakan untuk mengatur jarak pada luar elemt tertentu. Mengatur warna atau gambar pada latar belakang bisa menggunakan “background”. Mengatur ukuran font gunakan “font size”. Jenis font menggunakan “font-family” dan masih banyak lagi lainnya. Cara Penggunaan CSS File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam file HTML atau PHP yang ingin kita design dengan CSS menggunakan syntax berikut ini. <link rel=”stylesheet” type=”text/css” href=”style.css” /> Dengan tag <link>
Posting Komentar
Baca selengkapnya

CSS : Cascading Style Sheets

 CSS biasanya disebut sebagai pasangan baik dari bahasa dasar pemrograman  website  yang wajib dikuasai, yaitu HTML. Lantas, mengapa CSS bisa mendapat sebutan itu? Selain itu, apa sebenarnya CSS itu dan apa kegunaannya? Apa Itu CSS dan Apa Kegunaannya? CSS adalah salah satu istilah teknis dalam pemrograman. Meski sering dianggap sebuah bahasa pemrograman, CSS bukanlah bagian dari bahasa itu. Kata  Tech Terms , CSS adalah salah satu  styling language  (bahasa desain), bagian dari  markup language  yang dapat “mewarnai” atau mendesain suatu halaman  website . CSS sendiri adalah singkatan dari Cascading Style Sheet.  Markup language  ini biasanya dipasangkan dengan  markup language  (bahasa marka) seperti HTML. Intinya, CSS merupakan  tools  pelengkap HTML yang digunakan untuk mengubah tampilan suatu situs. Kelebihan Menggunakan CSS HTML boleh menjadi bahasa dasar yang dapat membuatmu membangun  website . Selain itu, HTML juga biasa digunakan dalam melakukan desain dasar situs. Apabila HT
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Membuat Symbol pada HTML

Gambar
          Selain menyediakan kode warna, HTML juga menyediakan kode untuk membuat symbol. langsung saja pada kode html yang di sediakan html untuk membuat simbol dengan html. ada dua jenis kode simbol html yaitu number dan entity, berikut ini adalah beberapa kode html yang bisa di gunakan untuk membuat simbol. Daftar beberapa kode simbol HTML
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Mengenal Class dan Id Pada HTML

Gambar
          Class dan Id, sesuai dengan yang di jelaskan pada tutorial sebelumnya yaitu cara menghubungkan HTML dengan CSS di jelaskan bahwa class dan id sangat lah penting. oleh sebab itu pada tutorial belajar HTML mengenal class dan id pada html ini akan di jelaskan tentang apa sih pengertian dari class dan id pada HTML? dan apa perbedaan dari class dan id pada HTML.           Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id. untuk apa di beri tanda ? agar dapat di manipulasi menggunakan css atau javascript. bayangan sederhananya jika anda memiliki lima buah kotak, semua kotak yang anda miliki berwarna biru, kemudian anda ingin mengubah warna kotak yang ketiga, nah di sinilah letak kegunaan class dan id, untuk memberikan tanda atau nama pada kotak anda agar bisa di ubah dan kotak yang lain tidak akan berubah. Mengenal Class dan Id Pada HTML           Perbedaan dari class dan id adalah clas
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Menghubungkan HTML dengan CSS

Gambar
          Tutorial Menghubungkan HTML dengan CSS ini merupakan tutorial HTML yang bisa di bilang termasuk ke dalam salah satu tutorial HTML yang paling terpenting. karena jika kita tidak mengetahui cara menghubungkan HTML dengan CSS secara otomatis pasti kita tidak mengetahui bagaimana cara untuk mendesign halaman website yang kita buat karena file HTML tidak terhubung dengan CSS. Bukan hanya HTML sebenarnya. tetapi PHP juga sama, PHP yang akan kita gunakan untuk membuat website. Setelah anda selesai mempelajari tutoria-tutorial HTML ini di asumsikan untuk melanjutkan ke tutorial belajar css dan tutorial belajar PHP di www.malasngoding.com, agar materi yang di pelajari menjadi terurut dan terstruktur.           Setelah anda mempelajari tutorial belajar html menghubungkan html dengan css ini selanjutnya akan di jelaskan lagi pada tutorial selanjutnya tentang Class dan id pada html. Pemahaman tentang Class dan Id pada HTML merupakan dasar yang harus di pahami sebelum anda melangkah lebih
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Tag Iframe Pada HTML

Gambar
          Iframe merupakan sebuah tag html yang berfungsi untuk menampilkan halaman website tanpa harus membuka website tersebut. jadi apabila anda ingin menampilkan website lain dalam halaman web anda maka anda bisa menggunakan tag <iframe> untuk menampilkannya. caranya sangat mudah, anda hanya perlu menambahkan atribut src=”” pada tag pembuka <iframe> untuk meletakkan link url dari website yang ingin anda tampilkan. cara penulisan tag iframe di awali dengan tag iframe pembuka “<iframe>” dan di akhiri dengan tag iframe penutup </iframe>. Perhatikan contoh dan penjelasan berikut ini tentang cara menggunakan tag <iframe>. Perhatikan pada contoh di atas. untuk membuat atau menggunakan tag <iframe> untuk menampilkan halaman website ada halaman web anda anda bisa menggunakan tag <iframe> dan kemudian memberikan atribut src=”” untuk meletakkan url dari halaman website yang ingin anda tampilkan. Sumber :  https://www.malasngoding.com/
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Menampilkan Gambar Pada HTML

Gambar
          Menampilkan gambar pada html termasuk yang bisa di bilang terpenting dalam membuat website atau membuat aplikasi berbasis web, bayangkan apa jadinya jika website tanpa gambar, maka akan terasa sangat membosankan. oleh karena itu teknik menampilkan gambar pada HTML termasuk ke dalam teknik yang perlu bahkan wajib. pada tutorial cara menampilkan gambar pada html ini akan di jelaskan tentang cara menampilkan gambar pada halaman website menggunakan HTML. HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. tag HTML yang berfungsi untuk menampilkan gambar adalah tag ” <img> “. tag <img> di gunakan untuk menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico dan lain-lain. Cara Menampilkan Gambar Pada HTML           Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>. kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file gambar, jadi atr
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Membuat Form pada HTML

Gambar
 Form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya adalah form login, form comment, form data user, dan lain sebagainya. untuk proses penginputan data dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag yang digunakan untuk membuat form ini adalah tag <form> yang didalamnya bisa berupa <input>, <textarea>, <option> dan <select> Tag <form> Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. dan biasanya nilai yang di kirim berupa alamat dari sebuah halaman untuk memproses data inputan. dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan dikirim oleh web browser. nilai dari method ini biasanya get atau post. Tag <input> Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radio button, sampai dengan tombol
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Membuat List Pada HTML

Gambar
 List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penulisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list. Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. tag yang digunakan dalam ordered list ini yaitu <ol>. unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. tag yang digunakan untuk membuat unordered list yaitu <ul> untuk lebih mudahnya, perhatikan contoh penulisan list dalam HTML berikut ini: Unordered list <ul> Unordered list adalah jenis list HTML dalam bentu titik pada awal list. berikut contoh unordered list pada HTML : Dari contoh di atas bisa anda lihat perbedaan masing-masing penggunaan jenis list pada HTML. Penggunaan list pada HTML tidak hanya untuk membuat daft
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Membuat Hyperlink Pada HTML

Gambar
Hyperlink yang sering di kenal dengan link yaitu menghubungkan antara satu dokumen dengan dokumen yang lain pada HTML. Tujuan dari hyperlink ini membuat sebuah teks atau gambar yang ketika diklik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan hyerlink tersebut. Hyperlink sendiri ditulis dengan menggunakan tag <a> tag <a> ini selalu di ikiti oleh atribut href, dimana didalam href (hypertext reference) ini lah yang akan di isikan alamat yang dituju ketika text atau gambar di klik. berikut cara penulisan untuk membuat hyperlink : <a href="http://www.malasngoding.com">klik disini</a> ketika di klik pada kata “klik disini” maka halaman akan di alihkan ke halaman www.malasngoding.com . hal ini sesuai dengan ketentuan yang telah kita tetapkan pada atribut href.
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Membuat Tabel Pada HTML

Gambar
TABLE PADA HTML Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom. Untuk lebih mudah memahami dalam pembuatan table pada HTML, berikut saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML. Tag <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa <table ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML. <td> atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam baris. Dan tag <th> untuk membuat table head atau bagian kepala pada table. Perhatikan contoh pembuatan table pada HTML berikut : Dan coba jalankan pada browser Dari contoh diatas dapat anda lihat sendiri fung
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Membuat Paragraf Pada HTML

Gambar
Untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa dikombinasikan langsung dengan tag paragraf <p>. Atribut tag tersebut yaitu: Membuat paragraf rata kiri menggunakan <p align="left"> .. isi paragraf </p> Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p> Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p> Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p> Perhatikan contoh berikut : Paragraf menggunakan <p>. berikut inplementasi <p> dalam dokumen HTML : Jenis paragraph Berikut ini adalah beberapa contoh jenis paragraf pada HTML.  Paragraf rata kiri <p align="left">1. ini merupa
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Format Text Pada HTML

Gambar
Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu dalam penulisan judul, ataupun isi dari content/halaman website sendiri. Berikut beberapa penjelasan dan contoh dari Format Text Pada HTML.  Format Text Pada HTML Ada beberapa format text yang umumnya di gunakan, di antaranya adalah:  Membuat huruf tebal (bold) pada HTML Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag <b>  berikut contoh syntax HTML untuk membuat format text tebal : < b >ini text tebal</ b > Membuat huruf miring (italic) pada HTML untuk membuat teks miring pada HTML, kita bisa menggunakan tag <i>, contohnya: <i>ini text miring</i> Membuat huruf bergaris bawah (underline) pada HTML untuk membuat teks underline/garis bawah pada HTML kita bias menggunakan tag <u>. Contohnya : <u>ini text underline </u> Berikut format text yang sering digunanakan dalam HTML. Berikut contoh penulisan tag/element format text
Posting Komentar
Baca selengkapnya

Belajar HTML Dasar : Heading Pada HTML

Gambar
Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting pada halaman web. element tag heading ini memiliki 6 tingkatan yang berurutan yaitu <h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah ke struktur halaman web. perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya tag/element <h1> lebih besar dari element/tag <h2> dan seterusnya. Penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing tag/element heading yang sering digunakan pada pengolahan halaman web : <h1> adalah heading yang digunakan untuk penulisan judul utama dari dokumen <h2> adalah heading yang digunaakan sebagai sub dari <h1>  <h3> adalah heading yang digunakan sebagai sub dari <h2> untuk penggunaan <h4>,<h5>,<h6> tergantung programmer sendiri untuk memperindah halaman web sesuai keperluan. berikut contoh penerapan masing-masing element/
Posting Komentar
Baca selengkapnya