Materi PWPB XI Format Teks Pada Halaman Web

By

BAB I
FORMAT TEKS PADA APLIKASI WEB

KOMPETENSI INTI

3.      Memahami, menerapkan, menganalisis, dan mengevaluasi tentang pengetahuan faktual, konseptual, operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat Lunak pada tingkat teknis, spesifik, detail, dan kompleks, berkenaan dengan ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja, warga masyarakat nasional, regional, dan internasional.

4.      Melaksanakan tugas spesifik dengan menggunakan alat, informasi, dan prosedur kerja yang lazim dilakukan serta memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak. Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur sesuai dengan standar kompetensi kerja. Menunjukkan keterampilan menalar, mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri, kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi, kesiapan, meniru, membiasakan, gerak mahir, menjadikan gerak alami dala ranah konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung.

 

KOMPETENSI DASAR

3.2 Menerapkan format teks pada halaman web

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

 

APERSEPSI

Pada dasarnya, WWW berasal dari frasa kata World Wide Web. Jika dipenggal dan diartikan satu per satu, World memiliki arti 'dunia', Wide memiliki arti 'berukuran besar/raksasa', dan Web memiliki arti 'sebuah sistem yang digunakan untuk mengirimkan data maupun dokumen ke jaringan internet' Dengan menggunakan program ini, seluruh clokumen yang ada di internet menjadi tersusun lebih rapi sehingga lebih mudah ditemukan oleh para pengguna jaringan internet. Dengan web browser, user dapat melihat halaman web yang mungkin berisi teks, gambar, video, dan multimedia lainnya serta menelusurinya melalui hyperlink. Pada dasarnya, WWW berwujud rangkaian huruf yang selalu digunakan pada setiap bagian depan dari sebuah alamat domain halaman website atau sebuah blog.

 

MENGAMATI

Pelajarilah buku teks maupun sumber lain tentang konsep teknologi dan format teks pada aplikasi web dengan baik dan benar!

 

AYO PAHAMI

Format Teks pada Halaman Web

HTML (Hypertext Markup Language) identik dengan bahasa standar yang dipakai pada halaman web. Halaman-halaman web bisa dibuat dengan menggunakan HTML. Sampai saat ini sudah dikenalkan HTML5 (HTML versi 5). Protokol yang digunakan dalam komunikasi antara web server dan browser adalah HTTP (Hypertext Transfer Protocol) sehingga browser dapat menerjemahkan bahasa HTML yang berupa kode-kode teks menjadi sesuatu yang bisa dilihat dan/atau dibaca oleh seorang pengguna browser. Browser dapat memahami isi suatu dokumen yang berasal dari web server karena HTML digunakan sebagai standar.


1.      Struktur Dasar HTML

Setiap halaman HTML minimal memiliki struktur dasar yang terdiri atas tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Strukturstruktur tersebut sebagai hal mendasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

a.      DTD atau DOCTYPE

Tag paling awal dari HTML adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration yang berfungsi untuk memberi tahu web browser bahwa dokumen yang akan diproses adalah HTML. DTD memiliki banyak versi tergantung pada versi HTML yang digunakan. Jika tidak menuliskan DTD, browser akan tetap menampilkan dan memproses halaman web seperti tidak terjadi apa-apa. Namun, browser sebenarnya menjalankan halaman HTML pada mode khusus yang disebut quirk mode.

b.      Tag <html>

Tag <html> sebagai tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>.

c.       Tag <head>

Elemen pada tag <head> umumnya berisi berbagai definisi halaman seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

d.      Tag <title>

Tag <title> digunakan untuk menampilkan title dari sebuah halaman web. Title biasanya ditampilkan pada bagian paling atas web browser.

e.      Tag <body>

Tag berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dan lain-lain. Tag body ini ditutup dengan </body>. Sebagian besar waktu dalam merancang web akan dihabiskan di dalam tag <body>. Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag.

Sebuah halaman web bisa memiliki ratusan, bahkan ribuan baris yang ditulis dengan berbagai tag HTML. Dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut.

 

2.      Versi HTML

Seiring perkembangan duma global, khususnya duma IT, HTML juga ikut berpartisipasi memajukan duma IT terutama dalam bidang Web App. Hal yang pelu dipahami adalah setiap terjadi perkembangan versi HTML, mau tidak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Jika tidak, browser tidak akan bisa menampilkan HTML tersebut. Berikut ini beberapa versi HTML dari awal hingga sekarang.

a.      Versi HTML1

Versi HTML1 merupakan versi awal yang hanya bisa digunakan untuk membuat heading, hypertext, cetak tebal (bold), cetak miring (italic), list, dan paragraph. Minimnya penggunaan gambar maka biasanya website dahulu hanya berisi teks saja. Pada versi ini, sebuah web hanya bisa berisi satu atau dua gambar saja.

 

b.      Versi HTML2

Versi HTML ini dapat dikatakan sebagai awal untuk membuat sebuah web interaktiñ HTML2 dirilis pada tanggal 14 Januari 1996 dengan beberapa penambahan fitur baru, salah satunya adalah fitur form. Pada masa ini sudah bisa membubuhkan beberapa gambar pada web atau beberapa user interface yang menarik sehingga menjadi interaktif.

 

c.       Versi HTML3

HTML3 dirilis pada tanggal 18 Desember 1997 (dikenal juga dengan HTML+) karena banyak penambahan fitur yang lebih fleksibel untuk membuat web yang interaktif. Versi ini tetap konsisten menambahkan fitur terbarunya. Salah satu fitur yang terkenal pada masa ini adalah fitur tabel di dalam paragraph. Sementara itu, versi HTML3.2 merupakan perkembangan dari HTML3 yang menambahkan sedikit kekurangan atau kesalahan pada HTML3.

 

d.      Versi HTML4

Pada masa ini, web sudah makin interaktif dan lebih mementingkan tampilan yang menarik serta kenyamanan pada pengguna. HTML versi 4 yang diterbitkan pada 18 Desember 1997 memuat berbagai perubahan dan revisi dari pendahulunya. Perubahan ini terjadi hampir di segala perintah-perintah HTML, seperti table, image, link, text, meta, imagemaps form, dan lain-lain. Selanjutnya, dirilis HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998 dan menjadi standar pada tahun 1999. Secara umum, HTML 4.01 merupakan perbaikan dari HTML 4.0.

 

e.      Versi HTML5

HTML5 merupakan Ini adalah versi html yang diperbarui hingga sekarang yang secara resmi dirilis pada tahun 2009, yang menjadi standar terbaru sebagai proyek kerja sama antara W3C (World Wide Web Consurtium) dan WHATG (Web Hypertext Application Technology Group). Berikut ini beberapa fltur baru yang paling menarik dari HTML 5.

1)    Video dan elemen audio untuk pemutaran

2)    Unsur kanvas untuk menggambar

3)    Elemen baru, seperti artikel, footer, header, dan nav

4)    Dukungan lebih baik untuk penyimpanan offline local

5)    Kontrol bentuk batll, seperti kalender, tanggal, waktu, uri, dan search

 

3.      HTML Head, Title, dan Body

Kesalahan akibat peletakan atau penggunaan tag HTML tidak akan mengakibatkan sistem komputer menjadi hang/rusak. Kesalahan tersebut hanya berakibat pada tampilan halaman web tersebut. Jika ada tag HTML yang tidak diketahui dalam halaman web yang sedang diproses, web browser akan mengabaikannya seakan-akan tag tersebut tidak ada. Hal ini dikarenakan web browser sengaja dirancang dengan kemampuan mengenali dan melaksanakan 'hanya' beberapa tag HTML dari keseluruhan tag standard W3C.

a.      HTML

HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Penulisan Tag HTML adalah incasesensitive yang artinya <HTML> akan sama dengan <html> atau Untuk selanjutnya akan dibagi menjadi 2 seksi, yaitu head dan body. Setiap file HTML selalu didahului dengan tag <HTML>. Tag ini akan membuat web browser mencoba untuk membaca file yang ada di dalam tag tersebut untuk ditampilkan dalam web browser. Pada akhir baris harus selalu mengakhiri tag <HTML> dengan </HTML>. Oleh sebab itu, akan kelihatan bahwa pada setiap tag HTML akan selalu <html> dan diakhiri dengan </html>.

b.      Head

Header berfungsi sebagai tanda pengenal pada halaman yang akan dibuat. Untuk mendefinisikan header dalam tag HTML maka menambahkan <HEAD> dan </HEAD> tag di bawah tag <HTML> menjadi sebagai berikut.


<html>

<head>

</head>

</html>


c.       Title

Tag <title> berfungsi untuk membuat judul website. Sementara itu, tag <head> berfungsi untuk membuat kepala dokumen. Tag <title> harus diletakkan di dalam tag <head>. Hasilnya adalah teks yang ada di tag <title> akan ditampilkan sebagai judul website. Tag <hl> berfungsi untuk membuat judul artikel. HI adalah ukuran judul terbesar di HTML. Sementara itu, tag <p> berfungsi untuk membuat paragraf.  Untuk menamai atau memberikan judul pada halaman web, dapat digunakan tag <TITLE> dan </TITLE>. Judul akan terlihat pada sudut kiri atas pada halaman web. Tag <TITLE> akan berada di dalam tag <HEAD>.

d.      Body

HTML elemen body 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 elemen <body>. Bagian body merupakan bagian untuk menuliskan berbagai text yang ingin ditampilkan pada halaman web. Untuk mendefinisikan n body, Anda harus diketikan tag <BODY> dan ditutup dengan tag </BODY> di bawah tag header sehingga akan terlihat:

<html>

<head >

</head>

<body >

</body>

</html>

 

4.      Tag Syntax dan Option

Pada dasarnya HTML berisi kode-kode tertentu berbasis teks yang disebut “tag”. Tag bisa diartikan sebagai tanda khusus yang telah didefinisikan untuk menunjukkan kepada browser mengenai hal yang harus ditampilkan kepada pengguna. Setiap tag memiliki arti dan fungsi tersendiri serta dituliskan saling berpasangan. Antara tag pembuka dan penutup biasanya dibedakan oleh tanda slash (garis miring) yang menunjukkan itu adalah tag penutup. Misalnya tag <b> dan </b>, yang akan menjadikan teks yang ada di antara tag tersebut akan ditampilkan dalam format cetak tebal (bold). Ada lagi tag <i> dan </i> yang akan menjadikan teks yang ada diantara tag tersebut akan ditampilkan dalam format cetak miring (italic) dan contoh-contoh tag lainnya. Jenis-jenis syntax dan option HTML beserta fungsinya dapat dilihat pada tabel berikut.



5.      Fungsi Berbagai Tag dalam HTML

Elemen, tag, dan atribut pada HTML saling berkaitan, hanya saja atribut memiliki tugas khusus untuk memberikan informasi atau sifat tambahan yang akan diberikan kepada tag dan elemen yang mengandung atribut tersebut. Elemen pada HTML identik dengan susunan dari tag pembuka sampai tag penutup serta didefinisikan oleh tag pembuka, lalu dilanjutkan oleh konten lalu diakhiri oleh tag penutup. Semua tag-tag pembentuk halaman web ditulis dalam sebuah file yang nanti akan diletakkan pada web server, kemudian diakses menggunakan browser. Kode-kode atau tagtag HTML yang akan diakses disimpan dalam sebuah atau beberapa file yang biasanya berekstensi .htm atau .html.

Penanda dalam sebuah halaman biasanya ditandai dengan tag. Secara umum, penulisan tag pada html itu berpasang-pasangan, dimulai dengan <tag_pembuka> isi dari konten </tag_penutup>. Dari tabel konsep, dapat dilihat bahwa terdapat elemen <nama_tag> isi dari konten </nama_tag> untuk penerapan dalam tag yang sebenarnya dapat dilihat pada tabel contoh terdapat elemen <H1> isi dari konten </H1>. Sementara itu, untuk Void Element dari tabel konsep dapat dilihat elemen <nama_tag/> untuk penerapan dalam tag yang sebenarnya dapat dilihat pada tabel contoh terdapat elemen <IMG/>.

6.      Format Text dalam HTML

Format teks dalam HTML digunakan untuk membuat teks yang ada dalam dokumen html menjadi kelihatan berbeda, menarik, memiliki arti, serta dapat memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambang tertentu. Sesuai dengan peruntukannya, tag-tag tersebut dirancang untuk membuat struktur text (konten) dari halaman web. Web browser akan menampilkan beberapa tag dengan tampilan visual, seperti huruf tebal, huruf kecil, italic, dan lain-lain. Namun, Anda sebaiknya tidak membuat text menjadi miring, namun menandai bagian text mana yang perlu 'ditekankan'. Tampilan visual yang sama bisa didapat menggunakan CSS. Format teks dalam HTML terdiri atas cetak tebal (bold), cetak miring (italic), memberi garis bawah (underline), mengecilkan huruf (small), membesarkan huruf (big), menebalkan teks (strong), penekanan teks (emphasis), mencoret teks (strike), subscript, dan superscript, serta membuat singkatan (akronim). Untuk mendefinisikan sebuah singkatan dalam dokumen html, Anda dapat menggunakan tag acronym. Penulisannya adalah <acronym [propertil>..teks singkatan...</acronym>. Properti pada tag ini adalah title yang berisi judul dari singkatan. Perhatikan contoh berikut.

 

Lembaga tertinggi Indonesia adalah <acronym title=”Majelis Permusyawaratan Rakyat">MPR</acronym> merupakan suatu lembaga tertinggi di negara Indonesia yang strukturnya dibentuk dengan berdasarkan pemilihan langsung legislatif , bersamaan dalam penetapan suatu anggota <acronym title="Dewan Perwakilan Rakyat”>DPR</acronym>

 

 

MENGEKSPLORASI

Buatlah sebuah kelompok kemudian kumpulkan informasi tentang struktur dasar HTML, terutama yang berkaitan dengan implementasinya!

 

MENGASOSIASIKAN DAN MENGOMUNIKASIKAN

·         Uraikan kembali informasi yang diperoleh tentang masalah HTML Head, Title, dan Body, terutama pada kesalahan akibat peletakan atau penggunaan tag HTML!

·         Presentasikan kesimpulan masalah Tag Syntax dan Option, terutama berkaitan dengan atribut yang memiliki tugas khusus untuk memberikan informasi!

 

INFO

Sejarah Berdirinya Mozilla Firefox

Mozilla Firefox (aslinya bernama Phoenix dan kemudian untuk sesaat dikenal sebagai Mozilla Firebird) adalah penjelajah web antar-platform gratis yang dikembangkan oleh Yayasan Mozilla dan ratusan sukarelawan. Sebelum rilis versi I .0-nya pada 9 November 2004, Firefox telah mendapatkan sambutan yang sangat bagus dari pihak media, termasuk dari Forbes dan Wall Street Journal. Dengan lebih dari 5 juta download dalam 12 hari pertama rilisnya dan 6 juta hingga 24 November 2004, Firefox 1.0 adalah salah satu perangkat lunak gratis, sumber-terbuka (open-source) yang paling banyak digunakan di antara pengguna rumahan.

Sumber: https://gado2net.wordpress.com/2009/10/20/sejarah-berdirinya-mozilla-firefox/

 

RANGKUMAN

1.        World Wide Web (WWW) dikembangkan menjadi pusat pengetahuan dan budaya manusia sebagai kolaborator lokasi di dunia maya untuk berbagi ide dan semua aspek dari proyek umum melalui internet.

2.        Dari sekian banyak web browser, beberapa di antaranya sangat familier dan banyak digunakan, seperti Intemet Explorer, Mozilla Firefox, Google Chrome, Opera, dan Safari.

3.        Google Chrome adalah sebuah penjelajah web open source yang dikembangkan oleh Google dengan menggunakan mesin rendering WebKit.

4.        Fungsi utama web server adalah untuk melakukan atau tranfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan sedemikian rupa.

5.        Text editor identik dengan software atau perangkat yang digunakan untuk mengetikkan coding yang akan dibuat menjadi sebuah web.


Lihat Materi Versi PDF

Download Materi


Assessmen !

Klik Link Berikut Ini

Tidak ada komentar:

Posting Komentar

Thank you for visiting Edu High School. This comment is an Auto Answer from our system please wait if your comment needs to be replied to urgently.
Greetings from us Edu High School.