Jumat, 08 September 2023

Belajar HTML Dasar : Format Text Pada HTML

on   in   with Tidak ada komentar
Dalam penuliasan HTML sangat sering menggunakan format text di dalamnya, baik itu dalam penulisan judul, ataupun isi dari content/halaman website sendiri. Berikut beberapa penjelasan dan contoh dari Format Text Pada HTML.

FORMAT TEXT PADA HTML

Ada beberapa format text yang umumnya di gunakan, di antaranya:

Membuat huruf tebal (bold) pada HTML

Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag <b>. Berikut contoh syntax HTML untuk membuat format text tebal:

<b>ini text tebal</b>

Membuat huruf miring (italic) pada HTML

Untuk membuat teks miring pada HTML, pudingers bisa menggunakan tag <i>. Contohnya:

<i>ini text miring</i>

Membuat huruf bergaris bawah (underline) pada HTML

Untuk membuat teks underline/garis bawah pada HTML, pudingers bisa menggunakan tag <u>. Contohnya :

<u>ini text underline</u>
Berikut format text yang sering digunanakan dalam HTML:

Tag Deskrisi
<b> Format text bold/tebal
<i> Format text italic/miring
<u> Format text underline/garisbawah
<small> Format text kecil
<strong> Format text yang hampir sama dengan format bold
<sub> Format subscripted teks
<sup> Format superscripted teks
<ins> Format text garis bawah
<del> Format text dengan garis di tengah
<mark> Format text yang berwarna
Berikut contoh penulisan tag/element format text di yang sudah di pelajari di atas:

<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>
</head>
<body>
     <b>ini format format text tebal</b><br/>
     <i>ini format text italic</i><br/>
     <u>ini format text underline</u><br/>
     <em>ini format text em</em><br/>
     <small>ini format text small</small><br/>
     <strong>ini format text strong</strong><br/>
     <sub>ini format text sub</sub><br/>
     <sup>ini format text sup</sup><br/>
     <ins>ini format text ins</ins><br/>
     <del>ini format text del</del><br/>
     <mark>ini format text mark</mark>
</body>
</html>

PENUTUP

Jadi kesimpulannya, format text digunakan di dalam penulisan judul, isi dari content dan juga halaman website. Format text yang paling umum digunakan adalah <b> untuk menebalkan huruf, <i> untuk memiringkan huruf, dan <u> untuk menggaris bawahi huruf.

Oke pudingers! Materinya cukup disini aja. Kalau pudingers ada tambahan tentang materi ini atau mau bertanya, silakan tulis di kolom komentar. Insyaallah admin bakal menjawab pertanyaan pudingers. Terimakasih sudah membaca 🤗

Klik <Next> untuk melanjutkan.
Share:

Belajar HTML Dasar : Heading Pada HTML

on   in   with Tidak ada komentar
Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting pada halaman web. Element tag heading ini memiliki 6 tingkatan yang berurutan yaitu <h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah keindahan struktur halaman web.
Perbedaan masing-masing heading yaitu ukuran besar dan kecil teksnya. Contohnya tag/element <h1> lebih besar dari tag/element <h2> dan seterusnya.

Penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing tag/element heading yang sering digunakan pada pengolahan halaman web :
  • <h1> digunakan untuk penulisan judul utama dari dokumen.
  • <h2> digunaakan sebagai sub dari <h1>.
  • <h3> digunakan sebagai sub dari <h2>.
  • Penggunaan <h4>, <h5>, <h6> tergantung programmer sendiri untuk memperindah halaman web sesuai keperluan.

Berikut contoh penerapan masing-masing element/tag heading:

<!DOCTYPE html>
<head>
            <title></title>
</head>
<body>
            <h1>ini adalah heading 1</h1>
</body>

Contoh lainnya:

<!DOCTYPE html>
<html>
<head>
            <title></title>
</head>
<body>
            <h1>ini adalah heading 1</h1>
            <h2>ini adalah heading 2</h2>
            <h3>ini adalah heading 3</h3>
            <h4>ini adalah heading 4</h4>
            <h5>ini adalah heading 5</h5>
            <h6>ini adalah heading 6</h6>
</body>
</html>
Dan hasilnya saat di jalankan pada browser:


Dari contoh diatas, dapat anda lihat perbedaan antara masing-masing heading. penulisan heading ini boleh digunakan didalam jenis tag yang lain. berikut contoh penggunaan element heading di dalam tag lain :

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<a href="https://pusing-ngoding.blogspot.com/"><h1>ini adalah heading 1</h1></a>
</body>



Contoh diatas yaitu penggunaan tag heading yang berada dalam tag <a>. Sedangkan atribut href digunakan untuk menghubungkan dengan dokumen/link yang lain.

Ketika diklik pada “ini adalah heading 1” maka halaman akan di alihkan ke halaman https://pusing-ngoding.blogspot.com/.

PENUTUP

Jadi kesimpulannya, heading berfungsi untuk menunjukkan bagian penting pada halaman web. Terdapat 6 tingkatan heading, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tingkatan dari heading menunjukkan ukuran besar dan kecil teks. <h1> adalah heading yang paling besar ukurannya, biasanya digunakan untuk penulisan judul utama, sedangkan <h6> adalah heading yang paling kecil ukurannya.

Oke pudingers! Materinya cukup disini aja. Kalau pudingers ada tambahan tentang materi ini atau mau bertanya, silakan tulis di kolom komentar. Insyaallah admin bakal menjawab pertanyaan pudingers. Terimakasih sudah membaca 🤗

Klik <Next> untuk melanjutkan.
Share:

Kamis, 07 September 2023

Belajar HTML Dasar : Mengenal Tag, Element, Atribut HTML

on   in   with Tidak ada komentar
Setelah sebelumnya admin membahas tentang Pengenalan HTML dan Text Editor, kini pudingers akan memasuki pengenalan dan penggunaan Tag, Element dan Atribut dalam HTML. Ketiga pembahasan ini merupakan dasar dalam penulisan kode HTML atau dasar dari seluruh tampilan halaman web yang ada di internet.

TAG HTML

Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa text HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya kepada web browser, baik text itu berupa list, paragraf, link dan sebagainya.

Dalam penulisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana objek yang di maksudkan berada diantara pembuka dan penutup tag. Berikut penulisan tag yang digunakan dalam HTML:

<tag> Objek yang diisi </tag>
Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung sudut pembuka dan di akhiri dengan kurung sudut penutup (< >). Sedangkan pada tag penutup, diawali dengan kurung sudut pembuka, backslash, dan diakhiri dengan penutup kurung sudut (</ >).

Berikut beberapa jenis tag yang sering digunakan dalam HTML kalau di web programing:

Tag Fungsi
<!– ….–> Digunakan untuk memberi sebuah komentar atau keterangan
<!DOCTYPE html> Digunakan untuk Mendefinisikan tipe document HTML5
<a>link</a> Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain (membuat link)
<b> .. </b> Membuat teks menjadi tebal
<p> .. </p> Membuat paragraf
<h1> .. </h1> Membuat heading satu
<h2> .. </h2> Membuat heading dua
<body> Mendefinisikan body/isi dokument HTML
<head> Mendefinisikan bagian kepala dokumen HTML
<title> Mendefinisikan judul halaman
<div> Mendefinisikan halaman
<link> Mendefinisikan hubungan antar dokumen
<script> Mendefinisikan client-side script
<table> Mendefinisikan table
<th> Mendefinisikan sel header di dalam sebuah table
<td> Mendefinisikan sel di dalam sebuah table
<tr> Membuat baris di dalam sebuah table
<ul> Mendefinisikan daftar dalam format bullet
<li> Mendefinisikan list

ELEMENT HTML

Element pada HTML merupakan isi atau objek yang berada pada tag. Maksudnya, isi yang ada diantara tag pembuka dan tag penutup di sebut dengan elemen. Misalkan:

!DOCTYPE html>
<html>
<head>
          <title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>
Pada contoh diatas <h2> merupakan element h2 dan isinya ini adalah heading dua. Dalam element ini bisa berupa text ataupun tag lain, seperti <link> dan sebagainya.

ATRIBUT HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. Informasi ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll. 

Atribut bisanya memiliki 2 bagian yaitu nama dan nilai, dapat ditulis dengan ( name=”value” ). Penulisan value diapit oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua).

Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri, misalnya:

!DOCTYPE html>
<html>
<head>
          <title></title>
</head>
<body>
          <h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>
Perhatikan pada syntax di atas:
  • <h2> adalah tag heading 2
  • align adalah nama dari atribut
  • center adalah nilai/value dari atribut
  • “Pengenalan atribut HTML” adalah element dari tag h2

Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi pudingers yang bergelut di web programing akan sering menjumpai tag yang didalamnya terdapat atribut.

PENUTUP

Jadi kesimpulannya, tag digunakan untuk memberitahu web beowser untuk apa text HTML itu dibuat. Ada dua tag, yaitu tag pembuka (< >) dan tag penutup (</ >). Objek atau isi yang ada diantara kedua tag disebut dengan element. Menambahakn informasi di dalam tag pembuka yang bisa berupa efek warna, ketebalan, font, dll. disebut dengan Atribut.

Oke pudingers! Materinya cukup disini aja. Kalau pudingers ada tambahan tentang materi ini atau mau bertanya, silakan tulis di kolom komentar. Insyaallah admin bakal menjawab pertanyaan pudingers. Terimakasih sudah membaca 🤗

Klik <Next> untuk melanjutkan.
Share:

Rabu, 06 September 2023

Belajar HTML Dasar : Memilih Text Editor

on   in   with Tidak ada komentar
Untuk kita, admin dan pudingers, yang baru mau belajar bahasa pemrograman, khususnya web programming, tentu berfikir bagaimana membuat program dan apa yang harus digunakan untuk membuat program? Disini admin bakal kasih tau ke pudingers 😁 Sebelum memulai cara penulisan HTML, terlebih dahulu yang harus disediakan adalah text editor dan browser.
Text Editor merupakan aplikasi yang digunakan untuk menulis syntax atau kode program, khususnya penulisan kode program HTML itu sendiri. Text editor yang bisa digunakan untuk penulisan kode HTML sangatlah banyak, contohnya seperti Notepad yang disediakan oleh Windows OS, Textedit yang disediakan oleh Mac OS dan Nano yang disediakan oleh Linux OS.

Text editor berbeda dengan Word Processor (Microsoft Word, King Soft, WordPerfect). Itu dikarenakan text editor tidak bisa digunakan untuk mengatur format dokumen serta tidak disediakan fitur-fitur yang bisa digunakan untuk desktop publishing.

Browser merupakan aplikasi yang akan digunakan untuk menjalankan code program html yang sudah ditulis. Browser ini ialah syarat yang harus dipenuhi jika pudingers belajar web programing. Browser itu sendiri bisa digunakan yang sudah disediakan oleh sistem operasi langsung ataupun bisa juga digunakan aplikasi browser yang lain seperti: Mozilla Firefox, Opera, Chrome dan sebagainya.

MEMILIH TEXT EDITOR YANG SESUAI KEINGINAN

Berikut beberapa text editor yang admin sarankan untuk digunakan dalam penulisan code program bagi pudingers yang baru belajar bahasa pemrograman.

Sublime Text Editor

Sublime Text editor adalah text editor yang paling banyak digunakan oleh programer, text editor ini memiliki tampilan yang elegan, yang khas dengan warna kecoklatannya. Text Editor ini tersedia untuk Windows, Mac, dan Linux. Untuk pudingers yang ingin menggunakan sublime bisa di download dari situs resminya langsung, yaitu di https://www.sublimetext.com/.


Notepad ++


Text editor ini bisa digunakan untuk Windows dan free licence (dalam artian bebas digunakan tanpa mengeluarkan biaya). Text Editor ini memiliki ciri khas tersendiri dan banyak fitur-fitur yang bisa diinstal di text editor ini. Untuk pudingers yang ingin menggunakan text editor notepad++ bisa di download pada situs resminya, yaitu https://notepad-plus-plus.org/.


Atom

Text editor ini hampir sama dengan sublime namun text ini agak sedikit lebih berat jika dibandingkan dengan sublime. Text Editor ini bisa digunakan oleh platform Mac, Windows, dan Linux. Untuk pudingers yang ingin menggunakan text editor ini bisa di download di https://atom.io/.


Brackets

Text editor ini memiliki kriteria tersendiri dan hampir sama dengan Atom. Text editor ini bisa digunakan untuk Platform Mac, Windows dan Linux. Untuk pudingers yang ingin bergelut dengan brackest bisa di download di http://brackets.io.


Netbeans

Text editor ini merupakan salah satu favorit programer, namun text editor ini bisa di kategorikan lebih berat dari text editor lain yang disebutkan di atas. Kemudahan text editor ini adalah tampilan kode program yang ditulis lebih rapi. Untuk pudingers yang ingin menikmati editor ini bisa di download di situs resmi netbeans, yaitu di https://netbeans.org/.


PENUTUP

Nah, itulah beberapa list text editor yang bisa digunakan untuk menulis kode HTML. Text editor ini selain bisa digunakan untuk menulis kode html bisa juga untuk menulis kode program lainnya seperti PHP, CSS, JavaScript, dan beberapa kode program untuk dektop.

Jadi kesimpulannya, sebelum memulai penulisan kode program, yang harus pudingers penuhi terlebih dahulu adalah memilih salah satu text editor yang akan digunakan dan browser untuk menjalankan code program.

Oke pudingers! Materinya cukup disini aja. Kalau pudingers ada tools rekomendasi tambahan atau mau bertanya, silakan tulis di kolom komentar. Insyaallah admin bakal menjawab pertanyaan pudingers. Terimakasih sudah membaca 🤗

Klik <Next> untuk melanjutkan.
Share:

Belajar HTML Dasar : Pengertian HTML

on   in   with Tidak ada komentar
Apa itu HTML? 🤔 mungkin pertanyaan ini yang terbersit di pikiran pudingers kalau baru masuk ke dunia web programming.

HTML merupakan bahasa pemrograman dasar yang wajib di kuasai bagi seorang web developer. Kenapa? karena HTML merupakan unsur dasar dari membangun sebuah website. Ibaratnya, HTML itu seperti menjadi pondasi sebuah rumah atau bangunan, sebab bentuk pada halaman website di buat menggunakan HTML. 

PENGERTIAN HTML 

HTML (Hyper Text Markup Language) merupakan sebuah bahasa formatting yang digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website, HTML menjadi pondasi dasar pada halaman website. 

Sebuah file HTML di di simpan dengan ekstensi .html (dot html), dan dapat di eksekusi atau diakses menggunakan web browser, seperti Google Chrome, Mozilla Firefox, Opera, Safari dll. Untuk membuat sebuah website tidak cukup hanya menggunakan HTML, di perlukan juga bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang dinamis.

Jika halaman website dibuat hanya menggunakan HTML saja, maka halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola website. Tentunya developer akan sangat di sibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate artikel.

HTML memiliki beberapa elemen yang tersusun dari tag-tag yang memiliki fungsi nya masing-masing, seperti tag heading, paragraf, pembuatan form, tombol, list, membuat hyperlink atau link yang menghubungkan antar halaman website dan masih banyak lagi lainnya.

KEGUNAAN HTML

HTML berfungsi sebagai pondasi sebuah halaman website. Adapun yang dapat di lakukan dengan HTML adalah sebagai berikut: 
  • Membungkus elemen-elemen tertentu sesuai kebutuhan.
  • Membuat heading atau format judul.
  • Membuat Tabel.
  • Membuat List.
  • Membuat Paragraf.
  • Membuat Form.
  • Membuat Tombol.
  • Membuat huruf tebal.
  • Membuat huruf miring.
  • Menampilkan gambar.
  • Menampilkan video, dll.

Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki banyak sekali fitur tambahan salah satunya memungkinkan kita untuk membuat streaming video tanpa bantuan adobe flash.

PENUTUP

Jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan pondasi dasar dari pembuatan sebuah website. Jika ingin mengeksekusi atau menjalankan file HTML harus menggunakan web browser dan file html di simpan dengan ekstensi .html (dot html).

Oke pudingers! Materinya cukup disini aja. Kalau pudingers ada tambahan tentang pengertian HTML atau mau bertanya, silakan tulis di kolom komentar. Insyaallah admin bakal menjawab pertanyaan pudingers. Terimakasih sudah membaca 🤗

Klik <Next> untuk melanjutkan.
Share:

Selasa, 05 September 2023

Perkenalan Admin

on   with Tidak ada komentar
Haloo pudingers 🤗 Disini admin bakal perkenalan dulu, lalu menjelaskan apa maksud dan tujuan dibuatnya blog ini dan kenapa nama blog nya puding. So, stay reading yah pudingers 😁

HALO ADMIN

Pudingers, kenalin nama admin adalah Ghony Mutiara S. (S nya disingkat biar pudingers penasaran xixixi). Kadang admin ini sering disalah gender lohh... Admin kan sebenarnya cewek tulen, tapi sering banget yang ngira admin itu cowok cuman karna namanya ghony huhuhu 😞

Background pendidikan admin saat ini SMK, tepatnya di SMKN 1 Kota Bekasi. Di SMK admin ngambil jurusan Teknik Komputer dan Jaringan atau biasa disebut TKJ (biasanya temen temen admin pada nyebut TeKanan Jiwa wkwkwk). Di TKJ admin belajar selama 3 tahun mengenai jaringan, komputer, routing, switching, server (dikit, kebanyakan routing) dan admin sudah dapat sertifikat internasional dari MikroTik vendor, yaitu MTCNA dan MTCRE.

Keren gak sii pudingers! Admin bangga pada diri sendiri 🤭

MAKSUD DAN TUJUAN MEMBUAT BLOG

Oke. Jangan lama lama kenalan sama admin, nanti pudingers terpikat sama admin xixixi. Kalau mau tahu lebih lanjut, kita mutual LinkedIn aja pudingers! <LinkedIn>

Jadi admin ini kan background udah di IT, tapi bukan programers atau developers atau yang berkaitan dengan coding, melainkan di network. Sedangkan, pekerjaan sekarang untuk network engineer kebanyakan diperuntukan bagi pria. Admin udah pusing nyari kerja yang network base buat cewe, tapi ga nemu nemu. Sekalinya nemu, admin ga keterima 😫

Setelah admin riset kecil kecilan, ternyata yang ngga mandang gender cewek cowok itu pekerjaan sebagai developers atau programers (yang berhubungan dengan coding). Admin pengen banget dapet pekerjaan kaya gitu A.S.A.P., supaya ngga menyusahkan ortu. 

Nah, dari situ admin bertekad untuk belajar coding untuk memperluas potensi karir dan juga menambah skill. Trus, kenapa buat blog min? Kata guru admin pas sekolah,

"Blog itu ibarat catetan kita untuk mempermudah memahami konfigurasi yang sudah di lakukan, kalo kalian lupa apa konfigurasi atau step step nya, kalian bisa liat blog sendiri. Dan juga blog bisa berguna untuk portofolio kalian."

Untuk pertanyaannya sudah terjawab ya pudingers!

KENAPA NAMANYA PUDING?

Hemmm... Kenapa ya? 🤔 Admin cerita sedikit yah? 

Waktu itu, admin ikut bootcamp dari WiT. Bootcamp ini diperuntukan bagi alumni WiT, dan admin adalah salah satunya. Diselenggarakan di Bandung, admin bersama teman teman admin bertujuh pergi ke Bandung. Karna bootcamp ini dikelompokkan ke dalam kelompok kecil untuk mengerjakan proyek tim, teman teman admin kepencar kelompoknya.

Singkat cerita, saat perkenalan kelompok, ada 1 kelompok yang namanya PUDING. Hah? Puding? Puding makanan? Semua peserta bootcamp saat itu kebingungan. Ada yang tertawa, ada juga yang bertanya tanya. Moderator pun bertanya, "kenapa namanya puding?". Ketua tim dari kelompok puding menjawab, "puding itu bukan nama makanan manis dan lembut. Puding itu singkatan dari Pusing ngoDING." Sungguh namanya yang tidak terduga kan?

Admin pun terinspirasi untuk membuat blog dengan nama PUDING yang nantinya akan berisi catatan catatan admin belajar ngoding dari berbagai sumber.

Ayo pudingers! Semangat upgrade skill dan terus belajar, karna di dunia IT itu kita ngga akan puas dengan belajar 1 hal. Berbeda zaman, berbeda pula teknologi yang digunakan. Teknologi pun sudah berkembang pesat, jadi pudingers harus terus belajar! Semangat pudingers! 💪😁
Share: