BLANTERORBITv102

    Tutorial Belajar HTML Apa Itu CSS

    Saturday, March 18, 2023
    HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua bahasa pemrograman yang paling umum digunakan dalam pengembangan web. HTML digunakan untuk membuat struktur dasar dari halaman web, sementara CSS digunakan untuk memberikan tampilan dan gaya pada halaman web. HTML dan CSS bekerja secara terpisah, tetapi mereka juga saling terkait dan bekerja sama. Pada artikel ini, akan dijelaskan secara lengkap tentang HTML dan CSS, serta bagaimana cara mereka bekerja dan digunakan bersama-sama. HTML HTML adalah bahasa markup yang digunakan untuk membuat struktur dan konten dari halaman web. HTML terdiri dari tag dan atribut yang digunakan untuk menentukan elemen atau bagian dari halaman web seperti teks, gambar, video, tabel, dan formulir. Tag HTML dimulai dengan karakter "<" dan diakhiri dengan karakter ">". Ada banyak tag HTML yang tersedia, seperti tag <head>, <title>, <body>, <h1> - <h6>, <p>, <img>, <video>, <table>, <form>, dan banyak lagi. Contoh kode HTML sederhana:

    HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua bahasa Markup yang paling umum digunakan dalam pengembangan web. HTML digunakan untuk membuat struktur dasar dari halaman web, sementara CSS digunakan untuk memberikan tampilan dan gaya pada halaman web.

    HTML dan CSS bekerja secara terpisah, tetapi mereka juga saling terkait dan bekerja sama. Pada artikel ini, akan dijelaskan secara lengkap tentang HTML dan CSS, serta bagaimana cara mereka bekerja dan digunakan bersama-sama.

    HTML

    HTML adalah bahasa markup yang digunakan untuk membuat struktur dan konten dari halaman web.

    HTML terdiri dari tag dan atribut yang digunakan untuk menentukan elemen atau bagian dari halaman web seperti teks, gambar, video, tabel, dan formulir.

    Tag HTML dimulai dengan karakter "<" dan diakhiri dengan karakter ">". Ada banyak tag HTML yang tersedia, seperti tag <head>, <title>, <body>, <h1> - <h6>, <p>, <img>, <video>, <table>, <form>, dan banyak lagi.

    Contoh kode HTML sederhana:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <!DOCTYPE html>
<html>
<head>
	<title>Judul Halaman</title>
</head>
<body>
	<h1>Judul Utama</h1>
	<p>Ini adalah paragraf pertama.</p>
	<p>Ini adalah paragraf kedua.</p>
</body>
</html>

    Pada contoh di atas, terdapat tag <head> yang berisi informasi tentang halaman web seperti judul, deskripsi, dan metadata lainnya. Sedangkan tag <body> berisi konten dari halaman web seperti teks, gambar, video, dan elemen lainnya.

    CSS

    CSS adalah bahasa gaya yang digunakan untuk memberikan tampilan dan gaya pada halaman web. CSS digunakan untuk mengubah tampilan dan gaya dari elemen HTML seperti warna, ukuran, bentuk, jarak, posisi, dan banyak lagi.

    CSS menggunakan aturan gaya (style rules) untuk menentukan tampilan dan gaya dari elemen HTML. Aturan gaya terdiri dari selektor dan deklarasi.

    Selektor digunakan untuk memilih elemen HTML yang akan diberikan tampilan dan gaya. Selektor dapat berupa tag HTML, kelas, ID, atau elemen yang memiliki atribut tertentu.

    Deklarasi terdiri dari properti dan nilai. Properti adalah atribut yang akan diubah tampilannya, seperti warna, ukuran, jarak, dan sebagainya. Nilai adalah nilai yang akan diberikan pada properti tersebut, seperti merah, 14px, 20px, dan sebagainya.

    Contoh kode CSS sederhana:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    body {
	background-color: #f2f2f2;
	font-family: Arial, sans-serif;
}

h1 {
	color: blue;
	font-size: 36px;
}

p {
	color: black;
	font-size: 18px;
}

    Pada contoh di atas, aturan gaya pertama akan memberikan warna latar belakang abu-abu (#f2f2f2) pada elemen <body>, serta font family Arial dan sans-serif. Aturan gaya kedua akan memberikan warna biru dan ukuran font 36px pada elemen <h1>. Sedangkan aturan gaya ketiga akan memberikan warna hitam dan ukuran font 18px pada elemen <p>.

    Menghubungkan HTML dan CSS

    Untuk menghubungkan HTML dan CSS, Anda dapat menggunakan tag <style> pada bagian <head> dari halaman web. Dalam tag <style>, Anda dapat menuliskan kode CSS untuk mengatur tampilan dan gaya dari elemen HTML pada halaman web.

    Contoh kode HTML dan CSS yang dihubungkan:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <!DOCTYPE html>
<html>
<head>
	<title>Judul Halaman</title>
	<style>
		body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
		}

		h1 {
			color: blue;
			font-size: 36px;
		}

		p {
			color: black;
			font-size: 18px;
		}
	</style>
</head>
<body>
	<h1>Judul Utama</h1>
	<p>Ini adalah paragraf pertama.</p>
	<p>Ini adalah paragraf kedua.</p>
</body>
</html>

    Pada contoh di atas, kode CSS dituliskan di dalam tag <style> pada bagian <head> dari halaman web. Kode CSS tersebut akan memberikan tampilan dan gaya pada elemen HTML pada bagian <body> dari halaman web.

    Kesimpulan

    HTML dan CSS adalah bahasa markup yang digunakan dalam pengembangan web. HTML digunakan untuk membuat struktur dan konten dari halaman web, sementara CSS digunakan untuk memberikan tampilan dan gaya pada halaman web.

    HTML dan CSS bekerja secara terpisah, tetapi mereka juga saling terkait dan bekerja sama. Untuk menghubungkan HTML dan CSS, Anda dapat menggunakan tag <style> pada bagian <head> dari halaman web.

    Dengan menguasai HTML dan CSS, Anda dapat membuat halaman web yang menarik dan responsif. Selamat mencoba!


    Home HTML Pemrogramman Tutorial Belajar HTML Apa Itu CSS

    Author

    KuyTeam!

    0 comments

    Silahkan bertanya jika anda bingung mengenai postingan terkait yang sedang anda baca!
    Emoticon