Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, mengapa tidak lagi bereada di level begginer? karena mulai sekrang kita akan mulai untuk memasuki materi CSS. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Untuk penjelasannya, saya akan menjelaskan materi tentang CSS dari paling dasar, dimulai dari cara - cara penulisan CSS yang akan dijelaskan pada postingan ini. Check This Out...

DIbawah ini ada 2 bab yang akan kita pelajari, yaitu:

Penulisan file CSS
Perbedaan selector id dan class
CSS Atribute Of The Day
Tugas Mandiri

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Penulisan file CSS
Penjelasannya...

Penulisan kode CSS dalam HTML dibagi menjadi tiga cara, internal, inline, dan eksternal. Pembagian ini berdasarkan letak kode CSS tersebut ditulis.

1. Embedded CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Embedded CSS juga dikenal dengan sebutan Internal CSS.

Tag <style> biasanya ditulis di dalam tag <head>. Bisa juga ditulis di dalam <body>, namun untuk saya sendiri prefer ditulis di dalam <head>.

<!DOCTYPE html>
<html>
<head>
	<title> Contih Embedded, Selector Class dan ID </title>
	<style type="text/css">

		#Indo{
			background-color: ghost;
			border: solid;
			padding: 5px;
			font-family: Tw Cen MT;
			font-size: 25px;
		}

		.kotak{
			text-shadow: 5px 5px 5px yellow;
		}

		#Basasunda{
			background-color: salmon;
			border: dashed;
			padding: 5px;
			font-family: Adobe Arabic;
			font-size: 80px;
		}

		#English{
			background-color: grey;
			border: double;
			padding: 5px;
			font-family: Calibri;
			font-size: 30px;
		}

	</style>
</head>
<body>

	<div id="Indo" class="kotak">SELAMAT PAGI!!!</div>
	<div id="Basasunda"> WILUJENG ENJING!!!</div>
	<div id="English" class="kotak">GOOD MORNING!!!</div>
</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

SELAMAT PAGI!!!

WILUJENG ENJING!!!

GOOD MORNING!!!

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.nanang p
		{
			text-indent: 2cm;
                        color: #000;
			text-align: justify;
		}
		p #kanan 
		{
			text-align: right;
			color: chartreuse;
		}
		p .besar
		{
			text-transform: uppercase;
		}
		p .kapital
		{
			text-transform: capitalize;
		}
		p .kecil
		{	text-transform: lowercase;

		}
	</style>
</head>
<body> 
<div class="nanang>
	<p>Dengan text indent.
		form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web. baik secara server side scripting (misalkan PHP, JSP) ataupun client-side scripting (javascript).
	</p>

	<p id="kanan">
		form adalah salah satu bentuk halamn web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tesebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting (Misalkan PHP, JSP), ataupun client - side
	</p>
	<p class="besar">Pengubahan menjadi huruf besar</p>
	<p class="kecil">Pengubahan menjadi huruf kecil</p>
	<p class="kapital">huruf kapital pada setiap awal kata</p>
</div>
</body>
</html>

Hasil Dari Pengerjaan Embedded CSS :

Dengan text indent. form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web. baik secara server side scripting (misalkan PHP, JSP) ataupun client-side scripting (javascript).

form adalah salah satu bentuk halamn web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tesebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting (Misalkan PHP, JSP), ataupun client - side

Pengubahan menjadi huruf besar

Pengubahan menjadi huruf kecil

huruf kapital pada setiap awal kata

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis disebuah file khusus yang berekstensi .css.

Sebagai contoh, saya akan membuat sebuah file bernama index.css. Berikut ini cuplikan isi file index.css.

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal: Pertama menggunakan tag link

<link rel="stylesheet" type="text/css" href="index.css">

Atau bisa juga bisa menggunakan @import.

<style type="text/css"> @import "index.css"; </style>

Penulisan pada HTML versi lengkapnya seperti ini :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>
<body>
    <h2>Ini judul artikel</h2>
    <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>
</body>
</html>

Hasilnya pun akan sama seperti contoh internal CSS, karena kode CSS-nya sama. Hanya saja berbeda tempat penulisannya.

3. Inline-CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis. Contohnya seperti ini:

<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>

Contoh Lengkap

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Inline CSS</title>
</head>
<body>
  <h2 style="color:red;font-family:sans">Ini judul artikel</h2>
  <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>
</body>
</html>

Perbedaan Class Dan Id
Penjelasan Class dan Id

Selector ID

selector ID ini merupakan selector untuk menentukan bagian yang hanya ada satu pada halaman dan juga menentukan style nya. Jadi selector ID ini tidak bisa dipanggil lebih dari satu. Jika ada dua, maka hanya bekerja pada bagian pertama saja. selector ini juga bisa untuk me link pada section dalam satu halaman, misalnya kalau kalian men klik navigasi dengan selector id=“contact” , maka mas vroh akan dibawa ke section contact pada satu halaman. Bisa dengan effect scroll ataupun fade tergantung dari developernya. selector ID dituliskan dengan awalan pagar atau sharp atau kres “#” pada css. Untuk HTML nya menggunakan penulisan seperti id=“namaID”.

Pada HTML

<p id=“content”>Sebuah content dengan id </p>

Pada CSS

#content {
    text-align:center;
    color:snow;
}

Selector Class

Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .

Pada HTML

<div class=“container center-content”>Sebuah element dengan class </div>

Pada CSS

container {
    width=960px;
}
.center-content{
    text-align:center;
    color:snow;
    font-family:serif;
}

Perbedaan Antara Id dan Class Selector dalam bentuk gif

Tugas Mandiri
Hasil pengerjaan dari tugas mandiri

Hasil Dari Pengerjaan Tugas Mandiri :

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #3 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Angga Gemilang Blog

Sabtu, 25 Agustus 2018

#9 Intermediate Web | Web Programming tutorial

Assalamualaikum wr, wb

1. Embedded CSS

2. Eksternal CSS

3. Inline-CSS

Contoh Lengkap

Selector ID

Pada HTML

Pada CSS

Selector Class

Pada HTML

Pada CSS

Perbedaan Antara Id dan Class Selector dalam bentuk gif

0 komentar:

Posting Komentar

Follow Me

Clock

Calendar

Popular Posts

Blog Archive

About Me

Sent Quick Message

Translate

Translator's Flag

SMK Negeri 4 Bandung

Pesan Dari Admin

About