Pengenalan HTML

Daftar Isi

1. Anchor Link
2. Text Formatting
1. Bolding Text
2. Blockquote Text
3. DD, DL, & DT
4. Font Styling
5. Heading Text
6. Marquee Text
7. Text Paragraph
8. Line Break

Anchor / Link text

Anchor / Link text atau yang disebut tautan seringkali dijumpai pada setiap halaman web yang berguna untuk mengalihkan suatu halaman ke halaman yang lain. Pengalihan halaman web dapat dilakukan pada halaman itu sendiri ataupun mengalihkan ke halaman lainnya. Cara membuat link adalah dengan menyisipkan tag <a> text </a>

Contoh
Link 1, text tujuan dari link 1

Source Code nya adalah sbb

<a href="#tujuan link">Anchor text</a>

Text Formatting

Text formatting atau yang disebut dengan styling text biasa digunakan dalam programming web, gunanya adalah untuk mempercantik setiap paragraf yang ada dalam halaman web. Banyaknya teknik styling text yang harus diketahui seperti bagaimana membuat paragraf, text heading, underline text, italic text, bolding text, marquee text, dan lain-lain

1. Bolding Text

Bolding Text atau yang disebut dengan penebalan teks seringkali digunakan untuk mempertegas teks. Bolding text biasanya digunakan sebagai keyword agar mudah dalam pencarian. membuat bolding text pada halaman web adalah dengan menyisipkan tag html <b>kalimat</b>

Source Code nya
<b>text yang di tebalkan</b>
Hasil Eksekusi Program
text yang ditebalkan

2. Blockquote Text

Blockquote Text adalah suatu teknik dalam pemberian format berupa catatan yang perlu diperhatikan.

Contoh Source Code nya

<blockquote> I Dare You to read this <blockquote>

text yang menggunakan blockquotes

3. DL, DT, & DD

Elemen DL, DT, & DD merupakan salah satu bagian dari kelompok element yang digunakan untuk membuat daftar definisi dalam sebuah dokumen.

Contoh Source Code

<DL style="margin-left:50px;">
<DT>Z-scale</DT>
<DD>A railroad modeling scale of 1:220. The smallest mass-produced commercial model scale.</DD>
</DL>

Hasil Eksekusi Program

Z-scale

A railroad modeling scale of 1:220. The smallest mass-produced commercial model scale.

4. Font Styling

Font Styling adalah suatu teknik merender text huruf, angka, dan simbol dengan menggunakan berbagai macam jenis karakter. Penyisipan karakter teks dapat dilakukan dengan menggunakan elemen <font>TEXT </font> dengan pendeklarasian atribut yang digunakan seperti <font face="arial">TEXT </font> Font styling mempunyai atribut-atribut yang berbeda diantaranya :

• Font face
• Font size
• Font color



Font face


Font Face merupakan jenis karakter teks yang digunakan. Umumnya browser seperti mozilla, chrome, ie, safari lebih mengenal karakter teks standar antara lain arial, arial black, helvetica, verdana, gadget, sans serif, times new roman, courier, tahoma, dan lain-lain.

Contoh Source Code :
<font face="Arial Black">Font Arial Black</font>
<font face="Helvetica">Font Helvetica</font>
<font face="Times New Roman">Font Times New Roman</font>
<font face="Courier">Font Courier</font>
Hasil Eksekusi Program
Font Arial Font Helvetica
Font Times New Roman
Font Courier



Font Size


Font size merupakan atribut dari suatu ukuran font yang digunakan dengan menyisipkan atribut size pada elemen font

Contoh Source Code
<font face="Arial Black" size="2">Font Arial Black dengan ukuran 2 </font>
<font face="Helvetica" size="6">Font Helvetica dengan ukuran 6</font>
<font face="Times New Roman" size="+4">Font Times New Roman dengan ukuran +4</font>
<font face="Courier" size="-3">Font Courier dengan ukuran -3</font>
Hasil Eksekusi Program
Font Arial dengan ukuran 2
Font Helvetica dengan ukuran 6
Font Times New Roman dengan ukuran +4
Font Courier dengan ukuran -3



Font Color


Font Color digunakan untuk memberikan efek warna pada tulisan, pada halaman web, pemberian warna dapat dilakukan dengan memberikan nilai jenis warna yang diinginkan atau dengan menggunakan kode warna. Pemberian warna dilakukan dengan menyisipkan atribut color="nilai" pada elemen font

Contoh Source Code
<font face="Arial Black" size="2" color="red">Font Arial Black dengan ukuran 2 </font>
<font face="Helvetica" size="6" color="purple">Font Helvetica dengan ukuran 6</font>
<font face="Times New Roman" size="+4" color="#663300">Font Times New Roman dengan ukuran +4</font>
<font face="Courier" size="-3">Font color="006666"Courier dengan ukuran -3</font>
Contoh Eksekusi Program
Font Arial dengan ukuran 2
Font Helvetica dengan ukuran 6
Font Times New Roman dengan ukuran +4
Font Courier dengan ukuran -3

5. Heading Text

Text heading adalah suatu teknik pembeda untuk memperjelas seberapa kuat atau pentingnya kalimat pada setiap paragraf. Text heading ini biasanya digunakan pada judul paragraf atau title paragraf dan turunannya. Text heading terdiri dari 6 seri yaitu <h1>, <h2>, <h3>, hingga <h6>

Contoh Source Code

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

Hasil Eksekusi Program




Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

6. Marquee Text

Marquee Text adalah suatu teknik pada HTML yang memberikan efek berupa teks berjalan.

Contoh Source Code
<marquee>Warning : Kecepatan Tulisan jangan melebihi 100Km/Jam <marquee>
Hasil Eksekusi Program
Warning : Kecepatan Tulisan jangan melebihi 100Km/Jam

7. Text Paragraph

Text paragraf digunakan untuk mendeskripsikan setiap alinea pada halaman web dengan menyisipkan tag HTML <p>pernyataan</p>

Contoh Source Code
<p> Ini adalah Alinea pertama pada halaman Web </p>
<p> Ini adalah Alinea kedua pada halaman Web </p>
Hasil Eksekusi Program
Ini adalah Alinea pertama pada halaman Web
Ini adalah Alinea kedua pada halaman Web

8. Line Breaks

Line Breaks merupakan salah satu tag elemen HTML yang digunakan untuk menambah baris baru(line new) pada halaman web.

Contoh Source Code
Ini adalah pernyataan pada baris pertama <br/> Ini adalah pernyataan pada baris kedua.
Hasil Eksekusi Program
Ini adalah pernyataan pada baris pertama
Ini adalah pernyataan pada baris kedua.

9. Unordered List

Unordered List merupakan salah satu tag elemen HTML yang digunakan untuk membuat daftar list berupa simbol.

Contoh Source Code
<ul>DAFTAR LIST
<li> List Pertama </li>
<li> List Kedua </li>
<li> List Ketiga </li>
</ul>
Hasil Eksekusi Program
DAFTAR LIST
• List Pertama
• List Kedua
• List Ketiga