4. Let's Making Our First Code !

4. Let's Making Our First Code !

Hallo teman teman semuanya apa kabar, semoga sehat sehat saja ya dimanapun teman teman berada. Kembali lagi di Blog Study Code Informatika,  masih bersama saya Reza Febriansyah penulis konten yang tak pernah bosan untuk update tutorial pemrograman web nya setiap hari. Jadi, doakan terus agar saya bisa tetap aktif, rajin, dan rutin dalam updatenya.

Disini, di dalam blog ini, saya selaku blog writer akan memberikan tutorial tutorial dalam dunia informatika, khususnya dalam pemrograman web. Jadi tetap ikuti terus perkembangan dari blog Study Code Informatika ini, semoga bisa memberikan ilmu yang bermanfaat, dan juga bisa berguna untuk teman teman semuanya.

Sesuai dengan judul yang temen temen baca, kita akan memulai coding pertama kita di topic ini. Nah asik kan, tapi temen temen jangan terlalu dianggap pusing dulu karena saya jamin tutorial seri ini akan seru banget, tapi sebelum itu, untuk teman teman yang mungkin baru bergabung di blog Study Code Informatika ini khususnya dalam seri pemrograman web dasar topik 4, saya sarankan untuk teman teman mempelajari dulu materi kita di topik sebelumnya, agar ketika temen temen mengikuti seri tutorial ini, temen temen ga akan kebingungan dan kesulitan, gitu ya temen temen, nanti kalau sudah dipelajari, temen temen boleh next dan bergabung di topik ke 4 ini. Oiyah ini link materi sebelumnya akan saya kasih disini :

3. Preparation Tools 

2. Server Side and Client Side 

Oh iya saya ingin mengingatkan lagi bahwa artikel ini akan berseri sesuai tahapan pembelajaran kita, jadi, kita tidak akan membahas keseluruhan materi dalam 1 artikel, melainkan akan terdiri dari beberapa artikel lainnya. Dan agar suasana belajar menjadi lebih nyaman, saya sarankan untuk teman teman menyiapkan beberapa cemilan dan kopi favorite kalian terlebih dahulu, setelah itu, teman teman bisa kembali menyimak artikel tutorial ini sambil menikmati cemilan dan kopi favorite kalian.

Oke sip ya, kita masuk ke pembelajarannya.

MENGENAL HTML

HTML itu sebenarnya singkatan ya temen temen, jadi HTML itu adalah singkatan dari Hyper Text Markup Language. Nah peran HTML disini adalah sebagai kerangka awal dari sebuah website. Nanti kedepannya kalian akan menjumpai lagi yang namanya CSS dan Java Script, tapi kita tidak akan membahas itu dulu di topik ini. Karena masih jauh banget materinya. Jadi untuk sekarang kalian fahami dulu aja kalau definisi dari HTML itu adalah sebuah bahasa markup yang digunakan sebagai kerangka awal dari sebuah website. Contohnya adalah coba temen temen buka dulu aplikasi text editornya, dan masuk ke folder project kita yang namanya "Project Web Dasar" .
 
Nah kalau sudah, saya minta temen temen untuk bikin satu folder baru di dalam folder "Project Web Dasar" dengan nama "Latihan". Untuk temen temen yang menggunakan Sublime Text seperti saya, bisa langsung klik kanan di folder "Project Web Dasar" lalu tulis nama folder barunya "Latihan" kalau sudah langsung tekan enter.

 Sip ya temen temen, kita udah berhasil bikin sub folder baru di dalam folder utama project kita.

Sekarang, saya minta temen temen untuk membuat 1 file baru di dalam folder "Latihan" dengan nama filenya "latihan 1.html" perhatikan, liat ekstensi nya ya temen temen, belakangnya harus ".html" agar file tersebut terbaca sebagai file Html

Sip, mantap, sekarang kita akan mulai ngodingnya.

BELAJAR PEMROGRAMAN HTML

Sekarang, coba temen temen ketik text ini ke dalam isi "latihan 1.html" yang sudah kita buat tadi

WEBSITE PERTAMA SAYA
Hallo Perkenalkan nama saya Reza Febriansyah
Saya sedang belajar bagaimana cara membuat website dari Blog Study Code Informatika
Motivasi saya dalam hidup adalah selama kita bisa menjalani dan melawan segala rintangan dalam hidup ini, kita pasti bisa menjadi orang yang berhasil di masa depan.
Ini merupakan contoh dari pembelajaran website saya

Sekarang, save file nya dan coba jalankan. Caranya adalah klik kanan di dalam file nya, dan pilih "Open in browser"



Liat, kita udah berhasil bikin file html pertama kita dan menjalankannya di browser

 

 Tapi, sekarang problemnya adalah tulisannya gak rapih ya, kita mau tulisan "WEBSITE PERTAMA SAYA" nya itu agak besar, dan tulisan selain itu ada di posisi bawahnya. Nah gimana caranya, caranya adalah kita taruh text tersebut di dalam tag <h1> </h1> . Nah tag <h1> ini adalah heading atau judul dari suatu dokumen website. Kita coba ya. Sekarang temen temen bisa tambahi tag <h1> diawal dan setelah text yang ingin kita perbesar tadi. Dan jangan lupa, di akhir selalu kasih garis miring setelah tanda ini "<" sebagai penanda kalau tag ini adalah penutupnya

<h1>WEBSITE PERTAMA SAYA</h1>

Hallo Perkenalkan nama saya Reza Febriansyah

Saya sedang belajar bagaimana cara membuat website dari Blog Study Code Informatika

Motivasi saya dalam hidup adalah selama kita bisa menjalani dan melawan segala rintangan dalam hidup ini, kita pasti bisa menjadi orang yang berhasil di masa depan.

Ini merupakan contoh dari pembelajaran website saya

Sekarang , coba kita lihat lagi hasilnya, refresh halaman web pertama kita tadi dengan menekan "f5"

Nah kan, sekarang tulisan "WEBSITE PERTAMA SAYA" sudah menjadi besar seperti sebuah judul, dan tulisan selain itu ada dibawahnya, keren kan. Sekarang kita dah berhasil bikin sat script pertama kita walaupun baru membuat heading, tapi gapapa ya, kita belajar aja pelan pelan.

Mungkin cukup segini dulu yah untuk  pembelajaran kita kali ini, semoga bisa bermanfaat buat temen temen. Kalau suka dengan konten seperti ini, bisa di share ke yang lainnya juga, agar kita semua bisa belajar bersama sama disini, Gitu ya temen temen ya, kita sekarang yang penting cukup untuk membuat berkas atau file html kita dulu, untuk pembahasan lebih lanjutnya kita sambung di artikel topik yang akan datang. Setidaknya kita juga udah faham definisi dari HTML itu apa dan cara membuatnya bagaimana. Jadi ditunggu aja ya untuk tutorial selanjutnya. Saya Reza, dan saya ucapkan terima kasih banyak.