Cara membuat HTML di notepad (Step by step)

Halo, Setelah sebelumnya saya telah membahas apa itu HTML, Struktur dasar HTML dan mengenal apa itu Tag HTML. Sekarang kita akan langsung praktekkin bagaimanasih cara membuat HTML di notepad itu?.

Baca juga :  Apa itu HTML dan bagaimana cara kerja HTML

Apa saja yang dibutuhkan untuk membuat HTML? 

Untuk membuat HTML, kalian hanya memerlukan Notepad (Pengguna Windows),Text edit (Mac), dan Text editor lainnya. Tapi kaliini saya hanya akan membuatnya menggunakan Notepad.

1. Buka Notepad kalian
Just for information yang belum tahu apa itu Notepad. Notepad adalah Text editor sederhana (Windows) yang dapat digunakan untuk membuat dokumen. Untuk membuka Notepad kalian bisa ikuti cara berikut :

• Klik Start
• Search programs dan ketik Notepad, Seperti berikut : 

2. Membuat Folder dan File didekstop  
Setelah kebuka Notepadnya, Kalian bisa membuat folder dulu didekstop dan membuat file didalam folder baru tersebut yang ekstensi filenya adalah .html (Karna untuk membuat HTML, Harus menggunakan .html dibelakangnya atau ekstensi filenya).

Kenapa saya membuatnya didekstop? Karna lebih memudahkan kita dalam mencari / membuka file HTML kita nantinya. Dan sebenarnya jika menaruk folder dan filenya ditempat lainpun tidak apa - apa yah. Ini hanya bertujuan agar mempermudahkan kita dalam membuka file HTMLnya nantinya.

Berikut adalah cara membuat folder dan file HTMLnya didekstop :

Membuat folder dan file HTML :

1. Kelik kanan pada mouse kalian >> Klik new >> Klik folder>>(Untuk nama foldernya terserah kalian yah).
2. Buka notepad kalian lagi
3. Lalu klik file >> save as >> lalu cari folder kalian yang telah kalian buat dan klik
4. Membuat file baru (Disini untuk membuat HTML harus ditambahkan .html dibelakangnya jadi jangan kalian lupakan titiknya yah)
5. Jadi nama awalnya terserah kalian, intinya adalah setelah nama + .html

3. Membuat Struktur Dasar Tag HTML
Sebelumnya kita telah membahas Struktur Dasar Tag pada HTML. 
Baca juga : Mengenal Struktur Dasar Tag HTML dan Mengenal apa itu Tag HTML

Berikut adalah contoh pembuatannya :

4. Membuat title pada HTML  
Jika kalian sudah memahami betul Struktur Dasar Tag pada HTML. Dibagian tag head terdapat adanya tag title yang dimana kita bisa mengisi isinya didalam tag title tersebut sebagai contoh :

Fungsi tag title sendiri adalah untuk memberikan judul di tab atas Browser kalian masing - masing. 

5. Membuat teks didalam tag body  
Untuk membuat teks didalam body kalian bisa membuatnya dengan cara seperti berikut :

Artinya kita memberikan tag paragraph / p di kalimat pertama lalu memberikan tag paragraph / p juga dikalimat kedua seperti yang saya jelaskan diartikel sebelumnya fungsi daripada tag paragraph. Yaitu untuk membuat paragraph baru dibawahnya. 

6. Save  
Setelah kita telah membuat isinya dibody kita bisa langsung aja save dengan cara memencet tombol ctrl + s atau kalian bisa klik file lalu klik save. 

7. Open in Browser 
Langkah selanjutnya adalah membuka file kita diBrowser. 

Sebelumnya kita telah membuat folder dan filenya didekstop. Tinggal kedekstop lalu klik foldernya >> klik filenya dan otomatis langsung kebuka ke browser kalian masing - masing

Liat dibagian atas tag  browser kalian, Pasti judulnya sesuai dengan yang kalian isi di tag title kalian. Karna tag title berfungsi untuk membuat judul di tab browser kalian dan pastinya isinya pun telah tercetak dibrowser kalian. 

Hasilnya :

Dan selamat karna kalian telah berhasil membuat HTML menggunakan Notepad!

Mengenal Struktur Dasar Tag HTML dan Mengenal apa itu Tag HTML

Hai, Pada Artikel kaliini kita akan membahas apa itu Struktur Dasar Tag Pada HTML dan juga kita akan membahas apasih Tag HTML itu?, Meskipun sebelumnya saya telah membahasnya di Artikel sebelumnya tapi belum begitu spesifik penjelasannya.

Baca juga : Apa itu HTML dan Bagaimana Cara Kerja HTML

Perlu diketahui bahwa HTML adalah bahasa Markup yang mempunyai banyak tag didalamnya agar Browser dapat mengetahui apakah itu text yang berbentuk tulisan tebal / paragraph / link dll.

Dalam pembuatan tag sendiri kita bisa membuatnya dengan cara mengetik kurung siku buka < dan kurung siku tutup > dan didalam nya baru kita bisa menentukan tag apa yang ingin kita berikan.
Sebagai contohnya seperti berikut :

Didalam Tag sendiri ada yang dinamakan tag pembuka dan tag penutup. Yang membedakan apa? jika tag pembuka hanya terdapat kurung siku buka dan kurung siku tutup didalamnya, dan ada isi nama tagnya, semisal <p>. Tapi jika tag penutup ditambahkan slash atau garis miring </p>.

Nah setelah kita mempelajari dan mengerti apa itu tag HTML sekarang kita akan membahas apasih Struktur dasar tag HTML itu? ada apa saja? dan fungsi - fungsinya? Kita akan membahasnya satu persatu.

Didalam Struktur dasar tag HTML terdapat adanya :

Sekarang saya akan membahas fungsi - fungsinya dari tag - tag yang ada di didalam Struktur dasar tag HTML.

1. <!DOCTYPE html> 
Sebagai deklarasi kebrowser tentang versi HTML yang digunakan

2. <html>
Adalah tag pembuka dari seluruh tag yang ada dihalaman Web atau bisa kita katakan sebagai tag pembungkus daripada HTMLnya dan seperti saya jelaskan tadi, adanya tag pembuka <html> dan tag penutupnya </html>.

3. <head> 
Tag head ini biasanya berfungsi untuk memberikan CSS (Inline CSS) / untuk menghubungkan CSS dengan file yang berbeda / dengan cara external CSS. Bisa juga digunakan untuk memberikan kode - kode javascript didalamnya.

Didalam tag head terdapat tag title. Tag title sendiri berfungsi untuk memberikan judul diatas kiri tab browser kalian.

Baca juga : Apa itu CSS dan Bagaimana Cara Pembuatannya 

4. <body>
Tag body berfungsi untuk mengisi konten / isi dihalaman Website kita. Sebagai contohnya, jika kita ingin memberikan tulisan / gambar / table dll maka kita harus memasukkan tag-tag htmlnya didalam body beserta isinya. Sebagai contoh seperti berikut :

Disini saya memasukkan tag p / paragraph dan tag b / bold  didalam bodynya.

Kesimpulan  

• Didalam tag html terdapat tag pembuka < > dan tag penutup </ > .
• HTML  memiliki struktur dasar tag yang semuanya memiliki fungsinya masing - masing.

 

Apa itu CSS dan Bagaimana Cara Pembuatannya

Setelah sebelumnya kita telah mempelajari apa itu HTML, Maka sekarang kita akan memabahas apa itu CSS.

Baca Juga : Apa itu HTML dan Bagaimana cara kerja HTML

Jadi apa itu CSS? CSS adalah singkatan dari Cascading Style Sheets. Kalo HTML berfungsi untuk membuat konten / isi daripada Website kita, Maka kalo CSS sendiri singkatnya adalah berfungsi untuk memberikan style / mempercantik sebuah Document HTML / Website yang telah kita buat menggunakan HTML sebelumnya.

Untuk membuat Website menjadi lebih enak dilihat oleh User, Maka wajib bagi kita untuk mempelajari CSS. Sebab, HTML dan CSS itu bisa kita katakan sebagai hal yang selalu bersatu / berkesinambungan. Tidak seperti kamu dan dia *_* haha. Maksudnya disini adalah HTML (Merupakan suatu wadah untuk membuat isinya) dan CSS berfungsi sebagai memperbagus / mempercantik halamannya. Tentunya jika tidak ada style untuk mempercantik Websitenya, bagaimana User bisa tertarik pada Websitenya?.

Lalu Bagaimana contohnya?, Berikut adalah sedikit contoh hasil menggunakan CSS :

Sebelum menggunakan CSS / Hanya menggunakan HTML : Sesudah menggunakan CSS :

Nah itu adalah sedikit kegunaan CSS sendiri,Sebenarnya masih banyak fungsi - fungsi lainnya yah teman - teman untuk memperbagus / mempercantik Websitenya menggunakan CSS. Tetapi disini saya hanya sedikit menyontohkan kalo CSS ternyata bisa digunakan untuk memberikan style kedalam Document HTML kita.

Bagaimana cara kerja CSS?

Untuk menggunakan CSS kalian bisa menggunakan cara Inline CSS Style / Internal CSS Style / External CSS Style. Disini saya akan menyontohkan bagaimana cara menggunakan CSS dengan cara Inline CSS Style, Yaitu memberikan Tag style didalam Tag head HTMLnya. Contohnya seperti berikut :

Disini maksudnya adalah memberikan style background-color kepada Tag HTML yang terdapat Tag p. Apa itu background-color? Yaitu adalah warna latar belakang Document HTMLnya.

Jadi, untuk menggunakan CSS kalian cukup deklarasikan HTMLnya apa yang ingin kalian berikan stylenya. Lalu, masukkan syntax CSS yang ingin kalian gunakan. Seperti contoh kasusnya adalah yang saya contohkan diatas dan diakhiri dengan titik koma.

Kesimpulan

Berikut adalah kesimpulan dari Artikel kaliini :

• CSS befungsi untuk memberikan style / tampilan halaman Website kita yang sebelumnya telah dibuat menggunakan HTML
• HTML dan CSS adalah hal yang selalu terikat, Dimana HTML untuk menyusun konten / isi halaman Website. Maka CSS yang berfungsi untuk memberikan style / memperindah halaman Website.
• Ada 3 cara untuk membuat CSS.

Apa itu HTML dan Bagaimana cara kerja HTML

Assalamualaikum wr wb. Kaliini saya akan membahas tentang apa itu HTML. Pertama - tama kita harus tau dulunih kepanjangan dari HTML sendiri.

HTML adalah singkatan dari Hypertext Markup Languange yang berfungsi untuk membuat konten kedalam website. Maksudnya adalah dengan adanya HTML ini memungkinkan kita untuk membuat isi daripada Website kita sendiri dan HTML ini juga bisa kita katakan sebagai sebuah wadah untuk CSS,Javascript,PHP.

Lalu kalo kalian pernah mendengar Bahasa Pemrograman, Apakah HTML itu bagian dari Bahasa Pemrograman? Jawabannya tidak yah teman - teman. Karna sekali lagi HTML adalah bahasa Markup dan berbeda sekali dengan Bahasa Pemrograman yang isinya sendiri terdapat perintah - perintah yang terdapat adanya Logika/Algoritma Pemrograman,Variable,dan lain - lain.

Pasti kalian bertanya - tanya, Apakah belajar HTML itu susah?. Tidak yang teman - teman, Untuk belajar HTML itu sangat mudah apalagi kalo kalian tekun dalam mempelajari HTML sendiri. Dan didalam HTML sendiri terdapat Tag - Tag dan atribute yang mudah untuk dipahami oleh teman - teman. Untuk sebagai contohnya seperti berikut yah :

Yaitu membuat Tag p/paragraph di HTML yang fungsinya sendiri adalah membuat paragraph pada Website kita sendiri.

Bagaimana cara kerja HTML sendiri?

HTML sendiri sebenarnya hanya sebuah tulisan / dokumen. Tapi perbedaannya adalah HTML menggunakan Tag seperti yang sudah saya jelaskan diatas.

HTML memiliki ekstensi akhiran file .html atau .htm yang dapat kita lihat dibrowser kalian masing - masing. Seperti contohnya, Kalian membuat HTML di Notepad kalian(Bagi pengguna Windows) atau TextEdit(Mac) yang nantinya kalian membuat file baru yang diisi namanya dengan contoh.html

Intinya adalah diakhiri dengan .html atau .htm pada nama akhir nama filenya dan untuk nama bagian depannya kalian bisa isi dengan keinginan kalian masing - masing. Setelah membuat file baru, coba untuk membuat Tag p yang telah saya contohkan diatas lalu kalian save dan buka filenya. Pastinya sekarang telah terbuka dibrowser kalian masing - masing

Oke, Selamat untuk kalian karna telah mempelejari apa itu HTML dan kita juga telah membahas bagaimanasih cara kerja si HTMLnya dan bagaimana cara pembuatan HTMLnya sendiri.