Pages

Willy Zaki

PWPBXIRPL- Merupakan singkatan dari Pemrograman Web dan Perangkat Bergerak. PWPB merupakan salah satu materi pembelajaran dalam satuan pendidikan Sekolah Menengah Kejuruan di kompetensi keahlian Rekayasa Perangkat Lunak (RPL) Kelas XI (Sebelas). PWPB lebih pada pengembangan aplikasi atau sistem berbasis web yang bisa diakses disemua platform atau bisa diakses disemua teknologi seperti HP, Tablet, Laptop, PC. Materi Pembelajaran ini merupakan kompetensi penting yang membantu siswa lebih memahami pemrograman web dan perangkat bergerak di sekolah dan dunia kerja

Mata pelajaran PWPB terdiri dari beberapa bab materi dan salah duanya adalah Konsep Teknologi Dan Format Teks Pada Aplikasi Web (Bab 1) dan Format Tabel Dan Format Multimedia Pada Halaman Web (Bab 2). Dan berikut ini merupakan rangkuman dari materi bab 1, bab 2, dan bab 3 pada mapel PWPB


Bab 1: Konsep Teknologi Dan Format Teks Pada Aplikasi Web


A)    Teknologi Aplikasi Web

Aplikasi web diterjemahkan sebagai aplikasi yang diakses menggunakan web browser melalui jaringan internet atau intranet. Ada beberapa persyaratan untuk membangun suatu aplikasi web, di antaranya memilih arsitektur dan mengembangkan desain aplikasi web. Peranan penting dalam pembangunan suatu aplikasi web memerlukan pemilihan teknologi yang tepat guna merancang aplikasi web, serta distribusi dan integrasi sistem arsitektur yang memadai. Aplikasi web sebagai sebuah perangkat lunak komputer yang dikodekan dalam bahasa pemrograman yang mendukung perangkat lunak berbasis web, seperti HTML, JavaScript, CSS, Ruby, Python, Php, Java, dan bahasa pemrograman lainnya

(https://www.pngplay.com/id/image/182650)


B)    WWW

WWW adalah inisial yang mengidentifikasi frase World Wide Web, kumpulan dokumen hypertext yang menghubungkan satu sama lain dan diakses melalui Internet. Melalui perangkat lunak yang dikenal sebagai browser, pengguna dapat menampilkan berbagai situs web (yang berisi teks, gambar, video, dan multimedia lainnya) dan menavigasi melalui hyperlink. Dengan cara ini, kita dapat mengatakan, menggunakan perbandingan dengan bidang komunikasi telepon, bahwa www adalah “awalan” yang memiliki semua portal yang ada di jaringan tersebut yang ingin Anda akses.

1.    Sejarah Awal WWW

Tahun 1989: Tim Berners Lee dari CERN (Laboratorium Fisika Partikel) yang terletak di Jenewa, mengusulkan sebuah protokol di internet yang berfungsi sebagai sistem distribusi informasi. Selain itu, memungkinkan adanya sistem untuk saling berbagi info bahkan menampilkan dalam bentuk grafik dan tersebar di seluruh dunia. Sebelumnya, web browser dibuat dengan basis teks. 

Tahun 1990: Tim Berners Lee menemukan tiga teknologi dasar yang menjadi basis web hingga saat ini, yaitu HTML (Hypertext Markup Language), URL (Uniform Resource Identifier), dan HTTP (Hypertext Transfer Protocol). 

Tahun 1991: Tim Berners Lee menemukan WWW. Awalnya ia memiliki kebutuhan untuk menyusun arsip dari riset-riset miliknya lalu ia mengembangkan Equire dan  dari sinilah cikal bakal lahirnya WWW. 

Tahun 1993: Marc Andersen beserta tim dari NCSA, berhasil membuat web browser berbasis grafik untuk sistem X-Windows dan memberi nama Mosaic. Selanjutnya Mosaic mulai populer bagi pemakai lama maupun baru di internet. NCSA lalu mengembangkan versi lain dari Mosaic untuk komputer berbasis Windows, Macintosh, UNIX, dan NeXT. 

Tahun 1994: Andersen memisahkan diri dari NCSA. Ia bersama Jim Clark membuat Netscape yang kemudian menggantikan ketenaran Mosaic sebagai web browser. Pada tahun tersebut, CERN dan MIT mendirikan konsorsium yang dinamakan dengan W3C (World Wide Web Consortium) dengan tujuan membangun standar teknologi web. 

Tahun 1995: Di akhir tahun tersebut, telah ada sekitar 300.000 website dibandingkan tahun sebelumnya yang hanya berjumlah 50 website. Pada tahun inilah WWW telah berhasil menggantikan FTP sebagai jaringan yang paling tinggi traffic-nya dalam internet. 

Tahun 2009: Tim Berners Lee membangun World Wide Web Foundation yang bertujuan untuk membagikan open web kepada masyarakat luas.

2.    Fungsi World Wide Web (WWW)

WWW berfungsi sebagai kumpulan server web dari seluruh dunia memiliki kegunaan dalam menyediakan data dan informasi untuk digunakan bersama. Melalui web, para pengguna internet (netter) dapat mengakses informasi-informasi yang tidak hanya berupa teks, tetapi juga berupa gambar, suara, video, dan animasi. Secara mendasar, dokumen informasi tidak hanya terdiri atas teks, tetapi juga dapat berupa gambar, suara. bahkan klip video.

Atau WWW secara umum berfungsi sebagai:

Web Mail Service Web mail service memungkinkan pengguna untuk mengirim, menerima dan meninjau email dari browser web mereka. Web mail service menawarkan akses mudah dan penyimpanan pesan email untuk pengguna yang tidak terhubung ke Internet dari lokasi biasanya.

Search Engine Search Engine seperti namanya yang berarti mesin pencari, berfungsi untuk mencari atau menemukan sebuah web dalam waktu yang cepat, dikarenakan jumlah web yang sudah sangat banyak hingga ada ratusan juta maka kita harus menemukan website yang kita inginkan dengan mesin pencari ini.

Web Hosting Web hosting adalah layanan yang memungkinkan organisasi dan individu untuk mengirim situs web atau halaman web ke Internet. Situs web dihost atau disimpan pada komputer khusus yang disebut server. 

Portal Portal adalah lokasi pribadi di internet yang bertindak sebagai titik akses ke informasi yang tersedia di World Wide Web. Beberapa portal populer adalah facebook.com, gmail.com, dan twitter.com. Jadi, secara keseluruhan pengertian www secara singkat yakni, www itu layaknya buku elektronik besar yang halamannya disimpan di beberapa server dari seluruh dunia.


C)    Macam-Macam Browser

Browser merupakan sebuah aplikasi perangkat lunak atau software yang digunakan untuk membantu kita mengakses web/situs-situs yang berada di internet. Aplikasi browser ini akan memudahkan kita dalam mencari dan menemukan situs yang kita cari, dan berikut adalah contoh-contohnya

(https://freepikpsd.com/browsers-free-png-image-browsers-png/244998/)

Google Chrome Google Chrome adalah sebuah penjelajah web open source yang dikembangkan oleh Google dengan menggunakan mesin rendering WebKit. Proyek open source ini dinamakan Chromium.

Internet Explorer Untuk beberapa waktu lamanya, Microsoft mengeluarkan Internet Explorer untuk Mac (yang berdasarkan mesin arsiran yang berbeda) dan versi-versi untuk penggunaan melalui X Window System pada Solaris dan HP-UX.

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.

Mozilla SeaMonkey Jenis browser yang berasal dari Mozilla ini merupakan browser yang
cocok untuk kebutuhan browsing seperti integrasi dengan chatting dan
fungsionalitas e-mail.

NetScape Netscape ini merupakan salah satu dari browser tertua dengan maraknya evolusi internet. Browser ini bisa digunakan untuk banyak platform dengan fitur-fitur menarik seperti update berita dan lain-lain.

Opera Opera adalah penjelajah web dan paket perangkat lunak internet antarplatform. Opera dapat dijalankan di berbagai sistem operasi termasuk Microsoft Windows, Mac OS X, Solaris, FreeBSD, dan Linux.


D)    Web Server

1.    Konsep Web Server

Web server adalah sebuah software (perangkat lunak) yang memberikan layanan berupa data. Berfungsi untuk menerima permintaan HTTP atau HTTPS dari klien atau kita kenal dengan web browser (Chrome, Firefox). Selanjutnya ia akan mengirimkan respon atas permintaan tersebut kepada client dalam bentuk halaman web.

2.    Fungsi Web Server

Fungsi utama web server adalah untuk melakukan atau tranfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan lain-lain. Pemanfaatan web server berfungsi untuk mentransfer seluruh aspek pemberkasan dalam sebuah halaman web termasuk yang di dalam berupa teks, video, gambar, atau banyak lagi.


E    Macam-Macam Software Web Server

1.    Web Server Gratis:

Apache

Web server yang populer dan paling banyak digunakan kebanyakan orang, yaitu jenis Apache. Pada awalnya Apache didesain guna mendukung penuh sistem operasi UNIX. Selain cukup mudah dalam implementasinya, Apache juga memiliki beberapa program pendukung sehingga memberinkan layanan yang lengkap, seperti PHP, SSI dan kontrol akses. 

Berikut detailnya:

PHP (Personal Home Page atau PHP Hypertext Processor) Program semacam CGI, berfungsi memproses teks yang bekerja di server. Apache sangat mendukung PHP dengan menempatkannya sebagai salah satu modulnya (mod_php). Hal tersebut membuat PHP bekerja lebih baik.

SSI (Server Side Include) Perintah yang bisa disertakan dalam bekas HTML. Kemudian ia dapat diproses oleh web server ketika pengguna mengaksesnya.

Access Control Kontrol Akses dapat dijalankan berdasarkan nama host atau nomor IP CGI (Common Gateway Interface). Lalu yang paling umum untuk digunakan adalah perl (Practical Extraction and Report Language), disupport oleh Apache dengan menempatkannya sebagai modul (mod_perl).

Apache sangat aman dan nyaman untuk digunakan karena memiliki beberapa keuntungan seperti proses instalasi yang mudah, freeware, dan sistem konfigurasi yang masih tergolong mudah. Selain itu ia juga mampu bekerja pada sistem operasi open atau closed source.

(https://webdev-id.com/berita/wp-content/uploads/2020/04/apache-web-server-logo.png)


Nginx

Salah satu pesaing unggul Apache yaitu Nginx. Nginx dikenal mampu melayani segala macam permintaan, seperti request pada dengan tingkat kepadatan lalu lintas atau traffic yang sangat padat. Nginx memang lebih unggul dari segi kualitas, kecepatan, dan dalam hal performanya. 
Nginx memiliki banyak kelebihan dalam hal fitur, di antaranya URL rewriting, virtual host, file serving, reverse proxying, access control, dan masih banyak lagi.
Berikut detailnya:

URL Rewriting URL Rewriting secara singkat adalah meringkas url/link suatu alamat agar lebih pendek dan mudah diingat.

Virtual Host Virtual Host adalah konfigurasi pada web server yang memungkinan kita menggunakan lebih dari satu domain pada sebuah server. Dengan virtual host kira dapat membuat lebih dari satu website dengan konten yang berbeda dalam sebuah server.

Reverse Proxying Reverse Proxying merupakan sebuah fitur/modul di dalam sebuah web server, yang berfungsi untuk melakukan port forwarding suatu request, dari public request menuju ke dalam sistem.

Access Control Kontrol Akses dapat dijalankan berdasarkan nama host atau nomor IP CGI (Common Gateway Interface). Lalu yang paling umum untuk digunakan adalah perl (Practical Extraction and Report Language), disupport oleh Apache dengan menempatkannya sebagai modul (mod_perl).

(https://matob.web.id/random/wp-content/uploads/sites/2/2021/12/Nginx-Logo.jpg)

Microsoft Internet Information Services (IIS)

Layanan ini berfungsi sebagai pendukung protokol TCP/IP yang berjalan dalam lapisan aplikasi (application layer). IIS juga menjadi fondasi dari platform Internet dan Intranet Microsoft, yang mencakup Microsoft Site Server, Microsoft Commercial Internet System, dan produk-produk Microsoft BackOffice lainnya. Microsoft Internet Information Services hanya mendukung sistem operasi Windows saja dan tidak direkomendasikan untuk digunakan di Linux, Solaris, atau sistem operasi UNIX lainnya.
(https://www.nesabamedia.com/iis-internet-infomation-service/)


LiteSpeed

LiteSpeed menawarkan kecepatan akses yang tinggi bagi para penggunanya dan dipercaya 6 kali lebih cepat dari web server Apache. Jika dibandingkan dengan web server Nginx sekalipun, LiteSpeed masih tetap menjadi yang tercepat. LiteSpeed mendukung banyak fitur yang biasa digunakan di Apache, termasuk mod_rewrite. .htaccess, dan mod_security. DDoS makin mempertegas identitas LiteSpeed bahwa web server ini memang patut untuk diperhitungkan. Meskipun demikian, bagi yang ingin mencoba menggunakan LiteSpeed versi gratis bisa menggunakan web server OpenLiteSpeed. LiteSpeed mendukung banyak sistem operasi UNIX, seperti Linux, Mac OSX. Solaris, dan FreeBSD.

F    Perbedaan Pengembangan Aplikasi Web dengan Rekayasa Software

Paradigma pemrograman, aspek distribusi, dan teknologi dapat digunakan sebagai dasar untuk teknologi aplikasi web. Hal tersebut. menjadi salah satu faktor yang menyebabkan perkembangan aplikasi dalam web sebagai hasil dari pendekatan atau perubahan yang sangat cepat dalam teknologi. Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan pakar bidang rekayasa perangkat lunak (software engineering professional), pengembangan aplikasi web tidaklah sama dengan rekayasa software walaupun keduanya melibatkan pemrograman dan pengembangan perangkat lunak.

Pengembangan teknologi aplikasi web identik dengan gabungan dari print publishing dan pengembangan perangkat lunak, di antaranya marketing dan perhitungan jika dilihat dari sudut pandang seni dan teknologi. Meskipun cukup banyak dalam mengadopsi prinsip-prinsip rekayasa perangkat lunak. prosedur dalam pengembangan aplikasi web masih memiliki berbagai pendekatan, alat bantu, metode, teknik, dan panduan yang memenuhi persyaratan pembuatan sistem berbasis web. Pengembangan sistem berbasis web tersebut jelas berbeda dengan pengembangan perangkat lunak konvensional dan pengembangan sistem berbasis web lebih banyak menghadapi tantangan.


G    Macam-Macam Text Editor

Adobe Dreamweaver Text editor yang paling sering digunakan, bisa multi-tab. Tampilan eye catching dan tidak terlalu memakan banyak memori PC. Namun, software ini berbayar.

Araneae Araneae merupakan text editor yang digunakan untuk file html dengan syntax highlighting, panjang dokumen tidak terbatas, mendukung drag and.

ATPad  ATPad merupakan pengganti dari Notepad standar. Fitur-fitur di dalamnya: multi-tab, tampilan editornya dapat disesuaikan, terdapat garis penomoran, recent documents, bookmark, reload on-demand. change tracking, reloading ininterval, serta portability.

Crimson Editor Free text editor ini sementara dapat berfungsi sebagai pengganti yang baik untuk Notepad. Crimson Editor juga menawarkan banyak. fitur canggih untuk bahasa pemrograman, seperti html, C/C++, Perl.

EditPad Lite Jika menggunakan sebuah text editor untuk hal-hal seperti HTML coding, menulis script, atau file batch, EditPad bisa dijadikan opsi baru. Dengan demikian, EditPad Lite diterjemahkan sebagai suatu free text editor yang menyajikan banyak aspek di luar Windows Notepad. 

Netbeans Netbeans cukup baik untuk coding web, namun tidak direkomendasikan untuk PC yang memorinya kecil atau seadanya karena akan membuat proses yang memakan memori cukup besar.

Notepad Notepad adalah text editor asli bawaan dari Windows/Microsoft. Pengguna sistem operasi Windows pasti sudah terbiasa menggunakan aplikasi ini. Pemula biasanya direkomendasikan untuk menggunakan notepad biasa ini. Notepad yang harus serba manual mengajarkan Anda cara untuk menghafal penempatan coding-coding/website maintenance.

Notepad++ Notepad++ hampir sama dengan notepad biasa, namun fitur lebihnya adalah pewarnaan pada kode-kode tertentu sehingga akan sedikit memudahkan penggunanya.

Sublime-text Sublime-text memiliki banyak fitur yang mempermudah penggunanya dan tampilannya menarik. Kekurangannya adalah software ini merupakan software berbayar.

Google Web Designer Pada tahun 2013-an, Google juga meluncurkan text editor Web Design yang keren dengan fitur-fitur yang memanjakan penggunanya. Beberapa fitur tersebut di antaranya fitur manipulasi 3D, ilustrasi tools, dan sebagainya.


H    Tool Pengembang Web Tool 

Tool pengembang web tool atau peralatan yang identik dengan perangkat lunak yang digunakan dalam proses pengembangan website. Tool dalam mengembangkan aplikasi menjadi bagian penting karena sangat membantu dan mempersingkat proses pengembangan. Pemilihan tool yang tepat dapat memberi keuntungan bagi developer karena menghemat waktu, tenaga, dan pekerjaan cepat selesai. Berikut ini beberapa tool pengembang web yang sering digunakan. 
a. Adobe Edge Inspect (http://html.adobe.com/edge/)
b. Firebug (https://addons.mozilla.org/en-US/firefox/addon/firebug/) c. Lorem Ipsum (http://www.lipsum.com/)
d. Favicon Generator (http://tools.dynamicdrive.com/favicon)


I    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.

Struktur Dasar HTML

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

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.

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>.

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

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

Tag <body> Tag <body> berisi semua elemen yang akan tampil dalam halaman.

(https://www.buddyku.com/article/struktur-dasar-html-yang-wajib-lo-tau-seriesbelajarhtml-aE41Gx)


J    VERSI HTML

V'ersi HTMLI Versi HTMLI 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 interaktif. 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.

Versi HTMLA 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, mcta, 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.

Versi HTMLS HTMLS 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 fitur 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 baru, seperti kalender, tanggal, waktu, url, dan search


(https://pixabay.com/illustrations/logo-html-html5-icon-2582748/)



K    HTML Head, Title, Body

HTML HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Penulisan Tag HTML adalah incasesensitive yang artinya <HTML> akan sama dengan <html> atau <Html>. 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>.

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> .

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 <h1> berfungsi untuk membuat judul artikel. H1 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>.

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 body, Anda harus diketikan tag <BODY> dan ditutup dengan tag </BODY> .


Bab 2: Format Tabel dan Format Multimedia Pada Halaman Web

A. Format Tabel pada Halaman Web 

Dalam menampilkan data yang terstruktur atau tampilan dari database, umumnya akan dibuat dalam bentuk tabel. HTML juga menyediakan tabel tag yang digunakan untuk menampilkan data dalam bentuk tabel. Hal ini dikarenakan menggunakan CSS untuk mengatur tampilan halaman web sangat dianjurkan. Ada pula Tag-Tag Tabel dalam HTML, yaitu: 

1. Tag <table> untuk membungkus tabelnya
2. Tag <thead> untuk membungkus bagian kepala tabel
3. Tag <tbody> untuk membungkus bagian body dari tabel
4. Tag <tr> (tabel row) untuk membuat baris
5. Tag <td> (table data) untuk membuat sel
6. Tag <th> (table head) untuk membuat judul pada header

(https://id.quish.tv/html-5-tutorial-how-create-table-using-html-tags)

B. Format Multimedia Pada Halaman Web

Dalam sebuah web kita dapat menambahkan atau memberikan bentuk file yang lain selain dokumen. Seperti namanya, Multimedia. Kita dapat menambahkan format file lain seperti animasi, gambar, video, dan audio.
(Buku PWPB XI RPL)


    

Bab 3: Format Kaitan dan Format Formulir Pada Halaman Web

A. Konsep Hyperlink dalam HTML

Link berguna untuk menghubungkan antardokumen HTML. Link merupakan singkatan dari hyperlink, yang identik dengan sebuah fungsi dalam HTML yang digunakan untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website bersangkutan. Dalam HTML, sebuah objek teks yang berupa link akan ditampilkan dengan font berwarna biru style underline (bergaris bawah). Jika pointer mouse ditujukan ke link tersebut, pointer mouse akan berubah menjadi telunjuk tangan. Selanjutnya, jika sebuah link sudah pernah diakses atau dikunjungi, warna dari teks/objek link tersebut akan berubah menjadi ungu.
(https://www.semtek.com.vn/link-la-gi/)


a.   Mengenal Jenis Link

Link dalam suatu objek dapat berupa teks atau gambar yang dipakai dalam kode HTML untuk menuju dari suatu bagian ke bagian yang lain pada halaman yang sama atau menuju ke halaman (file) yang berbeda. Browser web akan menyorot (highlight) teks atau gambar yang didefinisikan sebagai link dengan warna dan garis bawah untuk menunjukkan bahwa itu adalah hyperlink atau link. 

1) Link Absolut
Link absolut adalah link yang mengarah langsung pada website tertentu, di mana sebuah dokumen dikunci pada alamat valid sebuah website dan tidak tergantung pada direktori lokasi dokumen html berada.
2) Link Relatif
Link relatif adalah link yang mengarah langsung pada lokasi path atau direktori tujuan yang tersimpan pada web server atau komputer tanpa diawali dengan alamat domain website tersebut. Oleh sebab itu, pengunaannya sangat tergantung pada lokasi file berada.
3) Sintaks Link 
Sintaks link adalah <a href="url"> nama link</a>, Link dapat dibuat pada suatu teks atau gambar dengan cara mcletakkan teks atau gambae tersebut di antara tag pembuka < A HREF> dan lag penutup </A>.

b. Tag-Tag untuk Hyperlink

a. <a> berfungsi dalam mendefinisikan sebuah hyperlink yang digunakan untuk menghubungkan halaman satu ke halaman lain. 
b. <link> berfungsi untuk menghubungkan dokumen yang bersangkutan dengan sumber file yang berasal dari luar (external). Berikut ini atribut-atribut yang digunakan pada <link>.
c. <nav> berfungsi untuk mendefinisikan link navigasi (navigation links).
d. Mailto digunakan untuk mengirimkan e-mail ke suatu alamat e-mail tertentu. Dengan cara menambah "mailto" dan alamat e-mail tujuan.

B. Format Formulir Pada Halaman Web

1. Konsep Form Pada Web
Form dapat digunakan untuk berbagai keperluan, seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari user, menawarkan barang/jasa secara online, dan sebagainya. Form sangat sering dijumpai dalam satu aplikasi sistem informasi berbasis web.
Form digunakan untuk memudahkan pengguna untuk menginput data yang akhirnya dapat disimpan dan dipakai oleh sang pembuat form tersebut.

(https://joksun.files.wordpress.com/2012/11/frm_finish.png)

2. Penggunaan Tag Pada Form
Form HTML digunakan untuk memilih berbagai macam inputan yang disediakan. Data bisa dimasukkan dalam bentuk input teks, pilihan radio button, check box, dan lain-lain. Bentuk inputan tersebut dikemas elemen dalam tag-tag form. Berikut ini elemen-elemen yang disediakan oleh HTML.

(Buku PWPB XI RPL)

2. Metode Get and Post

a. Metode GET identik dengan metode yang digunakan oleh browser untuk meminta server mengirim kembali resource yang diberikan.. Dalam hal ini, browser mengirimkan sebuah body kosong. Body kosong sehingga jika formulir dikirim menggunakan metode ini, data yang dikirim ke server ditambahkan ke URL. Berikut ini bentuk implementasi metode get pada elemen <form>
b. Metode POST sedikit berbeda dengan GET karena pada POST akan mengirimkan server permintaan respons dengan mem-perhitungkan data yang tersedia. Form yang dikirim dengan menggunakan data metode POST akan ditambahkan dalam body dari HTTP yang direquest. Berikut ini bentuk implementasi metode POST pada elemen <form>.






DAFTAR PUSTAKA

Buku Pemrograman Web dan Perangkat Bergerak SMK/MAK Kelas 11 (Patwiyanto, Sri Wahyuni, Sumari Agus)
https://blog.ecampuz.com/reverse-proxy-solusi-berhemat-ip-publik-kampus/#:~:text=Lantas%2C%20apa%20sih%20reverse%20proxy,request%20menuju%20ke%20dalam%20sistem.

https://www.rumahweb.com/journal/virtual-host-adalah/#:~:text=Virtual%20host%20adalah%20konfigurasi%20pada,yang%20berbeda%20dalam%20sebuah%20server.

https://www.dicoding.com/blog/apa-itu-web-server-dan-fungsinya/

https://www.dicoding.com/blog/apa-itu-web-server-dan-fungsinya/

https://qwords.com/blog/pengertian-www-world-wide-web/

https://note-ade.blogspot.com/2021/07/apa-itu-pwpb.html

https://www.jetorbit.com/blog/apa-itu-www-world-wide-web-fungsi-dan-sejarah-www/


























Tidak ada komentar:

Posting Komentar

copyright © . all rights reserved. designed by Color and Code

grid layout coding by helpblogger.com