Tutorial Belajar HTML Dasar Untuk Pemula Bag. 5

TAG FONT

Tag <font> digunakan untuk megubah style, ukuran dan warna teks pada halaman web. Tag ini mempunyai attribut size, color dan face untuk memanipulasi font. Tag <basefont> dapat digunakan untuk membuat semua teks ke ukuran, jenis huruf dan warna yang sama.
Tag font dan base font sering digunakan dalam dokumen css yang akan dibahas pada artikel selanjutnya

Size

Ukuran dari huruf dapat diset menggunakan atribut size. Range nilai yang diterima adalah 1 (paling kecil) sampai 7 (paling besar). Ukuran defaultnya adalah 3
Kode berikut akan membuat sebuah paragraf yang semua teksnya berukuran 5, lebih besar dari ukuran normal.
<p><font size=”5″>
Ini paragraf dengan teks berukuran 5
</font></p>

Color

Atribut ini dunakan untuk mengatur warna font. Contoh kode berikut :
<font size=”5″ color=”#990000″>
Teks ini berwarna hexcolor #990000
</font>
<br />
<font color=”red”>Teks ini berwarna merah </font>

Face

Atribut ini digunakan untuk memilih jenis atau nama font yang telah terinstal di sistem. Perlu diwaspadai, jika anda memilih menggunakan font yang tidak umum, kemudian halaman web itu ditampilkan pada komputer lain yang tidak terinstal font yang digunakan maka web browser akan menampilkannya dengan font standard browser, umumnya jenis Times New Roman atau courier New.
Contoh berikut menampilkan  teks “Paragraf ini mempunyai font sendiri…”.
Perhatikan bagaimana nama font digunakan :
<p><font face=”Bookman Old Style, Book Antiqua, Garamond”>
Paragraf ini mempunyai font sendiri…</font></p>
Pada kasus diatas, browser akan menerapkan jenis font Bookman Old Style terhadap paragraf . jika font tersebut tidak ditemukan maka diganti oleh Book Antiqua dan jika font ini tidak ter-instal maka diganti oleh Garamond. Jadi, anda dapat menentukan jenis font utama berikut alternatifnya.

Basefont

Dengan tag basefont anda dapat mengatur font default untuk halaman web yang dibangun. Tag ini sangat direkomendasikan bagi para pengembang dan perancang halaman web untuk meminimalkan peluang tampilnya halaman web tidak sesuai rencana dan rancangan karena tidak adanya font pilihan pada komputer pengunjung (pengguna).
Contoh penggunaan tag <basefont> adalah :
<html>
<body>
      <basefont size=”2″ color=”green”>
              <p>paragraf ini mempunyai font sendiri…</p>
               <p>paragraf ini mempunyai font sendiri…</p>
              <p><font size=”6″>Paragraf ini mempunyai font sendiri…</font></p>
                <p>paragraf ini mempunyai font sendiri…</p>
</basefont>
</body>
</html>

Tutorial Belajar HTML Dasar Untuk Pemula Bag. 4

TAG MEMFORMAT DOKUMEN

sebuah dokumen yang baik tentu harus memenuhi banyak faktor, salah satunya menampilkan dokumen web mengikuti suatu format yang menyenangkan pembacanya, dan jelas. HTML menyediakan beberapa tag untuk memformat teks dari suatu dokumennya. Tag untuk memformat teks dari suatu dokumennya. Tag tag ini bekerja seperti pada sebuah word prosessor, anda dapat menebalkan, memberikan garis bawah, mengubah warna teks, memberikan penomoran dan justifikasi teks.
Perhatikan contoh berikut :
<p> Contoh <b>Teks bold</b> </p>
<p> Contoh <em>Teks Emphasized</em> </p>
<p> Contoh <strong>Teks Strong</strong> </p>
<p> Contoh <i>Teks Italic</i> </p>
<p> Contoh <sup>Teks Superscripted</sup> </p>
<p> Contoh <sub>Teks Subscripted</sub> </p>
<p> Contoh <del>Teks Struckthrough</del> </p>
<p> Contoh <code>Teks Computer code</code> </p>
Lihat lah hasil dari script diatas dan simpulkan !

Ganti Baris

Ganti baris atau line break merupakan salah satu tag yang berbeda penggunanya. Line break mengakhiri sebuah baris dan langsung berpindah pada baris berikutnya, tidak memberikan baris kosong seperi <p>. Tag <br> digunakan untuk keperluan ini. Penempatan <br> sama dengan menekan enter pada word processor. Tag <br> tidak mempunyai pasangan </br> sehingga untuk menjaga kemudahan migrasi ke XML sering ditulis </br> meskipun ini bukan suatu keharusan.
Berikut contoh penggunaan tag <br /> di dalam tag <address>
<address>
Nama Anda<br />
Departemen Teknik Informatika <br />
Fakultas Teknik <br />
Universitas Trunojoyo <br />
</address>
Lihatlah hasilnya akan ada jarak seperti menekan enter pada hasil script di atas !

Tag Pre-Format

Pada HTML, Jika anda menulis teks berikut :
Saya sedang
Belajar HTML
Untuk Membuat Aplikasi
Database Berbasis Web
Maka web broser akan memberikan hasil :

Saya sedang Belajar HTML Untuk Membuat Aplikasi Database Berbasis Web
Tidak ada pergantian baris meskipun tombol Enter ditekan setiap akhir baris. Ini merupakan ciri khusus dari HTML. Adakah suatu cara agar penekanan Enter dianggap sebagai ganti baris ?
Tag pre-format <pre> akan menampilkan halaman web sebagaimana anda menulisnya. Penekanan Enter, Spasi lebih satu kali, dan tab langsung diakomodasi oleh web browser dan memberikan hasil yang diharapkan.
Jika contoh di atas diberikan tag <pre> sebelum dan sesudahnya, tombol tab ditekan di awal baris serta diberikan banyak spasi, sehingga menjadi : 
<pre>
Saya sedang
               Bel    ajar HTML
                                      Untuk   mem    buat    aplikasi
Database berbasis web
</pre>
Lihatlah hasilnya akan berbeda tanpa menggunakan tag pre !

Garis Datar

Garis datar (horizontal) dapat digunakan sebagai salah satu cara memisahkan dua badian data, memudahkan penelusuran dokumen dan sekedar hiasan yang memperindah halaman web. Tag <hr /> mewakili kepentingan ini dan akan menampilkan garis datar sepanjang layar browser. Tag ini bersifat khusus seperti <br />, tidak mempunyai tag penutup sehingga sering ditulis <hr />
Contoh script :
<hr />
Kami belajar menggunakan haris datar
<hr /> <hr />
dalam dokumen web <hr />
untuk memperindah halaman ini <hr />
Lihatlah hasilnya di browser kamu dan kamu akan melihat garis secara horizontal !

Tutorial Belajar HTML Dasar Untuk Pemula Bag. 3

Memahami Tag HTML

Tag Adalah Embedded Command dalam dokumen HTML. Dengan menempatkan suatu tag secara tepat, anda memberitahu web browser apa yang akan ditampilkan dan bagaimana menampilkannya. Tag hadir dalam bentuk berpasangan, tag pembuka <tag> dan diikuti oleh tag penutup </tag>,
meskipun dalam penggunaannya ada tag yang dapat digunakan secara tunggal.
Tag sendiri tidak bersifat case-sensitive, namun sebaiknya sebagai pengembang web sangat dianjurkan anda menggunakan huruf kecil untuk nama tag agar lebih mudah memahami dokumen web nantinya. Selain itu, pada dokumen XHTML dan Dynamic HTML, penggunaan huruf kecil merupakan keharusan. Sekali lagi, pastikan tag ditulis berpasangan, jika tidak mungkin saja web browser akan menampilkan halaman tidak sesuai harapan.

Tag Heading

HTML menyediakan heading yang dapat digunakan untuk membuat judul atau sub juduldari suatu halaman, diwakili oleh tag <hx>, dimana x adalah nomor heading. Nomor heading mempunyai nilai 1 sampai 6, heading bernilai 1 memberikan judul palin besar dan heading bernilai 6 menampilkan sub judul paling kecil. Kode berikut memperlihatkan penggunaan heading :
<body>
   <h1>Heading</h1>
   <h2>Merupakan</h2>
   <h3>Cara</h3>
   <h4>Mudah</h4>
   <h5>Membuat</h5>
   <h6>Judu dan sub judul</h6>
</body>
Gambar di bawah ini merupakan tampilan dari kode diatas, perhatikan berapa besar perbedaan satu heading dengan heading lainnya. Heading mana yang akan digunakan sangat tergantung pada kebutuhan. Anda tentu akan jarang sekali menggunakan <h1> sebagai sub judul

Atribut

Atribut dapat ditambahkan ke dalam sebagian besar tag dan digunakan untuk menformat tag mengikuti kaidah tertentu. Anda dapat men justify paragraf, meletakkan heading ditengah dan sebagainya berikut ini beberapa atribut yang dapat ditempatkan didalam banyak tag html dan sering digunakan :
Atribut = “Nilai”
Align = “Center”,”Left”,”Right”,”Justify”
valign – “Top”,”Middle”,”Bottom”
Atribut ditempatkan langsung setelah tag pembuka didalam tanda lebih kecil < dan lebih besar >, bukan diantara pembuka dan penutup tag. Atribut memberikan beberapa style dan format terhadap tag. Cara memformat dokumen web paling efektif adalah menggunakan Cascading Style Sheet (CSS)  yang dipadukan dengan HTML murni. Anda akan mempelajari CSS pada artikel lain blog ini.
Contoh berikut menunjukkan cara menggunakan atribut align milik tag <h1>
<h1 align=”center”> Heading diletakkan di tengah </h1>
Hasil yang diperoleh adalah tampilnya teks “Heading diletakkan ditengah” tepat ditengah halaman web secara horizontal.

 Tag Paragraf <p>

Tag <p> digunakan untuk mendefinisikan paragraf. Tag paragraf akan menambahkan satu baris kosong sebelum baris pertama dan setelah baris terakhir paragraf.
Kode HTML berikut membuat dua paragraf halaman web :
<p>MySQL, sampai saat ini adalah database server dengan performance tercepat, sayangnya fitur fitur database modern belum hadir di sini. </p>
<p>MySQL dapat diperoleh dari http://mysql.com.</p>
Lihatlah hasil dari kode html diatas dan simpulkanlah sendiri fungsi dari masing masing tag !

Tutorial Belajar HTML Dasar Untuk Pemula Bag. 2

Elemen HTML

    Suatu elemen terdiri dari 3 bagian dasar, yaitu tag pembuka, isi dari elemen dan terakhir tag penutup. Sebagai contoh, tag <p> yang digunakan untuk membuat paragraf baru.
  • <p> – Tag pembuka paragraf
  • Isi elemen – Isi atau teks dari paragraf
  • </p> – Tag penutup
Setiap halaman web sebaiknya mempunyai minimal 4 elemen utama, yaitu html, head, title, dan body.

Elemen <html>

Tag <html> memulai dan diakhiri setiap halaman web. Perang utama <html> adalah membungkus semua kode HTML. Tag <html> diletakkan pada bagian paling atas file halaman web, mempunyai penutup </html> yang diletakkan di bagian paling bawah file. Tag ini tidak boleh dilupakan saat menulit kode HTML.
Sebagai contoh, tulis dua baris teks berikut menggunakan text editor kesukaan anda dan simpan hasilnya dengan nama 01.html – file file halaman web umumnya berekstensi .html atau .htm karena dua ekstensi inilah yang dikenal dengan baik oleh web browser.
<hml>
</html>
Berikutnya, buka file tersebut menggunakan Web browser. Apa yang diperoleh? Anda tidak melihat teks apapun, tidak pula teks <html>   </html>, hanya halaman web kosong. Web browser mengetahui bahwa tag <html> digunakan untuk menunjukkan bahwa file yang dibuka adalah file HTML. Ini berlaku terhadap tag lain, teks tag tidak tampil tetapi tag mengubah dan mempengaruhi perilaku dari browser.

Elemen <head>

Secara garis besarhaliman web  (HTML) terdiri dari dua bagian, yaitu bagian head yang merupakan header halaman dan body sebagai isinya. Elemen <head> diletakkan antara elemen <html> dan isi dari halaman web. Elemen ini berfungsi di belakang layar, apa yang dikerjakannya tidak terlihat pada halaman web. Tag tag yang diletakkan didalam elemen head memang tidak berfungsi menampilkan sesuatu pada web browser. Anda dapat menempatkan elemen <title> didalam head yang hasilnya langsung terlihat di title bar web browser.
Berikut ini adalah contoh halaman web yang hanya mempunyai bagian header dan saat dibuka dengan web browser tidak menampilkan apapun kecuali pada title bar tertulis “Situs Pribadi Saya” :
<html>
<head>
<title>Situr pribadi Saya</title>
</head>
</html>

Elemen <title>

Tag ini harus diletakkan di dalam elemen <head> untuk memberikan judul dari halaman web. Teks yang dijadikan judul di tulis di antara <title> dan </title>

Elemen <body>

Elemen <body> adalah tempat dimana semua isi dari halaman diletakkan. Isi halaman dapat berupa teks, gambar, suara, tabel bahkan video. Berikut ini adalah contoh halaman web yang mempunyai 4 tag yang telah dibahas.
<html>
<head>
   <title>Situs Pribadi Saya</title>
</head>
<body>
   Semua isi halaman web diletakkan di sini ! 
</body>
</html>
Dengan 4 elemen tersebut, ada sekarang dapat membuat dokumen HTML sederhana dan menuliskan sesuatu sebagai isi halaman web.

Tutorial Belajar HTML Dasar Untuk Pemula Bag. 1

Dasar Belajar html – HTTP (Hypertext Transfer Protokol) meupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokument dokumet web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karea HTML berfungsi untuk memperindah file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atau sering disebut sebagai tag tag pada file teks biasa tersebut.

Pembuatan suatu dokumen HTML merupakan pekerjaan mudah, meskipun begitu persiapan yang baik tentu akan memberikan hasil yang baik pula. Sebelum memulai penulisan baris baris kode HTML pastikan anda mempunyai dua software berikut :
– Text Editor sederhana. Semua sistem operasi telah menyediakan tool ini. Di windows anda dapat menggunakan notepad sedangkan di linux tersedia gEdit, mcedit, pico, dan vi.
– Web Browser untuk menampilkan dokumen web yang dibuat. Di windows tersedia windows explorer, Opera, dan Firefox dan linux anda dapat menggunakan Firefox dan conqueror.

 Saat ini dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh html sebelumnya. Beberapa fitur yang tersedia pada html5 antara lain sebagai berikut.

  • Canvas. Memungkinkan pembuatan gambar dalam kanvas, jadi gambar tidak lagi diambil dari gambar utuh melainkan bisa disusun sendiri baik menggunakan program paint
  • Header. Berguna untuk menyatakan suatu judul yang bisa diisi dengan elemen logo dan nama perusahaan
  • footer. Merupakan kebalikan dari header. sebagai catatan kaki , elemen ini berguna untuk menaruh informasi di bagian bawah halaman web
  • time. elemen ini berguna untuk menyajikan informasi tentang waktu
  • audio. Memungkin penyajian player untuk memutar suara
  • video. memungkinkan player untuk memainkan film

 Secara prinsip, fitur pada html dapat dikelompokkan ke dalam :

  • Struktur halaman
  • peresentasi visual
  • peranti penyaji gambar
  • pendukung media
  • peningkatan koneksi dengan javascript

 Tag html biasanya berupa tag tag yang berpasangan dan ditandai dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag <contoh> adalah</contoh>. dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut atribut untuk mengatur elemen itu. JAdi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut :

<contoh atribut1=”nilai_atribut1″ atribut2=”nilai_atribut2″>
 Dalam penulisan tag html tidaklah case sensitif artinya pengguna huruf kecil ataupun capital tidaklah menjadi masalah.

Sampai disini saja pembahasan Dasar belajar hmtl untuk kali ini silahkan anda tunggu lanjutan untuk artikel ini yaitu tentang struktur dasar dokument html, disana kita akan mulai belajar membuat script html untuk menampilkan text ke dalam website kita.

Semoga anda memahami dasar belajar html untuk kali ini semoga artikel kali ini yang berjudul dasar belajar html bermanfaat untuk anda!

keyword: dasar belajar html, tutorial belajar html, belajar html untuk pemula, tutorial belajar html untuk pemula, belajar html, belajar html untuk pemula, pembahasan dasar html, dasar html, pemula