Pengenalan HTML (Pemformatan Teks)

bySeptian Ghifari Pratama Mulya -

 TUTORIAL

Membuat HTML Pemula



Pendahuluan : 

- Apa Itu HTML?

HTML adalah bahasa yang digunakan untuk membuat halaman web. Bagi yang berkecimpung di dunia perangkat gadget dan ilmu komputer, pasti sudah tidak asing lagi dengan berbagai kode di dalamnya. HTML adalah kependekan dari Hypertext Markup Language.
Berbeda dengan orang awam, mungkin hanya sekedar mendengar istilah HTML semata. Tanpa tahu makna pengertian HTML dan kegunaan sebenarnya. Terutama maksud di balik kode-kode yang tersusun.
Kode HTML tersebut memastikan format teks dan gambar yang tepat untuk browser Internet. Tanpa HTML, browser tidak akan tahu bagaimana menampilkan teks sebagai elemen atau memuat gambar atau elemen lainnya.

- Fitur Baru Dalam HTML5

Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada HTML5 antara lain sebagai berikut :




1. Canvas. Memungkinkan pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.
2. Header. Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama perusahaan.
3. Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh informasi di bagian bawah halaman web.
4. Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.
5. Audio. Memungkinkan penyajian player untuk memutar suara.
6. Video. Memungkinkan player untuk memainkan film.

- Hal Yang Diperhatikan Sebelum Membuat HTML

Dalam HTML dikenal istilah Tag, dimana Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.



Contoh: <html>, <head>, <title>,<body>, <p>, <a>, <br> , dan sebagainya.

Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan garis miring (/) di depan nama tag.

Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja. Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih bersih dan rapi.

Contoh : (baik)

<body>

<p>Belajar tentang tag di HTML</p>

</body>

Contoh : (buruk)

<BODY>

<P>Belajar tentang tag di HTML</P>

</BODY>

Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.

Berikut ini daftar tag yang wajib ada di HTML:

<!DOCTYPE html> — untuk deklarasi type dokumen;

<html> — tag utama dalam HTML;

<head> — untuk bagian kepala dari dokumen;

<title> — untuk judul web;

<body> — untuk bagian body dari dokumen.

 Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak valid.

Contoh Salah : 
<i><b><u>merebus</i></b></u>

Contoh Benar :
 <i><b><u>merebus</u></b></i>

Jika sudah paham akan aturan dasar diatas maka kita akan lanjut lebih lengkapnya dibawah ini



Pengerjaan : 

A. Mengatur Head dan Body Pada HTML :

Head

Elemen head HTML digunakan untuk menyediakan informasi meta tentang halaman web kepada browser dan mesin pencari. Elemen ini biasanya berada di antara tag <html> dan <body> pada halaman web dan terdiri dari beberapa tag seperti <title>, <meta>, <link>, dan lainnya.

1. Title

Pada tag <title> berguna untuk memberi judul pada format dokumen HTML, cara memberi Code-nya seperti gambar dibawah ini


Hasilnya maka akan seperti ini :

2. Meta

Tag <meta> adalah elemen yang berisi metadata yang tidak dapat dilihat oleh user tetapi biasanya digunakan oleh mesin untuk mengolah halaman web tersebut atau sebagai informasi tambahan halaman web tersebut.

Tag meta yang sering digunakan :

Meta Robots

Meta robots digunakan untuk menentukan hak akses pada robot yang datang ke halaman web. Robot disini maksudnya adalah pengunjung halaman web yang bukan manusia tetapi mesin yang mengakses halaman web untuk mendapatkan informasi dari halaman web tersebut.


Secara default jika kita tidak menambahkan aturan meta robots maka halaman web kita dapat diakses oleh robots. Kita bisa melakukan block pada robot dengan merubah content menjadi “noindex, nofollow”. Tapi jika website kita ingin muncul di Google maka sebaiknya tidak melakukan block tersebut.


Meta Description

Meta description digunakan untuk menambahkan diskripsi singkat tentang konten yang ada pada halaman web tersebut. Diskripsi ini akan ditampilkan pada mesin pencari, jadi sangat disarankan untuk memasukkan meta description ke HTML.

Tips menulis Meta Description:

1.Tulis diskripsi halaman web dengan panjang karakter kurang dari 160 karakter.

2.Diskripsi lebih baik mengandung kata kunci yang ingin diranking di search engine.

3.Diskripsi ditulis secara menarik namun harus sesuai dengan konten yang ada di halaman tersebut.



Meta Viewport

Meta viewport digunakan membuat halaman web yang responsive. Maksunya adalah halaman web tersebut dapat menyesuaikan dengan device yang digunakan misalnya dibuka di laptop maka tampilan akan menyesuaikan lebar layar laptop.

Meta viewport yang sering digunakan adalah:


Jika dibuka di smartphone maka juga akan menyesuaikan lebar layar smartphone.

3. Style  


Elemen <style> digunakan untuk mengatur tampilan halaman web dengan menggunakan CSS. Tapi biasanya CSS akan ditempatkan tersendiri pada file. Jadi, tag <style> hanya berisi CSS yang penting saja. CSS akan kita pelajari pada materi CSS tersendiri agar tidak bingung.


4. Link

Elemen <link> digunakan untuk menghubungkan halaman web tersebut dengan file atau halaman yang lain. Terdapat beberapa macam link yang berkembang saat ini. Diantaranya adalah link icon, canonical, stylesheet dan lainnya.


Link Icon

Link icon digunakan untuk membuat atau menambahkan icon di sebelah title halaman web. Caranya adalah dengan menghubungkannya pada file ICO atau PNG. Contoh:


Penjelasan: Kode di atas akan menambahkan icon dengan gambar bernama favicon.png.


Link Canonical

Link canonical digunakan untuk memberi informasi kepada robots bahwa halaman tersebut sama dengan link yang ada pada canonical. Contohnya:


Penjelasan: Kode di atas menunjukkan bahwa halaman web tersebut memiliki konten yang sama dengan alamat yang tertera pada link tersebut.


Link Stylesheet

Link stylesheet berfungsi untuk menghubungkan halaman web dengan file CSS yang sedang digunakan. Perbedaan antara link stylesheet dan tag <style> terletak pada penempatan kode CSS. Pada link stylesheet, kode CSS berada di luar kode HTML yaitu file CSS tersendiri. Sedangkan pada tag <style>, kode CSS berada di dalam kode HTML atau disebut dengan inline CSS.



5.Script

Elemen <script> digunakan untuk menghubungkan halaman HTML dengan Javascript. Terdapat 2 cara memasukkan javascript pada HTML yaitu dengan inline javascript (javascript berada di dalam HTML) dan external file (javascript berada pada file .js di luar HTML). Javascript akan kita pelajari pada materi Javascript tersendiri agar tidak bingung dalam belajar HTML.

Contoh Inline javascript:


Contoh External javascript:


Berikut sudah kita bahas elemen - elemen pada tag Head <head>, berikutnya kita aka membahas elemen - elemen Body <body> dibawah ini

Body

Body merupakan bagian tubuh atau isi dari sebuah dokumen HTML. Yaitu tag HTML yang biasanya digunakan untuk membuka dan menutup semua isian yang terdapat di dalam dokumen HTML, seperti text, grafik, link, dan lain-lain.

1. Tag Judul

Untuk membuat Judul, Sub Judul, Sub Bab dan seterusnya. Ada 6 tag heading yang bisa digunakan dari tag <h1> sampai tag <h6>.berikut tutorialnya :
 
1. Masukan Code HTML dibawah ini untuk mengatur Size heading, <h1> hingga <h6> untuk mengatur size Head dari terbesar sampai terkecil.


2. Maka akan muncul tampilan seperti pada dibawah ini, terlihat size untuk masing-masing code. untuk memudahkan pembuatan design pada web

2. Tag Pemformatan Teks

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring. Berikut Tag-tag HTML untuk pemformatan teks :

Tag HTML Format Teks 

 

 

Tag HTML “Keluaran Computer”

 



HTML Citations, Quotations, and Definition Tags



Berikut contoh - contohnya :

 

Kode 


 

 Hasil


3. Tag Paragraf

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.

Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.

Tag <p>


CONTOH :

code


hasil

Atribut Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.

code


hasil


Tag <pre>



Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik. Contohnya seperti pantun dan puisi yang paragrafnya diulis dengan garis baru dan juga indentasi.
Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag <pre>.

Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.
code

hasil



Tag <br>


Berfungsi untuk membuat baris baru


Code

Hasil

Tag <div>



Tag <p> dan Tag <div>, memiliki perilaku yang hampir sama. Tapi tag <div> sebenarnya bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.

Kadang tag <div> sering ‘disalahgunakan’ untuk membuat paragraf.


Code



Hasil

Tag <hr>


Berfungsi untuk membuat garis

Code


Hasil


THANKS YOU

Sekian tutorial dari saya, Terimakasih Sudah mengunjungi Blog kami untuk konten lainnya bisa Klik Link dibawah ini


Maturnuwun

Tags:
Previous Post Next Post
Share to other apps
Copy Post Link

Contact Form