Scribd
Unggah
66 tayangan25 halaman

Modul Pemweb Dasar

Modul ini membahas tentang dasar-dasar pemrograman web dengan HTML. HTML digunakan untuk membuat struktur dasar halaman web dan menyajikan konten. Modul ini menjelaskan pengertian HTML, komponen-komponen dasarnya seperti tag, elemen dan atribut, serta contoh-contoh penggunaan tag seperti paragraf, format teks, tabel dan lainnya.

Diunggah oleh

N Yashanfya A.
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
66 tayangan25 halaman

Modul Pemweb Dasar

Modul ini membahas tentang dasar-dasar pemrograman web dengan HTML. HTML digunakan untuk membuat struktur dasar halaman web dan menyajikan konten. Modul ini menjelaskan pengertian HTML, komponen-komponen dasarnya seperti tag, elemen dan atribut, serta contoh-contoh penggunaan tag seperti paragraf, format teks, tabel dan lainnya.

Diunggah oleh

N Yashanfya A.
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 25

MODUL

PEMROGRAMAN WEB DASAR

HTML

Pengertian HTML

HTML (Hyper Text Markup Language) adalah sebuah bahasa formatting yang digunakan
untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website (Web
Programming), HTML menjadi pondasi dasar pada halaman website. HTML memiliki beberapa
element yang tersusun dari tag-tag yang memiliki fungsinya masing-masing. seperti tag heading,
paragraf, pembuatan form, tombol, list, membuat hyperlink atau link yang menghubungkan antar
halaman website dan banyak lagi lainnya.

Kegunaan HTML

HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di lakukan
dengan HTML adalah sebagai berikut :

- Membungkus element-element tertentu sesuai kebutuhan

- Membuat heading atau format judul

- Membuat Tabel

- Membuat List

- Membuat Paragraf

- Membuat Form

- Membuat Tombol

- Membuat huruf tebal

- Membuat huruf miring

- Menampilkan gambar

- Menampilkan video

Dan banyak lainnya yang akan kita pelajari pada penjelasan selanjutnya.

Memilih Text Editor

Text Editor merupakan aplikasi yang digunakan untuk menulis syntax atau kode program,
disini khususnya untuk penulisan kode program HTML itu sendiri. Text editor sendiri sangatlah
banyak yang bisa digunakan untuk penulisan kode HTML, contohnya seperti Notepad yang
disediakan oleh sistem operasi windows, Textedit yang disediakan oleh sistem operasi Mac dan
Nano yang disediakan oleh sistem operasi linux.

Beberapa text editor yang digunakan dalam penulisan code program bagi anda yang baru
belajar bahasa pemrograman : Sublime Text Editor, Notepad ++, Atom, Brackets, Netbeans, dan
Visual Studio Code.

Mengenal Tag, Element, Atribut HTML

1. Tag HTML

Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa
text HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya
kepada web browser. baik text itu berupa list, paragraf, link dan sebagainya. disinilah di gunakan tag.
dalam penulisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana objek yang di
maksudkan berada diantara pembuka dan penutup tag. Berikut penulisan tag yang digunakan dalam
HTML.

<tag> Objek yang diisi </tag>

Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung
sudut pembuka dan di akhiri dengan kurung sudut penutup (< >), sedangkan pada tag penutup
,diawali dengan kurung sudut pembuka, backslash, dan diakhiri dengan penutup kurung sudut (</ >).
jenis tag yang sering digunakan dalam html berikut beberapa jenis tag yang akan sering anda jumpai
kalo di web programming.

Tag Fungsi
<!– ....–> Digunakan untuk memberi sebuah komentar atau keterangan
<!DOCTYPE html> Digunakan untuk Mendefinisikan tipe document HTML5
<a>link</a> Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara
satu dokumen HTML ke dokumen HTML yang lain (membuat link)
.<b> .. </b> Membuat teks menjadi tebal
<p> .. </p> Membuat pargraf
<h1> .. </h1> Membuat heading satu
<h2> .. </h2> Membuat heading dua
<body> Mendefinisikan body/isi dokument html
<head> Mendefinisikan bagian kepala dokumen html
<title> Memdefiniskan judul halaman
<div> Mendefinisikan halaman
<link> Mendefinisikan hubungan antar dokumen
<script> Mendefinisikan client-side script
<table> Mendefinisikan table
<th> Mendefinisikan sel header di dalam sebuah table
<td> Mendefinisikan sel di dalam sebuah table
<tr> Membuat baris di dalam sebuah table
<ul> Mendefinisikan daftar dalam format bullet
<li> Mendefinisikan list
2. Element HTML

Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi yang
ada diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>

Pada contoh diatas <h2> adalah heading dua <h2> merupakan element h2 dan isinya ini
adalah heading dua. dalam element ini bisa berupa text ataupun tag lain misalnya <link> dan
sebagainya.

3. Atribut pada HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. Informasi ini
bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll. atribut bisanya memiliki 2 bagian
yaitu nama dan nilai, dapat ditulis dengan ( name=”value” ). penulisan nilai/value diapit oleh dua
tanda kutip (bisa digunakan kutip satu atau kutip dua). Penulisan atribut pada HTML diawali dengan
penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri berikut contoh penulisan
atribut pada HTML.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>

Perhatikan pada syntax di atas :

- <h2> adalah tag heading 2

- align adalah nama dari atribut

- center adalah nilai/value dari atribut

- “Pengenalan atribut HTML” adalah element dari tag h2

Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang bergelut di web
programing akan sering menjumpai tag yang didalamnya terdapat atribut.
Heading pada HTML

Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian
penting pada halaman web. element tag heading ini memiliki 6 tingkatan yang berurutan yaitu
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah ke struktur halaman web.
perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya tag/element <h1> lebih
besar dari element/tag <h2> dan seterusnya.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
<h4>ini adalah heading 4</h4>
<h5>ini adalah heading 5</h5>
<h6>ini adalah heading 6</h6>
</body>
</html>

Format Text pada HTML

Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu
dalam penulisan judul, ataupun isi dari content/halaman website sendiri. Berikut beberapa
penjelasan dan contoh dari Format Text Pada HTML.

- Membuat huruf tebal (bold) pada HTML

Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag <b>
berikut contoh syntax HTML untuk membuat format text tebal :

<b>ini text tebal</b>

- Membuat huruf miring (italic) pada HTML

Untuk membuat teks miring pada HTML, kita bisa menggunakan tag <i>. contohnya :

<i>ini text miring</i>

- Membuat huruf bergaris bawah (underline) pada HTML

Untuk membuat teks underline/garis bawah pada HTML kita bias menggunakan tag <u>.
contohnya :

<u>ini text underline</u>


Berikut format text yang sering digunanakan dalam HTML.

Tag Description
<b> format text bold/tebal
<i> format text italic/miring
<u> format text underline/garis bawah
<small> format text kecil
<strong> format text yang hampir sama dengan format bold
<sub> format subscripted teks
<sup> format superscripted teks
<ins> format text garis bawah
<del> format text dengan garis di tengah
<mark> format text yang berwarna

<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>
</head>
<body>
<b>ini format format text tebal</b><br/>
<i>ini format text italic</i><br/>
<u>ini format text underline</u><br/>
<em>ini format text em</em><br/>
<small>ini format text small</small><br/>
<strong>ini format text strong</strong><br/>
<sub>ini format text sub</sub><br/>
<sup>ini format text sup</sup><br/>
<ins>ini format text ins</ins><br/>
<del>ini format text del</del><br/>
<mark>ini format text mark</mark>
</body>
</html>

Membuat Paragraf Pada HTML

Untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu
sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag
untuk membuat penulisan dalam bentuk paragraf.

Berikut ini adalah beberapa contoh jenis paragraf pada HTML.

- Paragraf rata kiri

<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>

- Paragraf rata kanan

<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
- Paragraf rata tengah

<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>

- Paragraf rata kiri kanan

<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument
HTML</p>
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument
HTML</p>
<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument
HTML</p>
</body>
</html>

Membuat Tabel pada HTML

Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris
dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan menggunakan tag
<tr> untuk membuat baris dan <td> untuk membuat kolom.

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td>baris 1 / kolom 1</td>
<td>baris 1 / kolom 2</td>
<td>baris 1 / kolom 3</td>
</tr>
<tr>
<td>baris 2 / kolom 1</td>
<td>baris 2 / kolom 2</td>
<td>baris 2 / kolom 3</td>
</tr>
<tr>
<td>baris 3/ kolom 1</td>
<td>baris 3/ kolom 2</td>
<td>baris 3/ kolom 3</td>
</tr>
<tr>
<td>baris 4/ kolom 1</td>
<td>baris 4/ kolom 2</td>
<td>baris 4/ kolom 3</td>
</tr>
</table>
</body>
</html>

Membuat Hyperlink pada HTML

Hyperlink yang sering di kenal dengan link yaitu menghubungkan antara satu dokumen
dengan dokumen yang lain pada HTML. Tujuan dari hyperlink ini membuat sebuah teks atau gambar
yang ketika diklik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan
hyerlink tersebut.

<a href="http://www.malasngoding.com">klik disini</a>

Membuat List pada HTML

List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang
digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penulisan list
menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa
di gunakan yaitu ordered list dan unordered list.

Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. Tag
yang digunakan dalam ordered list ini yaitu <ol>.

Unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di
awalnya. tag yang digunakan untuk membuat unordered list yaitu <ul>

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
<ol>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ol>
</body>
</html>

Membuat Form pada HTML

Form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya
adalah form login, form comment, form data user, dan lain sebagainya. Tag yang digunakan untuk
membuat form ini adalah tag <form> yang didalamnya bisa berupa <input>, <textarea>, <option>
dan <select>.

- Tag <form>

Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan
dikirim. dan biasanya nilai yang di kirim berupa alamat dari sebuah halaman untuk memproses data
inputan. dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan
dikirim oleh web browser. nilai dari method ini biasanya get atau post.

- Tag <input>

Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini memiliki
banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radio button,
sampai dengan tombol submit berada dalam tag <input>.

<input type=’text’> Form ini bersifat menerima inputan text misalkan: username, nama,
tempat lahir atau berupa inputan text yang pendek.
<input type=’password’> Form ini bersifat menerima inputan password. Setiap text yang di
input akan di tampilkan sebagai tanda titik(di samarkan), textbox ini
biasanya digunakan untuk membuat inputan password.
<input type=’submit’> inputan ini berupa tombol submit untuk memproses data inputan
dari form.
<input type=’checkbox’> inputan berupa checkbox yang dapat di ceklis oleh user. Inputan ini
memungkinan user untuk men-checklist banyak pilihan sekaligus.
<input type=’radio’> inputan ini berupa radio grup, dimana user dapat memilih salah satu
dari pilihan yang disediakan dengan menggunakan form radio.contoh
nya
adalah form pemilihan jenis kelamin.

- Tag <textarea>

Tag <textarea> adalah tag yang sama fungsinya dengan inputan text, hanya saja pada
textarea ini dapat diisikan dengan lebih banyak teks didalamnya secara sekaligus. Contoh nya untuk
pengisian alamat lengkap.

<textarea></textarea>

- Tag <select>
Tag <select> merupakan tag yang digunakan user untuk memilih data yang sudah
disediakan. Dalam penggunakan <select> selalu diikuti oleh <option> yang digunakan untuk
membuat pilihan.

<select>
<option>Semarang</option>
<option>Bandung</option>
</select>

Untuk lebih memberikan pemahaman lebih tentang cara membuat form pada HTML,
silahkan perhatikan contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form pada HTML</title>
</head>
<body>
<form>
Nama : <input type="text" name="nama"> <br/>
Alamat : <input type="text" name="alamat"> </br/>
Password : <input type="password" name="pass"> <br/>
Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki"/> Laki - Laki
<input type="radio" name="jk" value="perempuan" /> Perempuan
<br/>Bahasa pemograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> MOBILE
<input type="checkbox" name="desk"> DESKTOP
<br/>
Kota asal :
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
<br/>
Pesan anda :
<textarea></textarea>
<br/>
<input type="submit" value="proses">
</form>
</body>
</html>

Menampilkan Gambar pada HTML

Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>. kemudian
masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file
gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar. jika file
gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka kita
bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src ini.
tetapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar
maka anda bisa menambahkan nama folder nya seperti misalnya Menghubungkan HTML dengan CSS
“nama_folder/filegambar”. dan jika file gambar berada di luar folder file html yang menampilkan
gambar maka anda bisa menambahkan perintah “../”.

Anda bisa menentukan ukuran gambar yang tampil dengan menambahkan atribut height=””
untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan lebar gambar
yang tampil.

<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.malasngoding.com</h1>
<img src="malasngoding.png" height="300px" width="500px;">
</body>
</html>

Mengenal Class dan Id pada HTML

Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini adalah
element-element html dapat di beri tanda dengan class atau id. untuk apa di beri tanda ? agar dapat
di manipulasi menggunakan css atau javascript. bayangan sederhananya jika anda memiliki lima
buah kotak, semua kotak yang anda miliki berwarna biru, kemudian anda ingin mengubah warna
kotak yang ketiga, nah di sinilah letak kegunaan class dan id, untuk memberikan tanda atau nama
pada kotak anda agar bisa di ubah dan kotak yang lain tidak akan berubah.

Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan
menggunakan tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”, ada
kelebihan di sini untuk class, yaitu class dapat di berikan pada banyak element html dan dapat di
panggil sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja, maksudnya satu
nama id hanya bisa di berikan pada satu element saja, perhatikan pada contoh berikut untuk
memberikan pemahaman lebih tentang class dan id pada html ini.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Mengenal Class dan Id pada HTML | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/>www.malasngoding.com</h1>
<!-- contoh penggunaan class -->
<div class="kotak">kotak 1</div>
<div class="kotak">kotak 2</div>
<div class="kotak">kotak 3</div>

<!-- contoh penggunaan id -->


<div id="kotak">Kotak 4</div>
</body>
</html>

style.css

h1{
color: orange;
font-family: sans-serif;
text-align: center;
}

.kotak{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: orange;
}

#kotak{

Pengertian dan Pengenalan CSS

CSS merupakan singkatan dari “Cascading Style Sheets“. sesuai dengan namanya CSS
memiliki sifat ”style sheet language” yang berarti bahasa pemrograman yang di gunakan untuk web
design. CSS adalah bahasa pemrograman yang di gunakan untuk men-design sebuah halaman
website. dalam mendesign halaman website, CSS menggunakan penanda yang kita kenal dengan id
dan class. seperti yang sudah kita pelajari tentang pengenalan id dan class pada tutorial edisi belajar
HTML dasar sebelumnya di buku ini.

Fungsi dan Kegunaan CSS

CSS dapat mengubah font, ukuran font, warna dan format font. mengatur ukuran layout,
lebar, tinggi dan warna element, mengubah tampilan form, membuat halaman website yang
responsive dan masih banyak lagi yang dapat di lakukan oleh CSS.

Cara Penggunaan CSS

File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam file
HTML atau PHP yang ingin kita design dengan CSS menggunakan syntax berikut ini.

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


jika file css terletak di luar folder maka bisa menghubungkanya dengan

href="../style.css"

jika file css terletak dalam sebuah folder. katakan saja nama foldernya adalah ” assets “. Maka untuk
menghubungkannya

href="assets/style.css"

Cara Penulisan CSS

CSS menggunakan selector (id dan class) untuk menentukan element yang akan dimodifikasi
atau yang akan di beri sentuhan css. jika di ibaratkan HTML sebagai tiang pada sebuah bangunan
rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah tersebut. Ada tiga teknik
metode penulisan CSS, yaitu :

- Inline CSS Style

<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Inline Style</title>
</head>
<body>
<h1 style="color:blue">Belajar CSS Dasar Di <a
href="http://www.malasngoding.com">www.malasngoding.com</a></h1>
</body>
</html>

- Internal CSS Style

<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Internal Style</title>
<style type="text/css">
#tulisan{
color: 10px;
}

.box{
background: red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<h1 id="tulisan">Belajar CSS Dasar Di <a
href="http://www.malasngoding.com">www.malasngoding.com</a></h1>
</div>

</body>
</html>

- External CSS Style

<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan External Style</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<h1 id="tulisan">Belajar CSS Dasar Di <a
href="http://www.malasngoding.com">www.malasngoding.com</a></h1>
</div>

</body>
</html>

style.css

#tulisan{
color: 10px;
}
.box{
background: red;
padding: 10px;
}

Mengubah Background Dengan CSS

Background atau latar belakang pada sebuah halaman website merupakan salah satu bagian
yang wajib di design untuk menghasilkan sebuah halaman website yang terlihat menarik dan
modern. ada beberapa cara mempercantik background atau latar belakang website. Bisa
mempercantik background website dengan menggunakan gambar. jika tidak ingin menggunakan
gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah
background dengan CSS, gunakan property background pada CSS. property background selain
digunakan untuk mengubah background body website, bisa juga di gunakan untuk mengubah
gambar background pada sebuah elemen HTML yang di inginkan.

- Mengubah warna background dengan CSS


index.html

<!DOCTYPE html>
<html>
<head>
<title>Merubah warna background dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Tutorial mengubah warna background dengan CSS</h1>

</body>
</html>

style.css

body{
background: blue;
color: white;
}

- Mengubah gambar background dengan CSS

index.html

<!DOCTYPE html>
<html>
<head>
<title>Membuat background dengan gambar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Membuat background gambar dengan CSS</h1>

</body>
</html>

style.css

body{
background: url('malasngoding.png');
color: #fff;
}
Margin dan Padding pada CSS

Margin dan padding merupakan yang paling banyak di gunakan dalam mendesain sebuah
website dengan menggunakan CSS. karena margin dan padding di gunakan untuk mengatur sisi
dalam dari pada sebuah element dan mengatur sisi sebelah luar dari sebuah element. untuk itu pada
tutorial belajar CSS Dasar Margin dan Padding pada CSS ini akan dijelaskan tentang apa itu margin?
apa itu padding? dan bagaimana cara penggunaannya pada CSS.

- Mengenal Margin pada CSS

Margin adalah sisi luar dari sebuah element. misalnya anda ingin mengatur jarak antar
element. anda bisa menggunakan syntax margin untuk mengaturnya. terdapat beberapa sisi luar
margin yaitu, margin atas di tuliskan pada css dengan ‘margin-top’, margin bawah atau jarak luar
bagian bawah di tulis di CSS dengan ‘margin-bottom’, ‘margin-left’ sebagai jarak luar sebelah kiri
element, dan ‘margin-right’ adalah sisi luar pada bagian sebelah kanan. tetapi jika anda hanya
menggunakan syntax ‘margin’ saja maka akan secara otomatis mengatur jarak atas,bawah, kiri, dan
kanan element.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Margin CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<h1>Ini adalah box</h1>
</div>

<div class="box-dua">
<h1>Ini adalah box dua</h1>
</div>
</body>
</html>

style.css

.box{
background: blue;
height: 200px;
width: 300px;
margin: 20px;
}
.box-dua{
background: red;
height: 100px;
width: 200px;
margin-left: 70px;
}
- Mengenal Padding pada CSS

Padding adalah sisi dalam dari sebuah element. kita bisa menggunakan syntax padding untuk
mengatur jarak pada sisi dalam sebuah element yang kita tentukan. Sama seperti margin yang
memiliki sisi-sisi . seperti top, left, right, bottom. jenis padding yaitu padding atas di tuliskan pada css
dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah atas sebuah element, pading bawah
atau jarak dalam bagian bawah di tulis di CSS dengan ‘padding-bottom’, ‘padding-left’ sebagai jarak
dalam sebelah kiri element, dan ‘padding-right’ adalah sisi luar pada bagian sebelah kanan. jika anda
hanya menggunakan syntax ‘padding’ saja maka akan secara otomatis mengatur jarak atas,bawah,
kiri dan kanan element yang bagian dalam. berikut ini adalah Contoh penggunaan padding pada CSS.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Padding CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>www.malasngoding.com</h1>
<div class="box">
<h1>Ini adalah box</h1>
</div>

<div class="box-dua">
<h1>Ini adalah box dua</h1>
</div>

</body>
</html>

style.css

h1{
text-align: center;
}

.box{
background: blue;
height: 200px;
width: 300px;
padding: 20px;
}

.box-dua{
background: red;
height: 100px;
width: 600px;
padding-left: 70px;
}
Mengatur Font dengan CSS

Beberapa syntax css yang digunakan untuk mengatur font:

- font-size digunakan untuk mengatur ukuran font

- font-weight di gunakan untuk mengatur ketebalan font

- font-family untuk mengubah jenis font

- font-style digunakan untuk merubah gaya pada font.

- font-color digunakan untuk merubah warna font.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Font CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="tulisan_satu">Belajar CSS Dasar di www.malasngoding.com</h1>
<h1 class="tulisan_dua">Belajar CSS Dasar di www.malasngoding.com</h1>
<h1 class="tulisan_tiga">Belajar CSS Dasar di www.malasngoding.com</h1>
</body>
</html>

style.css

.tulisan_satu{
font-color: red;
font-family: sans-serif;
font-style: normal;
}

.tulisan_dua{
font-color: green;
font-size: 24pt;
font-style: italic;
}

.tulisan_tiga{
font-color: red;
font-weight: bold;
font-style: oblique;
}
Mengatur Format Text dengan CSS

Beberata syntax CSS yang bisa digunakan untuk mengatur format text diantara nya adalah:

- color

Di gunakan untuk mengatur warna text, value yang dapat di isi berupa warna atau kode warna.

- text-align

Di gunakan untuk mengatur posisi align pada text atau rata text, value yang bisa di isi diantaranya
adalah center untuk membuat text rata tengah, left untuk membuat text menjadi rata kiri, right
untuk membuat text menjadi rata kanan dan justify untuk membuat text menjadi rata kanan dan
rata kiri.

- text-decoration

Di gunakan untuk mengatur dekorasi text, value nya berupa none untuk membuat text tidak
memiliki dekorasi, overline untuk membuat text memiliki garis pada bagian atas text, line-through
untuk membuat garis yang mencoreng pada text, dan underline untuk membuat garis pada bawah
text(garis bawah).

- text-transform

Digunakan untuk mengatur huruf kapital pada text, value yang bisa di gunakan diantaranya adalah
uppercase untuk membuat text menjadi huruf besar, lowercase untuk membuat text menjadi huruf
kecil, dan capitalize untuk membuat huruf awal pada tiap kata menjadi huruf besar.

- text-indent

Digunakan untuk mengatur jarak alinea pada text, value yang bisa digunakan berupa nilai pixel dan
lainnya sesuai kebutuhan.

- text-spacing

Digunakan untuk mengatur jarak antar karakter pada text, value yang di isi berupa nilai pixel dan
lain-lain. Mengatur Format Text Dengan CSS.

- word-spacing

Digunakan untuk mengatur jarak antar kata pada text, value yang di isi juga berupa nilai pixel.

- line-height

Digunakan untuk mengatur jarak antar baris pada text value yang di isi berupa nilai.

- text-shadow

Digunakan untuk mengatur efek bayang pada text, value yang di isikan pertama mengisi nilai untuk
jarak kiri kanan, dan kedua mengisi jarak atas bawah dan yang ketiga mengisi warna. untuk contoh
penulisanya 2px 5px blue.

- vertical-align

Digunakan untuk mengatur align dalam bentuk vertikal pada text value yang digunakan adalah left
untuk membuat text rata kiri, right untuk rata atas dan center untuk rata tengah.

index.html
<!DOCTYPE html>
<html>
<head>
<title>format text CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_warna">Mengatur format text dengan CSS</p>
</body>
</html>

.tulisan_warna{
color: blue;
}

Mengenal Position CSS

Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML. Terkadang kita
ingin membuat atau menetapkan posisi sebuah element dengan element yang lain. Maka dengan
menggunakan property position CSS ini kita dapat menentukan posisi sebuah element HTML sesuai
dengan yang kita inginkan. belajar css mengenal position css.

Adapun beberapa property CSS yang dapat digunakan untuk menentukan posisi sebuah
element HTML adalah :

- static

Position static digunakan untuk mengatur element menjadi statis secara default. Element akan
mengikuti posisi normal secara default.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>

style.css

.kotak{
background: blue;
position: static;
}
- relative

Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>

style.css

.kotak{
background: blue;
position: relative;
left:40px;
padding:10px;
}

- fixed

Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap. tanpa ada
perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top dan right
pada position fixed.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>

style.css

.kotak{
background: blue;
position: relative;
left:40px;
padding:10px;
}

- absolute

Secara umum untuk membuat posisi atau menetapkan posisi sebuah element kita pasti
menggunakan property css lainnya seperti mengatur top, left, bottom, right untuk menetapan posisi
sebuah element. tetapi property tersebut tidak akan bekerja jika position belum di atur terlebih
dahulu. karena property lain tergantung dengan position yang di tetapkan.

Menggunakan Float CSS

Teknik Floating pada bagian web design merupakan sebuah kebutuhan yang paling banyak di
perlukan. float berfungsi untuk mengatur letak element secara horizontal. ada empat value yang
bisa di gunakan untuk property float, yaitu left, right, inherit dan none. Salah satu contoh
penggunaan float yang paling sering di temukan adalah ketika kita ingin mebuat gaambar postigan
website yang terletak di bagian samping tulisan konten. Berikut akan diberikan contoh tentang
penggunaan float pada CSS.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Border style CSS www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial Float dengan CSS di <br/> www.malasngoding.com</h1>
<div class="kotak">
<img class="gambar" src="malasngoding.png">
<p>
Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com.
tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat
element berbaris dengan float css. belajar css menggunakan float css. Belajar tutorial
pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css
tentang
penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan
float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan
download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css.
cara menggunakan float di css.belajar css menggunakan float css.Belajar tutorial pemrograman
web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css tentang
penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan
float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan
download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di css.
cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css
menggunakan float css. cara membuat element berbaris dengan float css. belajar css
menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di
malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float
di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar
tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial
belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat
element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial
pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial belajar css
tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris
dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile
dan download sourcecode di malasngoding.com. tutorial belajar css tentang penggunaan float di
css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css
menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di
malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float
di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar
tutorial pemrograman web, mobile dan download sourcecode di malasngoding.com. tutorial
belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat
element berbaris dengan float css. belajar css menggunakan float css.

</p>
</div>
</body>
</html>

style.css

h1{
text-align: center;
}

.gambar{
width: 300px;
float: left;
margin-right: 10px;
}

Cara Mengganti Font Dengan CSS

Ada beberapa cara mengubah atau menggunakan font dengan css. ada cara menggunakan
font yang terletak di server lain. seperti misalnya menggunakan font yang di sediakan oleh google.
dengan haya mencantumkan link font yang ingin di gunakan. ada juga cara menggunakan font
standart yang tersedia secara default. dan ada juga cara mendownload font yang di inginkan,
kemudian meletakkannya pada directory project, dan menghubungkan atau memanggilnya dengan
css.

Untuk mengubah atau mengganti font dengan css, anda bisa menggunakan property ‘font-
family’. dan kemudian pada value nya masukkan nama font yang ingin di gunakan. pada contoh di
bawah ini saya akan menetapkan font ‘sans-serif’ pada element h2. dan menetapkan font ‘courier’
pada element paragraf.

index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara mengganti/mengubah font dengan css | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara mengganti/mengubah font dengan css | www.malasngoding.com</h1>
<div class="ketengah">
<hr>
<h2>Cara Mengganti Font Dengan CSS</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>

style.css

body{
background: #35A9DB;
font-family: roboto;
text-align: center;
color: #fff;
}
.ketengah{
margin: 10px auto;
width: 1150px;
}

h2{
font-family: sans-serif;
}

p{
font-family: courier;
}

Design Table dengan CSS

Setalah mempelajari tentang cara membuat tabel di HTML pada pembahasan di awal, pasti
banyak di antara kita merasa tampilan dari table standar HTML tampilannya masih sangat kurang
menarik. karena tampilan tabel standar dari HTML sendiri memiliki tampilan yang biasa saja. oleh
karena itu Pada pembahasan belajar CSS design tabel ini akan di jelaskan tentang bagaimana cara
design sebuah tabel HTML dengan menggunakan CSS.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Design Table Dengan CSS | www.malasngoding.com</h1>
<h4>Design table 1</h4>
<table class="table1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>1</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Budi Budiman</td>
<td>Jakarta</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>4</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>Malas Ngoding</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>

style.css

.table1 {
font-family: sans-serif;
color: #444;
border-collapse: collapse;
width: 50%;
border: 1px solid #f2f5f7;
}

.table1 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}

.table1, th, td {
padding: 8px 20px;
text-align: center;
}
.table1 tr:hover {
background-color: #f5f5f5;
}

.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}

Anda mungkin juga menyukai