lanjutan ke 2

-
FORMAT TEKS HALAMAN WEB

BAB 2

A.   Struktur Dasar HTML

HTML (HyperText Markup Language) merupakan file teks biasa dengan ekstensi .htm atau .html yang terdiri atas script program dengan aturan tertentu.

1. Elemen Dasar
Dalam memberikan nama dokumen web berbasis HTML menggunakan editor teks Notepad sebaiknya selalu memilih tipe all files agar dokumen web tersebut tidak memiliki ekstensi ganda sehingga dideteksi sebagai dokumen biasa.
Elemen HTML adalah bagian-bagian pembentuk halaman web yang  meliputi head, body, title, link, text, paragraph, list, dan sebagainya. Setiap elemen HTML ditandai dengan sebuah simbol tag. Tag merupakan bentuk simbol berbentuk "<" sebagai tanda awal penulisan elemen dan diakhiri tanda ">" sebagai tanda akhir penulis sebuah elemen. Penulisan kode elemen terdiri atas dua bagian, yaitu tag awal dan tag akhir. Tag awal digunakan sebagai tanda awal bagian script elemen sampai pada akhir penulisan script elemen dengan tanda tag akhir. Format penulisan sebuah elemen adalah sebagai berikut:

<tag_awal_nama_elemen>
"isi script program html"
</tag_akhir_nama_elemen>

CONTOH:
<b>Teks dicetak tebal
</b>
Tag awal disimbolkan dengan tanda <nama_elemen> sedangkan tag akhir disimbolkan dengan </nama_dokumen>. Akan tetapi, 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>

Dalam menulis tag, huruf besar atau kecil tidak dipermasalahkan dalam standar HTML. Struktur dasar halaman web berbasis HTML adalah sebagai berikut:

CONTOH:

<html>      -> Tag awal HTML
<head>      -> Head
<title> Judul Situs</title>
</head>     
<body>      -> Body
Isi halaman web   
</body>    
</html>       -> Tag akhir HTML

Struktur dasar web berbasis HTML
KELEBIHAN  HTML:
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 karakter penulisan. Bagian head selalu diawali dengan tag awal <head> dan diakhiri dengan tag akhir </head>. Perhatikan contoh script berikut:

CONTOH

<head>
<title> Ini adalah halaman web </title>
</head>

Penjelasan:
·         <head>
Tag awal head digunakan sebagi awal penanda script bagian head HTML.
·         <title>
Tag awal title digunakan sebagai awal tanda judul sebuah halaman web.
·         Ini adalah halaman web
Judul halaman web yang akan ditampilkan pada web browser.
·         </title>
Tag akhir title
·         </head>

3. Bagian Body
Pada bagian body, semua script program HTML akan diterjemahkan menjadi bentuk informasi pada halaman web, baik berupa teks, audio, video, gambar, dan animasi. Bagian body sebuah halaman web HTML selalu diawali tag <body> dan diakhiri tag </body>. Perhatikan contoh script program berikut:

<body>
Isi halaman web
</body>

CONTOH:
Membuat halaman web sederhana

<!--file studi1.html-->
<html>
<head>
<title> This MyBiodata</title>
</head>
<body>
Ini adalah halaman web pertama saya dengan html.selamat datang
</body>
</html>

OUTPUT WEB:


4. Mengganti Baris
Script program HTML yang ditulis pada bagian body akan dicetak memanjang dalam satu baris ketika ditampilkan dalam satu baris. Oleh karena itu, diperlukan script tambahan untuk mencetak pada baris selanjutnya dengan tag <br>.

CONTOH:

<!--file studi2.html-->
<html>
<head>
<title> Mencetak Halaman Web dengan br</title>
</head>
<body>
NIS : 987654321<br>
Nama : Rahma Nur Aulia<br>
Kelas : XI TKJ 2
</body>
</html>

OUTPUT WEB:


5.Membentuk Paragraf
      Pada dasarnya setiap informasi berupa teks dalam halaman web berbasis HTML merupakan script yang ditulis pada bagian body. Jika anda menuliskan sebuah string yang cukup panjang, teks yang ditampilkan akan menyesuaikan lebar web browser. 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.

CONTOH

<!--file studi3.html-->
<html>
<head>
<title> Mencetak Halaman Web dengan Paragraf </title>
</head>
<body>
<p> Pada dasarnya setiap informasi berupa teks dalam halaman web berbasis HTML merupakan script yang ditulis pada bagian body. </p>
<p> Jika kita menuliskan sebuah string yang cukup panjang, ketika ditampilkan akan menyesuaikan lebar web browser. </p>

<p> Dengan memberikan tanda tag awal paragraf diikuti teks yang akan ditampilkan pada web browser dan diakhiri tag akhir paragraf maka informasi teks akan disusun menyerupai model  paragraf. </p>
</body>
</html>
OUTPUT WEB:



6. Garis Horizontal
       Untuk membuat garis horizontal atau mendatar pada halaman web, Anda dapat menggunakan tag <hr>. Dengan menggunakan tag <hr>, maka secara otomatis informasi teks yang dituliskan setelah tag <hr>akan ditampilkan pada baris selanjutnya dibawah garis mendatar tersebut.

CONTOH:

<!--file studi4.html-->
<html>
<head>
<title>Garis Horizontal</title>
</head>
<body>
Kalimat diatas garis mendatar. <hr> Kalimat di bawah garis mendatar.
</body>

OUTPUT WEB :





7. Membuat Komentar
Komentar berguna untuk memberikan catatan khusus tentang baris kode tertentu dalam halaman web. Untuk menambahkan komentar diawali dengan tanda "<!--" diikuti komentar kemudian diakhiri dengan tanda "-->". Penulisan komentar dalam dalam kode program HTML tidak akan memengaruhi penerjemahan kode program oleh web browser karena tidek dieksekusi, kecuali terjadi kesalahan penulisan tanda komentar.

CONTOH :

<!--file studi5.html-->
<html>
<head>
<title> Garis Horizontal </title><!--Judul Halaman Web-->
</head>
</body>
Kalimat diatas garis mendatar. <hr> Kalimat di bawah garis mendatar. <!--konten halaman web-->
</body>
</html>

B.     Format Teks
1. Memanipulasi Tampilan Teks pada Halaman Web
Berikut ini beberapa script dalam HTML yang digunakan untuk memanipulasi bentuk format teks ketika ditampilkan dalam web browser.

a. Mencetak tebal teks
   Format: <b> teks dicetak tebal </b>
b. Mencetak tebal teks dengan tag strong
   Format: <strong> teks dicetak tebal dengan strong </strong>
c. Mencetak miring teks
   Format: <i> teks dicetak miring </i>
d. Mencetak teks bergaris bawah 
   Format: <u> teks dicetak dengan garis bawah </u>
e. Memberi tekanan teks
   Format: <em> teks dicetak dengan tekanan </em>
f. Membesarkan huruf
   Format: <big> membesarkan teks yang dicetak </big>
g. Mengecilkan huruf
   Format: <small> mengecilkan teks yang dicetak </small>
h. Mencetak superscript teks
   Format: <sup> teks dicetak dengan mode superscript </sup>
i. Mencetak subscript teks 
  Format: <sub> teks dicetak dnegan mode subscript </sub>
j. Mencetak teks berkedip
   Format: <blink> teks dicetak kelap-kelip </blink>
k. Mencetak teks berjalan
   Format: <marquee> teks dicetak berjalan </marquee>
l. Mencetak teks dengan coretan
   Format: <s> tampilan teks dicoret dengan garis </s>

CONTOH:
Memanipulasi tampilan teks pada web browser

<!--file studi2-1.html-->
<html>

<head>

<title> Memformat Tampilan Teks </title>

</head>

<body>

<b> Teks dicetak tebal </b><br>

<strong> Teks dicetak tebal dengan strong </strong><br>

<i> Teks dicetak miring </i><br>
<u> Teks dicetak dengan garis bawah </u><br>
<em> Teks dicetak dengan tekanan </em><br>
<big> Membesarkan teks yang dicetak </big><br>
<small> Mengecilkan teks yang dicetak </small><br>
<sup> Teks dicetak dengan mode superscript </sup><br>
<sub> Teks dicetak dengan mode subscription </sub><br>
<blink> Teks dicetak kelap-kelip </blink><br>
<s> Tampilan teks dicoret dengan garis </s><br>
<marquee> Teks dicetak berjalan </marquee><br>
</body>
</html>



2. Format Heading
    Fungsi utama heading adalah untuk mengetahui besar ukuran teks dalam halaman web yang biasanya diterapkan pada sebuah judul. Penulisan heading diawali dengan tag <h1>  dan diakhiri dengan tag </h1>, dengan formasi heading yang memiliki 6 ukuran dari 1 sampai 6.

CONTOH:
Menampilkan teks dengan heading

<!-- file studi 2-2.html-->
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1> Teks dengan heading berukuran 1 </h1>
<h2> Teks dengan heading berukuran 2 </h2>
<h3> Teks dengan heading berukuran 3 </h3>
<h4> Teks dengan heading berukuran 4 </h4>
<h5> Teks dengan heading berukuran 5 </h5>
<h6> Teks dengan heading berukuran 6 </h6>
</body>
</html>


 Ukuran terbesar heading adalah 1 dan yang paling kecil adalah 6. Teks yang ditulis antara tag awal heading dan tag akhir heading secara otomatis akan tercetak pada baris selanjutnya.

3. Bentuk Preformat Teks
    Untuk menambahkan besar spasi antarkata dalam kalimat perlu ditambahkan kode "&nbsp". Dalam HTML terdapat juga 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>.

CONTOH:
Menampilkan contoh dengan preformat


<!--file studi2-3.html>
<html>
<head>
<title>Preformat


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 disertakan tag ganti baris.

CONTOH:
Menampilkan alamat institusi dengan tag <address>.

<!--file studi2-4.html-->
<html>

<head>

<title>SMKN 2 Kediri</title>

</head>

<body>

<address>

SMK Negeri 2 Kediri<br>Jalan Veteran 5 <br> Kota Kediri <br> Jawa Timur <br>Indonesia<br>

</address>
</body>
</html>


5. Format Keluaran Program Komputer
       Beberapa script HTML yang dapat digunakan untuk mendefinisikan proses secar komputerisasi adalah sebagai berikut.

  • <code> ....</code>
         Script ini digunakan untuk mendefinisikan kode program tertentu yang ditampilkan pada web page.
  • <var> ....</var>
        Script ini digunakan untuk mendefinisikan variabel dalam program.
  • <samp> ....</samp>
        Script ini digunakan untuk mendefinisikan contoh keluaran program.
  • <tt> ....</tt>
        Script ini digunakan untuk mendefinisikan teletype text.

CONTOH:
Menampilkan kode progran dengan tag<code>

<!--file studi2-5.html-->
<html>

<head>

<title>Menampilkan teks output program</title>

</head>

<body>

<code>Kode Program Pascal</code><br>

<pre>

Program Pascal;
uses crt;
var i : string;
begin
    clrsr;
    i := 'Pascal';
    write(i);
end.
</pre>
<samp>Pascal</samp><br>
<var> i:='Pascal';</var><br>
<tt>Contoh Teks Teletype</tt>
</body>
</html>


6. Format Abbr dan Acronym
    Tag<abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks. Teknik ini sering digunakan untuk mempersingkat sebuah istilah dengan tujuan mempermudah pengguna ketika menjelajah internet dalam mencari keyword tertentu. Kepanjangan dari sebuah singkatan istilah tidak akan ditampilkan dalam halaman web, tetapi akan membantu sistem penelusuran keyword dalam mesin pencari internet, seperti Google dan Yahoo.

CONTOH:
Penggunaan abbr dan acronym

<!--file studi2-6.html-->
<html>
<head>
<title> Memersingkat istilah</title>
</head>
<body>
<abbr title="Palang Merah Indonesia">PMI</abbr><br>
<acronym title="SMK Negeri 2 Kediri">estemoneska</acronym>
</body>
</html>

7. Mengubah Arah Tampilan Teks
    Untuk mengubah arah tampilan penlisan teks dari kanan ke kiri seperti ketentuan penulisan huruf Arab, dapat menggunakan tag<bdo>. Bdo merupakan singkatan dari bidirectional override yang berguna untuk mengubah arah penulisan teks pada halaman web. Secara defdault, web browser akan mencetak teks dari arah kiri menuju ke kanan, sebagai contoh "Selamat Datang Siswa SMK". Dengan tag<bdo dir="rtl">, maka hasil penulisannya menjadi terbalik.

CONTOH:
Penggunaan tag<bdo>

<!--file studi2-7.html-->
<html>
<head>
<title> Membalikkan Arah Teks</title>
</head>
<body>
<bdo dir="rtl">Pemrograman Web dengan HyperText Markup Language</bdo><br>
<bdo dir="rtl">Teknologi Informasi dan Komunikasi</bdo><br>
</body>
</html>

Argumen rtl digunakan untuk menuliskan teks dari arah kanan ke kiri (right to left), sedangkan argumen ltr digunakan untuk menulis teks dari arah kiri ke kanan (left to right)

8. Membuat Kutipan Teks 
    Terdapat dua macam kutipan yang dapat digunakan pada dokumen HTML, yaitu sebagai berikut.

a. Tag<q> digunakan untuk membuat kutipan pendek. Kutipan menggunakan taq<q>akan ditulis 
tanpa menjorok ke dalam halaman web. Selain itu, kutipan diawali dengan tanda petik dua(") dan diakhiri dengan petik dua(").

b. Tag<blockquote>, digunakan untuk menyatakan kutipan panjang, yang akan diawali dengan penulisan teks secara menjorok ke dalam.

CONTOH:
Penggunaan tag<q> dan tag<blockquote>

<!--file studi2-8.html-->
<html>
<head>
<title>Kutipan Teks</title>
</head>
<body>
Di bawah ini adalah cara mengutip kalimat yang panjang.
<blockquote>
Baris kalimat ke 1 dalam blockquote<br>
Baris kalimat ke 2 dalam blockquote<br>
Baris kalimat ke 3 dalam blockquote<br>
Baris kalimat ke 4 dalam blockquote<br>
Baris kalimat ke 5 dalam blockquote<br>
</blackquote>
Sementara itu, dibawah ini adalah kutipan pendek. <br>
<q>
Baris kalimat ke 1 dengan kutipan pendek<br>
Baris kalimat ke 2 dengan kutipan pendek<br>

</q>
</body>
</html>

OUTPUT WEB:



9. Penyisipan dan Penghapusan Teks
    Ketika anda menampilkan informasi dalam dokumen web, terkadang terjadi kesalahan. Oleh karena itu, kesalahan informasi tersebut harus dikoreksi tanpa menghilangkan data yang salah tersebut. Untuk menghapus data yang salah, dapat digunakan tag<del> yang memiliki efek teks dicoret tengah. Efek teks dicoret mirip dengan efek teks ketika menggunakan tag<s>. Sementara itu, untuk melakukan koreksi informasi yang salah pada web, dapat digunakna tag<ins> yang memiliki efek tulisan bergaris bawah seperti efek tulisan dengan tag <a href=" ">.

CONTOH:

<!--file studi2-7.html-->
<html>
<head>
<title>Hapus dan Sisip Teks</title>
</head>
<body>
Nilai grosir 1 kodi adalah sama dengan ,,,<br>
Jawaban :<br>
a.<del>12 Pcs</del> jawaban yang salah<br>
b.<del>20 Pcs</del> jawaban yang sudah dikoreksi
</body>
</html>

OUTPUT WEB :



C. List HTML
 List HTML merupakan bentuk struktur dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web. List HTML dibagi menjaid empat jenis, yaitu:

1. List Bernomor Urut (Ordered List)
 Adalah tekknik 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 tag</ol>.

Contoh:
Penggunaan tag<ol> untuk list bernomor>

<!--file studikasus2-17.html-->
<html>
<head>
<title>List bernomor</title>
</head>
<body>
Menu Restoran
<ol>
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
</body>
</html>

OUTPUT WEB:



Adapun untuk menampilkan nomor urut dengan model tertentu, dapat digunakan argumen berikut.
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, dan seterusnya)
A
Untuk menampilkan nomor urut dengan menggunakan abjad besar (A,B,C, dan seterusnya)

CONTOH:
Penggunaan argumen pada tag <ol> untuk list bernomor.

<!--file studi3-2.html-->
<html>
<head>
<title>List Bernomor</title>
</head>
<body>
Menu Restoran:
<ol>
<li>Ayama Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
Menu Restoran dengan argumen A
<ol type="A">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
Menu Restoran dengan argumen a
<ol type="a">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
Menu Restoran dengan argumen I
<ol type="I">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>

</ol>
Menu Restoran dengan argumen i
<ol type="i">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
</body>
</html>

 OUTPUT

2. List Tanpa Urutan Nomor
        Untuk membuat daftar tertentu tanpa menggunakan sebuah urutan penomoran, Anda dapat menggunakan tag <ul> dan diakhiri dengan</ul>. Ada beberapa macam jenis unorderedlist 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

CONTOH:
Penggunaan argumen pada tag<ul> untuk list tanpa nomor

<!--file studi3-3.html-->
<html>
<head>
<title>List Tidak Bernomor</title>
</head>
<body>
Menu Restoran default (Tanpa Argumen)
<ul>
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ul>
Menu Restoran dengan argumen bulat
<ul type="circle">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ul>
Menu Restoran dengan argumen disc
<ul type="disc">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ul>
Menu Restoran dengan argumen kotak
<ul type="square">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ul>
</body>

</html>
 OUTPUT

3. List Bersarang 
     Menu bersarang atau nested list adalah suatu subdfatar baru didalam sebuah daftar. Contoh cara menampilkan unordered list didalam sub ordered list dan sebaliknya, serta ordered list didalam sub unordered list adalah sebagai berikut.

CONTOH:
List Bersarang atau nested list.

<!--file studi3-4.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>
</ol>
</body>
</html>
 OUTPUT


4. List Terdefinisi 
     List Terdefinisi(definition list) adalah sebuah daftar yang menggunakan tag<dl> dan diakhiri dengan tag </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 menggunakan tag</dd> yang memiliki efek penulisan teks agak menjorok kedalam. 


Sekian rangkuman about web tentang pemrograman web bab 2 ini , semoga bermanfaat bagi semuanya. Terima kasih.

Komentar

Posting Komentar

Postingan populer dari blog ini

New!! yang ketiga

-
Gambar
BAB 3         STRUKTUR TABEL HTML A.     ELEMEN DASAR TABEL Tabel adalah salah satu metode untuk menyajikan informasi dalam halaman web. Tabel terdiri dari baris dan kolom ,baris adalah bagian mendatar ,dan kolom adalah bagian vertikal pada tabel. Pertemuan antara baris dan kolom disebut cell. Cara mendekskripskan sebuah tabel dalam pemrograman berbasis HTML menggunakan syntax sebagai berikut. <table> <!-- isi baris dan kolom --> </table> Selanjutnya , tambahkan 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...
Baca selengkapnya