Improve and Share your Knowledge

Breaking News
recent
Format Teks Halaman Web

Format Teks Halaman Web

Agustus 26, 2017

Format Teks Halaman Web


A. Struktur Dasar HTML

Untuk membantu mengingat kode-kode HTML, sebaiknya gunakan aplikasi Sublime atau Notepad++ sebagai editor teks default.

                     1. Elemen Halaman

Merupakan bagian-bagian pembentuk halaman web yang meliputi head, body, title, link, text, paragraph, list, dsb. Setiap elemen HTML ditandai dengan symbol tag. Tag merupakan bentuk symbol berbentuk “<” sebagai awal penulisan elemen dan diakhiri “>” sebagai tanda akhir penulisan elemen.
Akan tetapi, tidak semua elemen dalam penulisannya harus menggunakan tag awal dan akhir secara berpasangan.
Penulisan kode elemen terdiri dari tag awal dan tag akhir.
Formatnya sebagai berikut.
 

↠

Contohnya :
·         Untuk mencetak garis horizontal menggunakan tag <hr>
·         Untuk mencetak kalimat pada baris selanjutnya menggunakan tag <br>
·         Penomoran sebuah daftar teks menggunakan list item dengan tag <li>
·         Pembuatan format teks dalam bentuk paragraph menggunakan tag <p>


2.  Bagian Head
Fungsinya memberikan informasi tentang halaman web itu sendiri.
Formatnya :
<head>
                <title>Ini adalah halaman web</title>
</head>

              3. Bagian Body
Pada bagian ini, semua script akan diterjemahkan menjadi bentuk informasi pada halaman web.
Formatnya :
<body>
                Isi halaman web
</body>
              4. Mengganti Baris
Menggunakan tag <br>

                    5. Membentuk Paragraf
Dengan memberikan tag awal <p> dan tag akhir </p>

                    6.  Garis Horizontal
Tagnya <hr> , sehingga secara otomatis informasi teks yang dituliskan setelah tag <hr> akan ditampilkan pada baris selanjutnya di bawah garis mendatar tersebut.

                    7. Membuat Komentar
Diawali tanda “<!--“  dan diakhiri tanda “-->”. Penulisan komentar dalam kode program HTML tidak akan memengaruhi penerjemahan kode program web browser karena tidak dieksekusi.

Sehingga secara keseluruhan formatnya seperti di bawah ini.

Dan hasilnya menjadi

B. Format Teks

           1. Memanipulasi Tampilan Teks pada Halaman Web
a.       Menetak tebal teks
Format: <b>teks dicetak tebal</br>
b.      Mencetak tebal teks dengan tag strong
Format: <strong>teks dicetak tebal dengan strong</strong>
c.       Menetak miring teks
Format: <i>teks dicetak miring</i>
d.      Mencetak teks bergaris bawah
Format: <u>teks dicetak dengan garis bawah</u>
e.      Memberi tekanan teks
Format: <em>teks dicetak dengan tekanan</em>
f.        Membesarkan huruf
Format: <big>membesarkan teks yang dicetak</big>
g.       Mengecilkan huruf
Format: <small>mengecilkan teks</small>
h.      Mencetak superscript teks
Format: <sup>teks dicetak dengan superscript</sup>
i.         Mencetak subscript teks
Format: <sub>teks dicetak dengang subscipt</sub>
j.        Mencetak teks berkedip
Format: <blink>teks dicetak kelap-kelip</blink>
k.       Mencetak teks berjalan
Format: <marquee>teks dicetak berjalan</marquee>
l.         Mencetak teks dengan coretan
Format: <s>tampilan teks dicoret dengan garis</s>
Sehingga secara keseluruhan formatnya adalah:

Dan hasilnya sebagai berikut.

          2.  Format Heading
Fungsinya untuk mengatur besar ukuran teks dalam halaman web yang biasanya diterapkan pada sebuah judul atau tema informasi uang terdapat pada halaman web. Penulisan diawali dengan tag <h1> dan diakhiri tag </h1>,dengan formasi heading yang memilik 6 ukuran dari 1 (terbesar) sampai 6 (terkecil).
Formatnya adalah:

Dan hasilnya:

         3. Bentuk Preformat Teks
Fungsinya adalah mencetak teks pada web browser sesuai jarak, ukuran dan lebar teks dengan penulisan tag <pre>... </pre>.
Format :

           4. Format Address
Digunakan untuk penulisan  sebuah alamat institusi yang berfungsi sebagai informasi kontak sebuah instiusi. Output yang ditampilkan akan dicetak miring.
Contoh :
Hasil :

          5. Format Keluaran Program Komputer
Beberap script HTML yang dapat digunakan untuk mendefinisakn proses secara komputerisasi adalah:
§  <code>…</code>
Script ini digunakan untuk mendefinisikan kode program tertentu yang ditampilkan pada web page.
§  <var>…</var>
Digunakan untuk mendefinisikan variable dalam program.
§  <samp>..</samp>
untuk mendefinisikan contoh keluaran program.
§  <tt>…</tt>
Untuk mendefinisikan teletype text.
Contoh secara keseluruhan sbb:


           6. Format Abbr dan Acronym
Digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks. Kepanjangan dari sebuah singkatan istilah tidak akan ditampilkan dalam halaman web, tetapi akan membantu system penelusuran keyword dalam mesin pencari internet, seperti Google dan Yahoo.
Format:
Hasil: 
           7.  Mengubah Arah Tampilan Teks
Untuk mengubah arah penulisan teks dari kanan ke kiri seperti ketentuan penulisan huruf Arab, dapat menggunakan tag <bdo>.
Contohnya :



           8. Membuat Kutipan Teks
  • Tag <q> untuk membuat kutipan pendek. Kutipan ini akan ditulis tanpa menjorok ke dalam halaman web. Selain itu, kutipan diawali dan diakhiri dengan tanpa petik dua(“).
  • Tag <blockquote>, untuk menyatakan kutipan panjang, yang akan diawali dengan penulisan teks secara menjorok ke dalam.

Contoh :

           9. Penyisipan dan Penghapusan Teks
Untuk menghapus data yang salah, dapat digunakan tag <del> yang memiliki efek teks dicoret tengah. Sementara itu, untuk melakukan koreksi informais yang salah pada web, dapat digunakan tag <ins> yang memiliki efek tulisan bergaris bawah.
Contohnya :


C. List HTML

           1. List Bernomor Urut (Ordered List)
Teknik menampilkan daftar tertentu dalam halaman web menggunakan item penomoran, seperti 1,2,3, dst. Tagnya <ol>…</ol>
Contoh :

Adapun untuk menapilkan nomor urut dengan model tertentu, dapat digunakan argument berikut.
Argumen
Fungsi
I
Menampilkan nomor urut dengan angka dalam romawi besar(I, II, III, dst)
i
Menampilkan nomor urut dengan angka romawi kecil (i, ii, iii, dst)
a
Menampilkan nomor urut dengan menggunakan abjad kecil (a, b, c, dst)
A
Menampilkan nomor urut dengan menggunakan abjad besar (A, B, C, dst)
Contoh :
           
           2. List tanpa Urutan Nomor (Unordered List)
Tag <ul>..</ul>
Ada beberapa jenis tanda unordered list seperti berikut.

Argumen
Fungsi
Disc
Menampilkan pengurutan dengan tanda lingkaran(bullet) tanpa warna pada sisi tengahnya
Square
Menampilkan pengurutan dengan tanda kotak hitam penuh
Circle
Menampilkan pengurutan dengan tanda lingkaran(bullet) hitam penuh
Contoh :

           3.  List Bersarang (nested list)
Merupakan suatu subdaftar baru di daam sebuah daftar.
Contoh :
           
           4. List Terdefinisi
Menggunakan tag <dl>..</dl>.
Untuk menyatakan terminasi sub list, gunakan tag <dt>…</dt>.
Untuk menjelaskan pengertian dari sub list digunakan tag <dd>…</dd> yang memiliki efek penulisan teks agak menjorok ke dalam.
Contoh :

SEKIAN PEMBAHASAN TENTANG FORMAT TEKS HTML, SEMOGA BERMANFAAT..



A

A

Hello, it's me.

12 komentar:

  1. Anisa Fernanda29/8/17 7:23 AM

    Blognya sangat keren ...

    BalasHapus
  2. A29/8/17 7:24 AM

    iya, terima kasih

    BalasHapus
  3. Unknown29/8/17 7:36 AM

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. Unknown28/9/18 11:31 PM

    artikelnya bagus dan mudah untuk dipahami... tks yaa untuk penjelasannya... sukses selalu... Kunjungi juga website kampus saya : http://www.atmaluhur.ac.id dan blog saya : https://kima.mahasiswa.atmaluhur.ac.id

    BalasHapus
  5. Unknown24/2/20 7:15 PM

    Woww ini adalah salah satu artikel yg cukup lengkap yg pernah saya lihat, sayapun dapat mengerti sedikit simbol-simbol ttg html , dtunggu artikel-artikel selanjutnya gan ,ohya nama saya putra laksana, website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  6. Unknown25/2/20 9:30 PM

    Terimakasih telah membuat blog ini, sehingga saya dapat dengan mudah mempelajari tentang html ini... Teruslah membuat beragam hal mengenai html, supaya mempermudah saya dan rekan2 lainnya dlm mempelajari html...
    Kunjungi website kampus saya di https://www.atmaluhur.ac.id/

    BalasHapus
  7. Unknown26/2/20 12:16 PM

    Termikasih kak atas artikelnya, dengan artikel yang kakak buat, saya bisa belajar dalam materi pemrograman web, semangat kakak dalam membuat artikel yang seperti ini, agar saya yang masih pemula bisa belajar dari kakak, dan bermanfaat bagi saya dalam penerapannya.
    Perkenalkan nama saya Dela Novitasari dari kampus STMIK ATMA LUHUR PANGKALPINANG, web kampus kami ( https://www.atmaluhur.ac.id/ )

    BalasHapus
  8. Unknown26/2/20 7:36 PM

    terimakasih min atas informasinya, banyak sekali pelajaran yang saya dapat dari sini terutama di bagian nested list. ini sangat berguna bagi saya yang masih pemula didunia perkomputeran semangat terus ya min terus berkarya
    perkenalkan nama saya Rida Anggraini
    kunjungi Website kampus saya di link ( https://www.atmaluhur.ac.id/ )

    BalasHapus
  9. unknow27/2/20 10:39 AM

    makasih ya buat artikelnya sangat membantu sekali .. berkat artikel ini saya mulai mengerti dan memahami mengenai format teks HTML .. terus buat artikel yg agus lain nya ya :)
    makasih min:)
    perkenalkan nama saya Laila Huriana Anisah Rohmawati dari kampus STMIK ATMA LUHUR BangkaBelitung
    Website kampus saya di link https://www.atmaluhur.ac.id/

    BalasHapus
  10. Unknown29/2/20 1:50 PM

    Terima kasih admin untuk artikel nyaa..
    Artikel ini sangat bermanfaat untuk saya sebagai mahasiswa yang sedang belajar html. Terus membuat artikel seperti ini ya. Sukses selalu..
    Oh iya perkenalkan nama saya Mozza Muthia Rahman dari kampus atma luhur
    (Website kampus saya di https://www.atmaluhur.ac.id/)

    BalasHapus
  11. risa aprilia1/3/20 1:27 AM

    terimakasih gan artikelnya sangat sangat membatu saya yg masih pemula ini untuk mempelajari format text html,artikelnya sangat menarik dan bermanfaat,semoga kedepannya masih dapat membuat artikel lain yang bermanfaat lagi,perkanalkan nama saya Risa Aprilia,kunjungi juga gan website kampus saya ,di link ini https://www.atmaluhur.ac.id/

    BalasHapus
  12. Unknown3/3/20 8:05 AM

    Thank you Min, this article really helps me who are studying and programming web enthusiasm min to make the article better and more enthusiastic. My name is Gazza Muhammad Suryansah https://www.atmaluhur.ac.id/

    BalasHapus

Langganan: Posting Komentar (Atom)
Diberdayakan oleh Blogger.