Pengertian HTML Dan CSS

Pengertian HTML Dan CSS

in


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 <awal elemen> dan diakhiri oleh </akhir elemen>.
  • 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 : <html> dan </html> , <div> dan </div>

Contoh perintah atau tag HTML

  • <html> : Sebagai tempat / tubuh utama dari sebuah halaman website
  • <head> :
    • Sebagai kontainer/ tempat diletakkannya gaya atau style (CSS) untuk memperindah tampilan halaman HTML / website <style>.
    • Sebagai tempat meletakkan javascript <script>.
    • Meletakkan judul halaman website <title>.
    • Meletakkan meta yaitu tag untuk membungkus keperluan SEO seperti deskripsi/ keterangan website, keyword/ kata kunci, dan lain sebagainya <meta>.
    • Meletakkan css external/ css dari luar halaman HTML <link>. Contohnya : <link rel="stylesheet" href="style.css"/>.
  • <body> : Sebagai kontainer/ tempat dari elemen-elemen yang akan ditampilkan pada halaman HTML. Seperti <div>, <span>, <nav>, <ul>, <img> dan lain sebagainya.

Struktur dasar halaman HTML

Berikut ini kode untuk struktur dasar halaman HTML pada umumnya.


<html>
<head>

<!-- Tempat diletakkannya elemen <style>, <script>, <title>, <meta>, <link> -->

</head>

<body>

<!-- Didalam body ini tempat diletakkan apa yang akan ditampilkan pada halaman HTML, seperti content wrapper/ elemen konten , sidebar / widget samping, footer / kaki dari halaman website, dan lain sebagainya -->

</body>
</html>



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 <head>, dan diletakkan didalam tag <style>.
Contoh: 
<head>
<style>


</style>
<head>

  • Bila tidak tergabung pada file HTML, atau file berdiri sendiri, biasanya menggunakan perintah / kode <link rel="stylesheet" href="alamat_file_css">, 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 : <div id="header-wrapper" style="height: 200px; background: red;>. Disini elemen header-wrapper menggunakan tinggi 200 pixel dan background berwarna merah, dan yang mendapatkan pengaruh dari CSS tersebut hanya elemen "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
Previous Post
Next Post
Herlambang Teguh

1 comment:

  1. BloggerFebruary 24, 2020 at 6:42 AM

    Look at the way my partner Wesley Virgin's story launches in this SHOCKING AND CONTROVERSIAL VIDEO.

    As a matter of fact, Wesley was in the army-and shortly after leaving-he unveiled hidden, "self mind control" secrets that the CIA and others used to obtain everything they want.

    As it turns out, these are the EXACT same SECRETS lots of famous people (especially those who "became famous out of nowhere") and top business people used to become wealthy and successful.

    You probably know how you use less than 10% of your brain.

    Really, that's because most of your BRAINPOWER is UNCONSCIOUS.

    Maybe that conversation has even taken place IN YOUR own brain... as it did in my good friend Wesley Virgin's brain about 7 years ago, while driving a non-registered, beat-up garbage bucket of a car without a driver's license and $3.20 on his banking card.

    "I'm so frustrated with living paycheck to paycheck! When will I finally succeed?"

    You've been a part of those those thoughts, ain't it so?

    Your very own success story is going to be written. You just need to take a leap of faith in YOURSELF.

    CLICK HERE To Find Out How To Become A MILLIONAIRE

    ReplyDelete