Mengenal Tag- tag dasar HTML dalam Web Development

Ahmad Deni

December 13, 2020

Mengenal Tag- tag dasar HTML dalam Web Development

Halo sobat? apa kabar? kali ini kita akan membahas tentang tag- tag dasar HTML dalam Web Development. Software yang akan kita gunakan kali ini adalah visual studio code di visual studio code. Pastikan sobat sudah mengikuti blog sebelumnya ya tentang live server. Yuk tak perlu berlama-lama, mari kita coba!

Heading

Heading adalah judul dalam tag html sangatlah penting. Tag ini terdiri dari h1- h6. Sangat disarankan, dalam penulisan heading menggunakan huruf kecil. Jika kita mencoba memberikan h7 atau lebih dari itu, maka akan menjadi default ke paraghraph.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>ini adalah h1</h1>
    <h2>ini adalah h2</h2>
    <h3>ini adalah h3</h3>
    <h4>ini adalah h4</h4>
    <h5>ini adalah h5</h5>
    <h6>ini adalah h6</h6>
    
</body>
</html>

Paragraph

penggunaan untuk paragraph menggunakan tag p. Tag ini digunakan untuk mendeskripsikan bagaiman sebuah paragraf dituliskan dalam sebuah kode html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h7>heading hanya sampai h6, lebih dari itu maka akan default ke paraghraph ukurannya</h7>
    <p>penggunaan untuk paragraph menggunakan tag p. Tag ini digunakan untuk mendeskripsikan bagaiman sebuah paragraf dituliskan dalam sebuah kode html.</p>
    
    
</body>
</html>

Image

Lalu bagaimana jika kita ingin menyimpan gambar pada web kita? ini lah yang dapat kita lakukan dengan tag img. Tag ini dapat kita gunakan baik dengan image lokal maupun dengan url. Jika menggunakan url, pastikan untuk tetap tersambung dengan internet. alt berfungsi jika gambar tidak berhasil di load.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="" alt="gambar kosong">
    <img src="https://www.udacoding.com/wp-content/uploads/2018/09/udacoding_1.png" alt="udacoding1">
    <img src="./assets/image/udacoding.png" alt="">
</body>
</html>

Iframe

Untuk menyematkan kita dapat menggunakan tag iframe. Dengan tag ini kita bisa menyematkan website, youtube, apapun itu lewat link urlnya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        link youtube aslinya:
        https://www.youtube.com/watch?v=VPkXfE7toBM
        cukup ganti watch?v= menjadi embed/
         
    -->
    <iframe src="https://www.youtube.com/embed/VPkXfE7toBM" frameborder="1" width="700px" height="500px"></iframe>
    
</body>
</html>

Yeay berhasil. Masih bersemangat? nantikan blog lainnya sobat udacoding, yang pastinya tentang web development. Sampai jumpaa.