Belajar Website HTML Part 2 Dasar-Dasar

Judul      : Belajar Website HTML Part 2 Dasar Dasar
Categori : HTML
Software : Notepad dan Browser
Durasi     : 45 menit
Author     : Amir Alfian


Setelah pulang dari fusal yg melelahkan sekarang saya akan Melanjutkan belajar dari Part 1 Pengenalan HTML, dan sekarang akan membahas tentang dasar-dasar HTML.



Menulis HTML bisa menggunakan software sederhana seperti Notepad atau TextEdit. Selain itu HTML dapat di edit menggunakan Software Profesional seperti :

1. Adobe Dreamweaver
2. Microsoft Ekspression Web
3. CoffeCup HTML Editor

Sebenarnya masih banyak lagi Software Profesional yang dapat digunakan untuk menulis atau mengedit HTML, namun untuk belajar HTML saya menyarankan dan merekomendasikan untuk menggunakan Teks Editor seperti Notepad, karena lebih bagus dalam pembelajaran dan pemahaman mengenai  HTML.

TAHAP 1 : MEMBUKA NOTEPAD
Untuk membuka notepad pada windows :
Start - All Program - Accessories  - Notepad

TAHAP 2 : EDIT HTML DENGAN NOTEPAD
Ketikkan kode HTML anda pada notepad

TAHAP 3 : SIMPAN HTML
Buka notepad dan copy Contoh HTML di atas kemudian save as dan simpan dg file extension .html (indek.html). 

 
TAHAP 4 : JALANKAN HTML DENGAN MENGGUNAKAN BROWSER
Buka file HTML yang sudah anda buat tadi dengan double Klik

 


DASAR DASAR HTML 
Selajutnya kita akan belajar mengenai dasar dasar HTML pada website. Adapun dasar dasar HTML adalah sebagai berikut:

HTML HEADING 
HTML Heading terdiri dari <h1> sampai dengan <h6> tag

Contoh :
<h1>Heading Website 1</h1>
<h2>Heading Website 2</h2>
<h3>Heading Website 3</h3>
<h4>Heading Website 4</h4>
<h5>Heading Website 5</h5>
<h6>Heading Website 6</h6>

Hasil dari tag HTML Heading diatas 

HTML PARAGRAPHS
HTML Paragraph didefinisikan dengan tag <p>

Contoh :
<p>Ini adalah paragraph pertama</p>
<p>Ini adalah paragraph kedua</p>

Hasil dari HTML Paragraph diatas :

HTML LINK
HTML Link didefinisakn dengan tag <a>

Contoh :
<a href="http://www.komputersinau.blogspot.com">Ini adalah Link</a>

Hasil dari HTML Link diatas :

Perhatikan pada teksnya ketika dibuka dengan menggunakan browser, teks akan berubah warna menjadi warna biru dimana ini menujukkan Link.

Dan apabila anda klik pada teks yg berwarna biru makan akan otomatis akan membuka halaman baru yg akan menuju ke alamat web yg di edit pada eidtor HTML 


HTML IMAGES
HTML Images didefiniskan dengan tag <img>
Sebelum anda memasukkan gambar pada HTML Images, pastikan anda sudah menyiapkan gambar yg sudah disimpan dalam satu folder bersama dengan file HTML Image yg anda buat. Dan jangan lupa untuk mengetik juga file extention dari image yg akan anda gunakan contoh (mind_open.jpg).

Contoh :
Disini saya menyiapkan gambar yang akan digunakan yaitu "mind_open" . Dan berikut penulisan tag HTML Image :

<img src="mind_open.jpg" width="185" height="147">

Keterangan : Width digunakan untuk menentukan lebar gambar dan Height untuk menentukan tinggi gambar

Berikut Hasil dari HTML Images :

  











Sepertinya saya cukupkan dahulu untuk pembelajaran dasar-dasar HTML malam ini, karena waktu sudah menunjukkan jadwal pertandingan team kesayangan saya Real Madrid akan segera bertanding.
Dan untuk Update materi selanjutnya akan membahas Element HTML dan Attribute HTML.

Belajar Web HTML Part 3 Format Font

~SEMOGA MENJADIKAN ILMU YANG BERMANFAAT~