FORMAT TEKS HALAMAN WEB

BAB 2 : FORMAT TEKS HALAMAN WEB

A.     STRUKTUR HTML
1.      Elemen Halaman
Elemen HTML adalah bagian-bagian pembentuk halaman web yang meliputi head, body, title, link, text, paragraph, list, dan sebagainya. Tag merupakan bentuk simbol berbentuk “<” sebagai tanda awal penulisan elemen dan diakhiri tanda “>” sebagai tanda akhir penulisan sebuah elemen. Format penulisan sebuah elemen adalah sebagai berikut.
<tag_awal_nama_elemen>
“isi script program html”
</tag_akhir_nama_elemen>
Tidak semua elemen dalam dokumen HTML dalam penulisannya harus menggunakan tag awal dan akhir secara berpasangan. Contohnya adalah sebagai berikut:
~ untuk mencetak garis horizontal menggunakan tag <hr>
~ untuk mencetak kalimat pada baris selanjutnya menggunakan tag <br>
~ penomoran sebuah daftar teks menggunakan list item dengan tag <li>
~ pembuatan format teks dalam bentuk paragraph menggunakan tag <p>
Kelebihan dokumen web berbasis HTML adalah kemampuan untuk mendukung penulisan script bahasa pemrograman web lainnya dalam badan HTML seperti Vbscript, JavaScript, PHP, ASP, dan Ajax.
2.      Bagian Head
Bagian head memiliki fungsi untuk memberikan informasi tentang halaman web itu sendiri, baik judul halaman, konten, jenis halaman, dan jenis karatket penulisan. Diawali dengan <head> diakhiri dengan </head>. Contoh:
<head>
      <title>ini adalah halaman web</title>
</head>
Penjelasan:
~ <head> = sebagai awal penanda script bagian head HTML
~ <title> = sebagai awal tanda judul sebuah halaman web
~ ini adalah halaman web = judul halaman web yang akan ditampilkan
~ </title> = tag akhir title
~ </head> = tag akhir head
3.      Bagian Body
Diawali dengan <body> diakhiri dengan </body>. Perhatikan contoh script berikut:
<body>
      Isi halaman web
</body>
<!—file  studikasus2-1.html-->
<html>
<head>
<title>ini biodataku</title>
</head>
<body>
      Ini adalah web pertama saya dengan html
</body>
<html>
4.      Mengganti Baris
Untuk mencetak baris selanjutnya menggunakan tag <br>.
~ mencetak kalimat tanpa tag <br>
<!—file  studikasus2-2.html-->
<html>
<head>
<title>mencetak halaman web tanpa tag br</title>
</head>
<body>
NIS : 110211178
Nama : Farah Dea Fanny
Kelas : XII TKJC
</body>
</html>
~ mencetak kalimat dengan tag <br>
<!—file  studikasus2-3.html-->
<html>
<head>
<title>mencetak halaman web dengan br</title>
</head>
<body>
NIS : 110211178 <br>
Nama : Farah Dea Fanny <br>
Kelas : XII TKJC
</body>
</html>
5.      Membentuk Paragraf
Dengan memberikan tanda tag awal paragraf <p> diikuti teks yang akan ditampilkan pada web browser dan diakhiri tag akhir paragraf </p>, maka informasi teks akan disusun menyerupai model paragraf.
6.      Garis Horizontal
Untuk membuat garis horizontal menggunakan tag <hr>.
<!—file  studikasus2-6.html-->
<html>
<head>
<title>garis horizontal</title>
</head>
<body>
Kalimat diatas garis mendatar.  <hr>  kalimat dibawah ini garis mendatar.
</body>
</html>
7.      Membuat Komentar
Untuk menambahkan komentar diawali dengan tanda “<!—“ diikuti komentar kemudian diakhiri dengan tanda “-->”
<!—file  studikasus2-7.html-->
<html>
<head>
<title>garis horizontal</title>  <!—judul halaman web-->
</head>
<body>
Kalimat diatas garis mendatar. <hr> kalimat dibawah ini garis mendatar. <!—konten halaman web-->
</body>
</html>

B.      FORMAT TEKS
1.      Memanipulasi Tampilan Teks pada Halaman Web
a.      Mencetak tebal teks : <b>teks</b>
b.      Mencetak tebal teks dengan strong : <strong>teks</strong>
c.       Mencetak miring teks : <i>teks</i>
d.      Mencetak teks bergaris bawah : <u>teks</u>
e.      Memberi tekanan teks : <em>teks</em>
f.        Membesarkan huruf : <big>teks</big>
g.      Mengecilkan huruf : <small>teks</small>
h.      Mencetak superscript teks : <sup>teks</sup>
i.        Mencetak subscript teks : <sub>teks</sub>
j.        Mencetak teks berkedip : <blink>teks</blink>
k.       Mencetak teks berjalan : <marquee>teks</marquee>
l.        Mencetak teks dengan coretan : <s>teks</s>
2.      Format Heading
Fungsi utama heading adalah untuk mengatur besar ukuran teks dalam halaman web yang biasanya diterapkan pada sebuah judul atau tema informasi yang terdapat pada halaman web. Penulisan heading diawali dengan tag <h1> dan diakhiri dengan tag </h1> ,dengan formasi heading yang memiliki 6 ukuran dari 1 sampai 6.
3.      Bentuk Preformat teks
Seperti telah dijelaskan sebelumnya bahwa untuk mencetak teks pada baris selanjutnya digunakan tag <br>, sementara untuk format paragraf menggunakan tag <p>. Besar jarak spasi antarbaris dalam halaman web adalah 1 spasi, sehingga ketika ingin menambahkan jaraknya menjadi 2 spasi, perlu ditambahkan tag <br>. Dalam HTML fungsi preformat teks yang berguna untuk mencetak teks pada web browser sesuai jarak, ukuran, dan lebar teks dengan penulisan kode program HTML bagian body dengan menambahkan tag awal <pre> dan diakhiri tag </pre>.
4.      Format Address
Tag <address> merupakan standar kode HTML yang digunakan untuk penulisan sebuah alamat institusi yang berfungsi sebagai informasi kontak sebuah institusi. Hasil output yang ditampilkan akan dicetak miring, dan ketika penulisan alamat lebih dari satu baris, maka harus diserakan tag ganti baris.
5.      Format Keluaran Program Komputer
Bebrapa script HTML yang dapat digunakan untuk mendefinisikan proses secara komputerisasi adalah sebagai berikut.
~ <code>...</code> = untuk mendefinisikan kode pogram tertentu yang ditampilkan pada web page
~ <var>...</var> = untuk mendefinisikan variabel dalam program
~ <samp>...</samp> = untuk mendefinisikan contoh keluaran program
~ <tt>...</tt> = untuk mendefinisikan teletype text
6.      Format Abbr dan Acronym
Tag <abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks. Ini sering digunakan untuk mempersingkat sebuah istilah dengan tujuan mempermudah pengguna ketika menjelajah internet dalam mencari keyword tertentu.
7.      Mengubah Arah Tampilan Teks
Untuk mengubah arah tampilan penulisan teks dari kanan ke kiri menggunakan <bdo>. Secara default web browser akan mencetak teks dari arah kiri menuju ke kanan, sebagai contoh “selamat datang”. Dengan tag <bdo dir=”rtl”>, maka hasil penulisannya menjadi terbalik. Argument rtl digunakan untuk menulis teks dari arah kanan ke kiri (right to left), sedangkan argument ltr digunakan untuk menulis teks dari arah kiri ke kanan (left to right).
8.      Membuat Kutipan Teks
a.      Tag <q> digunakan untuk membuat kutipan pendek. Kutipan menggunakan tag <q> akan ditulis tanpa menjorok ke dalam halaman web. Selain itu kutipan diawali dengan tanda petik dua (“) dan diakhiri dengan tanda petik dua (“)
b.      Tag <blockquote>, digunakan untuk menyatakan kutipan panjang, yang akan diawali dengan penulisan teks secara menjorok kedalam.
9.      Penyisipan dan Penghapusan Teks
Untuk menghapus data salah, dapat digunakan tag <del> yang memiliki efek teks dicoret tengah. Efek teks dicoret mirip dengan efek teks ketika menggunakan tag <s> seperti yang telah dijelaskan pada subbab sebelumnya. Untuk melakukan koreksi informasi yang salah pada web, dapat digunakan tag <ins> yang memiliki efek tulisan bergaris bawah seperti efek tulisan dengan tag <a href=” “>


C.      LIST HTML
List berarti daftar, ukuran, rangkaian, atau menu. List HTML merupakan bentuk struktur dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web.
1.      List Bernomor Urut (Ordered List)
List bernomor adalah teknik menampilkan daftar tertentu dalam halaman web menggunakan item penomoran, seperti 1,2,3 hingga seterusnya. Untuk menggunakan List bernomor, digunakan tag <ol> dan diakhiri dengan </ol>.
Argumen
Fungsi
I
Untuk menampilkan nomor urut dengan angka dalam romawi besar (I,II,III, dan seterusnya)
i
Untuk menampilkan nomor urut dengan angka dalam romawi kecil (i,ii,iii, dan seterusnya
a
Untuk menampilkan nomor urut dengan menggunakan abjad kecil (a,b,c,d, dan seterusnya)
A
Untuk menampilkan nomor urut dengan menggunakan abjad besar (A,B,C,D, dan seterusnya)

2.      List Tanpa Urutan Nomor (Unordered List)
Untuk membuat daftar tertentu tanpa mempergunakan sebuah urutan penomoran dapat menggunakan tag <ul> dan diakhiri dengan </ul>. Ada beberapa macam jenis tanda unordered list seperti berikut
Argumen
Fungsi
Disc
Untuk menampilkan pengurutan dengan tanda lingkaran (bullet) tanpa warna pada sisi tengahnya
Square
Untuk menampilkan pengurutan dengan tanda kotak hitam penuh
Circle
Untuk menampilkan pengurutan dengan tanda lingkaran (bullet) hitam penuh

3.      List Bersarang
<!—file studikasus2-20.html-->
<html>
<head>
<title>list bersarang</title>
</head>
<body>
Menu bersarang
<ol>
<li>daging</li>
      <ul>menu ayam
      <li>ayam bakar</li>
      <li>bebek panggang</li>
      </ul>
<li>sayur</li>
      <ol>menu sayur
      <li>sayur sup</li>
      <li>sayur sup</li>
</ol>
</body>
</html>
4.      List Terdefinisi

List terdefinisi (definition list) adalah sebuah daftar yang menggunakan tag <dl> dan diakhiri dengan </dl>. Untuk menyatakan terminasi sub list digunakan tag <dt> dan diakhiri dengan </dt>, sedangkan untuk menjelaskan pengertian dari sub list yang telah dijelaskan sebelumnya digunakan tag <dd> dan diakhiri dengan </dd> yang memiliki efek penulisan teks agak menjorok kedalam.

Komentar

  1. Tessa Hervika25 Februari 2020 pukul 05.43

    Artikelnya sangat membantu dan mudah dipahami Gan. Dengan adanya artikel tentang format teks dan tulisan HTML ini membantu saya untuk mempelajari dasar-dasar pemrograman web. Semoga kedepannya bisa membuat kreasi artikel yang bermanfaat lagi Gan. Perkenalkan nama saya Tessa Hervika ini alamat website kampus saya https://www.atmaluhur.ac.id/.

    BalasHapus
  2. Mutia A.R25 Februari 2020 pukul 17.38

    Wah, Terima Kasih Broo Artikel mengenai Format Teks HTML ini sangat membantu saya dn teman2 yang lain juga yg baru belajar tentang dasar- dasar pemrograman web, Terus berkarya lagi ya , smoga bisa memberikan artikel yang lainnya juga yg sangat bermanfaat lagii, Sukses trss broo. Perkenalkan saya Mutia Amirah Rahim ..oh yaa silakan kunjungi website kampus saya ya https://www.atmaluhur.ac.id/

    BalasHapus
  3. derma26 Februari 2020 pukul 04.59

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. Unknown27 Februari 2020 pukul 06.17

    Waaawww artikelnya sangat bagus dan sangat bermanfaat untuk saya yang masih belum tau tentang pemograman web khususnya format teks untuk HTML. Kami sangat terbantu sekali dengan membaca artikel yang kakak buat terutama saya yang belum tau jadi lebih tau dan lebih mengerti. Terimakasih kak...semangat terus dan selalu beri artikel terbaik kak yang lainnya..hhmmm
    oohhh yaaa perkenalkan nama saya ADEKA SRI PURWANTI website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  5. Frostbrand28 Februari 2020 pukul 04.46

    artikelnya bagus kak mudah dipahami dan tutorialnya telah membantu saya sebagai seorang pemula. semoga artikel ini juga bermanfaat bagi orang lain. semangat terus kak dalam membuat blog tutorial ini. semoga blog ini masih update dalam hal format halaman web terima kasih.
    perkenalkan nama saya reza pahlevi dari kampus STMIK atmaluhur pangkalpinang.
    kunjungi juga website kampus saya kak https://www.atmaluhur.ac.id/

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

OBJEK MULTIMEDIA

OBJEK MULTIMEDIA A.            Objek Multimedia Multimedia pada halaman web memiliki pengertian penggunaan external file yang berisi data dengan format tertentu pada web. Objek multimedia pada web dapat berupa audio, video, musik, gambar, animasi, maupun file lainnya yang bertujuan untuk membuat web menjadi lebih atraktif, menarik dan mudah digunakan. Terdapat beberapa fungsi dalam pemrograman web yang harus didukung web browser, yaitu sbg berikut. 1.       Fungsi dukungan terhadap scripting, agar web browser mampu menjalankan dan menerjemahkan kode yg dituliskan dalam badan program program HTML. 2.       Applet merupakan program aplikasi yang dijalankan pada browser untuk mengeksekusi objek multimedia yang disertakan pada halaman web agar berfungsi dan bekerja semestinya. Pada generasi web browser terbaru tag <applet> sudah tidak digunakan lagi tetapi diganti dengan penggunaan tag <object>. Contoh penggunaan...
Baca selengkapnya

STRUKTUR TABEL HTML

BAB 3 : STRUKTUR TABEL HTML A.      Elemen Dasar Tabel Cara mendeskripsikan tabel dalam pemrograman web berbasis HTML menggunakan syntax adalah sebagai berikut. <table>   <!-- isi baris dan kolom --> </table> Selanjutnya anda dapat menambahkan baris baru di antara tag <table>....</table> dengan script berikut. <table> <tr>   <!-- isi baris ke 1 --> </tr> <tr>   <!—isi baris ke 2 --> </tr> </table> Script program yang lengkap adalah sebagai berikut. <table>   <tr>             <td>&nbsp;</td>             <td>&nbsp;</td>   </tr>   <tr>             <td>&nbsp;</td>    ...
Baca selengkapnya