Membuat Tag title dan heading Sebagai Judul Halaman Website


 

Assalamu'alaikum Warahmatullahi Wabarokatuh

Salam Sejahtera Bagi kita semua.

Diartikel sebelumnya kita sudah membahas Bahan-bahan yang disiapkan untuk membuat website. Diartikel tersebut membahas tentang bahan-bahan yang harus kita siapkan untuk membuat sebuah website dari awal.

Nah, diartikel kali ini saya ingin memberikan materi pertama saya yaitu tentang membuat title dan heading untuk judul halaman website yang kita buat. Kenapa sih harus title dan heading dulu yang dipelajari? Karena setiap website itu pasti memiliki judul tertentu seperti website sekolah, kantor, online shop, dan lain-lain yang harus ditampilkan di halaman utama website tersebut agar pengunjung website tersebut tidak kebingungan untuk mengetahui tema yang dimiliki oleh website tersebut.

Langsung aja nih kita masuk ke dalam materi inti yang akan kita bahas disini.

Bahan yang harus kalian siapkan untuk ngodingnya:

  1. Laptop/Komputer atau Android jika kalian mengerti cara ngoding di Android. Karena di Artikel ini saya fokus mengajarkan menggunakan Laptop/Komputer jadi seluruh isi tutorialnya menggunakan Laptop/PC. 
  2. Text editor. Kalian bisa pake text editor apa aja. Di artikel ini saya menggunakan Sublime Text sebagai text editor yang saya gunakan. Jika kalian belum download kalian buka Cara Download dan Install Sublime Text.
  3. Web Server. Diartikel ini saya menggunakan XAMPP sebagai aplikasi penyedia web server apache saya.
Oke langsung aja kita langsung ngoding bareng yah.....

yang pertama kita akan belajar membuat title. Yang perlu kalian tau title yang akan kita buat ini akan tampil dibagian kepala website yang teratas. Kalau masih bingung langsung aja kita bikin nih. 

1.  Langsung aja buka XAMPP kalian yang sudah kalian install dilaptop atau komputer kalian dan start apachenya. Hingga tampilannya seperti dibawah ini.


Kalau sudah apache nya sudah hijau seperti itu berarti sudah siap untuk digunakan.

2.  Buat folder baru di dalam folder htdocs yang berada di folder xampp dengan nama html, dan didalam folder html kalian buat lagi folder dengan nama tag_dasar. 
seperti ini struktur tempat penyimpanan filenya.


3.  Buka aplikasi sublime text yang sudah kalian install di perangkat kalian
4.  Pilih bagian file dipojok kiri atas Sublime Text lalu klik open folder. (Pilih folder html yang tadi sudah kalian buat). lalu klik oke.
5.  Klik kanan folder tag_dasar yang terbuka disublime text dan pilih new file atau file baru.
6.  Simpan file (ctrl + s) dengan nama title.html 
7.  Nah waktunya kita mulai untuk ngoding. Kalian copy paste aja codingan dibawah ini.
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
</body>
</html>

Supaya gk repot copy paste yang ini kalian bisa menggunakan shortcut sublime dengan mengetik html kemudian tekan tab pada keyboard, maka akan muncul semua tag inti HTML. ketikkan Belajar HTML didalam tag title dan simpan (ctrl + s).
Tampilannya seperti gambar dibawah ini


8.  Untuk melihat hasilnya kita langsung aja ke browser di perangkat kita. Disini saya menggunakan chrome untuk melihat hasil codingan yang saya buat. ketikkan localhost/html/tag_dasar/title.html dibrowser kalian. kemudian enter. Maka, hasilnya seperti gambar dibawah ini.


Yang saya berikan lingkaran merah merupakan tampilan dari pada title.



Oke guys, selanjutnya kita akan membuat heading dari pada website kita, Alias judul website yang akan ditampilkan dibagian layar utama website kita.

1. Langkah-langkahnya sama seperti cara pembuatan title. Yang berbeda hanyalah tempat menyimpannya karena kita akan membuat file baru di folder tag_dasar dan beri nama dengan nama heading.html .

2.  Jika sudah membuat filenya kemudian kita langsung ngoding aja. tulis html pada sublime text kemudian tab pada keyboard dan akan memunculkan semua tag inti pada sublime text. Buat title dengan nama Belajar HTML dan buat seperti kodingan dibawah ini
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

<h1> adalah ukuran heading terbesar dan <h6> adalah ukuran heading terkecil.
Maka tampilannya akan seperti tampilan dibawah ini.

Jika didalam pembuatan website heading ini berguna sebagai pembuat judul artikel atau pun judul utama index website. atau bisa juga digunakan untuk hal-hal yang lainnya. Jika kalian membuat website kalian bisa menggunakan ukuran apa saja. 



Oke guys, mungkin sampai sini aja nih materi Membuat Tag title dan heading sebagai judul halaman website. Mudah-mudahan kalian semua paham dengan artikel yang saya buat. Kurang lebihnya mohon maaf

Terimakasih.......










Lokasi: Kota Samarinda, Kalimantan Timur, Indonesia

Komentar

Posting Komentar

Postingan Terpopuler

Cara ngoding HTML di Android

Gambar
  Assalamu'alaikum teman-teman, salam sejahtera bagi kita semua. Banyak diantara kita bertanya-tanya, apakah bisa kita ngoding di android? Jawabannya pasti bisa, karena sudah banyak aplikasi legal yang tersebar di app store atau playstore di Android kalian. Karena saya bukan user atau pengguna android untuk ngoding jadi saya full ngoding di komputer atau laptop saja. Sebenernya ngoding diandroid bisa juga sih, cuman ram android saya 2GB dan sekarang sudah kepenuhan jadi saya tidak bisa pakai android untuk ngoding, karena banyak file penting di handphone saya, hehehehehe... Mungkin saya hanya share pengalaman saya aja nih, karena waktu itu saya juga pernah menjadi programmer yang menggunakan android ya, meskipun cuman ngoding HTML aja sih, apa salahnya jika saya ingin berbagi ilmu buat kalian yang mau ngoding HTML di android.  Yang pernah saya coding di android itu bukan HTML aja sih, CSS dan JavaScript pernah, karena HTML, CSS, JavaScript itu tidak perlu banyak bahan, hanya pe...
Baca selengkapnya

Tulisan berjalan dan menampilkan video dari youtube ke website menggunakan HTML

Gambar
 Assalamu'alaikum sahabat KWP semua🙏😊, Salam sejahtera bagi kita semua, Semoga kita tetap dalam lindungan Tuhan Yang Maha Esa. Driartikel kali ini saya ingin memberikan kalian sebuah materi yaitu tentang Tulisan berjalan dan cara menampilkan video dari youtube ke website milik kita menggunakan HTML. Pastinya kalian pernah melihat tulisan-tulisan berjalan pada sebuah website yah dan juga ada video dari youtube yang ditampilkan pada sebuah website. Untuk tulisan berjalan pada website biasanya para Programmer menyebutnya Marquee , Karena tulisan yang berjalan itu pastinya menggunakan tag Marquee untuk membuat tulisan tersebut berjalan.  Pertama kita akan membuat tulisan yang berjalan dari kanan ke kiri atau Marquee Default . Silahkan ketikkan Code HTML dibawah ini pada Text Editor kalian  <html> <head> <title>Marquee</title> </head> <body> <h1>Marquee</h1> <p> <marquee>Tulisan Ini Berjalan</marquee> </p...
Baca selengkapnya

Perkenalan

Gambar
  Assalamu'alaikum Warahmatullahi Wabarokatuh Perkenalkan nama saya Muhammad Ibnu Zein. Dinisi saya sebagai pendiri Forum Koding Web Programming. Dimana forum tersebut adalah tempat untuk mempelajari tentang Web Developing dari awal. Di postingan pertama saya diblog ini saya hanya memperkenalkan saya dan yang akan dibahas di blog ini saja. Diblog ini saya akan menyampaikan berbagai macam materi tentang dunia Web Developing yang terpenting adalah Start up pertama kali kita mulai belajar tentang Web Developing.  Ada pun materi terpenting yang akan saya bahas di blog ini adalah: 1. HTML Dasar 2. CSS Dasar 3. Praktek Pembuatan Website berbasis HTML & CSS 4. PHP Dasar 5. JavaScript Dasar 6. Mysql Database 7. Tambahan info materi tentang Web Developing.
Baca selengkapnya