1) Elemen
Halaman
Elemen HTML adalah bagian-bagian pembentuk halaman web yang meliputi head, body, title, link, text, paragraph, list, dsb. Elemen html ditandai dg simbol “tag”. Tag merupakan bentuk simbol berbentuk “<” sebagai tanda awal penulisan elemen dan diakhiri “>” sebagai tanda akhir penulisan sebuah elemen.
Elemen HTML adalah bagian-bagian pembentuk halaman web yang meliputi head, body, title, link, text, paragraph, list, dsb. Elemen html ditandai dg simbol “tag”. Tag merupakan bentuk simbol berbentuk “<” sebagai tanda awal penulisan elemen dan diakhiri “>” sebagai tanda akhir penulisan sebuah elemen.
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>.
contoh :
<head>
<title>ini halaman we baru</title>
</head>
penjelasan :
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>.
contoh :
<head>
<title>ini halaman we baru</title>
</head>
penjelasan :
·
<head>
Digunakan sebagi awal penanda script bagian head HTML.
Digunakan sebagi awal penanda script bagian head HTML.
·
<title>
sebagai awal tanda judul sebuah halaman web
sebagai awal tanda judul sebuah halaman web
·
Ini halaman web baru
judul halaman yang akan ditampilkan pada web browser
judul halaman yang akan ditampilkan pada web browser
·
</title>
tag akhir title
tag akhir title
·
</head>
tag akhir head
tag akhir head
3) Bagian
body
pada bagian body, semua script html akan diterjemahkan menjadi bentuk informasi pada halaman web, baik berupa teks, audio, video, gambar, dan animasi. Bagian body sebuah halam web html selalu diawali tag <body> dan diakhiri tag </body>.
pada bagian body, semua script html akan diterjemahkan menjadi bentuk informasi pada halaman web, baik berupa teks, audio, video, gambar, dan animasi. Bagian body sebuah halam web html selalu diawali tag <body> dan diakhiri tag </body>.
4) Mengganti
baris
script program html yang ditulis pada bagian body akan dicetak memanjang dalam satu baris ketika ditampilkan dalam satu baris oleh karenea itu diperlukan script tamabahan untuk mencetak pada baris selanjutnya dengan tag <br>
script program html yang ditulis pada bagian body akan dicetak memanjang dalam satu baris ketika ditampilkan dalam satu baris oleh karenea itu diperlukan script tamabahan untuk mencetak pada baris selanjutnya dengan tag <br>
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.
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 dapat menggunakan tag <hr>.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>garis horizontal</title>
</head>
<body>
terserah apa saja diatas. <hr> terserah apa saja dibawah.
</body>
</html>
untuk membuat garis horizontal dapat menggunakan tag <hr>.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>garis horizontal</title>
</head>
<body>
terserah apa saja diatas. <hr> terserah apa saja dibawah.
</body>
</html>
7) Membuat
komentar
untuk menambahkan komentar diawali dengan tanda “<!—“ diikuiti komentar kemudian diakhiri dengan tanda “-->”
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>garis horizontal</title> <!—judul halaman web-->
</head>
<body>
terserah apa saja diatas. <hr> terserah apa saja dibawah. <!—konten halaman web-->
</body>
</html>
untuk menambahkan komentar diawali dengan tanda “<!—“ diikuiti komentar kemudian diakhiri dengan tanda “-->”
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>garis horizontal</title> <!—judul halaman web-->
</head>
<body>
terserah apa saja diatas. <hr> terserah apa saja dibawah. <!—konten halaman web-->
</body>
</html>
B.Format teks
teks adalah informasi yang ditampilkan dalam halaman web yang terdiri atas gabungan karakter alfabet, numerik dan simbol-simbol khusus yang terdapat dalam kode ASCII
teks adalah informasi yang ditampilkan dalam halaman web yang terdiri atas gabungan karakter alfabet, numerik dan simbol-simbol khusus yang terdapat dalam kode ASCII
1) Memanipulasi
tampilan teks pada halaman web
·
Mencetak tebal teks
format: <b>teks dicetak tebal</b>
format: <b>teks dicetak tebal</b>
·
Mencetak tebal teks dengan tag strong
format: <strong>teks dicetak tebal strong</strong>
format: <strong>teks dicetak tebal strong</strong>
·
Mecetak miring teks
format: <i>teks dicetak miring</i>
format: <i>teks dicetak miring</i>
·
Mencetak teks bergaris bawah
format: <u>teks dicetak dengan garis bawah</u>
format: <u>teks dicetak dengan garis bawah</u>
·
Memberi tekanan teks
format: <em>teks tekanan</em>
format: <em>teks tekanan</em>
·
Membesarkan huruf
format: <big>hsjgshakj</big>
format: <big>hsjgshakj</big>
·
Mengecilkan huruf
<small>hakjgkhdgkha</small>
<small>hakjgkhdgkha</small>
·
Mencetak superscript teks
format: <sup>hgsiafif</sup>
format: <sup>hgsiafif</sup>
·
Mencetak subscript teks
format: <sub>jajhdkhfkj</sub>
format: <sub>jajhdkhfkj</sub>
·
Mencetak teks berkedip
format: <blink>jhwougfougwg</blink>
format: <blink>jhwougfougwg</blink>
·
Mencetak teks berjalan
format: <marquee>jjewgvgohwoho</marquee>
format: <marquee>jjewgvgohwoho</marquee>
·
Mencetak teks dengan coretan
format: <s>jwhkeg3wgih</s>
format: <s>jwhkeg3wgih</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 sampai dengan 6 ukuran.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>heading</title>
</head>
<body>
<h1>teks dengan heading berkuran1</h1>
<h2>teks dengan heading berkuran2</h2>
<h3>teks dengan heading berkuran3</h3>
<h4>teks dengan heading berkuran4</h4>
<h5>teks dengan heading berkuran5</h5>
<h6>teks dengan heading berkuran6</h6>
</body>
</html>
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 sampai dengan 6 ukuran.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>heading</title>
</head>
<body>
<h1>teks dengan heading berkuran1</h1>
<h2>teks dengan heading berkuran2</h2>
<h3>teks dengan heading berkuran3</h3>
<h4>teks dengan heading berkuran4</h4>
<h5>teks dengan heading berkuran5</h5>
<h6>teks dengan heading berkuran6</h6>
</body>
</html>
3) Bentuk
preformat teks
dalam html terdapat fungsi preformat teks yang berguna untuk mencetak teks dalam web browser sesuai jarak, ukuran, dan lebar teks dengan penulisan kode program html bagian body dengan menambahkan tag awal <pre> dan tag akhir <pre>
dalam html terdapat fungsi preformat teks yang berguna untuk mencetak teks dalam web browser sesuai jarak, ukuran, dan lebar teks dengan penulisan kode program html bagian body dengan menambahkan tag awal <pre> dan tag akhir <pre>
4) Format
address
tag <address> merupakan standar kode html yang digunakan untuk penulisan sebuah alamat intuisi yang berfungsi sebagai informasi kontak sebuah intuisi. Hasil output yang ditampilkan akan dicetak miring dan ketika penulisan alamat lebih dari satu baris maka harus disertakan tag ganti baris.
tag <address> merupakan standar kode html yang digunakan untuk penulisan sebuah alamat intuisi yang berfungsi sebagai informasi kontak sebuah intuisi. Hasil output yang ditampilkan akan dicetak miring dan ketika penulisan alamat lebih dari satu baris maka harus disertakan tag ganti baris.
5) Format
keluaran program komputer
beberapa script html yang dapat digunakan untuk mendefinisikan proses secara komputerisasi :
beberapa script html yang dapat digunakan untuk mendefinisikan proses secara komputerisasi :
·
<code>.....</code>
digunakan untuk mendefinisikan kode program tertentu yang ditampilkan pada web page.
digunakan untuk mendefinisikan kode program tertentu yang ditampilkan pada web page.
·
<var>.....</var>
digunakan untuk mendefinisikan variabel dalam program
digunakan untuk mendefinisikan variabel dalam program
·
<samp>.....</samp>
digunakan untuk mendefinisikan contoh keluaran program
digunakan untuk mendefinisikan contoh keluaran program
·
<tt>.....</tt>
untuk mendefinisikan teletype text
untuk mendefinisikan teletype text
6) Format
Abbr dan Acronym
tag <abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks.
contoh penggunaan Abbr dan Acronym :
<!—file apasaja.html-->
<html>
<head>
<title>mempersingkat istilah</title>
</head>
<body>
<abbr title=”palang merah indonesia”>PMI</abbr><br>
<acronym title=”SMK Negeri 2 Kediri”>smekda</acronym>
</body>
</html>
tag <abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks.
contoh penggunaan Abbr dan Acronym :
<!—file apasaja.html-->
<html>
<head>
<title>mempersingkat istilah</title>
</head>
<body>
<abbr title=”palang merah indonesia”>PMI</abbr><br>
<acronym title=”SMK Negeri 2 Kediri”>smekda</acronym>
</body>
</html>
7) Mengubah
arah tampilan teks
Bdo merupakan singkatan dari budirectional override yang berguna untuk mengubah arah penulisan teks pada halaman web.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membalikkan arah teks</title>
</head>
<body>
<bdo dir=”rtl”>pemrograman web dengan hypertext markup language</bdo><br>
<bdo dir=”ltr”>teknologi informasi dan komunikasi</bdo>
</body>
</html>
Bdo merupakan singkatan dari budirectional override yang berguna untuk mengubah arah penulisan teks pada halaman web.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membalikkan arah teks</title>
</head>
<body>
<bdo dir=”rtl”>pemrograman web dengan hypertext markup language</bdo><br>
<bdo dir=”ltr”>teknologi informasi dan komunikasi</bdo>
</body>
</html>
8) Membuat
kutipan teks
Tag <q> untuk membuat kutipan pendek
Tag <q> untuk membuat kutipan pendek
Tag <blockquote>, untuk menyatakan kutipan panjang
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>kutipan teks</title>
</head>
<body>
dibawah 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>
</blockquote>
sementara itu, dibawah ini adalah kutioan pendek.<br><q>
baris kalimat ke 1 dengan kutipan pendek<br>
baris kalimat ke 2 dengan kutipan pendek<br>
</q>
</body>
</html>
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>kutipan teks</title>
</head>
<body>
dibawah 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>
</blockquote>
sementara itu, dibawah ini adalah kutioan pendek.<br><q>
baris kalimat ke 1 dengan kutipan pendek<br>
baris kalimat ke 2 dengan kutipan pendek<br>
</q>
</body>
</html>
9) Penyisipan
dan penghapusan teks
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>=” “>
contoh :
<!—file apasaja.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.<ins>20 pcs</ins> jawaban yang sudah dikoreksi
</body>
</html>
<a href>=” “>
contoh :
<!—file apasaja.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.<ins>20 pcs</ins> jawaban yang sudah dikoreksi
</body>
</html>
C.List HTML
list merupakan bentuk struktur dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web.
list merupakan bentuk struktur dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web.
1)
List bernomor urut (ordered list)
Teknik menampilkan daftar tertentu dalam halaman web menggunakan otem penomoran. Untuk menggunakan list bernomor, digunakan tag <ol> dan diakhiri dengan tag </ol>
contoh :
<!—file apasaja.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>
Teknik menampilkan daftar tertentu dalam halaman web menggunakan otem penomoran. Untuk menggunakan list bernomor, digunakan tag <ol> dan diakhiri dengan tag </ol>
contoh :
<!—file apasaja.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>
Adapun untuk menampilakn nomor urut dengan model tertentu, dapat
digunakan argumen berikut
Argumen
|
Fungsi
|
l
|
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, anda dapat menggunakan tag <ul> dan diakhiri dengan </ul>. Ada beberapa macam jenis tanda unordered list seperti berikut.
untuk membuat daftar tertentu tanpa mempergunakan sebuah urutan penomoran, anda 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
suatu subdaftar baru didalam sebuah daftar.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>hapus dan sisip teks</title>
</head>
<body>
menu bersarang
<ol>
<li>Daging</li>
<ul>menu ayam
<li>ayam bakar</li>
<li>bebek panggang</li>
</ul>
<li>sayur</li>
suatu subdaftar baru didalam sebuah daftar.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>hapus dan sisip teks</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>
<li>sayur sup</li>
<li>sayur sup</li>
</ol>
</ol>
</body>
</html>
4)
List terdefinisi
adalah sebuah daftar yang menggunakan tag <dl> dan diakhiri dengan </dl>.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>list terdefinisi</title>
</head>
<body>
contoh list yang terdefinisi
<dl>
<dt>PMI</dt>
<dd>palang merah indonesia</dd>
<dt>PMR</dt>
<dd>palang merah remaja</dd>
</dl>
</body>
</html>
adalah sebuah daftar yang menggunakan tag <dl> dan diakhiri dengan </dl>.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>list terdefinisi</title>
</head>
<body>
contoh list yang terdefinisi
<dl>
<dt>PMI</dt>
<dd>palang merah indonesia</dd>
<dt>PMR</dt>
<dd>palang merah remaja</dd>
</dl>
</body>
</html>
waahh....artikel yang sangat bagus gan, penyajian artikel format teks html yang admin buat sangatlah dimengerti dan dapat memudahkan saya dalam belajar pemograman web. Semoga artikel yang admin sajikan ini dapat bermanfaat untuk saya ataupun yang lainnya dalam belajar, semangat terus dalam berkarya dan sukses selalu. Perkenalkan nama saya Lois Pratama, website kampus saya https://www.atmaluhur.ac.id/
BalasHapusWah mantap sekali Artikelnya sangat membantu Gan. Dengan adanya artikel tentang HTML format teks untuk mempelajari dasar-dasar pemrograman web. Semangat berkreasi gan. Semoga kedepannya bisa membuat kreasi artikel yang bermanfaat untuk banyak orang. Perkenalkan nama saya Fadhiel Adha ini alamat website kampus saya https://www.atmaluhur.ac.id/.
BalasHapus