Materi Pemrograman Web Dasar HTML Pemformatan Text

materi pemrograman web dasar pemformatan text
Materi Pemrograman Web Dasar HTML Pemformatan Text–Materi pemformatan text merupakan materi awal dalam pelajaran pemrograman web dasar setelah pengetahuan tentang sejarah dan fungsi web, termasuk sejarah dan fungsi HTML dan pengetahuan tentang tag, element dan atribut. Materi ini diajarkan di semester awal kelas X untuk SMK program keahlian Teknologi Informasi dan Komunikasi (TIK).

Sub materi yang akan dibahas dalam materi pemformatan text kali ini antara lain:
1). Penggunaan komentar dan tag <BR>
2). Tag <P> dan tag <H1>
3). Tag <B> dan tag <strong>
4). Tag <I> dan tag <em>
5). Tag <u>
6). Tag <big>, <small>, <strike>
7). Tag <sub>, dan tag <sup>
8). Tag <font color>, <font face>, dan <font size>
9). Tag <center>

Untuk memahami materi ini diharapkan siswa sudah tahu tentang dasar html tag, element dan atribut. Materi tersebut sudah dibahas pada artikel sebelumnya.

Mari kita bahas satu persatu sub materi tersebut!

I. Penggunaan Komentar dan tag BR dalam HTML

Komentar dalam HTML digunakan untuk menjelaskan tag atau kode.

Tag Break atau BR digunakan untuk memulai baris baru, atau bisa bahasa mudahnya adalah untuk pindah baris. Tag ini fungsinya sama dengan Enter, atau carriage return.

Contoh:

<html>
<head>
<title>Contoh komentar dan tag br</title>
<body>
     <!--ini contoh komentar-->
     Hallo Udin <br>
     Ini latihan menulis kode HTML pertamaku
</body>
</head>
</html>

Perhatikan kode yang diberi higlight diatas. Baris ke 5 merupakan contoh penulisan komentar. Struktur penulisan komentara ;

Komentar biasa digunakan untuk menjelaskan fungsi kode.

Contoh funsi komentar untuk menjelaskan suatu kode sebagai berikut:

<html>
<head>
<title>Contoh fungsi komentar</title>
<body>
     <!--dibawah ini untuk pindah baris menggunakan tag BR-->
     Fungsi komentar pada HTML adalah <br>
     untuk menjelaskan suatu kode
</body>
</head>
</html>

Yang diberi highliht diatas merupakan contoh komentar yang fungsinya menjelaskan penggunaan kode BR.

Komentar sangat bermanfaat untuk mempermudah membaca fungsi kode, terutama ketika penulisan kode sudah sangat banyak. Dapat membantu juga dalam hal perbaikan kode, karena kita dapat menemukan kode yang akan diperbaiki dengan lebih mudah dan cepat.

2). Tag P dan tag H1

Tag P digunakan untuk membuat paragraf.
Penulisan kode:

<P>...</P>

Tag H1 digunakan untuk merubah ukuran huruf / text
Penulisan kode:

<H1>...</H>

Contoh penggunaan tag Paragarafh.

<html>
<head>
<title>Contoh paragrafh</title>
<body>
     <!--contoh paragrafh-->
     <P>
     Belajar hatml ini mudah, tidak ribet, tidak puyeng.
     Contohnya ini, baru belajar langsung bisa menulis kode HTML
     </P>
</body>
</head>
</html>

Perhatikan kode yang diberi highliht diatas, itu merupakan penulisan kode untuk kode awal dan akhir tag paragrafh.

Contoh penggunaan tag H1, H2, H3, H4, H5, H6 pada HTML

Keterangan:

Tag <H1> merupakan ukuran huruf paling besar, dibawahnya masih ada
Tag <H2> untuk merubah ukuran huruf lebih kecil dari tag <H1>
Tag <H3> untuk merubah ukuran huruf lebih kecil dari tag <H2>
Tag <H4> untuk merubah ukuran huruf lebih kecil dari tag <H3>
Tag <H5> untuk merubah ukuran huruf lebih kecil dari tag <H4>
Tag <H6> untuk merubah ukuran huruf lebih kecil dari tag <H5>

Contoh penulisan kode untuk menggunakan tag H1

<html>
<head>
<title>Contoh H1 H2 H3 H4 H5 H6</title>
<body>
<!--dibawah ini contoh penulisan H1-->
        <H1>
             Ini text dengan format H1 lebih besar dari H2
        </H1>
<!--dibawah ini contoh penulisan H2-->
        <H2>
             Ini text dengan format H2 lebih besar dari H3
        </H2>
<!--dibawah ini contoh penulisan H4-->
        <H3>
             Ini text dengan format H3 lebih besar dari H4
        </H3>
<!--dibawah ini contoh penulisan H4-->
        <H4>
             Ini text dengan format H4 lebih besar dari H5
        </H4>
<!--dibawah ini contoh penulisan H5-->
        <H3>
             Ini text dengan format H5 lebih besar dari H6
        </H3>
<!--dibawah ini contoh penulisan H6-->
        <H3>
             Ini text dengan format H6 paling kecil
        </H3>
</body>
</head>
</html>

3). Tag B dan tag Strong
Tag B maupun tag Strong, fungsinya sama untuk menebalkan huruf.

Bedanya tag B merupakan pemformatan text dengan kategoru Phisical Formatting, dan tag Strong merupakan tag pada kategori Logical Formatting.

Contoh penulisan tag B dan tag Strong

<html>
<head>
<title>Contoh tag B dan tag Strong</title>
<body>
       <!--contoh penulisan tag B-->
           <B>Text dengan format B </B>
              <!--contoh penulisan tag Strong-->
                  <Strong>Text dengan format B </Strong>
</body>
</head>
</html>

4). Tag I dan Tag em

Tag I dan tag em fungsinya untuk membuat huruf miring. Kalau di Microsoft Word fungsinya sma dengan italic.

Tag I

<i>Teks paragrafh</i>

Tag Em

<em>Teks paragrafh</em>

Contoh penggunaan tag i dan tag em

<html>
<head>
<title>Tag I dan EM</title>
<body>
	<!--penggunaan tag I dan EM-->
	<i>Teks paragarafh menggunakan tag I </><br/>
	<em>Teks paragarafh menggunakan tag EM</em>
	
</body>
</head>
</html>

5). Tag U
Fungsi dari tag U yaitu untuk memberi garis bawah pada text. Kalau di Microsoft Word fungsinya sama dengan underline.

Penulisan tag U

<U>Text Paragrafh</U>

Contoh penggunaan tag U pada kode-kode HTML;

<html>
<head>
<title>Tag U</title>
<body>
	<u>Teks dengan tag U</u>
</body>
</head>
</html>

6). Tag big, small, strike
Fungsi dari tag big, yaitu merubah ukuran text lebih besar daripada ukuran normal.

Penulisan kode Big

<big>Text Paragrafh</big>

Fungsi tag Small, yaitu merubah ukuran text lebih kecil dariapada text ukuran normal.

Penulisan tag small;

<small>Text Paragrafh</small>

Fungsi dari tag strike yaitu; memberi garis pada tengah text

Penulisan tag strike;

<strike>Text Paragrafh</strikel>

Contoh penggunaan tag big, small, strike dalam kode-kode HTML;

<html>
<head>
<title>Tag big,small,strike</title>
<body>
	<big>Teks dengan tag BIG</big>
            <small>Teks dengan tag SMALL</small>
                 <strike>Teks dengan tag STRIKE</strike>
</body>
</head>
</html>

7). Tag Sup dan tag Sup
Fungsi dari tag sub yaitu; untuk membuat teks superscript

Contoh tag untuk penulisan tag sup;

       <sup>Text character</sup>

Fungsi dari tag sub yaitu; untuk membuat teks subrscript

Contoh tag untuk penulisan tag sub;

       <sub>Text character</sub>

Conoh penggunaan tag sup, dan tag sub;

<html>
<head>
<title>Tag Superscript, subscript</title>
<body>
	<h4>
        <sup>Teks Superscript</sup>
       Teks Normal
       <sub>Teks Subscript</sub>
       </h4>
</body>
</head>
</html>

8). Tag Font color, font face, font size

Fungsi tag font color yaitu; untuk memberi jenis warna pada teks

Contoh penulisan tag font color;

<fontcolor="#ffff000;">Ini teks dengan wrna kuning</font>

Fungsi tag font face adalah; untuk menentukan jenis huruf

Contoh penulisan kode html font face;

<fontface="arial">Ini teks dengan jenis huruf Arial</font>

Fungsi tag font size digunakan untuk menentukan ukuran huruf

Contoh penulisan kode html untuk font size;

<fontsize"72px">Ini teks dengan ukuran huruf 72 pixel</font>

Contoh penggunaan tag fontcolor, fontfamily, dan font face;

<html>
<head>
<title>Tag Superscript, subscript</title>
<body>
	<font color="blue">Teks ini berwarna biru</font><br>
	<font size="24">Ukuran teks ini 24 px</font><br>
	<font face="algerian">Jenis teks ini algerian</font><br>
</body>
</head>
</html>

9). Tag center
Tag ini digunakan untuk mengatur aligment huruf agar berada ditengan page

Penulisan tag center;

<cener>Ini text dengan tag cener<center>

Contoh penggunaan tag center dalam html;

<html>
<head>
<title>Tag Superscript, subscript</title>
<body>
<center> Paragraf ini berada ditengah, <br>
Paragraf ini berada ditengah<br>
Paragraf ini berada ditengah<br>
Paragraf ini berada ditengah <br>
Paragraf ini berada ditengah<br>
</center>
</body>
</head>
</html>

Demikian artikel singkat tentang dasar-dasar html pemrograman web dasar untuk smk kali ini, semoga bermanfaat untuk semuanya, terutama untuk anda yang sedang membutuhkan bahan mengajar mata pelajaran pemrograman web dasar.

Dapatkan Modul Pemrograman Web Dasar Kelas X untuk SMK dan MAK disini

Artikel diulis oleh:
Mulyadi Tenjo
Guru TIK SD dan guru mapel produktif untuk SMK jurusan Multimedia di Kab. Bogor

Leave a Reply

Your email address will not be published. Required fields are marked *