Scribd Logo
Unggah

Selamat datang di Scribd!

  • Dasar HTML

    Diunggah oleh

    Arnaldo Manggala Rahardja
    21 tayangan31 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PPT, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    21 tayangan31 halaman

    Dasar HTML

    Diunggah oleh

    Arnaldo Manggala Rahardja

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 31

    Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web.

    HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

    Mendesain HTML dapat dilakukan dengan dua cara


    1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, Notepad, dan lain-lain. 2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML Kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML.

    Cara kedua adalah Menuliskan secara manual satu persatu tag-tag HTML. Hal ini akan memakan tenaga dan waktu, cara-cara untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan dipelajari, karena dengan cara itulah lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML. Format HTML, merupakan format yang resmi yang dapat di edit melalui Notepad, FrontPage, atau Adobe Dreamweaver File HTML adalah berektensi .HTML HTML terdiri dari beberpa elemen yang saling berkaitan dan membentuk satu dokumen HTML yang utuh. Elemen HTML terdiri dari : Head, Title, dan Body. Setiap elemen diapit (Delimeter) < > Teks yang ada pada delimeter disebut tag Untuk mengakiri tag pada dokumen HTML ditambahkan / (backspace)

    Contoh : <html> <body> Ini adalah HTML ku yang pertama </body> </html>

    Langkah membuat HTML menggunakan Notepad


    1. Start Program/All Program Accessories Notepad 2. Ketikan <html> <body> Ini adalah HTML ku yang pertama </body> </html> 3. klik file Save As tuliskan nama file pada file name dengan ekstensi .html Latihan1.html 4. klik Save Halaman Internet adalah bahasa yang terformat html. Maka nama file harus ditulis ekstensinya yaitu .html atau .htm, jika tidak ditulis file akan berekstesi .txt, maka file tersebut tidak dapat ditampilkan

    Langkah untuk menampilkan halaman Internet dengan Software IE


    1. Start Program/All Program Internet Explorer Klik dua kali ikon Internet Explorer pada desktop Klik dua kali ikon Internet Explorer pada taskbar 1. Klik file Open 2. Berikan tanda check (centang) pada Open as web folder browse Langsung klik browse 1. Pilih nama file yang akan ditampilkan contoh latihan1.html Open 2. OK Penulisan HTML. Dapat diatur formatnya seperti rata kanan, rata kiri, tengah, merubah jenis font, pewarnaan, memasukan gambar, animasi, link tabel, link ke halaman lain dan lain-lain

    Struktur Dokumen HTML


    Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya adalah: <HTML> <HEAD> Deskrisi dokumen </HEAD> <BODY> Isi dokumen </BODY> </HTML> Contoh: <HTML> <HEAD> <TITLE>Selamat datang di Homepage Saya</TITLE> </HEAD> <BODY> Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama. </BODY> </HTML>

    Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat dilihat pada pojok kiri atas (title bar) browser. Ketika orang akan membookmark web, maka judul inilah yang akan disimpan.

    1. Heading
    Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama. Contoh: <HTML> <HEAD> <TITLE>Headings</TITLE> </HEAD> <BODY> <H1>Heading Level 1</H1> <H2>Heading Level 2</H2> <H3>Heading Level 3</H3> <H4>Heading Level 4</H4> <H5>Heading Level 5</H5> <H6>Heading Level 6</H6> </BODY> </HTML>

    2. Paragraf
    Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan Contoh: <HTML> <HEAD> <TITLE>Paragraf</TITLE> </HEAD> <BODY> <P ALIGN="right"> Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari. Surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah

    <P ALIGN="center"> Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari. Karena tidak lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar jenazahnya hanya empat orang kawannya yang paling setia <P ALIGN="left"> Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara ketika membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilai lebih dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarkan jenazahnya ke pemakaman. Dengan demikian, yang berhak memperoleh harta yang banyak itu hanya empat orang, sebagai imbalan bagi kesetiaan mereka. Sumber humor, kisah dan pepatah </P> </BODY> </HTML>

    3. Blockquote Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan teks dalam bentuk huruf miring. Contoh: <HTML> <HEAD> <TITLE>BLOCKQUOTE</TITLE> </HEAD> <BODY> <H3>Sesuatu yang tidak perlu dicoba</H3><BLOCKQUOTE> Sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah pada remaja adalah narkoba, seks, alkohol dan merokok. Jangan sekali-kali mencoba jika tidak ingin membuat masalah baru </BLOCKQUOTE> </BODY> </HTML

    4. Preformatted Text Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).

    Line Break: <BR> Digunakan untuk pindah ke baris baru. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang. Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR. SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. FACE: Jenis atau nama font, dapat memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" dapat menggunakan graphic. COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB atau bisa juga langsung menggunakan nama warna (red misalnya).

    Contoh : <FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000"> Contoh teks yang berwarna merah</FONT> <FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">

    Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT Contoh : <BASEFONT SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000"> Semua tag di bawah ini membutuhkan taq penutup <B> Bold text <I> Italic text <U> Underscore <TT> Typewriter <S> Strikeout - draws a line through the text <PRE> Preformatted Text <DFN> Definition <BLINK> Text berkedip (lebih baik jangan digunakan) <STRONG> Strong <ADDRESS>

    Italic <CITE> <CODE> Digunakan untuk quoting text Monospaced font (digunakan bila ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML) <SAMP> Monospaced font (digunakan bila ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML) <KBD> Monospaced font (digunakan bila ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML) <BIG> Ukuran teks akan lebih besar satu ukuran <SMALL> Ukuran teks akan lebih kecil satu ukuran <SUP> Membuat tekssuperscript <SUB> membuat tekssub script <ABBREV> Abbreviations <ACRONYM> Untuk akronim <PERSON> Digunakan untuk indexing <Q> Membuat short inline quotation <VAR> Membuat variable name, selalu dalam italics.

    Lists
    Terdapat tiga tipe list yang dapat digunakan, yaitu : Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>. Contoh : <UL> <LI> Item nomer 1 <LI> Item nomer 2 <LI> Item nomer 3 </UL> Hasil dari kode di atas adalah : Item nomer 1 Item nomer 2 Item nomer 3

    Dengan atribut TYPE dapat mendefinisikan bentuk disc, circle atau square bullet point. Contoh : <UL COMPACT TYPE=square>

    Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag. Contoh : <OL TYPE=I> <LI> Item nomer 1 <LI> Item nomer 2 <LI> Item nomer 3 </OL> Hasil dari kode di atas adalah : 1. Item nomer 1 2. Item nomerr 2 3. Item nomerr 3

    Untuk TYPE dapat menggunakan 1- Default numbers, 1, 2, 3, etc. A- Huruf besar. A, B, C, etc. a- Huruf kecil. a, b, c, etc. I- Romawi huruf besar. I, II, III, etc. i- Romawi huruf kecil , i, ii, iii, etc.

    <html> <Body> <OL Type=A> <li> Item pertama <li> Item Ke dua <li> Item ke Tiga <br> <OL type=1> <li> Item pertama <li> Item Ke dua <li> Item ke Tiga <br> <OL type=I> <li> Item pertama <li> Item Ke dua <li> Item ke Tiga </OL>

    A. Item pertama B. Item Ke dua C. Item ke Tiga 1.Item pertama 2.Item Ke dua 3.Item ke Tiga I. Item pertama II. Item Ke dua III. Item ke Tiga

    Definition Lists: <DL> Contoh : Hasil dari kode di atas adalah : <DL> Item pertama. <DT> Item pertama. Penjelasan tentang item pertama. <DD> Penjelasan tentang item pertama. Item kedua. <DT> Item kedua. Penjelasan tentang item kedua <DD> Penjelasan tentang item kedua </DL>

    Images
    Digunakan untuk menampilkan image atau animasi gif pada halaman web. Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height Contoh : <IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100> <IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>

    Format file yang dapat didukung oleh tag img, bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut yaitu src border height width : letak file gambar yang akan ditampilkan : tebal bingkai gambar : menentukan tinggi image/gambar : menentukan lebar image/gambar

    src jika letak file gambar berada pada direktori yang sama dengan direktori file html. Maka cukup tuliskan nama filenya saja, contohnya src=nama_file.jpg. Letak file berada pada sub folder/direktori maka nilainya adalah src=sub_folder/nama_file.jpg. Jika letaknya pada folder/direktori diatas file html?. Caranya hampir sama hanya saja ditambahkan tanda ../(titik dua dan slash). Yang artinya pindah satu folder keatas, jika letaknya di dua folder diatas file html. Sama tinggal menambah ../../ (artinya pindah dua folder ke atas). Contohnya src=../nama_folder/nama_file.jpg.

    Contoh : <html> <head> <head> <title>Atribut dari Tag img</title> </head> <body> <p><b>Tag img hanya dengan atribut <i>src</i></b></p> <img src="../Html/Gambar/cab.png"> <p><b>Tag img dengan border="1"</b></p> <img src="../Html/Gambar/cab1.png" border="1"</b><p> <p><b>Tag img dengan height dan width</b></p> <img src="/Html/Gambar/cab1.png" border="1" height="300" width="200"> <p><b>Tag img dengan height dan width</b></p> <img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Gambar1.jpg" border="1" height="300" width="200"> </body> </Html>

    Links : Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah. Contoh : <A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain. <A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk membuat link pada alamat e-mail. <A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama. <A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda. <A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> membuat link dengan menggunakan gambar. Untuk

    Tabel Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> <TABLE> Terdiri dari atribut : align - perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang (background) dari tabel. border - ukuran lebar border tabel (dalam pixel). cellpadding - jarak antara isi cell dengan batas cell (dalam pixel). cellspacing - jarak antar cell (dalam pixel). width - ukuran tabel dalam pixel atau percent.

    Contoh : <TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">

    <TR> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut: align - perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang dari baris. valign - perataan vertikal : top, middle atau bottom.

    Contoh : <TR align="right" bgcolor="#0000FF" valign=top> <TD> Tag ini digunakan untuk membuat kolom baru pada tabel. align - perataan background - image yang digunakan sebagai latar belakang dari kolom. bgcolor - warna latar belakang colspan - lihat gambar contoh height - ukuran tinggi cell dalam pixels. nowrap - membuat supaya isi dari kolom tetap berada pada satu baris. rowspan - lihat gambar contoh valign - perataan vertikal :top, middle atau bottom. width - ukuran kolom dalam pixel atau percen.

    Contoh : <TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">

    <table width="100" border="1" cellspacing="2" cellpadding="2"> <tr> <td bgcolor="#0000FF"> &nbsp;</td> <td bgcolor="#FFFF66">&nbsp;</td> <td rowspan="2" bgcolor="#FF3366">&nbsp;</td> </tr> <tr> <td colspan="2" bgcolor="#33CC66">&nbsp;</td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99">&nbsp;</td> </tr> </table>

    <table width="100" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#0000FF">&nbsp; </td> <td bgcolor="#FFFF66">&nbsp;</td> <td rowspan="2" bgcolor="#FF3366">&nbsp;</td> </tr> <tr> <td colspan="2" bgcolor="#33CC66">&nbsp;</td> </tr> <tr> <td colspan="3" bgcolor="#FFCC99">&nbsp;</td> </tr> </table> 1 <FRAMESET cols="*,140"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET>

    Frames

    <form method="POST" action="--WEBBOT-SELF--"> <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p></form> <form method="POST" action="--WEBBOT-SELF--"> <input type="text" name="T1" size="20"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p></form> <form method="POST" action="--WEBBOT-SELF--"> <input type="checkbox" name="C1" value="ON"></p></form>

    <form method="POST" action="--WEBBOT-SELF--"> <input type="radio" value="V1" checked name="R1"></p></form> <form method="POST" action="--WEBBOT-SELF--"> <input type="button" value="Button" name="B3"></p> </form>

    2 <FRAMESET cols="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 3 <FRAMESET rows="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 4 <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 5 <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET></FRAMESET

    6 <FRAMESET cols="*,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET rows="15%,15%,70%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET></FRAMESET> 7 <FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame4"> </FRAMESET></FRAMESET>

    8 <FRAMESET rows="15%,70%,15%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="15%,70%,15%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET> <FRAME SRC="homepage.htm" NAME="BIG"> </FRAMESET></FRAMESET>

    KODE WARNA Berikut ini adalah contoh beberapa kode warna : Warna Heksadesimal White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Magenta #FF00FF Cyan #00FFFF Yellow #FFFF00 Aquamarine #70DB93 Chocolate #5C3317 Violet #9F5F9F Brass #B5A642 Copper #B87333 Pink #FF6EC7 Orange #FF7F00

    Kumpulan Tag HTML


    <!---> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut Membuat nama bagian yang didefinisikan pada link pada halaman yang sama Sebagai awal dari Java applets Mendefinisikan daerah yang dapat diklik (link) pada image map Membuat teks tebal Membuat atribut teks default seperti jenis, ukuran dan warna font Memberi (suara latar) background sound pada halaman web Memperbesar ukuran teks sebesar satu point dari defaultnya Membuat teks berkedip Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link Pindah baris Membuat caption pada tabel Untuk perataan tengah terhadap teks atau gambar Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser Indents teks Represents different sections of text. Menambahkan sound or file avi ke halaman web Seperti tag <a name> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks <a href> <a name> <applet> <area> <b> <basefont> <bgsound> <big> <blink> <body> <br> <caption> <center> <comment> <dd> <div> <embed> <fn> <font>

    <form> <frame> <frameset> <head> <hr> <html> <i> <img> <input> <li> <map> <marquee> <nobr> <noframes> <ol> <p> <pre> <script> <table> <td>

    Mendefinisikan input form Mendefinisikan frame Mendefinisikan attribut halaman yang akan menggunakan frame Mendefinisikan head document. Membuat garis horizontal Bararti dokumen html Membuat teks miring Image, imagemap atau an animation Mendefinisikan input field pada form Membuat bullet point /baris baru pada list (berpasangan dengan tag <dir>, menu>, <ol> and <ul> ) Mendefinisikan client-side map Membuat scrolling teks (teks berjalan) - hanya pada MS IE Mencegah ganti baris pada teks atau images Jika browser user tidak mendukung frame Mendefinisikan awal dan akhir list Ganti paragraf Membuat teks dengan ukuran huruf yg sama Mendefinisikan awal script Membuat tabel Kolom pada tabel <tr> Baris pada tabel <u> Membuat teks bergaris bawah <title> Mendefinisikan title

    <h1> ... <h6> Ukuran font

    Anda mungkin juga menyukai