Link, Frame Dan CSS Di HTML

Link, Frame dan CSS
Di HTML
Infomatika
Universitas Muhammadiyah Sidoarjo
1
Membuat Link Di HTML
Infomatika
Hyperlink Di Web
 Link atau Hyperlink pada web digunakan untuk menghubungkan
web dari halaman ke halaman lainnya.
 Tag untuk link : <A HREF=“URL”>Label</A> (anchor tag)
 URL (Uniform Resource Locator) dapat berupa alamat suatu

dokumen web, file grafik, atau menyatakan suatu protokol lain
(FTP)
Hyperlink Di Web
<!DOCTYPE html>
<html>
<head><title>Halaman 1</title>
</head>
<body>
<h2>Halaman 1</h2>
Selamat Datang di Halaman 1
</body>
</html>
Simpan dengan nama hal1.html

Hyperlink Di Web
Hyperlink Di Web
<!DOCTYPE html>
<html>
<head><title>Halaman 2</title>
</head>
<body>
<h2>Halaman 2</h2>
Selamat Datang di Halaman 2
</body>
</html>
Simpan dengan nama hal2.html

Hyperlink Di Web
Hyperlink Di Web
<!DOCTYPE html>
<html>
<head><title>Halaman Utama</title>
</head>
<body>
<h2>Halaman Utama</h2>
Silahkan Klik pada link-link berikut :<br>
<a href="hal1.html">Halaman 1</a><br>
<a href="hal2.html">Halaman 2</a><br>
</body>
</html>
Hyperlink Di Web
Hyperlink Di Web
 Hyperink tidak terbatas pada web yang sama, hyperlik juga bisa ditujukan ke
situs web lain.
 Tag :<A HREF=http://www.gramedia.com>Toko Buku Gramedia </A>
 Contoh :
<!DOCTYPE html>
<html>
<head><title>Universitas Muhammadiyah</title>
</head>
<body>
<h3>Universitas Muhammadiyah Di Jawa Timur</h3>
<a href="http://www.umsida.ac.id/">UMSIDA</a><br>
<a href="http://www.umm.ac.id/">UMM</a><br>
<a href="http://www.um-surabaya.ac.id/">UM SURABAYA</a><br>
</body>
</html>
Hyperlink Di Web
Hyperlink Di Web
 Label yang menjadi pengubung ke halaman web yang lain secara

bawaan diberi warna tertentu :
 Link yang belum diklik pemakai berwarna biru dan bergaris

bawah.
 Link yang sudah diklik pemakai berwarna ungu dan bergaris

bawah
 Link aktif berwarna merah dan bergaris bawah
 Warna tersebut dapat diubah dengan menggunakan atribut LINK

yang terdapat pada tag <BODY>
Hyperlink Di Web
 Contoh :
<html>
<head><title>Universitas Muhammadiyah</title>
</head>
<body link="black">
<h3>Universitas Muhammadiyah Di Jawa Timur</h3>
<a href="http://www.umsida.ac.id/">UMSIDA</a><br>
<a href="http://www.umm.ac.id/">UMM</a><br>
<a href="http://www.um-surabaya.ac.id/">UM
SURABAYA</a><br>
</body>
</html>
Hyperlink Di Web
Hyperlink Di Web
• Selain LINK terdapat 2 atribut yang berkaitan dengan penggunaan warna
hyperlink :
Atribut Keterangan
ALINK Untuk menentukan link aktif, yaitu link yang telah diklik pemakai
tapi halaman belum selesai dibuka
VLINK Untuk menentukan warna link yang halaman Web terkaitnya telah
dikunjungi
Hyperlink Di Web
<!DOCTYPE html>
<html>
<head><title>Halaman Utama</title>
</head>
<body link="blue" alink="green" vlink="red">
<h2>Halaman Utama</h2>
<a href="#">Halaman X</a><br>
<a href="#">Halaman Y</a><br>
</body>
</html>
Hyperlink Di Web
Sebelum di klik
sesudah di klik
URL Absolut dan Relatif
 URL Absolut memiliki ciri –ciri diawali dengan : http://, ftp://.
Kelebihan ulr absolut adalah dalam hal pembuatannya yang
sangat cepat.
 Contoh : http://www.elexmedia.co.id
 URL Relatif adalah URL yang menyebutkan nama-nama berkas

secara langsung
 Contoh : <a href=“halutama.html>Halaman Utama</a>

Link dengan Gambar
 Sebuah gambar dapat dijadikan link ke halaman lain, dengan
menyebutkan tag <IMG> diantara pasangan <A>...</A>
 Contoh :
<!DOCTYPE html>
<html>
<head><title>Link dengan Gambar</title>
</head>
<body>
Klik <a href="logoumsida.jpg"><img src=“logoumsida.jpg" width="40" height="45"></a>
Untuk melihat gambar lambang UMSIDA
</body>
</html>
Link dengan Gambar
Link Jendela Baru
 Membuka Jendela baru
Membuka jendela baru untuk menampung halaman yang di-link.
 Tag : <A HREF=“file.html” target=“_blank”>Halaman X</a>
 Contoh :
<!DOCTYPE html>
<html>
<head><title>Menu Utama</title>
</head>
<body>
<h2>Menu Utama</h2>
<a href="halx.html" target="_blank">Halaman X</a><br>
<a href="haly.html" target="_blank">Halaman Y</a><br>
</body>
</html>
2
Halaman Web
Berbasis Frame
Infomatika
Frame
 Frame adalah Teknik yang digunakan untuk membagi tampilan web
menjadi beberapa bagian.
 Setiap bagian dapat diisi dengan sebuah halaman web yang sesuai.
 Keuntungan dari penggunaan frame adalah mudahnya pengaturan

hubungan antar satu halaman dengan halaman lainnya.
Frame
Cara Membuat Frame HTML
Untuk membuat halaman web yang menggunakan frame perlu membuat

beberapa file html, yaitu:
 Sebuah pendefinisi file. File tersebut digunakan untuk menampilkan

halaman web dengan bentuk frame.
 Beberapa file pengisi frame, yang jumlahnya tergantung dari berapa bagian
yang akan dibuat pada frame tersebut.
Frame
• Tag yang digunakan <FRAMESET>.....</FRAMESET> pada frame ini tidak

dipelukan tag<body>....</body>, struktur dasar pendefinisi Frame sbb :
<html>
<head>
<title></title>
</head>
<frameset>
*** bagian frame ***
</frameset>
</html>
Frame
• Pada file pendefinisi frame ini, setiap akan membagi menjadi beberapa
bagian, maka digunakan tag <FRAMESET></FRAMESET>. Atribut-
atribut yang dapat menyertai tag ini adalah:Atribut :
Atribut Keterangan
COLS Untuk membuat frame Vertikal (kolom)
ROWS Untuk membuat frame Horizontal
BORDER Untuk Mengatur ketebalan garis pemisah antar Frame

Frame
• Jika Frame tidak akan dibagi lagi, maka selanjutnya definisikan frame
tersebut dengan tag <FRAME> Struktur Dasar sebagai berikut :
<html>
<head>
<title></title>
</head>
<frameset>
<frame src=“”>
<frame src=“”>
</frameset>
</html>
Frame
 Atribut-atribut yang dapat menyertai tag <frame> adalah:
Atribut Keterangan
SRC=“.....” Memanggil atau menunjukkan file yang mengisi frame tersebut.
SCROLLING=“pilihan” Menggunakan scrolling bar di samping atau di bawah halaman, pilihan

inputnya adalah "YES, NO atau AUTO".
NORESIZE Agar Frame tidak bisa diubah ketika ditampilkan di browser
NAME=“......” Memberi identitas/nama bagi frame tersebut. Fungsinya adalah ketika

frame tersebut dijadikan target untuk menampilkan suatu halaman.
 Yang perlu diperhatikan saat membuat file pendefinisi frame adalah bahwa file-
file yang digunakan untuk mengisi Frame telah dibuat.
Langkah-langkah Membuat Frame
• Membuat Frame 2 colom sbb :
• Maka yang harus dilakukan adalah membuat file isi frame terdahulu
sebagai berikut :
Isi Frame Kiri
<!DOCTYPE html>
<html>
<head><title>Frame Kiri</title>
</head>
<body bgcolor="Gold">
<h1>Frame Sebelah Kiri</h1>
</body>
</html>
Simpan dengan nama framekir.html

Isi Frame Kanan
<!DOCTYPE html>
<html>
<head><title>Frame Kanan</title>
</head>
<body bgcolor="#FAFAD2">
<h1>Frame Sebelah Kanan</h1>
</body>
</html>
Simpan dengan Nama framekan.html
Frame Vertikal
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Frame</title>
</head>
<FRAMESET COLS="30%,*">
<FRAME SRC="framekir.html” NORESIZE>
<FRAME SRC="framekan.html” NORESIZE>
<NOFRAMES>
Maaf halaman ini tidak dapat dibuka karena browser Anda
tidak mendukung frame
</NOFRAMES>
</FRAMESET>
</html>
Frame Vertikal
Frame Horizontal
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Frame</title>
</head>
<FRAMESET ROWS="30%,*">
<FRAME SRC="framekir.html“ NORESIZE>
<FRAME SRC="framekan.html“ NORESIZE>
<NOFRAMES>
Maaf halaman ini tidak dapat dibuka karena browser Anda
tidak mendukung frame
</NOFRAMES>
</FRAMESET>
</html>
Frame Horizontal
Membuat 3 Frame
 Membuat Frame 3 Bagian sbb :

File Header Frame
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="#006699">
<h2><font color="#FFFFFF">Logo dan nama (header web)
Anda</font></h2>
</body>
</html>
Simpan dengan nama header.html

Isi (Content) Frame (Halaman Welcome)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="#edf5d2">
<h2>Welcome to My Website</h2>
<h4>Isi Website Anda</h4>
</body>
</html>
Simpan dengan nama welcome.html

Isi (Content) Frame (Halaman Profil)
<html>
<head>
<title></title>
</head>
<body bgcolor="#edf5d2">
<h2>Profil Website</h2>
<h4>Profil Website Anda</h4>
</body>
</html>
Simpan dengan nama profil.html

Menu Frame
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="#71aec7">
<h4>Menu</h4>
<a href="welcome.html" target="isi">Home</a><br><br>
<a href="profil.html" target="isi">Profil</a>
</body>
</html>
Simpan dengan nama menu.html

Index Frame
<html>
<head>
<title></title>
</head>
<frameset rows="20%,*" border="1">
<frame name="atas" src=“header.html" noresize>
<frameset cols="20%,*">
<frame scrolling="no" src="menu.html" noresize>
<frame name="isi" src="welcome.html" noresize>
</frameset>
</frameset>
</html>
Simpan dengan nama index.html

Index Frame
3
CSS
(Cascading Style Sheets)
Infomatika
Mengenal css
 CSS (Cascading Style Sheets) digunakan untuk menciptakan suatu kumpulan style yang
terkadang digunakan untuk memperluas kemampuan HTML.
 CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur aspek
tampilan website.
 Cascading Style Sheet adalah suatu teknologi yang digunakan untuk mempermudah
pembuatan suatu tampilan sebuah website.
 CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di
web browser.
 Tag-tag CSS diletakkan di dalam tag <style>..</style>
Mengenal css
CSS Layout sangat populer digunakan dalam desain web
 Kelebihan CSS Layout
1. Update tampilan lebih mudah
2. Beban bandwidth lebih kecil
3. Modifikasi web template lebih mudah
4. Lebih mudah digunakan pada mobile phone (responsive)
 Kekurangan CSS Layout
1. Memerlukan ketelitian tinggi dalam menuliskan tag tag div terutama lay out yang
kompleks
2. Terkadang efek tampilan di tiap browser berbeda

CSS (Cascading stylesheet) Layout
CSS dapat ditambahkan dalam halaman web dengan 3 cara:
1. Inline CSS : ditulis langsung pada setiap tag / elemen
<!DOCTYPE html>
<html>
<head>
<title>Contoh : Inline style sheet</title>
</head>
<body>
<p style='color:red; font-
size:25px'>Welcome</p>
</body>
</html>
2. Embedded CSS: menulis CSS di dalam HEAD HTML.
<!DOCTYPE html>
<html>
<head>
<title>Contoh : Embeded style sheet</title>
<style>
H1 {color: red}
</style>
</head>
<body>
<H1>Welcome</H1>
</body>
</html>
3. External CSS : menggunakan file CSS terpisah yang dapat digunakan oleh banyak
halaman. Dipanggil di dalam HEAD.
<link href=”nama_file.css” rel=”stylesheet” type=”text/css”>

linkedcss.html style.css
H1
<!DOCTYPE html> {
<html> color : red;
<head> }
<title>Contoh : Linked style sheet</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
<H1>Coba Linked Style Sheet</H1></style>
</head>
<body>
<H1>Welcome</H1>
</body>
</html>
Aturan Penulisan CSS
 Didalam CSS tag-tag HTML disebut sebagai selector dan atribut didalamnya adalah declaration.
 Declaration ditandai dengan tanda {...} (kurung kurawal).
 Berbeda dengan atribut dalam HTML yang isinya dihubungkan dengan tanda “=”.
<font face=‘Aria’>
 Isi atribut dari CSS dihubungkan dengan tanda “:” (titik dua).
{font family: Arial,Helvetica;}
 Sedangkan pembatas antara satu atribut dengan atribut yang lainnya adalah tanda “;” (titik koma).
{ font-family : Arial,Helvetica; font-size : 12px; color : grey; }

 Selector
Selektor adalah kata kunci dan simbol yang digunakan pada CSS untuk menyeleksi atau memilih
elemen.
 Declaration
Mendeskripsikan property dan value
Contoh
selector
declaration H1
{ value
Color : #0000FF
}
property
 Selector
Ada 5 macam selektor di CSS:
1. Selektor Tag
2. Selektor Class
3. Selektor ID
4. Selektor Atribut
5. Selektor Universal
 Selektor Tag
Selektor Tag disebut juga Type Selector. Selektor ini akan memilih elemen berdasarkan nama
tag.
Contoh :
p { color: blue; }
Dimana : teks yang ada dalam elemen paragraf <p> berwarna biru.
<!DOCTYPE html>
<html>
<head>
<title>Selektro Tag</title>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>Welcome</p>
</body>
</html>
 Selektor Tag
 Selektor Class
Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang
diberikan. Selektor class dibuat dengan tanda titik (.) di depannya.
Contoh :
.pink {
color: white;
background: pink;
padding: 5px;
}
 Selektor Class
<!DOCTYPE html>
<html>
<head>
<title>Selektro Class</title>
<style>
.pink {
color: white;
background: pink;
padding: 5px;
}
</style>
</head>
<body>
<p>Saya sedang belajar <b class="pink">CSS</b> di HTML</p>
</body>
</html>
 Selektor Class
 Selektor class dapat digunakan pada elemen apa saja.
 Sebuah elemen HTML dapat menggunakan satu atau lebih class.
<!DOCTYPE html>
<html>
<head>
<style>
.text-white {
color: white;
}
.bg-teal {
background: teal;
}
</style>
</head>
<body>
<H2 class="text-white bg-teal">Saya sedang belajar CSS di HTML</H2>
</body>
</html>
 Selektor Class
 Selektor ID
1. Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh satu elemen
saja.
2. Selektor ID ditandai dengan tanda pagar (#) di depannya.
Contoh :
#header {
background: teal;
color: white;
height: 100px;
padding: 50px;
text-align: center;
font-size: 24px;
}
 Selektor ID
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background: teal;
color: white;
height: 100px;
padding: 50px;
text-align: center;
font-size: 24px;
}
</style>
</head>
<body>
<header id="header">Universitas Muhammadiyah Sidoarjo</header>
</body>
</html>
 Selektor ID
 Selektor Atribut
Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut. Selektor ini hampir
sama seperti selektor Tag.
Contoh :
input[type=text] {
background: none;
color: blue;
padding: 10px;
border: 1px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Selektro Atribut</title>
<style>
input[type=text] {
background: none;
color: blue;
padding: 10px;
}
</style>
</head>
<body>
<input type="text" placeholder="Nama Lengkap" />
</body>
</html>
 Selektor Universal
Selektor universal adalah selektor yang digunakan untuk menyeleksi semua elemen
pada jangkauan tertentu.
Contoh :
*{
border: 1px solid grey;
}
 Selector Universal
<!DOCTYPE html>
<html>
<head>
<title>Selector Universal</title>
<style>
*{
}
</style>
</head>
<body>
<p>Saya sedang belajar CSS di HTML</p>
<p>CSS aku akan menaklukkanmu</p>
</body>
</html>
 Selector Universal
Beberapa Atribut CSS
Atribut Nilai Atribut Keterangan
font-family Semua jenis huruf (verdana, Untuk menentukan jenis huruf
arial, Courier dll.)
font-size 8px, 9px, 10px dan seterusnya Untuk mengatur ukuran huruf
font-variant Small-caps, Normal-caps Untuk membuat huruf menjadi
KAPITAL
font-weight Normal, Bold, Bolder, Lighter Untuk membuat huruf tebal
- none - tidak ada style
text-decoration
- underline - garis bawah
- overline - garis diatas text
- line-through - garis ditengah text
text-align left, center, right Untuk mengatur letak text

font-style Normal, italic Gaya huruf
margin-left Batas kiri halaman Batas
Angka (dalam cm)
margin-top atas halaman Batas
margin-bottom bawah halaman Batas
margin-right kanan halaman
Font Properties
Font Family
Syntax:
font-family: <family-name>
Possible Values:
<family-name>
Arial, sans-serif
Helvetica, sans-serif
Verdana, sans-serif
Trebuchet MS, sans-serif
• Catatan : CSS menyediakan fallback sistem dimana font bisa di list mana yang akan
dijalankan terlebih dahulu, jika browser tidak mendukung maka akan dijalankan font
selanjutnya
Ukuran di CSS
• Di CSS terdapat macam-macam ukuran diantaranya : px (pixel), %
(percent), pc (pica) dan pt (point),em (em).
• satuan px dan pt merupakan besaran statis
• sedangkan em dan % adalah besaran relatif yang dihitung berdasarkan

ukuran font pada body.
Ukuran di CSS
Contoh CSS
<!DOCTYPE html> <body>
<html> <H1>Cascading Style Sheets (CSS)
<head><title>CSS Pertamaku</title> Pertamaku</H1>
<style type="text/CSS"> <H2>Cascading Style Sheets (CSS)
Pertamaku</H2>

</style>
</head>
Tampilan
Meggunakan class
<!DOCTYPE html> </style>
<html>
</head>
<head><title>CSS dengan Class</title>
<body>
<style type="text/CSS">

tampilan
Menggunakan Id
<!DOCTYPE html> </style>
<html> </head>
<head><title>CSS dengan ID</title>
<body>

tampilan
CSS pada Tabel
<html> </head>
<head><title>CSS untuk tabel</title> <body>
<table>
 </body>
</style>
</html>
tampilan
CSS Eksternal (style.css)
BODY { background: url('imple.png');
background-size: 100% 100%;
background-repeat: no-repeat;
color: black;
font-family: Arial, Times New Roman,Verdana;
text-align: center;
}
.miring { font-style: italic;

text-decoration: underline;
font-size: 25pt;
color: red;
}
#besar { font-size: 39pt; }

Eksternal.html
<html>
<head><title>Contoh CSS eksternal</title>
<link rel = "stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="miring">Welcome</p>
<span id="besar">Cascading Style Sheets </span><br><br>
</body>
</html>
Eksternal.html
Css dengan div
Dalam mendesain layout sebuah website dapat menggunakan 2 model, yaitu:
1. Model tabel
Menggunakan model tabel mudah dan cepat dalam proses pembuatannya akan tetapi
mempunyai kelemahan sulit untuk melakukan memodifikasi jika ada perubahan desain
interface dan desain sistem, karena model desain menggunakan tabel ini harus melakukan
perubahan pada setiap elemen yang berada di dalamnya.
2. Model div
Model div membutuhkan waktu yang lebih lama, tetapi dengan model div ini akan
mempermudah pengembangan lebih lanjut sesuai dengan kebutuhan sistem (website).
Desain layout website
Header
Menu
Navigasi konten
footer
Wrapper (pembungkus)
Keterangan
Bagian Properti
wrapper class .wrapper
lebar 900px
tinggi Tinggi dikosongkan sehingga

otomatis memanjang sesuai
panjang konten
Header class .header
Lebar Otomatis
Tinggi 100 pixel
Menu Class .menu
Lebar Otomatis
Tinggi minimal 35 pixel

Keterangan
Bagian Properti
Navigasi Class .navigasi
Lebar 200 pixel
Tinggi minimal 400 pixel
Konten Class .konten
Lebar 400 pixel
Tinggi Otomatis
Footer Class .footer
Lebar Otomatis
Tinggi 30 pixel
Ekternal css
• Buka notepad ++ kemudian ketikkan sintax dibawah ini, simpan dengan
style.css
body {
margin:0;
background-color:#cbeff5;
}
.wrapper {
width:900px; /*lebar layout*/
padding:5px; /* lebar layout dengan border layout lain*/
margin:10px auto; /*letak layout dari browser*/
font-family:Arial,Verdana,sans-serif; /*jenis font*/
font-size:14px; /*ukuran teks*/
}
.header {
height:100px;
background-color:#0b87a3; /*warna latar belakang*/
font-size:20px;
color:#fff; /*warna teks*/
font-style: normal; /*style font italic atau normal*/
text-align: center; /*letak teks*/
font-weight: bold; /*penebalan teks*/
margin: 0;
padding-top: 50px;
}
.menu {
height:35px;
background-color:#136380;
color:#fff;
}
.navigasi {
float:left;
width:200px;
background-color:#029bba;
min-height:400px;
padding-top: 15px; /*jarak dengan tepi atas*/
padding-left: 15px; /*jarak dengan tepi kiri*/
}
.kontent {
margin-left:200px;
background-color:#7ad3e6;
min-height:400px;
padding-top: 15px;
padding-left: 30px;
}
.footer {
clear:both;
height:30px;
background-color:#136380;
font-size:11px;
color:#fff;
text-align: center;
padding-top: 10px;
}
Tampilan utama website
• Setelah css selesai kita membuat script utama simpan dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>layout dengan CSS</title>


<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="navigasi">Navigasi</div>
<div class="kontent">Konten</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Hasil tampilan website
TERIMA KASIH

Link, Frame Dan CSS Di HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Link, Frame Dan CSS Di HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Link, Frame dan CSS

 Tag untuk link : <A HREF=“URL”>Label</A> (anchor tag)

 URL (Uniform Resource Locator) dapat berupa alamat suatu

Selamat Datang di Halaman 1

Simpan dengan nama hal1.html

Selamat Datang di Halaman 2

Simpan dengan nama hal2.html

 Tag :<A HREF=http://www.gramedia.com>Toko Buku Gramedia </A>

 Label yang menjadi pengubung ke halaman web yang lain secara

 Link yang belum diklik pemakai berwarna biru dan bergaris

 Link yang sudah diklik pemakai berwarna ungu dan bergaris

 Link aktif berwarna merah dan bergaris bawah

 Warna tersebut dapat diubah dengan menggunakan atribut LINK

<h3>Universitas Muhammadiyah Di Jawa Timur</h3>

 URL Relatif adalah URL yang menyebutkan nama-nama berkas

 Contoh : <a href=“halutama.html>Halaman Utama</a>

 Tag : <A HREF=“file.html” target=“_blank”>Halaman X</a>

 Keuntungan dari penggunaan frame adalah mudahnya pengaturan

Untuk membuat halaman web yang menggunakan frame perlu membuat

 Sebuah pendefinisi file. File tersebut digunakan untuk menampilkan

• Tag yang digunakan <FRAMESET>.....</FRAMESET> pada frame ini tidak

COLS Untuk membuat frame Vertikal (kolom)

ROWS Untuk membuat frame Horizontal

BORDER Untuk Mengatur ketebalan garis pemisah antar Frame

SRC=“.....” Memanggil atau menunjukkan file yang mengisi frame tersebut.

SCROLLING=“pilihan” Menggunakan scrolling bar di samping atau di bawah halaman, pilihan

NORESIZE Agar Frame tidak bisa diubah ketika ditampilkan di browser

NAME=“......” Memberi identitas/nama bagi frame tersebut. Fungsinya adalah ketika

Simpan dengan nama framekir.html

<head><title>Contoh Penggunaan Frame</title>

<FRAME SRC="framekir.html” NORESIZE>

<FRAME SRC="framekan.html” NORESIZE>

Maaf halaman ini tidak dapat dibuka karena browser Anda

tidak mendukung frame

<head><title>Contoh Penggunaan Frame</title>

<FRAME SRC="framekir.html“ NORESIZE>

<FRAME SRC="framekan.html“ NORESIZE>

Maaf halaman ini tidak dapat dibuka karena browser Anda

tidak mendukung frame

 Membuat Frame 3 Bagian sbb :

Simpan dengan nama header.html

Simpan dengan nama welcome.html

Simpan dengan nama profil.html

Simpan dengan nama menu.html

Simpan dengan nama index.html

 Kelebihan CSS Layout

1. Update tampilan lebih mudah

2. Beban bandwidth lebih kecil

3. Modifikasi web template lebih mudah

4. Lebih mudah digunakan pada mobile phone (responsive)

 Kekurangan CSS Layout

2. Terkadang efek tampilan di tiap browser berbeda

CSS dapat ditambahkan dalam halaman web dengan 3 cara:

1. Inline CSS : ditulis langsung pada setiap tag / elemen

2. Embedded CSS: menulis CSS di dalam HEAD HTML.

<link href=”nama_file.css” rel=”stylesheet” type=”text/css”>

 Declaration ditandai dengan tanda {...} (kurung kurawal).

{font family: Arial,Helvetica;}

{ font-family : Arial,Helvetica; font-size : 12px; color : grey; }

Ada 5 macam selektor di CSS:

 Sebuah elemen HTML dapat menggunakan satu atau lebih class.

border: 1px solid blue;