MODUL

HTML DAN CSS

OLEH:

Dwinda Loisya (231183207040

DOSEN PENGAMPU:

Fitri Yanti [Link], M Pd.T

PROGRAM STUDI PENDIDIKAN TEKNOLOGI INFORMASI

FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN

UNIVERSITAS MUHAMMADIYAH MUARA BUNGO

2025
 KATA PENGANTAR

Segala puji hanya bagi Allah SWT, Tuhan semesta Alam yang telah
memberikan rahmat dan karunia-Nya kepada penulis sehingga dapat
menyelesaikan modul yang berjudul “Modul HTML dan CSS”. Modul ini
disusun guna memenuhi tugas individu pada mata Kuliah E-Learning.

Penulis mengucapkan terima kasih kepada Ibu Fitri Yanti [Link], [Link] selaku
dosen pengampu pada mata kuliah E-Learning. Semoga tugas yang telah
diberikan ini dapat menambah pengetahuan dan wawasan terkait Modul HTML
dan CSS.

Penulis juga mengucapkan terima kasih pada semua pihak yang telah
membantu dalam proses penyusunan modul ini. Penulis menyadari modul ini
masih memiliki banyak kekurangan. Oleh karena itu, penulis mengharapkan kritik
dan saran yang membangun dari semua pihak demi penyempurnaan modul ini.
Terakhir,kami berharap modul ini dapat bermanfaat bagi para pembaca dan juga
penulis.

Muara Bungo,15 Juni 2025

Penulis
 DAFTAR ISI

KATA PENGANTAR............................................................................................2
DAFTAR ISI...........................................................................................................3
Format Text..........................................................................................................11
Tag Font dan Atributnya......................................................................................11
Tag Break.............................................................................................................13
Tag Paragraf.........................................................................................................13
Tag Heading.........................................................................................................14
Tag Link...............................................................................................................15
Tag Horizontal Line.............................................................................................17
Tag Center............................................................................................................20
Tag Comment.......................................................................................................20
Tag Image............................................................................................................21
Tag Marquee........................................................................................................23
Tag List................................................................................................................24
Tag Table.............................................................................................................26
Tag Form..............................................................................................................28
Apa itu CSS ?........................................................................................................31
Penulisan CSS......................................................................................................31
Selektor ID dan CLASS.......................................................................................33
Property CSS........................................................................................................34
Template Web......................................................................................................40
Membuat Template Web Sederhana 1.................................................................41
Membuat Template Web Sederhana 2.................................................................42
Membuat Template Web Sederhana 3.................................................................46
Apa itu HTML ?
HTML Atau Hypertext Markup language merupakan standard bahasa yang
digunakan untuk menampilkan dokumen [Link] bersifat Client Side/Front
End (tempat pengelolaannya di komputer pengguna).
Struktur Dasar HTML
Struktur dasar HTML ini biasanya selalu ada dalam setiap file HTML. Penulisan
struktur dasar HTML dasar juga harus berurutan atau mengikuti standar struktur
HTML yang ada. Struktur dasar HTML terdiri beberapa tag-tag HTML, setiap tag
HTML bisa memiliki tag pembuka dan penutup, tapi ada juga yang tidak memiliki
tag penutup.
<!DOCTYPE html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah contoh struktur dasar HTML.</p>
</body>
</html>

Penjelasan

1. <!DOCTYPE html>: Menentukan bahwa dokumen ini menggunakan

HTML5.
2. <head>: Bagian ini berisi informasi metadata seperti encoding karakter,
judul halaman, dan pengaturan lainnya.
3. <title>: Menentukan judul halaman yang akan muncul di tab browser.
4. <body>: Bagian ini berisi konten utama yang akan ditampilkan di
halaman web, seperti teks, gambar, atau elemen lainnya.
 Hasil dari coding di atas dapat dilihat pada gambar berikut :

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut: a. Tag
Tag merupakan teks
khusus (markup) berupa dua karakter “”, sebagai contoh adalah tag dengan
nama body. Tag ditulis
secara berpasangan, yang terdiri atas tag pembuka dan tag
penutup(ditambahkan karakter “/”
setelah karakter “
ini adalah tag pembuka isi dokumen HTML dan ini adalah tag penutup isi
dokumen HTML Untuk membedakan mana pembukanya dan mana penutupnya,
anda bisa membedakannya dengan tanda / atau (garis miring) yang biasa disebut
dengan istilah tanda Slash. Jadi jika pada tag HTML tersebut terdapat tanda “/”
atau (garis miring) atau Slash tersebut berarti tag HTML tersebut adalah tag
HTML Penutup. dan tentunya tag HTML yang ada diatasnya adalah tag HTML
Pembuka. b. Element HTML terdiri dari 2 Elemen penyusunnya, yaitu Elemen
Head dan Elemen Body. • Elemen Head berfungsi untuk memberikan informasi
tentang dokumen HTML yang sedang kita buat, contohnya seperti judul dokumen
itu sendiri atau katakanlah sebagai nama dokumen HTML. Elemen Head ini
diawali dengan tag dan diakhiri dengan tag penutup • Elemen Body berfungsi
untuk menentukan bagaimana suatu dokumen yang akan kita tulis itu ditampilkan
didalam browser dari segi paragrafnya, 3 listnya, tabelnya dan bentuk format
lainnya. Elemen Body ini diawali dengan tag dan diakhiri dengan tag penutup. c.
Atribut Komponen terakhir dalam sebuah HTML disebut atribut dimana elemen
yang satu ini berfungsi sebagai keterangan tambahan yang melengkapi kedua
elemen lainnya dalam sebuah HTML. Ketika anda menulis atribut pada kata
terakhir harus diakhiri dengan tanda kutip agar tidak terjadi error file atau tulisan
yang diisikan tidak terbaca.
Attribute mendefinisikan property dari suatu element html, yang
terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
<TAG
nama-attr=”nilai-attr”
nama-attr=”nilai-attr”
>
</TAG>

Secara umum nilai atribut harus berada dalam tanda petik satu atau
dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan
latarbelakang halaman web menjadi hitam, penulisannya adalah:
<body bgcolor=”black” text=”yellow”>.

NO Atribut Fungsi

1 Text Warna text

2 Link Warna link

3 Alink Warna link yang di aktifkan

4 Vlink Warna link setelah di aktifkan

5 Bgcolor Warna background web

6 background Gambar background web

 dapat mengatur warna teks, hyperlink, background dari halaman
situs dan lain-lain dengan mengatur atribut-atribut yang ada di tag Body.
Berikut atribut-atribut tag Body dan Fungsinya :

Contoh Penggunaan atribut Body sebagai berikut :

 Text

1. <Body Text="#FF0000”>

Hasil:

*Sebelum menulis atribut link, alink, dan vlink tambahkan tag link berikut
ke dalam tag body :

1. <a href="#">Link</a>

 Link

9. <Body Link="#00FF00" >

Hasil :
Sebelum Sesudah
 Alink

1. <Body Alink="#00BBBB" >

Hasil :
Sebelum diklik Saat diklik

 Vlink
1. <Body Vlink="#C0C0C0” >

Hasil :
Sebelum dikunjungi/diklik Sesudah dikunjungi/diklik

 Bgcolor

1. <Body Bgcolor="#222222”>

Hasil :
  Background

1. <Body Background="nama [Link]">

Hasil :
*jika gambar terletak didalam folder cukup ditambahkan nilai
foldernya sebelum nama gambar ex :
nama_folder/nama_gambar.jpg.
Hasil akhir dari penulisan coding sebagai berikut :

1. <html>
2. <head>
3. <title> Judul web </title>
4. </head>
5. <body text="#FF0000" Body Link="#00FF00"
Alink="#00BBBB" Vlink="#C0C0C0"
bgcolor="#222222" background="[Link]" >
6. Isi text,nomor , table <a href="#">Link</a>
7. </body>

Format Text
Format text berfungsi untuk merubah sifat dari pada text yang telah
ditentukan, tag HTML-nya dapat dilihat pada tabel berikut :
No Tag Fungsi

1. <i></i>, <em></em>, <dfn></dfn>, Text Miring

 <var></var>
2. <b></b>,<strong></strong> Text Tebal

3. </u></u> , <ins></ins> Garis Bawah pada Text

4. <code></code>,<samp></ Text Berbentuk Code

samp>,<kbd><kbd>
5. <small></small> Text Kecil

6. <del></del> Text Coret

7. <mark></mark> Menandai Text/Stabilo

8.  Pemangkatan

9.  Pangkat Kimia

Tag Font dan Atributnya

Tag font berfungsi untuk memodifikasi karakter huruf, simbol, ataupun
angka, tag HTML-nya adalah sebagai berikut :
1. <font>Belajar HTML dan CSS</font>

Contoh penggunaan atribut tag font berserta fungsinya sebagai berikut :

 Color (berfungsi untuk merubah warna huruf/karakter)

1. <font Color=”yellow”>Belajar HTML dan CSS</font>

Hasil :
Sebelum Sesudah

 Face (berfungsi untuk merubah jenis huruf/karakter)

1. <font face=”arial”>Belajar HTML dan CSS</font>

Hasil :
 Sebelum Sesudah

 Size (berfungsi untuk merubah ukuran huruf/karakter)

1. <font Size=”24”>Belajar HTML dan CSS</font>

Hasil :
Sebelum Sesudah

Code keseluruhan atribut font sebagai berikut :

Tag Break
Tag ini berfungsi untuk memberikan baris baru pada kalimat ataupun sebuah

1. Ini contoh tag break <br>

2. ini setelah di break
1. <font color=”blue” face=”arial” Size=”24”>Belajar HTML dan

CSS</font>
paragraf, contoh penggunaan tag break “<br>” dapat ditulih sebagai berikut :
hasil :
sebelum tag break dimasukkan

Sesudah tag break dimasukkan.

Tag Paragraf
Tag Paragraf berfungsi untuk memberikan perataan pada kalimat ataupun

1. <p></p>
 paragraf, tag ini tulis sebagai code berikut :
Contoh tag paragraf sebagai berikut :

1. <p>Lorem ipsum dolor sit amet consectetur adipisicing

elit. Sapiente ipsa maiores ad, alias quidem officiis
iure eveniet laboriosam voluptatibus accusantium
corrupti, impedit eum amet libero ullam sunt quis hic
atque!</p>

Hasil :

Tag Heading
Tag Heading berfungsi untuk memperbesar sekaligus menebalkan
huruf/karakter, tag ini biasa digunakan sebagai judul pada sebuah aritikel
[Link] header ini dibagi 6 (enam) ukuran, dari header terbesar adalah

1. <h1>Header 1</h1>
2. <h2>Header 2</h2>
3. <h3>Header 3</h3>
4. <h4>Header 4</h4>
5. <h5>Header 5</h5>
6. <h6>Header 6</h6>
H1 sampai terkecil H6. Contoh penggunaan tag ini sebagai berikut :
Hasil :
Tag Link
Tag Link berfungsi untuk menghubungkan antara halaman 1 (satu) ke
halaman lainnya, ataupun menghubungkan antara identitas 1 (satu) ke
identitas lainnya. Tag ini dapat didefinisakan sebagai berikut :

1. <a href="url">nama alamat</a>

Hasil:
Atribut tag link dan fungsingya sebagai berikut :

 Href (untuk menentukan alamat web/identitas)

1. <a href="url">nama alamat</a>

Hasil:
 Target (untuk menentukan di mana untuk membuka dokumen terkait)
Hasilnya dapat dilihat saat pratikum
 Id (untuk menghubungkan dengan text yang berada pada situs yang sama)

1. <a href="url" target=”_blank”>nama alamat</a>

1.<html>
2.<head>
3.<title> Judul web </title>
4.<head>
5. <body>
6. <a href="#home">Home</a> || <a
href="#dompu">Dompu</a> || <a href="#bima">Bima</a>
7. <h1 id="home">Home</h1>
8. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium molestias neque reiciendis quae quis, voluptates
similique minima ad mollitia totam tempore illo culpa recusandae,
placeat repudiandae, laudantium non assumenda blanditiis.
9. Quam assumenda, expedita, quo at numquam fuga culpa dolorum
aspernatur aliquid error pariatur nesciunt, perferendis rem? At
cumque repudiandae, sapiente quia fuga doloribus vel aliquam
ipsam cupiditate. Possimus, velit neque?
10. Voluptatibus illum, architecto vero aperiam quasi nesciunt, ullam
adipisci officia possimus nemo magni aspernatur porro cumque
provident eaque quae neque repellendus aut. Reprehenderit sit
dignissimos similique officiis expedita ab harum?
11. Tempora, sapiente aliquam corporis maiores id a unde odit iure
nam rerum nemo quam laborum porro necessitatibus nulla fugit
rem ipsa cum cupiditate nobis nihil harum animi aliquid neque!
Deserunt!
12. Ipsa quae enim fuga tempora odit perspiciatis praesentium
laboriosam illo earum cum placeat, id hic accusamus porro
ipsam veniam qui unde mollitia natus incidunt. Delectus, culpa
non. Architecto, molestias in?</p><br>
13. <a href="#home">Home</a> || <a
href="#dompu">Dompu</a> || <a href="#bima">Bima</a>
14. <h1 id="dompu">Dompu</h1>
15. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium molestias neque reiciendis quae quis, voluptates
similique minima ad mollitia totam tempore illo culpa recusandae,
placeat repudiandae, laudantium non assumenda blanditiis.
16. Quam assumenda, expedita, quo at numquam fuga culpa dolorum
 aspernatur aliquid error pariatur nesciunt, perferendis rem? At
cumque repudiandae, sapiente quia fuga doloribus vel aliquam
ipsam cupiditate. Possimus, velit neque?
17. Voluptatibus illum, architecto vero aperiam quasi nesciunt, ullam
adipisci officia possimus nemo magni aspernatur porro cumque
provident eaque quae neque repellendus aut. Reprehenderit sit
dignissimos similique officiis expedita ab harum?
18. Tempora, sapiente aliquam corporis maiores id a unde odit iure
nam rerum nemo quam laborum porro necessitatibus nulla fugit
rem ipsa cum cupiditate nobis nihil harum animi aliquid neque!
Deserunt!
19. Ipsa quae enim fuga tempora odit perspiciatis praesentium
laboriosam illo earum cum placeat, id hic accusamus porro
ipsam veniam qui unde mollitia natus incidunt. Delectus, culpa
non. Architecto, molestias in?</p><br>
20. <a href="#home">Home</a> || <a
href="#dompu">Dompu</a> || <a href="#bima">Bima</a>
21. <h1 id="bima">Bima</h1>
22. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium molestias neque reiciendis quae quis, voluptates
similique minima ad mollitia totam tempore illo culpa recusandae,
placeat repudiandae, laudantium non assumenda blanditiis.
23. Quam assumenda, expedita, quo at numquam fuga culpa dolorum
aspernatur aliquid error pariatur nesciunt, perferendis rem? At
cumque repudiandae, sapiente quia fuga doloribus vel aliquam
ipsam cupiditate. Possimus, velit neque?
24. Voluptatibus illum, architecto vero aperiam quasi nesciunt, ullam
adipisci officia possimus nemo magni aspernatur porro cumque
provident eaque quae neque repellendus aut. Reprehenderit sit
dignissimos similique officiis expedita ab harum?
25. Tempora, sapiente aliquam corporis maiores id a unde odit iure
 nam rerum nemo quam laborum porro necessitatibus nulla fugit
rem ipsa cum cupiditate nobis nihil harum animi aliquid neque!
Deserunt!
26. Ipsa quae enim fuga tempora odit perspiciatis praesentium
laboriosam illo earum cum placeat, id hic accusamus porro
ipsam veniam qui unde mollitia natus incidunt. Delectus, culpa
non. Architecto, molestias in?</p><br>
27. </body>
28. <html>
*Cobalah klik pada link Home, Dompu, dan Bima.
Tag Horizontal Line
Tag ini berfungsi untuk membuat sebuah garis lurus secara horizontal, tag ini
tidak memiliki tag penutup, tag-nya sebagai berikut :

1. <hr>

Hasill :
Contoh atribut tag Horizontal Line dan fungsinya.
 Width (untuk menentukan lebar dari garis)

1. <hr width=”50%”>

Hasil :
 Align (perataan garis; kiri, tengah, kanan)
1. <hr align=”left/center/right”>

Hasil :

 Color (Mewarnai garis)

1. <hr color=”red”>

Hasil :

 Size (Menebalkan atau memperbesar garis)

2. <hr size=”50px”>

Hasil :
Tag Center
Tag Center berfungsi untuk menengahkan karakter ataupun objek kata
lain rata tengah, tag-nya sebagai berikut :

1. <center>Rata tengah</center>

Hasil :
Tag Comment
Tag Comment berfungsi untuk menandai atau memberi komentar pada

sebuah fungsi tag HTML, tag ini tidak dieksekusi pada browser. Contoh

tag Comment sebagai berikut:

1. <!-- Tulis Komentar disini -->

Tag Image
Tag image berfungsi untuk memasukan atau menampilkan gambar pada
browser, tag-nya adalah sebagai berikut :
1. <img src=“nama [Link]”>
Hasil :

Contoh atribut image dan fungsinya :

 Width (Lebar Gambar)
1. <img src=“nama [Link]” width=”100px”>

Hasil :

 Height (Tinggi Gambar)

1. <img src=“nama [Link]” Height=”100px” >

 Hasil :

 Align (Perataan; Left dan Right)

1. <img src=“nama [Link]” align=”right”>

Hasil :

 Border (bingkai Gambar)

1. <img src=“nama [Link]” border=”10”>

 Hasil :

Tag Marquee

1. <marquee>Jalan Ke Kiri</marquee>

Tag Marquee berfungsi untuk membuat sebuah text atau objek bergerak,
contoh tag-nya sebagai berikut :
Atribut-nya sebagai berikut :
 bgcolor : Atribut ini digunakan untuk mengatur background dari
text yang akan diberi efek marquee.
 direction : Digunakan untuk mengatur gerakan dari text tersebut
(up, down, left right).
 scrollamount : Untuk mengatur kecepatan dari gerakan text (angka
dalam px), semakin tinggi angka yang digunakan, maka akan
semakin cepat gerakan dari textnya.
 behaviour : Untuk mengatur efek dari gerakannya (slide, scroll,
alternate).

 width : Untuk mengatur lebar dari area text nya (dinyatakan dalam px
atau %).
 height : Untuk mengatur tinggi dari area text nya (dinyatakan dalam px
atau %).
 align : Untuk mengatur posisi (center, left, right).
 Masih banyak atributlainnya, kalian bias search di google atribut-
atribut dari tag marquee
Tag List
Tag list berfungsi untuk memberikan list pada HTML, list ada 2 (dua);
Ordered List (OL) adalah list berbentuk penomoran dan Unordered List
(UL) adalah list berbentuk simbol.

 Ordered List (OL)

1. <ol type=“1">
2. <li>Coffee</li>
3. <li>Tea</li>
4. <li>Milk</li>
5. </ol>

type = A,a,i,I

 Unordered List (UL)

 List bulat

1. <h2>Disc bullets</h2>
2. <ul style="list-style-type:disc">
3.
1. <li>Apples</li>
<h2>Circle bullets</h2>
4.
2. <li>Bananas</li>
<ul style="list-style-type:circle">
5.
3. <li>Lemons</li>
<li>Apples</li>
6.
4. <li>Oranges</li>
<li>Bananas</li>
7.
5. </ul>
<li>Lemons</li>
6. <li>Oranges</li>
7. </ul>
 List bulat berlubang

1. <h2>Square bullets</h2>
2. <ul style="list-style-type:square">
3. <li>Apples</li>
4. <li>Bananas</li>
5. <li>Lemons</li>
6. </ul>
 List kotak
Tag Table
Tag table berfungsi untuk membuat sebuah tabel, tag dasarnya sebagai berikut :

1. <table border="1">
2. <tr>
3. <td>1.1</td>
4. <td>1.2</td>
5. </tr>
6. <tr>
7. <td>2.1</td>
8. <td>2.2</td>
9. </tr>
10. </table>

Hasil :

Atribut tabelnya sebagai berikut

 Colspan (menyatukan 2 kolom atau lebih)

1. <table border="1">
2. <tr>
3. <td>1.1</td>
4. <td>1.2</td>
5. </tr>
6. <tr>
7. <td colspan=”2”>2.1</td>
8. </tr>
9. </table>
Hasil :
 Rowspan (menyatukan 2 baris atau lebih)
1. <table border="1">
2. <tr>
3. <td rowspan=”2”>1.1</td>
4. <td>1.2</td>
5. </tr>
6. <tr>
7. <td>2.2</td>
8. </tr>
9. </table>
Hasil :

 Atribut lainnya

No Atribut Tag Fungsi

1. Width <table>. <tr>, Lebar tabel, baris, dan kolom

<td>

2. Height <table>. <tr>, Tinggi tabel baris, dan kolom

<td>

3. Align <table>. <tr>, Perataan horizontal (left,

<td> centre, right)

4. Valign <tr>, <td> Perataan vertical (top, Middle,

Bottom)

5. Bgcolor <tr>, <td> Warna background tabel, baris,

dan kolom

6. Border <table> tebal bingkai tabel

7. Cellspacing <table> Jarak spasi antara cell

 8. Bordercolor <table> Warna bingkai

Tag Form
Tag form berfungsi untuk memasukan data kedalam variable ataupun
database, form akan diproses menggunakan Bahasa pemograman tertentu,
berikut struktur dasar dari tag form :

1. <form>
2. .
3. input elements
4. .
5. </form>

Tag form memiliki beberapa inputan antara lain :

 Textfield (untuk memasukan data)

1. <form>
2. First name: <input type="text" name="firstname"><br>
3. Last name: <input type="text" name="lastname">
4. </form>

Hasil :
 Password (untuk memasukan password)
Hasil :
 Button (tombol eksekusi)

1. Password: <input type="password" name="pwd">

1. <input type=“button“ value=“submit”>

1. <button>submit</button>

Atau
Hasil :
*type : button dan submit

 Radio buttons (untuk memelih 1 data untuk di-input)

 1. <form>
2. <input type="radio" name="sex" value="male">Male<br>
3. <input type="radio" name="sex" value="female">Female

4. </form>

Hasil :

 Checkboxes (untuk memilih beberapa data untuk di-input)

1. <form>
2. <input type="checkbox" name="vehicle" value="Bike">I have a bike
3. <br>
4. <input type="checkbox" name="vehicle2" value="Car">I have a car
5. </form>
Hasil :

 Textarea (untuk memasukan banyak data)

1. <textarea rows="10" cols="30“>

2. The cat was playing in the garden.
3. </textarea>
Hasil :

 Select (untuk memilih 1 data untuk di-input dalam bentuk menu vertical)

1. <select>
2. <option value="volvo">Volvo</option>
3. <option value="saab">Saab</option>
4. <option value="opel">Opel</option>
5. <option value="audi">Audi</option>
6. </select>
Hasil :

Apa itu CSS ?

CSS adalah singkatan dari Cascading Style Sheet yang Fungsi untuk
mendefenisikan style atau gaya untuk suatu teks dengan jenis huruf,
ukuran, warna tertentu.
Penulisan CSS
Penulisan kode CSS dibagi 3 (tiga) cara, adapun cara penulisanya sebagai
berkut :
 Inline (penulisan langsung pada tag HTML sebagai atribut style)

1. <body>
2. <b style = “color : blue”> teks tebal dan biru </b>
3. </body>

Hasil :

 Internal (Menggunakan tag style di dalam tag head)

<head>
<style type=“text/css”>

……… style definitions ………

</style>
</head>

<e>
7. </head>
 Style definitions adalah defenisi style yang ingin dibuat. Format

penulisannya adalah :

1. Selector {
2. property1 : value1 ;
3. property2 : value2;….
4. propertyN : valueN ;
5. }

Selector adalah tag yang digunakan web browser.

Property : value adalah efek dari style yang diinginkan untuk

selector. Contoh penggunaannya sebagai berikut :

1. <html>
2. <head>
3. <title> Latihan 2 </title>
4. <style>
5. b { color:blue;
6. }
7. </style>
8. </head>
9. <body>
10. mencoba css internal tag b <b>Tebal</b> <br> dan text
11. warna <b>Biru</b>
12. </body>
13. </html>
Hasil
14.:

 External (Memanggil file css dalam HTML dengan tag link yang

diletakkan dalam tag head)

1. <head>
2. <link rel=“stylesheet” type=“text/css”
href=“[Link]”/>
3. </head>

Setelah penulisan link tersebut, selanjutnya buat file CSS-nya dengan

 membuat file baru dan simpan dengan eksitensi *.css (ex : [Link]).

tulislah kode CSS berikut :

1. h1 {
2. color:red;
3. }
4. b{
5. color:blue;
6. }
Hasil :

Selektor ID dan CLASS

ID selector diawali tanda # (octothorpe) sedanglkan CLASS diawali

dengan tanda titik ( . ), selector ini ditulis dalam atribut HTML dan akan

berfungsi ketika dibuat style [Link] ditulis pada tag Div, Div

adalah tag HTML yang berfungsi untuk memberikan group pada tag-tag

HTML. Berikut ini contoh penggunaanya :

1. <html>
2. <head>
3. <title> Latihan 4 </title>
4. <link rel="stylesheet" href="[Link]">
5. </head>
6. <body>
7. <div id="kepala">
8. <b class="kepala">WebsiteKu</b>
9. </div>
11.</html>
10. </body>
Hasil :
Property CSS
 Background
Property Values Keterangan

Background- Url Alamat gambar yang sudah di uploud

image

Background- repeat Repeat Gambar diulang dalam halaman

Repeat-y Gambar diulang dalam sumbu y

Repeat-x Gambar diulang dalam sumbu x

no-Repeat Gambar tidak diulang hanya muncul 1

gambar

 Font
Property Values Keterangan

font-family Arial; Jenis font adalah arial

Font-size small; kecil

medium; menengah

large; besar

12px; besar 12 pixel (Bisa diganti 12pt)

Font-style Normal; Font normal

Italic; Font miring

Font-weight Normal; Ketebalan font normal

Bold; Font Tebal

100-900 Ketebalan font dengan nilai dari 100-

900
 Property Values Keterangan

Text-decoration none; Menampilkan text asli

Underline; Menampilkan Text bergaris bawah

Overline; Menampilkan text bergaris atas

line-through; Menampilkan text tercoret

blink; Menampilkan text berkedip

Text-transform uppercase; Menampilkan text huruf besar

Text-align left; Text rata kiri

right; Text rata kanan

center; Text rata tengah

justify; Text rata kanan kiri

 Link
Selector Keterangan

a:link Keadaan awal link

a:hover Keadaan link saat dikenai mouse

a:active Keadaan link saat di klik

a:visited Keadaan link setelah dikunjungi

 Border
Property Values Keterangan

Border 1px solid #000; ukuran border bisa diubah dalam ukuran pixel.

2px dotted #ff0000; Border-style (contoh solid;dotted) merupakan

3px double blue; style pada border setiap style tampilan berbeda.
 5px groove #3300ff; Border-color bisa menggunakan warna RGB

5px ridge #3300ff; juga Desimal. Property border bisa diganti

5px inset #3300ff; dengan border- left; border-right; border-top;

5px outset #3300ff; border-bottom;

 Border Radius
Border-radius 10px; Garis melemgkung disemua sisi

dengan ukuran 10px

border-top-left-radius 2em 0.5em; Garis melengkung pada sisi atas dan

kiri dengan ukuran berbeda

border-top-right- 3em 2.5em; Garis melengkung pada sisi atas dan

radius kanan dengan ukuran berbeda

border-bottom-right- 1em 2em; Garis melengkung pada sisi bawah dan

radius kanan dengan ukuran berbeda

border-bottom-left- 2em 1em; Garis melengkung pada sisi bawah dan

radius kiri dengan ukuran berbeda

border-bottom-left- 2em; Garis melengkung pada sisi bawah dan

radius kiri dengan ukuran sama

 Margin dan Padding

Property Values Keterangan

Margin 10px 5px 0px 5px; atas 5, kanan 5, bawah 0, kiri 10

margin-top 10px; karak atas 10px

margin-right 5px; jarak kanan 5px

margin-bottom 2em; jarak bawah 2em

 margin-left 3em; jarak kiri 3en

Padding 2em; atas, kanan, kiri dan bawah 2em

 Display:

Property Values Keterangan

DISPLAY None; Berfungsi untuk menghilangkan atau

menyembunyikan elemen yang diberi

kode tersebut

Block; Berfungsi untuk memberi blok baru atau

baris baru seperti kode <br> dan

<p>

Inline; Berfungsi sama seperti kode span, yang

memberi desain background

berbeda hanya pada elemen tersebut

Inline-block; jika layar tidak muat maka secara

otomatis membuat baris baru.

Template Web
Template Web atau Tema Web adalah sebuah dokumen web untuk

memisahkan bagian konten dengan bagian presentasi (menu, iklan, dan

fitur lainnya), template web digunakan untuk memproduksi dokumen web

massal. Contoh template dapat dilihat pada gambar berikut :

Pada bagian ini kita akan mempelajari bagaimana membuat sebuah

template website sederhana sehingga kita dapat memahami konsep dasar

dari pembuatan template website professional.

Membuat Template Web Sederhana 1

Pada pembuatan template ini kita akan membagi 3 (tiga) buah bagian yaitu

Kepala, badan atau isi berita, dan kaki.

Pertama yang harus kita lakukan adalah membuat file HTML dan CSS, setelah

itu tulislah tag HTML berikut pada file HTML, simpan dengan nama
 [Link].

1. <html>
2. <head>
3. <title> Template Web Sederhana 1 </title>
4. <link rel="stylesheet" href="[Link]">
5. </head>
6. <body>
7. <div id="bl">
8. <div id="kepala">
9. <b class="kepala">WebsiteKu</b>
10. </div>
Lorem
11. ipsum dolor sit amet consectetur adipisicing elit. Laboriosam cum vitae
<div id="badan">
sunt culpa quos voluptate suscipit ex deserunt ullam dolore voluptas, soluta
veritatis provident. Rerum deleniti aut rem architecto quam!
Culpa amet, voluptatibus similique harum adipisci cumque libero officiis magni
quisquam nam autem rem cupiditate natus eaque facilis! Nesciunt ad possimus
repellendus doloremque dicta quis, cupiditate cum aspernatur rem doloribus.
Eaque eveniet non laboriosam unde animi cumque tempore blanditiis voluptate
magnam, architecto nemo, vero facilis minima cupiditate eos. Earum alias esse
veniam accusantium nisi. Rem reprehenderit dolores alias modi architecto?
</div>
<div id="kaki">
&copy; 2019
</div>
</div>
</body> 21.</html>

Kemudian, tulislah kode CSS berikut dan simpan dengan nama [Link]

#bl {
width:800px;
margin:auto;
padding: auto
5. }
#kepala {
width:800px;
height:200px;
background-color:chocolate;
color:white;
text-align: center;
line-height:200px;
 13.}
.kepala {
font-size:100px;
font-family: arial;
17.}
#badan {
margin-top:5px;
width:788px;
height:388px;
background-color: white;
text-align: justify;
padding:5px;
border:1px solid black; 26.}
#kaki {
text-align: center;
width:100%;
height:20px;
margin:5px;
background-color: chocolate;
color:white;
Hasil :
}

Membuat Template Web Sederhana 2

Pada pembuatan template ini kita akan membagi 4 (empat) buah bagian
yaitu
Kepala, Menu, badan atau isi berita, dan kaki.
Pertama yang harus kita lakukan adalah membuat file HTML dan CSS, setelah
 itu tulislah tag HTML berikut pada file HTML, simpan dengan nama

[Link].

1. <html>
2. <head>
3. <title> Template Web Sederhana 2 </title>
4. <link rel="stylesheet" href="[Link]">
5. </head>
6. <body>
7. <div id="bl">
8. <div id="kepala">
9. <b class="kepala">WebsiteKu</b>
10. </div>
11. <div id="menu">
12. <ul>
13. <li><a href="#">Home</a></li>
14. <li><a href="#">About</a></li>
15. <li><a href="#">Galery</a></li>
16. <li><a href="#">Contact Us</a></li>
17. </ul>
18. </div>
19. <div id="badan">
20. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
cum vitae sunt culpa quos voluptate suscipit ex deserunt ullam dolore
voluptas, soluta veritatis provident. Rerum deleniti aut rem architecto quam!
21. Culpa amet, voluptatibus similique harum adipisci cumque libero
officiis magni quisquam nam autem rem cupiditate natus eaque facilis!
Nesciunt ad possimus repellendus doloremque dicta quis, cupiditate cum
aspernatur rem doloribus.
22. Eaque eveniet non laboriosam unde animi cumque tempore blanditiis
voluptate magnam, architecto nemo, vero facilis minima cupiditate eos. Earum
alias esse veniam accusantium nisi. Rem reprehenderit dolores alias modi
architecto?
23. </div>
24. <div id="kaki">
25. &copy; 2019
26. </div>
27. </div>
28. </body>
29. </html>

Kemudian, tulislah kode CSS berikut dan simpan dengan nama [Link]
#bl {
width:800px;
margin:auto;
padding: auto
5. }
#kepala {
width:800px;
height:200px;
background-color:gold;
color:white;
text-align: center;
line-height:200px;
13.}
17.}
#badan {
margin-top:5px;
width:788px;
height:288px;
background-color: white;
text-align: justify;
padding:5px;
border:1px solid black; 26.}
#kaki {
text-align: center;
width:100%;
height:20px;
margin:5px;
background-color: gold;

}
#menu {
height:40px;
background-color: #0c0c0c;
margin-top:5px;
40.}
#menu ul {
list-style: none;
margin:0;
padding:0;
45.}
#menu ul li {
float:left;
width:200px;
text-align:center;
line-height:40px;
51.}
#menu ul li a {
color:white;
text-decoration: none;
55.}
#menu ul li:hover {
background-color:orangered;
58.}
 Hasil :

Membuat Template Web Sederhana 3

Pada pembuatan template ini kita akan membagi 5 (empat) buah bagian
yaitu
Kepala, Menu, badan atau isi berita, menu kanan, dan kaki.
Pertama yang harus kita lakukan adalah membuat file HTML dan CSS, setelah

itu tulislah tag HTML berikut pada file HTML, simpan dengan nama

[Link].

1. <html>
2. <head>
3. <title> Template Web Sederhana 3 </title>
4. <link rel="stylesheet" href="[Link]">
5. </head>
6. <body>
7. <div id="bl">
8. <div id="kepala">
9. <b class="kepala">WebsiteKu</b>
10. </div>
11. <div id="menu">
12. <ul>
13. <li><a href="#">Home</a></li>
14. <li><a href="#">About</a></li>
15. <li><a href="#">Galery</a></li>
16. <li><a href="#">Contact Us</a></li>
17. </ul>
18. </div>
19. <div id="badan">
20. <div id="kiri">
21. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam cum vitae
sunt culpa quos voluptate suscipit ex deserunt ullam dolore voluptas, soluta
veritatis provident. Rerum deleniti aut rem architecto quam!
Culpa amet, voluptatibus similique harum adipisci cumque libero officiis magni
quisquam nam autem rem cupiditate natus eaque facilis! Nesciunt ad
22.
possimus repellendus doloremque dicta quis, cupiditate cum aspernatur rem
doloribus.
Eaque eveniet non laboriosam unde animi cumque tempore blanditiis
voluptate magnam, architecto nemo, vero facilis minima cupiditate eos. Earum
23. alias esse veniam accusantium nisi.
Rem reprehenderit dolores alias modi architecto?
</div>
<div id="kanan">
<ul>
24. <li>menu 1</li>
25. <li>menu 2</li>
26. <li>menu 3</li>
27. </ul>
</div>
28. </div>
29. <div id="kaki">
30. &copy; 2019
31. </div>
32. </div>
</body>
39.</html>
33.
34.
35.
36.
37.
38.
 Kemudian, tulislah kode CSS berikut dan simpan dengan nama [Link]

#bl {
width:800px;
margin:auto;
padding: auto
5. }
#kepala {
width:800px;
height:200px;
background-color:gold;
color:white;
text-align: center;
line-height:200px;
13.}
.kepala {
font-size:100px;
font-family: arial;
17.}
#badan {
width:788px;
height:288px;
display:block;
margin-top:5px;
23.}
#kiri {
float:left;
height:278px;
background-color: white;
 28. width:580px;
29. padding:5px;
#kanan {30. display:block;
float:right;
31. border: 1px solid black;
height:278px;
32.}
background-color: orange;
width:180px;
padding:5px;
display:block;
border: 1px solid black; 41.}
#kaki {
text-align: center;
width:100%;
height:20px;
margin-top:5px;
background-color: gold;

}
#menu {
height:40px;
background-color: #0c0c0c;
margin-top:5px;
55.}
#menu ul {
list-style: none;
margin:0;
padding:0;
60.}
#menu ul li {
float:left;
width:200px;
text-align:center;
line-height:40px;
66.}
#menu ul li a {
color:white;
text-decoration: none;
70.}
#menu ul li:hover {
background-color:orangered;
73.}
Hasil :