PENGENALAN HTML

 1.   Format Penulisan HTML

Untuk membuat suatu halaman HTML standar digunakan tag <html>, <head>,

<body> beserta tag penutupnya masing-masing. Susunan tag – tag tersebut membentuk dokumen HTML sebagai berikut :

Contoh :

Memformat Bentuk Tulisan dalam HTML ( penebalan, penulisan miring dan garis bawah pada font).Simpan dengan nama bentuk tulisan.html

Gambar Contoh skrip format penulisan

Contoh :

Simpan dengan nama superscript dan subscript.html

Gambar Contoh skrip format penulisan

2   Memulai Membuat Dokumen dengan Format HTML

Langkah – langkah untuk memulai membuat dokumen HTML sebagai berikut :

1.  Buka notepad++ sebagai editor dokumen HTML.

2.  Buat skrip sederhana seperti di bawah ini di notepad++ :

Gambar 1.2 Format Penulisan HTML

3.  Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .htm atau

.html

Path directory : …./nama_folder/xxx.hmtl

Gambar 1.3 Format Penyimpanan HTML

4.  Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen tersebut menggunakan web  

      browser. 

     Dengan klick Run – Launch in IE

Gambar 1. 4.Tampilan Hasil Eksekusi Contoh

3.  Tag Dasar dalam HTML

A. Heading

Heading merupakan sekumpulan kata yang menjadi judul atau sub judul dalam dokumen HTML, dengan berbagai ukuran yang berbeda.

Pada dasarnya untuk menyatakan suatu Heading, digunakan tag <Hx> dimana x

adalah level 1 sampai 6. Tag Heading atau <Hx> adalah tag berpasangan, yaitu tag yang mempunyai tag awal <Hx> dan tag penutup </Hx>

Format : <H1>...........</H1> sampai <H6>.......</H6>

Contoh :

Simpan dengan nama file heading.html


Gambar Menggunakan Heading

B.  Paragraf

a. Melakukan Formating Paragraf

Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan menyajikan informasi-informasi  yang  diperlukan.  HTML  juga  mendefinisikan  elemen  khusus, untuk mendefinisikan teks dengan makna khusus.

HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.

Elemen format yang dirancang untuk menampilkan jenis khusus dari teks:

•        teks tebal               : menggunakan tag <b>

•        teks penting           : menggunakan tag <strong>

•        teks miring             : menggunakan tag <i>

•        teks menekankan    : menggunakan tag <em>

•        teks menandai        : menggunakan tag <mark>

•        teks kecil               : menggunakan tag <small>

•        teks menghapus     : menggunakan tag <del>

•        teks memasukkan   : menggunakan tag <ins>

•        subscript / pangkat dibawah        : menggunakan tag <sub>

•        superscripts / pangkat di atas      : menggunakan tag <sup>

       Contoh :

        Simpan dengan nama file format paragraf.html



Gambar Skrip contoh format paragraf


b. Menggunakan Line Break

Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu tidak berlaku dalam penulisan dokumen HTML. Seberapa banyak kita memencet tombol Enter, maka tidak kan dianggap 1 pun.

Dalam HTML tag Line Break dapat digunakan untuk membuat baris baru layaknya fungsi tombol Enter pada keyboard. Line break menggunakan tag <br>

Contoh :

Simpan dengan nama file line break.html



Gambar Contoh penggunaan Line Break

c. Preformatted Text

Jarak antar kata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu spasi. Agar browser web menampilkan sesuai dengan dokumen web tersebut di dalam editor teks, maka teks yang bersangkutan harus di beri tanda tag <pre> di awalnya dan </pre> di akhir teks. Dengan tag <pre>, yang mempunyai kepanjangan  "preformatted"  teks  akan  di  tampilkan  dalam  browser  dengan

ukuran font dengan lebar - fix. Tag ini juga akan menjaga spasi, baris baru, dan tap sesuai dengan aslinya pada saat di tampilkan dalam browser.

Contoh :

Simpan dengan nama file preformarted.html :





Gambar Contoh skrip penggunaan preformatted

e.   Mengolah Properti Dari Font

Saat proses koding, ada kalanya kita harus melakukan pewarnaan, atau bahkan menentukan jenis huruf dari font yang kita pakai dengan alasan tertentu, mungkin karena info penting agar lebih bisa diperhatikan dll. Kita dapat menggunakan tag style="property:value" untuk mengubah style property dari font. Gunakan atribut style untuk elemen styling HTML

•        background-color untuk warna latar belakang

•        color untuk warna teks

•        font-family untuk font teks

•        font-size untuk ukuran teks

•        text-align untuk perataan teks

Contoh :

Simpan dengan nama file property text.html


Gambar Contoh skrip property text

f. Membuat garis Horizontal

Garis horizontal (horizontal line) digunakan untuk memisahkan halaman web secara visual. Tag yang digunakan adalah <hr>. Beberapa atributnya adalah ALIGN, SIZE, dan WIDTH. Tag hr seperti halnya tag br (<br>) adalah tag yang beridiri sendiri. Jadi tidak perlu ditutup dengan tag penutup.

Contoh :

Simpan dengan nama file penambahan garis horizontal.html


Gambar Contoh skrip untuk penambahan garis horizontal

C.  List

List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list, unordered list dan definition list.

a.  List Tanpa Urutan (Unordered Lists)

Unordered list adalah metode mengurutkan daftar dengan menggunakan simbol atau special character pada HTML. nama lain dari unordered list sendiri adalah bullet list. Bullet atau onordered list ini umumnya digunakan apabila kita ingin membuat suatu daftar yang terlepas dari suatu urutan-urutan tertentu. Untuk list jenis ini, pembuatannya sangat mirip dengan Ordered list, hanya saja ada perbedaan pada jenis synthax yang digunakan dimana unordered list akan menggunakan <ul>.

Contoh :

Simpan dengan nama file unodered list.html

 


Gambar Contoh skrip untuk penggunaan Unordered List

b.  List Berurut (Ordered Lists)

Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka, abjad dan angka romawi pada HTML. Dalam ordered list ini akan ada dua jenis elemen yang dibutuhkan yaitu <ol> yang merupakan singkatan ordered list dan

<li> yang merupakan singkatan list item

Contoh :

Simpan dengan nama file odered list.html


Gambar Contoh skrip untuk penggunaan Ordered List


c.  Definition List

Definition   list   merupakan   jenis   daftar   yang   umumnya   digunakan   untuk mendefinisikan sesuatu. Definition list sendiri sebenarnya sudah terlepas dari ketiga daftar diatas, dalam artian mempunyai jenis opening dan closing tag yang benar- benar berbeda dari tiga jenis daftar diatas. Definition list akan menggunakan tiga jenis tag : Diawali dengan <dl> yang merupakan singkatan definition list; <dt> yang merupakan singkatan definition term (digunakan untuk kata yang akan didefinisikan); <dd> definition description yang merupakan penjelasan dari suatu istilah (<dt>).


LATIHAN :

A. COBA TAMPILKAN SEPERTI INI :


B. COBA TAMPILKAN SEPERTI INI :




Komentar

Posting Komentar

Postingan populer dari blog ini

Cascading Style Sheet (CSS)

Gambar
  1.       Pengertian Selector, Property dan Value pada CSS Gambar 5.1 Selector, Property dan Value pada CSS A.     Selector Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk „mengaitkan‟ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS. Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”. Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya. B.      Property Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS mem...
Baca selengkapnya

PENANGANAN EKSEPSI. JAVA

Gambar
1. PENANGANAN EKSEPSI TRY  ASSALLAMMUALIKUM  WR WB Sebelum kita mengoding kita buka terlebih dahulu aplikasi NetBeans ( KLIK NEW PROJECT ( PADA CATEGORI PILIH “ JAVA” ( PADA  PROJECT PILIH “JAVA APPLICATION” ( PADA PROJECT NAMA KITA ISI “ PenangananError”( PADA LIBRARIES FOLDER KLIK BROWSER LAJU PILIH  NetBeans Project ( PADA CRATE MAIN CLASS KITA TULIS “ array.Array” ( LALU KLIK FINISH SCRIPT : import java.util.Scanner; /**  *  * @author DIAN  */ public class PenangananError {     public static void main(String[] args) {         int a,b;         double c=0;           Scanner input = new Scanner(System.in);           System.out.print("Nilai A =");         a = input.nextInt();         System.out.print("Nilai B =");         b = input.nextInt();         ...
Baca selengkapnya

MENGHITUNG NILAI. JAVA

Gambar
ASSALLAMMUALIKUM  WR WB Sebelum kita mengoding kita buka terlebih dahulu aplikasi NetBeans ( KLIK NEW PROJECT ( PADA CATEGORI PILIH “ JAVA” ( PADA  PROJECT PILIH “JAVA APPLICATION” ( PADA PROJECT NAMA KITA ISI “ PERTEMUAN 3”( PADA LIBRARIES FOLDER KLIK BROWSER LAJU PILIH  NetBeans Project ( PADA CRATE MAIN CLASS KITA TULIS “ pertemuan.pkg3.PERTEMUAN3” ( LALU KLIK FINISH SCRIPT : package pertemuan.pkg3; import java.util.*; /**  *  * @author DIAN  */ public class PERTEMUAN3 {     /**      * @param args the command line arguments      */     public static void main(String[] args) {         // TODO code application logic here         Scanner input = new Scanner(System.in);                 String nama;         int nilai2;         double nilai1, nilai3;      ...
Baca selengkapnya