Belajar HTML Dasar untuk Web Desain | Hello World #3

March 01, 2019 HTML , Programming , Tutorial 0 Comments

Hello World ! Kali ini gue mau ngelanjutin segmen yang udah gue buat yaitu segmen Hello World. Kali ini gue mau share tutorial tentang HTML dasar untuk web desain. Dalam web desain terdapat dua bahasa utama yang dipelajari yaitu HTML dan CSS. Dalam hal ini HTML digunakan untuk membuat tampilan web yang biasa saja. Tampilan tersebut masih monoton sehingga kurang menarik. Untuk mempercantik tampilan web maka digunain CSS. Namun kali ini gue akan membahas tentang HTML dulu. Mungkin selanjutnya gue juga akan bahas tentang CSS.

Sebelumnya software yang gue gunain adalah microsoft visual code. Silahkan kalian cari sendiri di internet sudah banyak tersedia. Oh yaa dalam pembuatan web desain ini juga memerlukan web browser untuk menampilkan dokumen dari kode HTML yang kita buat. Okee langsung saja kita mulai.

1. Buka Microsoft Visual Code > Pilih File > New File

2. Pada bagian pojok kanan bawah yang semula bertuliskan "plain text" ubah menjadi "HTML".

3. Kemudian ketik script kode

<!DOCTYPE html>
<html>

<head>
    <title>Judul Web</title>
</head>

<body>
    <h1>Judul Halaman</h1>
        <p>Isi web</p>
</body>

</html>

Penjelasannya

- <!DOCTYPE html> digunakan untuk mendeklarasikan tipe dari dokumen yang kita buat yaitu html sehingga dapat ditampilkan oleh web browser dengan benar

- <html> dan </html> digunakan untuk menggambarkan sebuah dokumen html

- <head> dan </head> digunakan untuk penulisan pada bagian kepala/atas dalam sebuah kode html. Biasanya pada bagian ini terdapat tag penulisan judul web.

- <title> dan </title> digunakan untuk menulis judul web

- <body> dan </body> digunakan untuk penulisan pada bagian badan/tengah sebuah kode html. Biasanya dalam bagian ini terdapat tag penulisan judul halaman, paragraph, dan isi konten yang akan ditampilkan.

- <h1> dan </h1> adalah heading yang digunakan sebagai penuisan judul dan subjudul isi konten. Jumlah heading yang bisa digunakan yaitu dari h1 sampai h6. Heading terbesar adalah h1 sedangkan heading yang terkecil adalah h6.

- <p> dan </p> digunakan sebagai tag paragraf.

Penulisan tag

Tag HTML ini biasanya berpasangan yaitu antara tag awal dengan tag akhir, jadi penulisan text dilakukan di antara kedua tag tersebut. Penulisan tag akhir sama dengan penulisan tag awal tetapi ditambah garis miring sebelum nama tag.

Namun terdapat pengecualian pada beberapa tag. Tag tersebut dapat berdiri sendiri seperti </br>

Menampilkan pada web browser

Kalian dapat menampilkan kode html yang sudah dibuat dengan cara menyimpan file tersebut dahulu dengan pilih File > Save. Kemudian membuka file tersebut dengan cara klik kanan pada file html > open with > pilih browser kalian

Ingat jika kalian ingin menampilkan update perubahan kode html, kalian harus save dulu baru bisa ditampilkan updatenya dengan cara merefresh halaman tersebut.

Contoh penulisan kode HTML

Dengan sedikit pemanis

<!DOCTYPE html>
<html style="background-color:whitesmoke; width: 500px; height: 500px; padding: 50px;">

<head>
    <title>Web Desain 1</title>
</head>

<body style="background-color: darkgrey;">
    <h1 style="padding: 20px;"><center>Personal data</center> </h1>
        <p style="padding-bottom:  50px; padding-left: 35px; padding-right: 20px "> 
            Name        : Irfan Izudin </br>
            Birth       : 18/08/99 </br>
            Address     : Tulungagung </br>
            Hobby       : Reading </br>
            College     : Electronic Engginerring Polytechnic Institut of Surabaya </br>            
        </p>

</body>

</html>