BSI Purwokerto - Belajar Membuat Web (Part 1)
LANGKAH - LANGKAH MEMBUAT WEB
=> Instal aplikasi XAMPP terlebih dahulu.
1. Buka XAMPP Control Panel.
2. Klik tombol start pada bagian Apache dan MySQL.
Apache : Mengaktifkan Server.
MySQL : Mengaktifkan Database.
3. Buka windows explore.
4. Masukan ke folder instalasi XAMPP (biasanya di partisi C).
5. Masukan ke folder htdocs.
6. Hapus 2 file index (index.html dan index.php).
7. Buka web browser (firefox, chrome, dsb).
8. Ketikkan di kolom URL browser.
=> localhost
9. Buat folder baru bernama "latihan1" di dalam folder htdocs.
10. Ulangi langkah ke-8, maka akan muncul folder "latihan1".
HTML (HYPERTEXT MARKUP LANGUAGE)
------------------------------------------------------------------
- ELEMEN HTML => satu blok kode dimana ada tag pembuka (<nama tag>) dan tag penutup (</nama tag>).
- TAG HTML => Penanda "<" dan ">".
- ATTRIBUTE HTML
Struktur Dasar HTML :
<html>
<head>..... judul halaman webnya dll</head>
<body>
.......................kontan webnya
</body>
</html>
11. Buka editor text, buka notepad ++ / notepad (bawaan windows).
12. Ketikkan struktur dasar HTML di dalam file notepadnya.
13. Simpan file tersebut dengan nama : coba.html di dalam folder latihan 1 yang sudah di buat pada langkah 9.
14. Tambahkan tag title di antara tag pembuka head dan tag penutup head beserta kontennya.
15. Simpan file, lalu ulangi langkah ke-8.
16. Akses file coba.html dan lihat hasilnya di browser.
TAG HTML
--------------------------------------------------------------------------------------------------
<h>......</h> : membuat font tebal
<i>.......</i> : membuat font miring
<u>......</u> : membuat font underline / garis bawah
<p>......</p> : membuat paragraf baru
<marquee>......</marquee> :membuat text berjalan
<br>.....</br> : membuat baris / enter baru
<hr>.....</hr> : membuat garis horizontal
17. Menambahkan beberapa tag ke dalam file coba.html.
18. Simpan dan lihat hasilnya.
HEADING => Membuat judul.
contoh : judul web, judul berita, judul testimon, dll.
<h1>....</h1>
<h2>....</h2>
<h3>....</h3>
<h4>....</h4>
<h5>....</h5>
<h6>....</h6>
19. Menambahkan TAG HEADING ke dalam file coba.html.
20. Simpan dan lihat hasilnya.
BULLET & NUMBERING
<ul> ul : unordered list
<li>....</li> li : list
<li>....</li>
</ul>
<ol> ol : oldered list
<li>....</li> li : list
<li>....</li>
</ol>
=> Instal aplikasi XAMPP terlebih dahulu.
1. Buka XAMPP Control Panel.
2. Klik tombol start pada bagian Apache dan MySQL.
Apache : Mengaktifkan Server.
MySQL : Mengaktifkan Database.
3. Buka windows explore.
4. Masukan ke folder instalasi XAMPP (biasanya di partisi C).
5. Masukan ke folder htdocs.
6. Hapus 2 file index (index.html dan index.php).
7. Buka web browser (firefox, chrome, dsb).
8. Ketikkan di kolom URL browser.
=> localhost
9. Buat folder baru bernama "latihan1" di dalam folder htdocs.
10. Ulangi langkah ke-8, maka akan muncul folder "latihan1".
HTML (HYPERTEXT MARKUP LANGUAGE)
------------------------------------------------------------------
- ELEMEN HTML => satu blok kode dimana ada tag pembuka (<nama tag>) dan tag penutup (</nama tag>).
- TAG HTML => Penanda "<" dan ">".
- ATTRIBUTE HTML
Struktur Dasar HTML :
<html>
<head>..... judul halaman webnya dll</head>
<body>
.......................kontan webnya
</body>
</html>
11. Buka editor text, buka notepad ++ / notepad (bawaan windows).
12. Ketikkan struktur dasar HTML di dalam file notepadnya.
13. Simpan file tersebut dengan nama : coba.html di dalam folder latihan 1 yang sudah di buat pada langkah 9.
14. Tambahkan tag title di antara tag pembuka head dan tag penutup head beserta kontennya.
15. Simpan file, lalu ulangi langkah ke-8.
16. Akses file coba.html dan lihat hasilnya di browser.
TAG HTML
--------------------------------------------------------------------------------------------------
<h>......</h> : membuat font tebal
<i>.......</i> : membuat font miring
<u>......</u> : membuat font underline / garis bawah
<p>......</p> : membuat paragraf baru
<marquee>......</marquee> :membuat text berjalan
<br>.....</br> : membuat baris / enter baru
<hr>.....</hr> : membuat garis horizontal
17. Menambahkan beberapa tag ke dalam file coba.html.
18. Simpan dan lihat hasilnya.
HEADING => Membuat judul.
contoh : judul web, judul berita, judul testimon, dll.
<h1>....</h1>
<h2>....</h2>
<h3>....</h3>
<h4>....</h4>
<h5>....</h5>
<h6>....</h6>
19. Menambahkan TAG HEADING ke dalam file coba.html.
20. Simpan dan lihat hasilnya.
BULLET & NUMBERING
<ul> ul : unordered list
<li>....</li> li : list
<li>....</li>
</ul>
<ol> ol : oldered list
<li>....</li> li : list
<li>....</li>
</ol>
Komentar
Posting Komentar