CSS 2 : Penulisan CSS

CSS 2 : Penulisan CSS

CSS   Agustus 14, 2017

  11/08/2017

MUHAMMAD FAISAL ~  CSS ( Cascading Style Sheet ) Merupakan sebuah bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari HTML seperti element 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 dilakukan menggunakan CSS untuk mempercantik atau men-design halaman website.

CSS Menggunakan seletor(id dan class) untuk menentukan element yang akan di modifikasi atau yang akan diberi 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 tersebut akan kita bahas pada tutorial Belajar CSS Dasar Cara Penulisan Pada CSS

Inline CSS Style
Teknik penulisan pertama yaitu dengan menulis syntax CSS dengan Inline Style adalah teknik penulisan Syntax CSS yang tidak memerlukan selector (id dan class ) sehingga syntax CSS diletakkan atau langsung disisipkan pada element HTML. Syntax CSS diletakkan di dalam atribut style=" "

 

   

External CSS 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 ini agar kode program kita tidak berantakan karena syntax css disimpan pada file css. File CSS dan HTML dihubungkan menggunakan

<link rel="stylesheet" type="text/css" href="file css anda">

Buat file html, dan masukkan script :

 Buat file CSS dan masukan script :

 Nanti kayak di bawah ini:
 

 semoga bermafaat

Referensi 

• http://www.script-kiddies.org
• www.w3school.com

CSS PART 1 :Mengenal css

CSS PART 1 :Mengenal css

CSS   Agustus 12, 2017

10/08/2017

MUHAMMAD FAISAL ~ CSS Merupakan singkatan dari " Cascading Style Sheets " sesuai dengan namanya CSS memiliki sifat " style sheet lenguage " yang berarti bahasa pemrograman yang digunakan untuk web design. CSS adalah bahasa pemrograman yang digunakan untuk men-design sebuah halaman sebuah website. Dalam mendesign halaman website CSS menggunakan penanda yang kita kenal dengan id dan class. Seperti yang sudah kita pelajari tentang pengenalan id dan class pada tutorial edisi belajar HTML dasar

Latar Belakang
Seiring berkembamangnya dunia pemrograman dan teknologi, CSS tidak cuma digunakan di HTML dan XHTML saja. Tapi sudah bisa digunakan untuk mendesign tampilan aplikasi android. CSS diakses menggunakan id atau class. Untuk contoh penulisanya perhatikan contoh berikut, dan lebih jelasnya akan saya jelaskan pada tutor berikutnya.

Maksud dan Tujuan
CSS dapat dikatakan dokumen yang berisi style untuk mengatur tampilan suatu halaman website agar lebih menarik dan interaktif dengan tujuan menarik minat pengunjung. Para desainer web menggunakan css untuk merapikan tampilan website agar lebih menarik dan interaktif, dengan mengubah elemen tag html seperti huruf, teks, background dan gambar.

Alat dan Bahan

• PC / Laptop

• Text Editor

Fungsi dan Kegunaan

CSS dapat merubah 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 yang dapat dilakukan oleh CSS yang tidak akan habisnya saya tulis di Tutorial Belajar CSS ini.


Untuk men-desain font dapat dilakukan dengan mendefinisikan font, untuk mengatur warna bisa menggunakan color, margins digunakan untuk mengatur jarak pada luar element tertentu. Mengatur warna atau gambar latar belakang bisa menggunakan Background. Mengatur ukuran font gunakan font size, jenis font menggunakan font-family dan masih banyak lagi.
Cara Penggunaan


File css disimpan dengan ekstensi .css kemudian di import atau dihubungkan kedalam file HTML atau PHP yang ingin kita design dengan CSS menggunakan syntax berikut ini.
<link rel="stylesheet" type="text/css" href="style.css />
Jika file CSS terletak dalam sebuah folder. Katakan saja foldernya adalah " asset " . Maka untuk menghubungkanya menggunakan seperti berikut.
href="asset/style.css"


Kesimpulan
Dapat kita simpulkan ibarat sebuah rumah CSS adalah dekorasi dari rumah tersebut yaitu tujuanya untuk mempercantik rumah, sama dengan CSS ini yang bertujuan agar tampilan website lebih cantik dan terlihat modern
Sekian Tutorial Dasar tentang Mengenal dan Pengertian CSS. Untuk lebih lengkapnya akan dijelaskan pada Tutorial Belajar CSS Dasar pada postingan selanjutnya, Jika ada yang ditanyakan silahkan berikan komentar, Sekian Terima Kasih

HTML 10 : Membuat login dan from di html

HTML 10 : Membuat login dan from di html

HTML   Agustus 11, 2017

05/08/2017

MUHAMMAD FAISAL ~ From adalah untuk pengutipan data sebelum di proses sistem.Salah satunya adalah form login, form comment, form data dan form user, dan lain - lian. untuk proses pengutipan data dari form akan kita bahas pada materi PHP, MYSqL, dan Javascript. Tag yang digunakan untukmembuat form ini adalah <form> yang didalamnya dapat kita selipkan <input>, <textarea>, <option> dan <select>.

•  FROM LOGIN

• FROM MENU

REFENSI

• WWW.W3SCHOLL.COM

HTML 9 :Mengenal Atribut From Di HTML

HTML 9 :Mengenal Atribut From Di HTML

HTML   Agustus 10, 2017

03/08/2017

MUHAMMAD FAISAL ~ Dalam pembuatan form pada HTML tentu saja terdapat beberapa atribut yang akan digunakan nantinya pada saat memproses data dengan webserver. Berikut beberapa atribut form yang digunakan saat pembuatan form pada HTML.

• Atribut Value adalah Merupakan nilai awal yang akan di tampilkan pada saat menjalankan di browser.Berikut contoh nya.
  

 

• Atribut Readonly Jika menggunakan atribut ini maka nilai value tidak dapat diubah. Berikut Contohnya :

• But Disabled Atribut ini digunakan mematikan inputan. Maksudnya element disabled dapat digunakan tetapi inputan tidak dapat diganti dan tidak bisa diklik. Berikut Contohnya :

• Atribut Size Atribut ini mengatur lebar kotak inputan, Untuk lebih jelasnya perhatikan contoh berikut :

• Atribut Maxlength Atribut ini digunakan untuk menentukan jumlah inputan teks yang dibatasi. Untuk lebih jelasnya perhatikan contoh berikut :
  
  

Atribut List atribut ini untuk menampilkan list pada form input. Lebih jelasnya perhatikan contoh berikut :

REFENSI

• http://www.script-kiddies.org

HTML 8 : List Pada HTML

HTML 8 : List Pada HTML

HTML   Agustus 09, 2017

1/08/2017

MUHAMMAD FAISAL~ List atau data yang berurutan kebawah merupakan tag HTML yang berfungsi untuk menampilkan data secara berurutan kebawah. Dalam penulisan HTML kita menggunakan tag <li> untuk mendefinisikan list. Dalam penggunaan list HTML ada 2 jenis tampilan list yang dapat kita gunakan yaitu ordered listdan unordered list. 

• Ordered List : Berfungsi untuk menampilkan list dalam bentuk angka. Penulisan tag HTMLnya adalah <ol>

Unordered List : Berfungsi untuk menampilkan list dalam bentuk bulatan atau kotak. Penulisan tag HTMLnya adalah <ul>

PENGGUNAAN TAG UNORDERED LIST
                     Berikut contoh unordered list pada HTML

PENGGUNAAN TAG ORDERED LIST
    Kita akan coba membuat list yang diawali dengan huruf atau angka. Berikut contohnya :

Kesimpulan

Dari contoh diatas kita dapat simpulkan sendiri apa perbedaan <ul> dan <ol> . Penggunaan tag list tidak hanya dapat digunakan untuk membuat list saja dengan sedikit sentuhan css dapat digunakan untuk membuat menu navigasi pada halaman web. Jika ada pertanyaan silahkan berikan komentar, Sekian Terima Kasih

Referensi

• http://www.w3school.com

HTML 7 : Membuat Hiperlink di HTML

HTML 7 : Membuat Hiperlink di HTML

HTML   Agustus 08, 2017

1/agustus/2017

MUHAMMAD FAISAL___Hyperlink atau link berfungsi untuk menghubungkan dokumen satu dengan dokumen yang lain. Tujuan dari hyperlink ini adalah ketika kita klik sebuah teks atau gambar maka kita akan diarahkan ke halaman tertentu. Contohnya kita sering menemui perkataan Klik Disini dan setelah kita diklik kita akan diarahkan ke halaman sesuai dengan yang ditetapkan oleh pembuat hyperlink tersebut.

Hyperlink ditulis dengan tag <a> atau yang kita kenal anchor (Jangkar). tag <a> selalu diikuti dengan atribut href (hypertext reference) inilah yang akan diiskan alamat yang kita tuju ketika teks atau gambar diklik. Berikut contoh penggunaan atribut.

Jenis Hilperlink
Alamat Absolute yaitu penulisan alamat file yang disertai dengan alamat websitenya. Oke akan saya berikan Contohnya :

Jadi sampai disini artikel saya jika ada pertanyaan atau yang lain silahkan berikan komentar pada kolom dibawah dan nantikan tutorial HTML dasar lainya. Sekian Terima Kasih

Referensi

• http://www.w3school.com

HTML 6: Format Text Pada HTML

HTML 6: Format Text Pada HTML

HTML   Agustus 07, 2017

1/08/2017

MUHAMMAD FAISAL ~ Kali Ini saya akan share tentang format text pada html.

Pengertian
Format Text adalah format yang digunakan pada HTML, seperti penulisan judul, paragraf, dan lain sebagainya.

Latar Belakang 
Dalam penulisan Judul pada web maupun isinya pasti menggunakan sebuah format text.

Berikut format text yang sering digunakan dalam HTML

Tag	Keterangan
<b>	Mendefinisikan format text bold/tebal
<i>	Mendefinisikan format text italic/miring
<u>	Mendefinisikan format text underline/garis bawah
<small>	Mendefinisikan format text kecil
<strong>	Mendefinisikan format text yang hampir sama dengan format bold
<sub>	Mendefinisikan format subscripted teks
<sup>	Mendefinisikan format superscripted teks
<ins>	Mendefinisikan format text garis bawah
<del>	Mendefinisikan format text dengan garis di tengah
<mark>	Mendefinisikan ormat text yang berwarna

Kesimpulan

Banyak format text HTML yang dapat kita gunakan untuk mempercantik tampilan website kita.

Referensi

• http://www.w3school.com

HTML 5 : Membuat placeholder di html

HTML 5 : Membuat placeholder di html

HTML   Agustus 05, 2017

01/08/2017

MUHAMMAD FAISAL ~ kali ini saya akan mebagikan tentang HTML placeholder
yaitu adalah tag yang digunakan dalam input untuk menempatkan text dalam input tapi setelah input text itu di isi makan text placeholder akan hilang bisa juga dianggap sebagai text petunjuk
contoh:

SEMOGA  BERMANFAAT

REFENSI

1.WWW.W3SCHOOL.COM

HTML 4: MEMBUAT TABEL DAN MEMBERI WARNA DI HTML

HTML 4: MEMBUAT TABEL DAN MEMBERI WARNA DI HTML

HTML   Agustus 04, 2017

31/juli/2017

    Assalamualaikum.wr.wb

Masih dengan saya kalini membahas tentang HTML. Yang 1 ke sudah membahas tentang HTML kalini saya akan membahas tentang  membuat tabel di HTML dan memberikan warna.

Kegunaan
Untuk membuat tabel dan memberikan warna pada tabel dan  untuk meperindah html dan biar rapi.

Alat dan Bahan
1.pc
2.koneksi internet
3.sumblime text

1.kita membuka sumblime text dahulu lalu kita ketik seperti di bawah ini.

Refensi;
di bantu oleh teman
   semoga bermanfaat........semoga berhasil
   



HTML 3 : Menyisipkan gambara padaHTML

HTML 3 : Menyisipkan gambara padaHTML

HTML   Agustus 03, 2017

01/08/2017

MUHAMMAD FAISAL ~ Sebelumnya kita sudah membahas tentang Paragraf di html

Saya akan membahas cara menyisipkan gambar pada html.

Alat dan Bahan

• pc
• koneksi internet 
• sumblime text

refensi

• www.w3school.com

HTML 2 : Paragraf pada html

HTML 2 : Paragraf pada html

HTML   Agustus 02, 2017

01/08/2017

MUHAMMAD FAISAL ~ Setelah paham tentang format text, kini saya masuk ke paragraf.

Penegertian
Paragraf merupakan suatu tag yang digunakan untuk membuat suatu element dalam penulisan HTML atau gampangnya untuk membuat sebuah paragraf dalam halaman website. Dalam paragraf itu sendiri terdapat 4 element yang dapat dikombinasikan langsung dengan tag <p> atau paragraf.

Element Tag Paragraf

1. Paragraf rata kiri menggunakan align left
2. Paragraf rata kanan menggunakan align right
3. Paragraf rata tengah menggunakan align center
4. Paragraf rata kanan kiri menggunakan align justify

Penulisan tag Paragraf

HTML menggunakn tag khusus untuk membuat sebuah paragraf yaitu mengguanakan tag <p>. Jita tidak menggunakan tag <p> maka hasilnya :

Dapat kita lihat antara paragraf satu dan paragraf dipisahkan. Yaitu dengan cara menggunakan tag <p> dan ditutup dengan </p>

Kesimpulan

Dapat kita lihat dan kita ambil kesimpulan bahwa tag <br> berfungsi untuk memisahkan teks satu dengan yang lain atau meng ENTER kalo dalam bahasa saya hehe. Perbedaan antara tag <br> dengan <p> adalah jarak barisnya, tag <p> memiliki jarak baris yang lebih lebar daripada tag <br> . Jika memang membutuhkan paragraf dalam dokumen HTML kita gunakan saja tag <p>

Referensi

• http://www.w3school.com

HTML 1: Pengenalan HTML

HTML 1: Pengenalan HTML

HTML   Agustus 01, 2017

31/JULI/2017

  Assalamualaikum wr.wb
Saya kali ini akan membahas tentang HTML.Apakah HTML itu.

• Pengertian HTML  ( Hypertext Markup Lenguage ) Adalah sebuah bahasa mark up yang berfungsi untuk membuat halaman sebuah website. Di dalam dunia pemrograman web HTML adalah pondasi dasar. HTML dapat disimpan dengan ekstensi .html (dot html) dan dapat di eksekusi menggunakan web browser ( Firefox, Chrome, Opera, Dll ). Seperti yang sudah saya jelaskan html adalah dasarnya saja. Jadi sebuah website memerlukan bantuan CSS, Javascript, PHP dan bahasa lainya untuk membuat sebuah website yang dinamis. Jika halaman website hanya berisikan HTML maka website tersebut dapat dikatakan statis karena tidak memiliki fungsi - fungsi untuk mengelola website. Jadi developer disibukkan dengan membuat atau mengubah file HTML baru untuk mengupdate sebuah artikel
•  Alat dan Bahan : 

                1.Sumblime text
                   2.Koneksi internet

• Jangka waktu

       10 menit
ya
1. Buka sumblime text lalu ketik yang ada inginkan atau menyalin di W3
schools

Proses dan Tahapan Menjalankan File HTML
Yang harus kita lakukan untuk menjalankan File HTML kita harus Memiliki web browser ( Firefox, Google Chrome, Opera dll ).

Keguanaan HTML
HTML berfungsi sebagai pondasi sebuah website. Adapun yang dapat dilakukanoleh HTML adalah sebagai berikut :

•  
• Membungkus element-element tertentu sesuai kebutuhan

Membuat heading atau format judul

Membuat Tabel

Membuat List

Membuat Paragraf

Membuat Form

Membuat Tombol

Membuat Garis

Membuat Huruf Tebal

Membuat Huruf Miring

Membuat Huruf Rata Tengah,Kiri,Kanan

Menampilkan Gambar

Menampilkan Video

Dan masih banyak lagi kegunaannya.

Referrensi

MALES

KESIMPULAN

Jadi kesimpulan dari Artikel ini adah HTML merupakan pondasi dasar sebuah pembuatan website. Untuk mengeksekusi atau menjalankan file html harus menggunakan web browser.

Sekian semoga bermanfaat