-->

Senin, 15 September 2014

Membuat Web dengan Notepad

 Pengertian dan Fungsi Html

Hyper Text Markup Launguage atau biasa disebut dengan HTML merupakan kumpulan kode untuk membangun web yang berfungsi untuk menampilkan berbagai informasi yang dapat ditemukan dalam sebuah penjelajah web.

HTML disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuat sebuah link dan dapat berpindah dari satu hataman ke halaman yang lainnya dengan hanya meng-klik text tersebut. Kemampuan inilah yang disebut hypertext, meskipun dalam kenyataannya tidak hanya text saja yang dapat dirubah menjadi llink.
HTML disebut markup language karena bahasa HTML menggunakan tanda atau mark, untuk menandai bagian-bagian dari text. Misalnya text yang ada di antara tanda tertentu akan menjadi tebal, dan diantara tanda lainnya tampak besar.Tanda tersebut disebut tag.
Untuk membuat sebuah halaman HTML, terlebih dahulu anda harus mengetahui dasar perintah HTML, sehingga dokumen yang anda buat dapat membentuk sebuah halaman web yang dimengerti oleh orang lain ketika dibuka dengan web browser seperti Mozilla firefox, Google crome dan web browser lainnya.(http://www.patartambunan.com/pengertian-html-dan-fungsi-bahasa-html/)

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :
  1. Membuat halaman web.
  2. Menampilkan berbagai informasi di dalam sebuah browser Internet.
  3. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
    http://mypctutorel.blogspot.com/2013/11/pengertian-dan-fungsi-html-hypertext.html  

 Tag-tag dalam HTML dan fungsinya

Html  : Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML
Head : Kepala dari dokumen HTML
Title : Judul dari dokumen HTML yang ditampilkan pada judul jendela browser
Body : Tag untuk menampilkan isi dokumen HTML
H2 : Header 2, sub judul sebuah web
p : Membuat paragraf
Center :Tag html berfungsi untuk menampilkan teks dengan posisi horizontal ditengah
Hr : Tag html berfungsi untuk membuat suatu garis horizontal
Align : Menentukan posisi garis dihalaman web
Width :Mengatur panjang garis dalam satuan pixel
Noshade : Menyatakan bahwa garis yang kita buat tidak menngunakan bayang-bayang 3D.
Pre : Preformated Text, tag html berfungsi untuk menampilkan teks apa adanya sesuai text editor
H1 : Header 1, untuk judul sebuah web
br : Tag untuk ganti baris
a : Tag html yang berfungsi untuk menghubungkan ke internal atau ekserrnal halaman web
href :  Atribut yang di tambahkan kedalam tag a dimana value dari href ini adalah url
ol : Order List, tag html berfungsi untuk membuat nomor daftar urut, bisa berupa angka, huruf atau                       angka romawi.
li : List Item, tag yang berada di elemen OL dan UL yang berbentuk list
Ul : Unorder List, tag html berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet)
dl : Mendefinisikan sebuah daftar isi
dd : Mendefinisaikan deskripsi dari item dalam daftar definisi <penjelasan>
dt : Mendefinisikan istilah (item) dalam daftar definisi <istilah>
Center : Tag html berfungsi untuk menampilkan teks dengan posisi horizontal ditengah
b : Bold, tag html yang berfungsi untuk mempertebal teks
img : Tag html untuk menampilkan gambar
src : Source, menyatakan lokasi penyimpan gambar atau lokasi dimana gambar diambil.
Border : <mengatur ketebalan garis>
tr : Table Row, mendefiniskan baris pada tabel
table : Tag yang berfungsi untuk membuat suatu data yang terdiri dari baris dan kolom
th : <judul table / otomatis bold>
td : <penampilannya td tebal>
Font : Tag html berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf
Size : Untuk merubah ukuran huruf
Face : Untuk merubah jenis huruf
cellpadding : jarak tulisan/konten dengan garis cell (2 pixel)
cellspacing : jarak spasi antar cell (2 pixel)
bgcolor : warna dasar (#ffffff = putih)
rowspan : Menggabungkan baris
td : Table Data, terletak di dalam tag TR, yang berfungsi untuk memasukkan data-data
collspan : Menggabungkan kolom
div : suatu element yang di gunakan untuk mengelompokan suatu element atau tag tag agar menjadi                       suatu group
( http://ilmuduniainformatika.blogspot.com/2013/09/fungsi-fungsi-tag-dalam-html.html)

Setiap kode selalu diapit oleh tag, misalnya untuk membuka kode HTML maka di gunakan tag<html> dan untuk menutup ditandai dengan tag penutup </html>.

Langkah-langkah membuat HTML

Untuk belajar membuat HTML, anda membutuhkan 2 buah program aplikasi yaitu HTML editor dan web browser. Untuk HTML Editor, anda dapat menggunakan yang paling mudah dan mungkin sudah ada di komputer anda yaitu Notepad. Sedangkan untuk browser, silahkan nanti gunakan Internet Explorer atau Mozilla Firefox yang mungkin juga sudah ada di komputer anda.
Jadi anda bisa langsung mempraktekkan bagaimana cara membuat HTML dari yang paling dasar.
 Notepad nantinya akan kita gunakan mengetikkan kode-kode atau tag HTML. Sedangkan web browser atau biasa disebut “browser” saja, akan kita gunakan untuk melihat hasil halaman HTML yang sudah kita buat.
Berikut adalah cara membuat HTML dasar, silahkan ikuti langkah-langkah berikut ini.
Buka aplikasi Notepad di komputer anda lalu ketikkan kode HTML berikut ini :
1<html>
2<head>
3<title>Belajar HTML</title>
4</head>
5<body>
6Hallo, selamat belajar HTML.
7</body>
8</html>
Catatan : Nomor yang muncul di setiap baris tidak perlu anda ketik, itu hanya tampilan untuk menunjukkan nomor baris kode yang ada. Jadi ketikkan seperti gambar berikut ini :



Selanjutnya silahkan klik menu File-Save As untuk menyimpan file yang anda buat. Simpan dokumen/file diatas dengan nama “latihan.html”. Pastikan anda mengetikkan “latihan.html” (tanpa tanda petik) ketika menyimpan, karena jika tidak maka file yang tersimpan otomatis menjadi file dengan ektension “txt”.



Kemudian tutup aplikasi Notepad anda. Lalu buka windows explorer dan cari dimana file tadi anda simpan. Jika sudah ditemukan, silahkan buka file HTML tersebut dengan cara memilih dan klik double.


Jika sudah benar, maka seharusnya file tersebut otomatis akan dibuka dengan menggunakan aplikasi browser yang ada di komputer anda seperti Internet Explorer atau Mozilla Firefox. Dan jika menggunakan Firefox tampilan akan menjadi seperti berikut.


Sampai disini anda diharapkan sudah mampu dan mengerti tentang bagaimana cara membuat HTML. Artinya anda tahu dimana mengetikkan kode HTML lalu menyimpannya dan bagaimana cara melihat tampilan HTML yang anda buat melalui browser. Selanjutnya anda tinggal mengikuti tutorial HTML dan begitu melihat contoh kode HTML yang diberikan maka anda tahu bagaimana mencobanya.
Pada tahap belajar HTML yang lebih jauh, anda dapat menggunakan software editor HTML seperti Dreamweaver. Dengan menggunakan editor yang memang khusus untuk HTML, anda akan banyak dipermudah karena tersedia berbagai bantuan untuk membuat HTML yang lebih kompleks.
 ( http://kuliah.imadewira.com/cara-belajar-membuat-html-dasar/)