Materi Untuk Belajar HTML Dan CSS Lengkap
Diunggah oleh
Alfian HidayatullohJudul Asli
Hak Cipta
Format Tersedia
Bagikan dokumen Ini
Apakah menurut Anda dokumen ini bermanfaat?
Apakah konten ini tidak pantas?
Laporkan Dokumen IniHak Cipta:
Format Tersedia
Materi Untuk Belajar HTML Dan CSS Lengkap
Diunggah oleh
Alfian HidayatullohHak Cipta:
Format Tersedia
LAPORAN PRAKTIKUM DESAIN WEB
MERANCANG SEBUAH HALAMAN WEB
BERBASIS HTML5 DAN CSS3
Diajukan guna memenuhi tugas
dalam mata kuliah Praktikum Desain Web
Dosen Pengampu:
Yosef Murya Kusuma Ardhana S.T., M.Kom.
Disusun oleh:
ALFIAN HIDAYATULLOH
NIM. 5180411382
PROGRAM SARJANA (S-1) INFORMATIKA
FAKULTAS TEKNOLOGI INFORMASI DAN ELEKTRO
UNIVERSITAS TEKNOLOGI YOGYAKARTA
YOGYAKARTA
2018
BAB I
LANDASAN TEORI
1. HTML (Hypertext Markup Language)
1.A. Definisi
HTML (Hypertext Markup Language) adalah sebuah protokol yang
digunakan untuk membuat format suatu dokumen web yang mampu dibaca dalam
browser dari berbagai platform komputer. Sifat bahasa HTML ini adalah client
script, di mana do`kumen tersebut dapat dibuka dalam komputer stand alone yang
tidak membutuhkan server untuk dapat menampilkannya di dalam browser.
Dokumen HTML merupakan file yang pada umumnya berekstensi .htm atau
.html, di mana bahasa HTML tersebut tersusun atas tag yang berformat <isi tag>.
1. B. Aturan penulisan
Aturan penulisan HTML adalah sebagai berikut:
1. Dalam penulisannya, tag HTML selalu diapit dengan dua karakter kurung
sudut “<” dan “>”.
2. Tag HTML secara normal selalu berpasangan. Sebagai contoh: <body> dan
</body>.
3. Tag HTML pertama dalam suatu pasangan kode adalah tag awal dan tag kedua
merupakan tag akhir. Sebagai contoh: <tag> akan diakhiri dengan </tag>.
4. Tag HTML tidak case sensitive, di mana tag dengan huruf kecil sama dengan
tag dengan huruf besar. Sebagai contoh: <b> sama dengan <B>.
5. Jika dalam suatu tag terdapat tag lagi, maka penulisan tag akhir harus berurutan
dan tidak boleh bersilang. Sebagai contoh: <b><i>huruf tebal dan
miring</i></b>.
6. Penulisan script HTML selalu diawali dengan <html> dan diakhiri dengan
</html>.
1
Secara teknis, web browser akan melakukan penerjemahan dokumen untuk
ditampilkan dalam bentuk HTML jika dokumen tersebut terdapat di antara tag
<html> dan </html>. Ada baiknya, dalam penulisan HTML menggunakan huruf
kecil agar dapat menyesuaikan dengan HTML generasi berikutnya (rekomendasi
dari W3C).
1.C. Struktur utama
Struktur penulisan dalam HTML dibagi menjadi dua bagian, antara lain:
1. Bagian kepala (head)
Bagian ini memuat informasi mengenai kepala dokumen, yaitu informasi yang
ditampilkan secara tidak langsung kepada pengunjung ketika mereka
mengunjungi sebuah halaman web. Contoh: <title>, <meta>, dll.
2. Bagian badan (body)
Bagian ini memuat informasi mengenai badan dokumen, yaitu informasi yang
ditampilkan secara langsung kepada pengunjung ketika mereka mengunjungi
sebuah halaman web. Contoh: <header>, <footer>, dll.
Struktur utama penulisan kode dalam HTML adalah sebagai berikut:
<html>
<head>
<!-- bagian head -->
</head>
<body>
<!-- bagian body -->
</body>
</html>
2
2. CSS (Cascading Style Sheets)
2.A. Definisi
CSS (Cascading Style Sheets) adalah sebuah cara untuk memisahkan isi
dengan layout dalam halaman-halaman web yang dibuat. CSS memperkenalkan
template yang berupa style untuk membuat dan mempermudah penulisan kode
dari halaman-halaman web yang sedang dirancang. Hal ini sangat penting karena
halaman web yang menggunakan CSS dapat dilihat secara bolak-balik dan isinya
dapat dibaca oleh pengunjung meskipun saat berpindah halaman.
CSS mampu menciptakan halman web yang tampak sama pada resolusi
layar dari perangkat pengunjung apapun. Dengan CSS, Anda akan lebih mudah
melakukan setting tampilan keseluruhan halaman web hanya dengan
menggantikan atribut-atribut atau perintah dalam style CSS. Penggunaan CSS
dalam halaman web akan lebih efisien karena CSS dapat digunakan untuk
penggunaan secara berulang-ulang pada tag-tag tertentu, sehingga tidak perlu
mengetikkan ulang seluruh perintah pemformatan seperti halnya dalam HTML.
2.B. Cara kerja
Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style
sebagai penentu dari font, warna, dan format-format lain untuk menyetting atribut
sebuah halaman web yang Anda buat. Tiap style memiliki dua buah elemen dasar,
yaitu “selector” dan “declaration”. Sebuah “selector” biasanya merupakan tag
HTML, sementara “declaration” adalah satu atau beberapa perintah/nilai dari
CSS yang menunjukkan tipe bentuk yang diaplikasikan pada selector. Declaration
ini biasanya ditandai dengan tanda kurung kurawal “{ }”.
3
Perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang lain
dengan menggunakan titik koma “ ; ” seperti terlihat pada contoh berikut:
<style type=”text/css”>
.format {font-family: verdana; color: blue;}
</style>
Pada contoh di atas terlihat bahwa:
.format adalah selector, dan
{font-family:verdana; color: blue} adalah declaration.
2.C. Penempatan dalam HTML
Menempatkan style CSS dalam dokumen web yang kita buat dalam bahasa
HTML dapat dilakukan dengan beberapa cara yang berbeda sesuai dengan
keinginan kita. Cara penempatan CSS dalam HTML di antaranya menggunakan
inline style, internal style, external style, dan juga teknik importing style.
Inline style
adalah teknik penempatan CSS yang dibuat dalam sebuah tag HTML yang
hanya berlaku untuk tag yang diapitnya saja. Biasanya teknik ini digunakan
pada performatan khusus pada sebuah elemen HTML dan tidak digunakan
untuk memformat seluruh elemen dalam halaman web.
Contoh:
<html>
<head>
<!-- bagian head -->
</head>
<body>
<!-- bagian body -->
<font style=”font-family: Arial; font-size: 20px;
background-color: yellow”>Penerapan inline style</font>
</body>
</html>
4
Internal style
Pada teknik ini, style diletakkan pada tengah tag antara <head> dan
</head>. Aturan-aturan dalam style ini diatur sedemikian rupa untuk
digunakan pada suatu tempat maupun untuk keseluruhan halaman web.
Contoh:
<html>
<head>
<!-- bagian head -->
<style type=”text/css”>
.class {font-family: Verdana; font-size: 24px; color:
white; background-color: blue;}
</style>
</head>
<body>
<!-- bagian body -->
</body>
External style
Dengan menggunakan teknik ini, Anda dapat menggunakan perintah <link
rel=“”> untuk menghubungkan halaman web ke sebuah style CSS
eksternal dengan nama yang telah Anda tentukan sebelumnya.
Contoh:
<html>
<head>
<!-- bagian head -->
<link rel=”stylesheet” type=”text/css” href=”file.css”>
</head>
<body>
<!-- bagian body -->
</body>
</html>
5
BAB II
TUGAS DAN LATIHAN
1. HTML (Hypertext Markup Language)
a) Form input tanggal dan tabel jadwal kuliah
6
<form></form> membuat sebuah formulir yang digunakan sebagai tempat
inputan bagi user. Atribut <form action=””> pada tag form berfungsi sebagai tempat
tujuan setelah inputan pada formulir dikirim.
<input></input> membuat sebuah tempat inputan bagi user yang ada pada
formulir. Atribut <input type=””> pada tag input berfungsi sebagai pengenal jenis
inputan yang akan dimasukkan user, misalnya inputan tanggal maka yang digunakan
adalah date. Adapun beberapa jenis inputan lain, di antaranya: submit, week,
month, datetime-local, dll. Atribut <input name=””> pada tag input berfungsi
sebagai nama inputan yang akan dimasukkan user, misalnya tanggal lahir maka jika
sebuah formulir dikirimkan, pada URL halaman akan ada atribut name yang telah
Anda definisikan sebelumnya.
<table></table> membuat sebuah tabel pada halaman web. Atribut <table
border=””> berfungsi untuk menampilkan garis pembatas dalam tabel, nilai 0 untuk
tidak menampilkan dan nilai 1 untuk menampilkan.
<tr></tr> membuat sebuah table row/sel baris pada tabel.
<th></th> membuat sebuah table header/sel header pada tabel. Atribut <th
colspan=””> berfungsi untuk menghilangkan garis pembatas beberapa sel header
(tergantung nilai yang dimasukkan) untuk digabung menjadi satu sel header.
<td></td> membuat sebuah table data/sel kolom pada tabel. Atribut <td
rowspan=””> berfungsi untuk menghilangkan garis pembatas beberapa sel kolom
(tergantung nilai yang dimasukkan) untuk digabung menjadi satu sel kolom.
7
b) Halaman web dengan fitur-fitur baru pada HTML5
8
New semantic elements seperti <header></header>, <section></section>,
<article></article>, <footer></footer> untuk membuat sebuah elemen
sebagai kerangka utama dalam pengembangan halaman web.
Non-breaking spaces berfungsi sebagai pengganti karakter spasi.
♥ berfungsi untuk menampilkan simbol hati atau cinta pada halaman web.
<video></video> meletakkan sebuah file video pada halaman web. Atribut
<video width=”” height=””> berfungsi untuk mengatur lebar dan tinggi video Anda
yang ingin ditampilkan. Atribut <video controls> berfungsi untuk menampilkan
menu kontrol video seperti tombol play dan pause.
<source> berfungsi sebagai sumber file yang Anda ingin tampilkan pada halaman
web. Atribut <source src=””> berfungsi sebagai alamat file video Anda yang ingin
ditampilkan. Atribut <source type=””> berfungsi sebagai pengenal jenis file yang
akan Anda tampilkan, misal mp3 atau mp4.
<audio></audio> meletakkan sebuah file audio pada halaman web. Atribut
<audio controls> berfungsi untuk menampilkan menu kontrol audio seperti tombol
play dan pause.
9
2. CSS (Cascading Style Sheets)
a) Inline style
Adapun source code untuk halaman web yang menerapkan inline style :
<body style="font-family: 'Source Sans Pro';
background: #e74c3c;
margin:0;
color:white;">
<header style="background:#FFFFFF;
padding: 1em;">
<a style="text-decoration:none;
color:#e74c3c;
font-size:1.8em;
font-weight:700;" href="#">QR Code</a>
</header>
<div style="display:grid;
grid-template-columns: 66% auto;
padding: 4em 1em;">
<div id="content">
<h1>Scan a QR code</h1>
<p>QR code is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed in
1994 for the automotive industry in Japan.</p>
</div>
<img style="width:200px;
position: relative;
margin-left: 50px;" src="qr-code.png">
</div>
<section style="background:#c0392b;">
<ul style="margin:0;padding:0;display:grid;
list-style-type:none;
margin:0;padding:0;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, auto);">
<li style="padding: 2em;
color:#E98A8A;">
<span style="display:block;
font-size:1.4em;
margin-bottom:1em;
color: white;">History</span>
The QR code system was invented in 1994 by the Japanese company Denso Wave. Its purpose was to
track vehicles during manufacturing; it was designed to allow high-speed component scanning.
</li>
10
<li style="padding: 2em;
color:#E98A8A;">
<span style="display:block;
font-size:1.4em;
margin-bottom:1em;
color: white;">Uses</span>
QR codes have become common in consumer advertising. Typically, a smartphone is used as a QR
code scanner, displaying the code and converting it to some useful form (such as a standard URL for a website,
thereby obviating the need for a user to type it into a web browser).
</li>
<li style="padding: 2em;
color:#E98A8A;">
<span style="display:block;
font-size:1.4em;
margin-bottom:1em;
color: white;">Design</span>
Unlike the older, one-dimensional barcodes that were designed to be mechanically scanned by a narrow
beam of light, a QR code is detected by a 2-dimensional digital image sensor and then digitally analyzed by a
programmed processor.
</li>
<li style="padding: 2em;
color:#E98A8A;">
<span style="display:block;
font-size:1.4em;
margin-bottom:1em;
color: white;">History</span>
The QR code system was invented in 1994 by the Japanese company Denso Wave. Its purpose was to
track vehicles during manufacturing; it was designed to allow high-speed component scanning.
</li>
<li style="padding: 2em;
color:#E98A8A;">
<span style="display:block;
font-size:1.4em;
margin-bottom:1em;
color: white;">Uses</span>
QR codes have become common in consumer advertising. Typically, a smartphone is used as a QR
code scanner, displaying the code and converting it to some useful form (such as a standard URL for a website,
thereby obviating the need for a user to type it into a web browser).
</li>
<li style="padding: 2em;
color:#E98A8A;">
<span style="display:block;
font-size:1.4em;
11
margin-bottom:1em;
color: white;">Design</span>
Unlike the older, one-dimensional barcodes that were designed to be mechanically scanned by a narrow
beam of light, a QR code is detected by a 2-dimensional digital image sensor and then digitally analyzed by a
programmed processor.
</li>
</ul>
</section>
<footer style="background-color: white;
margin:0;
color:#e74c3c;
text-align: center;
padding: 0.5em;">
Copyright © 2018 Informatics of UTY. All rights reserved.<br>
Designed with ♥ by Alfian Hidayatulloh.
</footer>
</body>
b) Internal style sheet
Adapun source code untuk halaman web yang menerapkan internal style sheet :
<head>
<title>QR Code</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: 'Source Sans Pro';
background: #e74c3c;
margin:0;
color:white;
}
a{
text-decoration:none;
color:#e74c3c;
font-size:1.8em;
font-weight:700;
}
img {
width:200px;
position: relative;
margin-left: 50px;
}
header {
12
background:#FFFFFF;
padding: 1em;
}
section {
background:#c0392b;
}
ul {
margin:0;padding:0;display:grid;
list-style-type:none;
margin:0;padding:0;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, auto);
}
ul li {
padding: 2em;
color:#E98A8A;
}
ul li span {
display:block;
font-size:1.4em;
margin-bottom:1em;
color: white;
}
.container {
display:grid;
grid-template-columns: 66% auto;
padding: 4em 1em;
}
footer {
background-color: white;
margin:0;
color:#e74c3c;
text-align: center;
padding: 0.5em;
}
</style>
</head>
13
c) External style sheet
Adapun source code untuk halaman web yang menerapkan external style sheet :
body {
font-family: 'Source Sans Pro';
background: #e74c3c;
margin:0;
color:white;
}
a{
text-decoration:none;
color:#e74c3c;
font-size:1.8em;
font-weight:700;
}
img {
width:200px;
position: relative;
margin-left: 50px;
}
header {
background:#FFFFFF;
padding: 1em;
}
section {
background:#c0392b;
}
ul {
margin:0;padding:0;display:grid;
list-style-type:none;
margin:0;padding:0;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, auto);
}
ul li {
padding: 2em;
color:#E98A8A;
}
ul li span {
display:block;
font-size:1.4em;
margin-bottom:1em;
color: white;
14
}
.container {
display:grid;
grid-template-columns: 66% auto;
padding: 4em 1em;
}
footer {
background-color: white;
margin:0;
color:#e74c3c;
text-align: center;
padding: 0.5em;
}
Maka hasil dari ketiga style CSS di atas akan menampilkan sebuah halaman web
yang sama sebagai berikut.
15
BAB III
KESIMPULAN
Kesimpulan yang saya peroleh setelah melakukan perancangan halaman
web menggunakan HTML dan CSS, antara lain:
HTML4 dan HTML5 memiliki perbedaan yang cukup signifikan pada
penulisan tag HTML. Seperti tag <div> yang berubah menjadi tag <header>,
<footer>, dll.
Dalam penulisan HTML5, perlu menuliskan <!DOCTYPE html> supaya
browser dapat mengenali halaman web tersebut telah menerapkan HTML5.
Dalam penulisan tag HTML, tidak perlu memerhatikan besar kecilnya huruf
karena HTML bersifat non case-sensitive.
CSS2 dan CSS3 juga memiliki perbedaaan yang cukup kentara pada penulisan
kode CSS. Hal tersebut dikarenakan perbedaan tujuan penciptaan kedua versi
CSS itu. CSS2 lebih menitikberatkan kepada format dokumen, sementara
CSS3 lebih menitikberatkan kepada desain web.
Dalam penulisan CSS3, tidak perlu menuliskan kode tambahan apapun karena
perubahan versi dari CSS2 ke CSS3 hanya adanya penambahan selector CSS
yang menjadi lebih banyak.
Terakhir, dalam penulisan kode CSS juga tidak perlu memerhatikan besar
kecilnya huruf karena CSS bersifat non case-sensitive.
16
DAFTAR PUSTAKA
Kurniawan, Budi, Desain Web Menggunakan HTML + CSS (Yogyakarta: Andi
Offset Jogjakarta, 2007)
Suyud, Modul Praktikum Desain Web (Yogyakarta: FTIE UTY, 2018)
17
Anda mungkin juga menyukai
- Perubahan Cover KPTA PRODI INFORMATIKADokumen1 halamanPerubahan Cover KPTA PRODI INFORMATIKAAlfian HidayatullohBelum ada peringkat
- Guidebook Data Science Academy COMPFEST 14Dokumen24 halamanGuidebook Data Science Academy COMPFEST 14Alfian HidayatullohBelum ada peringkat
- Kapita SelektaDokumen17 halamanKapita SelektaAlfian HidayatullohBelum ada peringkat
- 569 2174 1 SPDokumen58 halaman569 2174 1 SPAlfian HidayatullohBelum ada peringkat
- Template Proposal Rencana Studi Beasiswa Unggulan Masyarakat Berprestasi KemdikbudDokumen6 halamanTemplate Proposal Rencana Studi Beasiswa Unggulan Masyarakat Berprestasi KemdikbudAlfian HidayatullohBelum ada peringkat
- Juknis Bidikmisi UIN Malang 2018Dokumen5 halamanJuknis Bidikmisi UIN Malang 2018Alfian HidayatullohBelum ada peringkat
