Home HomeHtml Pengenalan HTML dan CSS

Pengenalan HTML dan CSS

Assalammualaikum warahmatullahi wabarakkhatu

Pertama tama marilah kita panjatkan puji serta syukur kita atas kehadirat Allah SWT yang mana telah memberikan nikmat serta karunianya sehingga saya dapat menulis artikel tentang HTML dan CSS kali ini.

Sholawat beserta salam tak lupa kita curahkan kepada junjungan kita habibana wanabiana Muhammad SAW kepada para keluarganya, sahabatnya, dan tak lupa kepada kita semua yang selaku umatnya yang semoga patut dan taat atas ajarannya sampai yaumul akhir aamiin ya rabbal alamin.

Pada saat ini sudah ada beberapa bahasa pemrograman seperti HTML, JAVA, C, C++, PHP, Visual Basic, Python, Java Script, Objective C, Action Script. Namun yang akan saya bahas kali ini adalah bahasa pemrograman HTML beserta CSS nya. Mungkin kalian sudah tau apa itu bahasa pemrograman HTML dan CSS, disini kita akan belajar bersama mengenai bahasa pemrograman tersebut.

Apa itu bahasa pemrograman HTML?

HTML adalah bahasa pemrograman yang biasanya digunakan untuk membuat sebuah website, HTML ini merupakan sebuah struktur pada website dengan kata lain jika pada manusia HTML ini adalah tulangnya. Kalian bisa mencari pengertian HTML yang lebih jelasnya pada wikipedia atau artikel artikel lainnya.

Biasanya struktur atau kerangka ini dibentuk dan diatur menggunakan markah/tanda yang biasanya disebut tag. Tag ini mempunyai pembuka dan penutup, dan biasanya menggunakan simbol < >.

Contoh:

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>HTML</title>
  6.     </head>
  7.     <body>
  8.     </body>
  9. </html>
Diatas merupakan contoh bahasa pemrograman HTML sebagai kerangka utama dari sebuah website dimana:
  • <!doctype html> adalah dokumen dalam bentuk html
  • <html> adalah tag pembuka untuk bahasa markah html
  • <head> adalah bagian kepala dari sebuah bahasa markah pada website
  • <meta charset="utf-8"> adalah pengkodean karakter dengan variabel yang mewakili karakter komputer (kalian bisa mencari tahu lebih jelasnya di google).
  • <title> adalah judul yang ada pada task bar
  • </title> adalah tag penutup dari title
  • </head> adalah tag penutup dari head
  • <body> adalah bagian halaman dari sebuah website, disini kalian bisa isi dengan apa yang kalian inginkan.
  • </body> adalah tag penutup dari body.
  • </html> adalah tag penutup dari html.
Nah itu merupakan pengenalan dari bahasa pemrograman, sekarang kita beralih ke CSS

Apa itu CSS?

CSS atau juga Cascading Style Sheets bukan merupakan bahasa pemrograman, CSS ini digunakan untuk merapihkan suatu web agar lebih terstruktur dan seragam, jika di ibaratkan manusia CSS ini adalah tampilan luarnya untuk terlihat rapih seperti pakaian, perhiasan dan lain-lain. CSS ini dapat mengatur suatu tulisan, gambar, dan lain lain sesuai yang kita inginkan. Jadi intinya CSS ini adalah bahasa Style sheet untuk mengatur suatu tampilan pada suatu beb.

Ada 3 cara untuk menambahkan CSS ke dalam HTML, apa saja ke 3 cara itu?
  1. yang pertama ada Internal CSS yaitu memasukkan nya di dalam tag <style> pada bagian head html
  2. lalu ada Inline CSS yaitu langsung ditulis pada atribut elemen html
  3. yang terakhir External CSS yaitu menulis di dalam file terpisah namun harus dihubungkan dengan sebuah link bahasa html
Contoh:
Internal CSS
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Contoh Internal CSS</title>
  5.   <!-- penulisan internal css dalam tag head -->
  6.   <style type="text/css">
  7.     p{
  8.       font-family: serif;
  9.       line-height: 1.75em;
  10.       font-size: 18px;
  11.     }
  12.     i { 
  13.       font-family: sans;
  14.       color: orange;
  15.     }
  16.   </style>
  17. </head>

  19. <body>
  20.   <!-- penulisan internal css dalam tag body -->
  21.   <style type="text/css">
  22.     h2 { 
  23.       font-family: sans;
  24.       color: #333;
  25.     }
  26.   </style>
  27.   <h2>Ini judul artikel</h2>
  28.   <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
  29. </body>
  30. </html>
Inline CSS
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Contoh Inline CSS</title>
  5. </head>

  7. <body>

  9.   <h2 style="color:red;font-family:sans">Ini judul artikel</h2>
  10.   <p style="color:maroon">Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
  11. </body>
  12. </html>
External CSS
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Contoh Eksternal CSS</title>
  5.     <link rel="stylesheet" type="text/css" href="style-ku.css">
  6. </head>

  8. <body>
  9.     <h2>Ini judul artikel</h2>
  10.     <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
  11. </body>
  12. </html>
Diatas adalah macam macam cara memasukkan CSS pada HTML, Selesailah sudah saya membahas tentang HTML dan CSS jika anda ingin mencari lebih dalam lagi tentang pembahasan ini anda bisa mencarinya di berbagai sumber seperti google, youtube dan lain lain.

Hadi Supriadi Rabu, 20 April 2022 Tags: Html

LihatTutupKomentar