HIMANIFO UNIMMA
 Memulai Belajar HTML Web Programming 

14:00:00, 02 November 2020

Web Programming

MEMULAI BELAJAR HTML

Kini tiba saatnya, kalian harus mencoba sendiri membuat dokumen HTML.
Ada 3 pilihan yang bisa kalian pilih, yaitu:
1. Mencoba di Himanifo
2. Mencoba di local komputer tanpa web server
3. Mencoba di local komputer dengan web server

Tapi sebelum saya lanjutkan, apakah kalian sudah membaca artikel sebelumnya??
Pengenalan HTML Web Programming | HIMANIFO UNIMMA

Jika belum, saya sarankan untuk membacanya terlebih dahulu. Khususnya untuk kalian yang belajar dari nol, kalian wajib membacanya terlebih dahulu.

1. MENCOBA DI HIMANIFO

Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama kalian di server Himanifo.

a. Pertama, silahkan copy koding berikut:

<!DOCTYPE html>
<html>
<head>
<title>Praktikum 1 HTML</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

b. Klik tombol "Try Here" di bawah ini.
Try Here >>

c. Paste di kolom  "Try Your Coding". Klik "Run", maka hasilnya akan muncul di bawah.

2. MENCOBA DI LOCAL KOMPUTER TANPA WEB SERVER

Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama kalian di lokal komputer.

a. Buat folder project atau praktikum kalian. 
Contoh:
d:/latihan_webpro/

b. Buka aplikasi text editor kalian, lalu tulis beberapa syntax. 
Contoh:​

<!DOCTYPE html>
<html>
<head>
<title>Praktikum 1 HTML</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

c. Save file to folder project kalian "d:/latihan_webpro/" dengan nama file "praktikum-1.html".

d. Kemudian buka file tersebut dengan browser.
Maka tampilan akan seperti gambar berikut.
belajar web programming

3. MENCOBA DI LOCAL KOMPUTER DENGAN WEB SERVER

Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama kalian di lokal komputer.

a. Pertama, install dan jalankan XAMPP di lokal komputermu.
Cara Install XAMPP di Windows | HIMANIFO UNIMMA

b. Setelah menjalankan XAMPP. Buka folder tempat kalian install XAMPP.
Contoh:
c:/xampp/

c. Kemudian buka directori berikut
c:/xampp/htdoc/

d. Kemudian hapus atau ganti nama file "index.html".
Contoh:
"index.html" rename to
"index_old.html"

e. Buat folder project atau praktikum kalian. 
Contoh:
c:/xampp/htdoc/latihan_webpro/

f. Buka aplikasi text editor kalian, lalu tulis beberapa syntax. 
Contoh:​

<!DOCTYPE html>
<html>
<head>
<title>Praktikum 1 HTML</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

g. Save file to folder project kalian "c:/xampp/htdoc/latihan_webpro/" dengan nama file "praktikum-1.html".

h. Kemudian buka browser kalian​​​​​, dan pada address bar coba ketikkan
"http://localhost/".
Lalu pilih folder project kalian 
"http://localhost/latihan_webpro/".
Kemudian pilih file project kalian 
"http://localhost/latihan_webpro/praktikum-1.html". ​​​​​
Maka tampilan akan seperti gambar berikut.
memulai_belajar_html_web_programming_load_praktikum

Selamat! ????
Kita sudah berhasil membuat halaman web pertama dengan HTML.

TIPS NAMA FOLDER

Ada beberapa hal yang perlu diperhatikan dalam membuat folder penempatan file halaman web:

1. Lokasi Folder Web Server
HTDOCS adalah folder web server untuk menaruh file-file latihan kita nantinya. Saat kita memanggil alamat "http:/localhost/" pada browser maka yang tampil adalah hasil kompilasi dari file-file yang berada pada folder HTDOCS ini.

2. Hindari Beberapa Hal..
Nama folder biasanya akan tercantum pada URL, maka sebaiknya hindari menggunakan spasi dan simbol (selain _ dan - ) pada nama folder, agar URL yang dibentuk lebih bagus.
Spasi dan simbol (selain _ dan - ) pada URL, biasanya akan otomatis diubah menjadi kode, misalnya spasi berubah menjadi %20.

TIPS NAMA FILE

Ada beberapa hal yang perlu diperhatikan dalam membuat file halaman web:

1. Ekstensi File
Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .php (untuk php). Jika tidak menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web browser.

2. Nama Khusus Homepage
Jika kita ingin membuat halaman untuk homepage, maka sebaiknya gunakan nama index.html (untuk html) atau index.php (untuk php). Karena ia akan otomatis dibuka saat website dikunjungi.
Contoh: 
Kita membuka "himanifo.my.id" maka file HTML yang akan dibuka adalah index.html.
Sedangkan file PHP yang akan dibuka adalah index.php

3. Hindari Beberapa Hal..
Nama file halaman web biasanya akan tercantum pada URL, maka sebaiknya hindari menggunakan spasi dan simbol (selain _ dan - ) pada nama file, agar URL yang dibentuk lebih bagus.
Spasi dan simbol (selain _ dan - ) pada URL, biasanya akan otomatis diubah menjadi kode, misalnya spasi berubah menjadi %20.

MUDAH KAN?? SELANJUTNYA..

Basic HTML Web Programming | HIMANIFO UNIMMA →

Jika ada pertanyaan bisa gabung diskusi dibawah atau kontak langsung
Mail :
ajiwahyu12592@gmail.com

#Himanifo Unimma
#Memulai Belajar HTML
#Belajar Web Programming
#Himpunan Mahasiswa Jurusan Teknik Informatika

Gabung Diskusi