Pengenalan HTML sebelum merancang sebuah WEB


Apa sih HTML atau (Hypertext Markup Language) itu?? HTML merupakan format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform komputer lainnya tanpa perlu melakukan suatu perubahan apapun. 

Dengan sistem hypertext pada dokumen HTML, pengguna tidak harus membaca suatu dokumen secara berurutan dari atas ke bawah, tetapi dapat menuju ke topik tertentu secara langsung dalam dokumen dengan menggunakan teks penghubung yang akan membawa kita ke suatu topik atau dokumen lain secara langsung atau disebut dengan hyperlink, apa itu hyperlink? tenang sob nanti akan saya jelaskan di artikel selanjutnya... 

HTML merupakan bahasa standard yang digunakan untuk menampilkan dokumen web.   Hal-hal yang dapat dilakukan dengan menggunakan HTML, yaitu:

1. Mengontrol tampilan web page dan content-nya 
2. Mempublikasikan dokumen secara on-line sehingga dapat di akses dari  seluruh dunia 
3. Membuat on-line form yang dapat digunakan untuk menangani pendaftaran, transaksi secara on-line 
4. Menambahkan objek-objek seperti image, audio, video dan java applet. Perbedaan utama dokumen    HTML dengan dokumen pada umumnya adalah 
dokumen HTML memiliki elemen-elemen HTML beserta tag-tagnya. 

1. Elemen HTML

Elemen HTML merupakan komponen penyusun suatu dokumen HTML.  Elemen ini dibagi atas 2 bagian utama, yaitu: 
  • Elemen-elemen <HEAD> yang memberikan informasi tentang dokumen Tersebut 
  • Elemen-elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser.

2. Browser dan Editor 

  • (Browser) Browser merupakan software yang di install pada mesin client yang berfungsi untuk meneterjemahkan tag-tag HTML menjadi halaman web.  Browser yang sering digunakan biasanya Internet Explorer, Netscape Navigator, Mozilla dan Opera. 
  • (Editor) Editor adalah program yang digunakan untuk membuat dokumen HTML, diantaranya MS FrontPage, Notepad, Macromedia DreamWeaver, EditPlus, CuteHTML dan lain sebagainya.

3. Struktur Script HTML

<html>
<head> 
--- bagian head --- 
</head> <body>
 --- bagian body --- 
</body> 
</html>
Nah setelah membaca pengertian dia atas selanjutnya kita akan masuk ke pengertian BASIC TAG HTML

1. Struktur Dasar HTML

HTML digunakan untuk membangun suatu halaman web. Banyak orang 
menyebutnya sebagai suatu bahasa pemrograman, padahal HTML sama sekali bukan 
bahasa pemrograman, tapi merupakan bahasa markup (penandaan), terhadap 
sebuah dokumen teks. Simbol markup yang digunakan oleh HTML ditandai 
dengan tanda lebih kecil ( <) dan tanda lebih besar ( > ) , dan disebut tag.

Tag biasanya merupakan suatu pasangan, yang disebut tag awal dan tag akhir.  
Tag awal dinyatakan dalam bentuk <nama_elemen> dan tag akhir dinyatakan 
dalam bentuk </nama_elemen>.  Ada beberapa  macam bentuk tag yang dikenal 
dalam HTML, yaitu : 
a. Tag berpasangan 
Format : <nama_elemen> teks </nama_elemen> 
b. Tag tunggal 
Format : <nama_elemen> 
c. Tag yang disertai attribut 
Format : <nama_elemen  nama_attribut=argumen> teks </nama_elemen> 
Atribut adalah properti dari suatu elemen HTML

2. HEAD

Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut : 
  • Menyediakan judul dokumen 
  • Menjembatani hubungan antar dokumen 
  • Memberitahu browser untuk membuat form pencarian 
  • Menyediakan metode untuk mengirim pesan ke tipe browserElemen yang mungkin terdapat pada bagian head :  
  • Tag <TITLE>, digunakan untuk memberi judul dokumen. Bentuk umumnya : <TITLE> Judul </TITLE> 
  • Tag <BASE>, digunakan untuk menentukan basis URL sebuah dokumen. Bentuk umumnya : <BASE HREF=”URL”> Contoh :<BASE HREF=”//www.diptavir.tk/”> 
  • Tag <LINK>, digunakan untuk menunjukkan relasi antar dokumen HTML. 
  • Tag <META>, digunakan untuk mendefinisikan informasi-informasi di luar HTML.

3. BODY

Berfungsi untuk menyimpan informasi atau data  yang akan ditampilkan dalam 
web page.  Bentuk Umum  :  

<body bgcolor=”…” background=”…”>

Bgcolor   latar belakang: warnaBackground   latar belakang: gambar

4. Format Document HTML

  • <BR> :  membuat baris baru, tidak memerlukan penutup </BR> 
  • <P align=left|right|center |justify> : memulai paragaraf baru, tidak memerlukan penutup </P> 
  • <HR  align=left|right|center  width = ...  size = ... noshade  color = ... > 
  • <Hn> :  heading sebuah dokumen, nilai n berkisar antara 1 hingga 6. 
  • <PRE> :  membuat tampilan dokumen HTML pada browser sama dengan tampilan padateks editor. Dengan tag <PRE>, maka tag <P> dan tag <BR> tidak diperlukan lagi. 
  • <BLOCKQUOTE> : membuat tampilan menjorok ke dalam seperti identasi. Bentuk umum :  <blcokquote> .... </blockquote>   
Setelah membaca dasar HTML beserta fungsinya saya harap sobat bisa sedikit mengerti apa itu HTML. dan selanjutnya saya akan memberikan contoh cara membuat web. 
Pertama-tama Sobat buka Notepad sobat jika belum ada bisa download dulu DISINI dan coba ketikkan script berikut ini.
<html> 
<head> 
<title>cara diptavir</title> 
</head> 
<body> 
Hallo selamat datang di WEB pertama ku<br> 
Saya belajar membuat WEB<br> 
dan ini adalah web buatanku sendiri lho.
<hr width=75% size=3 color="blue" align=left> 
<h1>selamat datang di WEB pertama ku</h1> 
<h2>selamat datang di WEB pertama ku</h2> 
<p>Selamat datang di WEB pertama ku <h3>Aku membuat WEB di tahun 2017</h3> selamat datang di WEB pertama ku 
<hr> 
<h4>Di buat</h4> 
<h5>2017</h5> 
<h6>di publikasikan 2017</h6> 
<hr> 
No kontak 12345678910 
</body> 
</html>
Setelah itu Simpan dengan nama terserah sobat di sini saya simpan dengan nama contoh.html
Setelah tersimpan sobat bisa lihat hasilnya dengan membuka file contoh.html dan hasilnya akan seperti berikut ini :

Nah itu adalah contohnya dan mungkin sekian dulu untuk Pengenalan HTML sebelum merancang sebuah WEB. untuk selanjutnya kita akan mempelajari tentang cara merubah style Text HTML dan  menyisipkan gambar, tapi di lain waktu ya sob karna kita akan mempelajari sedikit demi sedikit agar bisa di pahami benar-benar.
Sekian dulu artikel dari diptavir jangan bosan-bosan mampir di blog diptavir dan selalu tunggu artikel selanjutnya. 

Subscribe to receive free email updates:

0 Response to "Pengenalan HTML sebelum merancang sebuah WEB"

Post a Comment

Silahkan tinggalkan komentar dengan hal yang bersangkutan dengan topik, komentar spam link aktif tidak akan tampil sebelum di setujui.