Pengenalan Singkat Tentang Dasar-Dasar Membangun Sebuah Web


Halo, pembaca gubuk inspirasiJ. Waahh untuk malam ini admin akan berbagi ilmu nih, tapi bukan ilmu sihir loh yaa^^. Melainkan materi kuliah yang telah didapat dalam satu semester selama kuliah.Hihi.

Oke, langsung aja. Ada 3 mata kuliah komputer yang admin dapatkan selama satu semester ini. Yang pertama yaitu:

1. BWD (Basic Web Design)

2. APK (Aplikasi Komputer)

3. PD (Panduan Database )

Basic Web Design

Di sini admin diajarkan, bagaimana cara pembuatan web dengan kode-kode HTML. Duhh, main sama kode-kode yaah:v.

Apa kode HTML itu?

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan  wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa)

HTML adalah bahasa markah yang digunakan peramban untuk menafsirkan dan menulis teks, gambar dan bahan lainnya ke dalam halaman web secara visual maupun suara. Karakteristik dasar untuk setiap item dari markah HTML didefinisikan di dalam peramban, dan karakteristik ini dapat diubah atau ditingkatkan dengan menggunakan tambahan halaman web desainer CSS. Banyak elemen teks ditemukan di laporan teknis ISO pada tahun 1988 TR 9537 Teknik untuk menggunakan SGML, yang pada gilirannya meliputi fitur bahasa format teks awal seperti yang digunakan oleh komandan RUNOFF dikembangkan pada awal 1960-an untuk sistem operasi: perintah-perintah format ini berasal dari perintah yang digunakan oleh pengetik untuk memformat dokumen CTSS secara manual. Namun, konsep SGML dari markah umum didasarkan pada unsur-unsur daripada hanya efek cetak, dengan pemisahan struktur dan markah juga; HTML telah semakin bergerak ke arah ini dengan CSS.

Apa Saja Fungsinya ?

Kegunaan lain
  • Mengintegerasikan gambar dengan tulisan.
  • Membuat Pranala.
  • Mengintegerasikan berkas suara dan rekaman gambar hidup.
  • Membuat form interaktif.
Menyunting format tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:
  • Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
  • Menampilkan tulisan dalam bentuk cetakan tebal
  • Menampilkan sekelompok kata dalam bentuk miring
  • Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
  • Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
Markah/Tanda
Secara garis besar, terdapat 4 jenis elemen dari HTML:
  • Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
  • Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
  • Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
  • Elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>), dan garis horizontal (<hr>). Konsep hiperteks pada HTML memungkinkan pembuatan tautan pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web.

Contoh dokumen HTML sederhana

Untuk HTML 4 Strict 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <headbgcolor=blacktext=white>
               <title>Selamat Datang HTML</title>
        </head>
        <body>
               <p>Halo dunia!</p>
        </body>
</html>
Untuk HTML 5 
<!DOCTYPE HTML>
<html>
        <headstyle="background-color: black; color: white;">
               <title>Selamat Datang HTML</title>
        </head>
        <body>
               <p>Halo dunia!</p>
        </body>
</html
 
 Enggak berhenti di situ aja gaees, masih ada beberapa tahap lagi dalam pembuatan WEB. Setelah menyesesaikan pembuatan kode HTML, lalu di lanjutkan dengan pembuatan CSS.

Apa itu CSS??

CSS adalah singkatan dari Cascading Style Sheets, yang berisikan rangkaian instruksi yang menentukan bagaimana suatu text akan tertampil di halaman webPerancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.

CSS Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda.CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Ini adalah tampilan dari CSS

<HTML><HEAD><STYLE TYPE="text/css">B { color : lime }</STYLE></HEAD><BODY>P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudahmaka pekerjaan itu akan beneran menjadi<B> lebih mudah</B> ?<P>J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita sendiri</B></BODY></HTML>
<HTML><HEAD></HEAD><BODY>P: Mengapa jika kita anggap <B><FONT COLOR="Lime">suatupekerjaan</FONT></B> itu mudah maka pekerjaan itu akanbeneran menjadi<B><FONT COLOR="Lime"> lebih mudah</FONT></B>?<P>J: Karena itu merupakan <B><FONT COLOR="Lime">sugesti</FONT></B> terhadap <B><FONT COLOR="Lime">diri kitasendiri </FONT></B></BODY></HTML>

Pada contoh di atas, baris ini

B {color: lime}dikenal sebagai "Style Rule" atau peraturan/perintah css, yang mana terdiri dari dua elemen dasar yaitu :"selector" dan "declaration“


B {color: lime; text-decoration: underline; font-family: Arial}

sebuah "selector" biasanya adalah tag HTML (dalam hal ini B), sementara "declaration" adalah satu ataubeberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector.Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkansatu dengan yang lain dengan menggunakan titik-koma, Pasti bingung?

Classes : CSS juga mengijinkan kita untuk menyatukan elemen-elemen secara bersamaan didalam sebuah kelas(classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class.

Dilanjut dengan pemuatan Responsive. Responsive Web Design adalah suatu keadaan sebuah halaman web dimana tampilannya akan cocok, rapi dan tetap enak dilihat jika diakses dari perangkat apapun dengan resolusi layar yang berbeda. Misalnya, ketika anda mengakses blog ini dengan perangkat (PC/HP/Tablet) yang berbeda, anda akan melihat tampilannya berbeda karena menyesuaika dengan layar. Secara umum, sebuah halaman web tidak bisa menyesuaikan tampilannya sendiri dengan resolusi layar perangkat yang mengaksesnya.

Secara singkat itulah arti dari desain web responsif. Responsive Design dikembangkan karena boomingnya teknologi smartphone dan Tablet PC dengan berbagai resolusi Layar. Dengan adanya teknologi ini, sebuah halaman web dapat diakses dengan perangkat apapun tanpa kehilangan fungsi-fungsi yang disediakannya.Secara mendasar, Responsive Design dikembangkan melalui kode-kode CSS.

Dan yang terakhir adalah Bootstrap.Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap juga merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer yang digunakan untuk mengembangkan sebuah website yang responsive. Sehingga halaman website nantinya dapat menyesuaikan sesuai dengan ukuran monitor device (desktop, tablet, ponsel ) yang digunakan pengguna disaat mengakses website website dari browser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di alat internal.

Ehh gak juga sihh, ada yang lebih terakhir yaitu hosting atau (WEBHOUSE) mengapa dikatakan sebagai yang terakhir, karena setelah semua kompenen dibuat maka tempat yang terakhir ada hosting. Hosting bagaikan rumah bagi web-web yang telah dibuat.

Apa sihh Hosting ituu??


Hosting (disebut juga Web Hosting / sewa hosting) adalah penyewaan tempat untuk menampung data-data yang diperlukan oleh sebuah website dan sehingga dapat diakses lewat Internet. Data disini dapat berupa file, gambar, email, aplikasi/program/script dan database.

Pengertian Hosting dapat diibaratkan sebagai contoh berikut; sebuah website diibaratkan sama dengan kios/ruangan di Mall.

Manajemen Mall menyewakan ruangan, infrastruktur, listrik, telepon dan fasilitas lainnya agar orang-orang dapat membuka usaha. Setiap kios pengelolanya dapat berbeda, dekorasinya berlainan dan beroperasi masing-masing dengan caranya sendiri. Dalam hal ini kios atau ruangan yang disewa tentu mempunyai batasan ruangan (mis: 10m x 7m) dan maksimum adalah besarnya gedung Mall tersebut.

Perusahaan Hosting seperti IdeBagus menyediakan hardware, jaringan (infrastruktur), email (telepon), dan sebagainya agar anda dapat membuka/membuat website. Server (gedung Mall) kami dihuni oleh banyak pelanggan, masing-masing pelanggan mempunyai batas penggunaan diskspace (batasan ruangan) dan tentu saja setiap pelanggan mengoperasikan websitenya masing-masing.
Baiklah admin go on untuk materi yang kedua yaitu:

APK (Aplikasi Komputer)


1.       Microsoft Word
2.       Microsoft Excel

Microsoft Word

Tentunya kalian udah pasti tau dong apa itu microsoft word :v yaa,, seperti biasa jika ingin membuat sebuah tulisan,artikel ataupun surat pasti yang digunakan adalah microsoft word. Microsoft Word atau Microsoft Office Word atau Word adalah perangkat lunak pengolah kata (word processor) andalan Microsoft. Pertama diterbitkan pada 1983 dengan nama Multi-Tool Word untuk Xenix, versi-versi lain kemudian dikembangkan untuk berbagai sistem operasi, misalnya DOS (1983), Apple Macintosh (1984), SCO UNIX, OS/2, dan Microsoft Windows (1989). Setelah menjadi bagian dari Microsoft Office System 2003 dan 2007 diberi nama Microsoft Office Word. Di Office 2013, Namanya cukup dinamakan Word. Banyak ide dan konsep Word diambil dari Bravos, pengolah kata berbasis grafik pertama yang dikembangkan di Xerox Palo Alto Research Center (PARC). Pencipta Bravo, Charles Simonyi, meninggalkan Xerox PARC dan pindah ke Microsoft pada 1981. Simonyi juga menggaet Richard Brodie dari PARC. Pada 1 Februari 1983, pengembangan Multi-Tool Word dimulai. Setelah diberi nama baru Microsoft Word, Microsoft menerbitkan program ini pada 25 Oktober1983 untuk IBM PC. Saat itu dunia pengolah kata dikuasai oleh WordPerfect dan juga WordStar. Word memiliki konsep "What You See Is What You Get", atau WYSIWYG, dan merupakan program pertama yang dapat menampilkan cetak tebal dan cetak miring pada IBM PC. Word juga banyak menggunakan tetikus yang saat itu tidak lazim sehingga mereka menawarkan paket Word-with-Mouse. Word processor berbasis DOS lain, seperti WordStar dan WordPerfect, menampilkan hanya teks dengan kode markup dan warna untuk menandai pemformatan cetak tebal, miring, dan sebagainya.
Yaa kurang lebihnya seperti itu  lah yaa:D

Microsoft Excel


Microsoft Excel adalah sebuah aplikasi (perangkat lunak) yang merupakan bagian dari paket Software Microsoft Office. Perangkat lunak ini berjenis spreadsheet. Pada awal dibuatnya Microsoft Excel dapat berdiri sendiri dan bukan menjadi bagian dari Microsoft Office. Namun sekarang ini Microsoft Excel sudah merupakan satu paket dengan Microsoft Office yang terdiri dari berbagai perangkat lunak yang merupakan kebutuhan kantor dewasa ini. Aplikasi yang berbentuk lembar kerja ini dibuat dan didistribusikan oleh Microsoft Corporation untuk pengguna Apple Mac OS dan Microsoft Windows. Dalam aplikasi ini tersedia fitur pembuatan grafik dan fitur kalkulasi yang sifatnya agresif dan progresif.


Microsoft Excel merupakan aplikasi untuk mengolah data secara otomatis yang dapat berupa perhitungan dasar, rumus, pemakaian fungsi-fungsi, pengolahan data dan tabel, pembuatan grafik dan menajemen data.

Pemakaian rumus sendiri dapat berupa penambahan, pengurangan, perkalian dan lain sebagainya. Sedangkan pemakaian fungsi-fungsi dapat berupa pemakaian rumus yang bertujuan untuk menghitung dalam bentuk rumus matematika maupun non matematika.

Microsoft Excel dapat juga digunakan untuk menyelesaikan berbagai keperluan administrasi, dari yang sederhana sampai dengan yang rumit. Pada pemakaian keperluan yang sederhana tersebut misalkan untuk membuat perencanaan kebutuhan suatu perusahaan, berupa perencanaan barang kebutuhan, jumlah maupun harganya.

Sampai saat ini Microsoft excel sudah sampai pada versi 2013, sedangkan saya sendiri masih menggunakan versi 2007. Yah meskipun berbeda versi tetapi fungsi tetap sama, hanya dibedakan fitur yang pasti lebih baik dibanding versi terdahulu.


Dan yang terakhir adalah PD (Pembuatan Database). Pasti tak jarang dari baru kenal atau baru mendengar dengan kata databse. Apa sih database itu? Untuk apa? Seperti apa bentuknya ? :D wkwkwk pasti ada kannn. Maka dari itu admin akan menjelaskan tentang apa itu database.

Database adalah sekumpulan informasi yang  tersimpan di  komputer secara sistematis, sehingga mudah untuk diakses. Secara umum konsep dasar data adalah sekumpulan catatan, potongan-potongan pengetahuan yang tersusun secara sistematis dan teratur yang memiliki penjelasan, atau disebut  skema. Skema menggambarkan obyek yang diwakili suatu database dan ada hubungan antar obyek tersebutoleh sebuah program komputer untuk memperoleh informasi data. Perangkat lunak akan memanggil query basis data (DBMS). Penggunaan kata database kini tidak hanya di dunia komputer, telah  meluas di luar bidang komputer.

Nahh, sampailah kita dipenghujung...
Okkee gaess, admin pamit dulu ya. Semoga tulisan ini bermanfaat dan bisa menambah wawasan para pembaca.

Ketemu lagi di tulisan-tulisan selanjutnyaJ

No comments

Powered by Blogger.