A. Membuat website dalam 1 menit
1. Buka Notepad++
dan jangan lupa aktifkan XAMPP nya terlebuh dahulu
2.
Ketikkan teks berikut :
3.
Pilih menu File > Save As
4.
Beri nama Latihan1Pia.html
5.
Pada bagian Save as type, pilih All
Files (*.*) Lalu klik tombol save.
6. Sekarang klik dua kali file HTML yang telah anda buat, (atau Klik dan Drag ke Web Browser anda, disini saya menggunakan Google Chrome) maka tampilannya seperti berikut... atau buka file tempat kita menyimpannya tadi lalu open
Demonstrasi
di atas hanyalah langkah untuk membuat file HTML
B. Penempatan Gambar
1. Buka Notepad++ (Aktifkan XAMPP terlebih dahulu)
2.
Carilah sebuah gambar dan simpan satu folder
dengan file HTML anda.
3.
Ketikkanlah kode HTML berikut :
<!DOCTYPE
HTML>
<HTML>
<head>
<title>Membuat
Gambar HTML</title>
</head>
<body>
<p>Ini adalah contoh
pembuatan gambar pada file HTML<p>
<img
src="Pia.jpg" />
</body>
</HTML>
4.
Lalu save dengan nama latihan2Pia.html
5.
Bukalah pada browser, anda akan melihat gambar
telah termuat pada file HTML anda.
6.
Jika berhasil maka seperti berikut
c.
Membuat LINK
1. Aktifkan XAMPP terlebih dahulu
2. Kemudian Buka
Notepad++
3. Buatlah file baru dengan nama latihan3Pia.html,
simpanlah di folder yang sama dengan latihan-latihan sebelumnya.
4. Kemudia ketik kode berikut di Notepad++
|
<!DOCTYPE HTML> <HTML> <head> <title>Judul
File HTML</title> </head> <body> <h1>Selamat datang di
website Sephiarst</h1> <a
href="Latihan1Pia.html">buka Latihan 1</1><br> <a
href="Latihan2Pia.html">buka Latihan 2</a> </body> </HTML> |
5.
Buka kembali file latihan1.html dan
latihan2.html, dan tambahkan sebuah link yang akan mengait ke file
latihan3.html tepat sebelum penutup tag body </body> Untuk
memastikan
6. Jika sudah langsung save saja dan jangan lupa disimpan dengan format seperti ini (*.*)
7. Jika berhasil buka folder tempat kita menyimpannya lalu open, dan begini tampilannya….
d.
Membuat Heading / Penjudulan
1. Aktifkan XAMPP terlebih dahulu
2. Kemudian Buka Notepad++
3. Buatlah file baru dengan nama latihan4ia.html,
simpanlah di folder yang sama dengan latihan-latihan sebelumnya.
4. Selanjutkan masukkan kode berikut di Notepad++
|
<!DOCTYPE HTML> <HTML lang="en-US"> <head> <title>Heading</title> </head> <body> <h1>Bab
1 : Pendahuluan</h1> <h2>1.1
Latar Belakang</h2> <p>Paragraf
pendahuluan, Sephia Anita Sahrina </p> <h2>1.2
Pokok Permasalahan</h2> <p>Paragraf
pendahuluan, Sephia Anita Sahrina </p> <h1>Bab
2 : Pembahasan</h1> <h2>2.1
Teori dan Kondep</h2> <p>Paragraf pendahuluan,
Sephia Anita Sahrina </p> <h2>2.2
Algoritma Pemograman</h2> <p>Paragraf
pendahuluan, Sephia Anita Sahrina </p> </body> </HTML> |
5.
Jika sudah langsung save saja dengan
nama Latihan4Pia.html dan jangan
lupa disimpan dengan format seperti ini
(*.*)
6. Jika berhasil buka folder tempat kita menyimpannya
lalu open, dan begini tampilannya….
E.
Membuat
Daftar / List
BAGIAN 1
Ordered List
1.
Seperti biasa Aktifkan daulu XAMPP
2.
Lalu buka Notepad++ dan Masukkan
Kode berikut
|
<h2>Yang
Harus dilakukan hari ini</h2> <ol> <li>Pergi kepasar</li> <li>Membuat Tutorial
HTML</li> <li>Mengerjakan Tugas
Kuliah</li> </ol> |
3.
Jika sudah Save dengan nama Latihan5Pia.html dan jangan lupa pake
format (*.*), dan jika berhasil maka
seperti ini
BAGIAN 2
UnOrdered List
|
<h2>Yang
Harus dilakukan hari ini</h2> <ul> <li>Pergi kepasar</li> <li>Membuat Tutorial
HTML</li> <li>Mengerjakan Tugas
Kuliah</li> </ul> |
BAGIAN 3
Definition List
|
<dl> <dt>Manga</dt> <dd>Manga
(baca: Man-ga, atau Ma-ng-ga) merupakan kata komik dalam bahasa Jepang;
diluar Jepang, kata tersebut digunakan khusus untuk membicarakan tentang komik
Jepang. </dd> <dt>Mangaka</dt> </dd>Mangaka
(baca: Man-ga-ka, atau Ma-ng-ga-ka) adalah orang yang menggambar
manga</dd> </dl> |
BAGIAN 4
List/Daftar Bersarang
|
<!DOCTYPE HTML> <HTML> <head> <title>List?Daftar</title> </head> <body> <h2>Yang
harus dilakukan hari ini</h2> <ol> <li>Pergi
kepasar <ul> <li>Beli
Sayuran</li> <li>Beli
Kertas <ol> <li>A4</li> <li>Legal</li> </ol> </li> <li>Beli
tinta</li> </ul> </li> <li>Buat
Tutorial HTML</li> <li>Mengerjakan
Tugas Kuliah</li> </ol> </body> </HTML> |
Komentar
Posting Komentar