Belajar Dasar Web Design (Cara mudah memahami perintah HTML dan CSS)

Halo Sobat!, salam designer pemula :D.

Pada kesempatan ini, Saya ingin membagikan pengalaman Saya dalam mempelajari HTML dan CSS, barangkali dapat membantu sobat lebih mudah memahami ke-2 kode pokok untuk membangun atau mendesain web ini. Baiklah simak secara perlahan kelanjutan dari artikel ini.

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

HTML

Apa itu HTML?

Yaitu salah satu dari bahasa pemrograman yang berbasis Web  yang digunakan untuk membuat sebuah halaman web, didalam HTML inilah kita membuat kepala / header website, badan / body, footer, dan lain sebagainya, intinya struktur utama dari website ada pada HTML, bila dianalogikan dalam tubuh manusia seperti tulang yang membentuk kerangka tubuh manusia.

Ciri-ciri script / perintah HTML 

• Selalu diawali oleh tag dan diakhiri oleh

.

Perbedaan awal dan akhir hanya pada bentuk tag nya perhatikan untuk awal (Pembuka tag) "< >" dan untuk akhir (Penutup tag) "</ >". 

Bila menemukan kode yang seperti ini berarti adalah kode HTML. Contoh : dan

,

dan

Contoh perintah atau tag HTML

• : Sebagai tempat / tubuh utama dari sebuah halaman website
• :
• Sebagai kontainer/ tempat diletakkannya gaya atau style (CSS) untuk memperindah tampilan halaman HTML / website

CSS

Lalu apa itu CSS?

Yaitu bahasa pemrograman yang digunakan untuk mengatur tampilan suatu halaman HTML. Dalam konteks sebuah website, CSS dapat diartikan sebagai bahasa yang digunakan untuk mengatur, mentata rapi, dan mempercantik tampilan / desain suatu halaman HTML.

Ciri-ciri script / perintah CSS 

• Bila digabungkan bersama dengan file HTML, diletakkan pada tag , dan diletakkan didalam tag -->

• Bila tidak tergabung pada file HTML, atau file berdiri sendiri, biasanya menggunakan perintah / kode , untuk me-load atau memanggilnya ke halaman HTML.
• Penulisannya seperti ini, elemen_atau_selector{property: value;} , artinya elemen atau selector (ID / Class) yang akan kita berikan gaya/ css kita buat terlebih dahulu kemudian properti css diletakkan pada kurung kurawal "{ }", dan sebagai pemisah antar CSS  menggunakan semi kolon (Titik Koma)";". Contoh: #menu{background: blue; width: 100%;}
• Kode CSS juga dapat terletak dibagian elemen terkait / yang membutuhkan itu sendiri, contohnya :
  header-wrapper
  ".

Contoh kode CSS

• Background 
• CSS yang mengatur warna dari suatu elemen, contoh :#footer{background:brown;}
• Dapat juga digunakan untuk menjadikan gambar sebagai background suatu elemen.
• Agar lebih detail bisa menggunakan background-color untuk warna, dan background-image untuk gambar. Selengkapnya tentang Background pada artikel ini
• Color
• CSS yang mengatur warna huruf atau kata-kata yang ada pada halaman website atau suatu elemen, contoh: #article{color: #000;}
• Width
• CSS yang mengatur lebar suatu elemen, contoh: body{width: 1200px;};
• Height
• CSS yang mengatur tinggi suatu elemen, contoh: header{height: 200px;}
• Border
• CSS yang mengatur bingkai suatu elemen, contoh: .sidebar{border: 2px solid #000} 
• Dan lain sebagainya

SHARE

Siti Dara

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•