MENERAPKAN FORMAT TEKS PADA HALAMAN WEB
MENERAPKAN FORMAT TEKS PADA HALAMAN WEB

Judul Materi : Menerapkan Format Teks pada Halaman Web

Kompetensi Dasar

3.2 Menerapkan format teks pada halaman web

4.2 Membuat kode html untuk menampilkan teks dalam format tertentu pada halaman web

Indikator Pencapaian Kompetensi

3.2.1 Menjelaskan struktur dasar pemrograman web dengan html.

3.2.2 Menjelaskan berbagai versi dari html.

4.2.1 Merancang program tampilan format teks dalam halaman web

4.2.2 Membuat program halaman web yang menampilkan teks dengan berbagai format.

Tujuan Pembelajaran

  1. Siswa dapat mengamati untuk mengidentifikasi dan merumuskan masalah tentang format teks pada halaman web.
  2. Siswa dapat mengumpulkan dan mengolah data tentang format teks pada halaman web.
  3. Siswa dapat mengomunikasikan tentang format teks pada halaman web

Uraian Materi

Struktur Dasar Pemrograman Web Dengan HTML

HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintahperintah yang dispesifikasikan.

Struktur dasar pemrograman website HTML / dokumen HTML adalah sebagai berikut:

Versi HTML

HTML sudah menjadi teknologi utama web dari 1990an setelah Tim Berners-Lee, yang merupakan ahli fisika dari Lembaga Penelitian CERN, menciptakannya di tahun 1989. Tujuan awal dari pembuatan HTML adalah untuk melayani pembaca agar bisa membuka dokumen yang berformat HTML. Namun, seiring vitalnya manfaat HTML, hingga saat ini sudah ada 5 versi yang Anda kenal, seperti berikut ini:

  • HTML v1.0

Versi pertama dari HTML ini adalah pionir dari perkembangan HTML. Tidak heran jika versi ini memiliki banyak sekali kelemahan termasuk tampilannya yang masih sangat sederhana. HTML versi 1.0 ini sudah mampu mendukung peletakan image pada dokumen tanpa adanya wrapping, heading, hypertext, paragraph, cetak tebal dan miring pada penulisan text.

  • HTML v2.0 (24 November 1995)

HTML versi 2.0 adalah pionir dari web interaktif seperti yang Anda temukan saat ini. Dibandingkan dengan versi pertama, struktur HTML lebih tertata rapi dan mampu menampilkan form dokumen. Dengan adanya form tersebut, Anda bisa memasukkan alamat, nama, saran dan kritik pada suatu dokumen.

  • HTML v3.0

Jika dibandingkan dengan kedua versi HTML sebelumnya, HTML v3.0 tidak memiliki umur yang lama. Itu disebabkan karena ada versi terbaru dari versi 3, yaitu versi 3.2. Di versi 3.0, HTML sudah bisa dipergunakan untuk meletakkan tabel dan gambar. Fitur terbaru dari HTML 3.0 juga mampu untuk mendukung penggunaan rumus matematika pada dokumennya.

  • HTML v3.2 (14 Januari 1996)

HTML versi ini adalah pembaruan dari versi 3.0. Hingga saat ini, jenis HTML ini adalah yang paling sering dipergunakan. Versi ini dipublikasikan dan versi pertama yang dikembangkan serta distandarisasi khusus oleh W3C. Versi 3.2 ini pada awalnya disebut dengan Wilbur sebelum dikenal dengan nama HTML versi 3.2.

Fitur yang ada di versi ini diantaranya adalah gambar untuk background, tabel, style, frame, hingga teks di sekeliling gambar. Jika di versi sebelumnya, Anda hanya bisa menggunakan HTML saja untuk pembuatan dokumen namun di versi ini tidak. Artinya, Anda bisa menggunakan script di luar HTML untuk kinerja HTML yang lebih baik atau untuk tujuan tertentu. Beberapa script HTML yang bisa dipergunakan diantaranya adalah Javascript dan VBScript.

  • HTML v4.0 (18 Desember 1997)

Dibandingkan versi sebelumnya, versi ini hadir dengan banyak perubahan dari v3.2. Beberapa diantaranya ada di tabel, link, image, text, meta, form dan imagemaps.

  • HTML v4.01 (5 Mei 2000)

Setelah ada versi 4.0, terdapat versi 4.01 yang merupakan revisi dari versi sebelumnya. Di versi ini, ada perbaikan kesalahan minor (kecil). Dari struktur pada HTML yang ada di versi ini, membuat HTML v4.01 menjadi standarisasi elemen serta atribut script XHTML 1.0.

  • HTML v5.0 (28 Oktober 2014)

Bisa dikatakan, versi 5.0 dari HTML adalah versi paling canggih dan paling stabil dibandingkan versi sebelumnya. Pembaharuan ini baru diperkenalkan pada tahun 2009. Versi terbaru ini dikembangkan lagi pada tanggal 4 Maret 2010 oleh W3C dan IETF (Internet Engineering Task Force). IETF sendiri merupakan organisasi yang sudah menangani HTML sejak v2.0.

Html, Head, Title, Body.

  • HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
  • Head adalah elemen HTML head <head> sangat disarankan untuk disertakan dalam semua dokumen HTML karena jika kita tidak sertakan bisanya akan mengakibatkan error, terlebih lagi jika browser yang kita pakai adalah browser lama. Meskipun saat ini pada HTML5 kita bisa menghilangkan penulisan tag ini, masih sangat disarankan untuk tetap menuliskan-nya.

Berikut penjelasan singkat mengenai elemen dan atribut yang biasanya digunakan pada elemen HTML head.

  1. Elemen HTML title – Digunakan untuk memberikan judul pada halaman.
  2. Elemen HTML base – Digunakan untuk menentukan URL default dan target default untuk semua link pada halaman.
  3. Elemen HTML script – Digunakan sebagai tempat penulisan script tambahan, biasanya javascript.
  4. Elemen HTML meta – Digunakan untuk menyediakan metadata tentang dokumen HTML. Metadata bisa berupa deskripsi, kata kunci atau lainnya.
  5. Elemen HTML link – Digunakan untuk mendefinisikan link di dalam atau antara dokumen HTML dan juga untuk dokumen pada sumber eksternal (biasanya file CSS).
  6. Elemen HTML style – Digunakan untuk mendefinisikan informasi style untuk dokumen HTML.
  • Title adalah Title tag menentukan isi dari sebuah halaman. Title tag juga sering digunakan oleh search engine sebagai judul dari hasil pencarian. Ini membuat title tag penting untuk SEO dan juga untuk berbagi di jejaring social. Elemen ini di buat untuk menjelaskan dan mendeskripsikan apa yang di bahas dalam sebuah halaman web. Hal ini penting baik itu untuk pembaca dan juga untuk optimasi di search engine.
  • HTML elementbody menunjukkan konten sebuah dokumen. Isi dari sebuah dokumen

HTML yang akan ditampilkan pada jendela browser terdapat pada elemen <body>, sedangkan informasi dan keterangan lainnya yang berkaitan dengan dokumen tersebut dapat ditulis pada element <head>. Dalam sebuah dokumen, hanya terdapat satu element <body>.

Tag Syntax, Option

Tag Syntax

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link. Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.

Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup> Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>

<p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.

</p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

Contoh :

Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:

“Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.”

Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk menampilkan text secara garis miring (i, singkatan dari italic), dan tag <b> untuk menebalkan tulisan (b, singkatan dari bold)

Option .

Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat user. Berikut contoh penulisannya:

Fungsi Berbagai Tag dalam Html

Berikut adalah daftar dari tag-tag HTML.

Format teks dalam html.

Hasil dari format diatas setelah di jalankan (run)

LEAVE A REPLY

Please enter your comment!
Please enter your name here