Materi Pemrograman Web Dasar Html Pemformatan Text
Materi Pemrograman Web Dasar HTML Pemformatan Text–Materi pemformatan text merupakan materi awal dalam pelajaran pemrograman web dasar sehabis pengetahuan perihal sejarah dan fungsi web, termasuk sejarah dan fungsi HTML dan pengetahuan perihal tag, element dan atribut. Materi ini diajarkan di semester awal kelas X untuk Sekolah Menengah kejuruan kegiatan 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 diperlukan siswa sudah tahu perihal 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 dipakai untuk menjelaskan tag atau kode.
Tag Break atau BR dipakai untuk memulai baris baru, atau sanggup bahasa mudahnya ialah untuk pindah baris. Tag ini fungsinya sama dengan Enter, atau carriage return.
Contoh:
<html>
<head>
<title>Contoh komentar dan tag br</title>
<body>
<!--ini teladan komentar-->
Hallo Udin <br>
Ini latihan menulis instruksi HTML pertamaku
</body>
</head>
</html>
Perhatikan instruksi yang diberi higlight diatas. Baris ke 5 merupakan teladan penulisan komentar. Struktur penulisan komentara ;
Komentar biasa dipakai untuk menjelaskan fungsi kode.
Contoh funsi komentar untuk menjelaskan suatu instruksi sebagai berikut:
<html>
<head>
<title>Contoh fungsi komentar</title>
<body>
<!--dibawah ini untuk pindah baris memakai tag BR-->
Fungsi komentar pada HTML ialah <br>
untuk menjelaskan suatu kode
</body>
</head>
</html>
Yang diberi highliht diatas merupakan teladan komentar yang fungsinya menjelaskan penggunaan instruksi BR.
Komentar sangat bermanfaat untuk mempermudah membaca fungsi kode, terutama saat penulisan instruksi sudah sangat banyak. Dapat membantu juga dalam hal perbaikan kode, alasannya ialah kita sanggup menemukan instruksi yang akan diperbaiki dengan lebih gampang dan cepat.
2). Tag P dan tag H1
Tag P dipakai untuk menciptakan paragraf.
Penulisan kode:
<P>...</P>
Tag H1 dipakai untuk merubah ukuran aksara / 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, gres berguru pribadi sanggup menulis instruksi HTML
</P>
</body>
</head>
</html>
Perhatikan instruksi yang diberi highliht diatas, itu merupakan penulisan instruksi untuk instruksi awal dan simpulan tag paragrafh.
Contoh penggunaan tag H1, H2, H3, H4, H5, H6 pada HTML
Keterangan:
Tag <H1> merupakan ukuran aksara paling besar, dibawahnya masih ada
Tag <H2> untuk merubah ukuran aksara lebih kecil dari tag <H1>
Tag <H3> untuk merubah ukuran aksara lebih kecil dari tag <H2>
Tag <H4> untuk merubah ukuran aksara lebih kecil dari tag <H3>
Tag <H5> untuk merubah ukuran aksara lebih kecil dari tag <H4>
Tag <H6> untuk merubah ukuran aksara lebih kecil dari tag <H5>
Contoh penulisan instruksi untuk memakai tag H1
<html>
<head>
<title>Contoh H1 H2 H3 H4 H5 H6</title>
<body>
<!--dibawah ini teladan penulisan H1-->
<H1>
Ini text dengan format H1 lebih besar dari H2
</H1>
<!--dibawah ini teladan penulisan H2-->
<H2>
Ini text dengan format H2 lebih besar dari H3
</H2>
<!--dibawah ini teladan penulisan H4-->
<H3>
Ini text dengan format H3 lebih besar dari H4
</H3>
<!--dibawah ini teladan penulisan H4-->
<H4>
Ini text dengan format H4 lebih besar dari H5
</H4>
<!--dibawah ini teladan penulisan H5-->
<H3>
Ini text dengan format H5 lebih besar dari H6
</H3>
<!--dibawah ini teladan 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 menciptakan aksara 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 memakai tag I </><br/>
<em>Teks paragarafh memakai 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 instruksi 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 menciptakan teks superscript
Contoh tag untuk penulisan tag sup;
<sup>Text character</sup>
Fungsi dari tag sub yaitu; untuk menciptakan 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 memilih jenis huruf
Contoh penulisan instruksi html font face;
<fontface="arial">Ini teks dengan jenis aksara Arial</font>
Fungsi tag font size dipakai untuk memilih ukuran aksara
Contoh penulisan instruksi html untuk font size;
<fontsize"72px">Ini teks dengan ukuran aksara 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 dipakai untuk mengatur aligment aksara biar 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 perihal dasar-dasar html pemrograman web dasar untuk smk kali ini, semoga bermanfaat untuk semuanya, terutama untuk anda yang sedang membutuhkan materi mengajar mata pelajaran pemrograman web dasar.
Dapatkan Modul Pemrograman Web Dasar Kelas X untuk Sekolah Menengah kejuruan dan MAK disini
Artikel diulis oleh:
Mulyadi Tenjo
Guru TIK SD dan guru mapel produktif untuk Sekolah Menengah kejuruan jurusan Multimedia di Kab. Bogor
Sumber https://modulkomputer.com
0 Response to "Materi Pemrograman Web Dasar Html Pemformatan Text"
Posting Komentar