Mari mengenal pemrograman dasar dari HTML

 Apa sih itu HTML?

 

Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets dan bahasa scripting seperti JavaScript dan VBScript.

 

https://en.m.wikipedia.org/wiki/HTML

 Html merupakan bahasa dasar bagi para programmer programmer tingkat tinggi, 

https://majapahit.id/blog/2021/03/13/tips-menjadi-programmer-otodidak


Di pertemuan ketiga kami di pelajaran DPK PPLG X 2 kami belajar mengenai html beserta struktur-strukturnya dan kami diberikan tugas untuk membuat kurang lebih 50 tag baris dalam mengetik HTML.

Pak Wanto sedang menjelaskan seputar hal
tentang HTML

Hasil yang akan saya tampilkan merupakan hasil coding 80 baris lebih milik saya, saya bisa menyelesaikan tugas ini karena saya sangat antusias dan semangat dalam mempelajari bahasa programming HTML untuk membuat web.

Yuk intip hasil coding dasar 

<!DOCTYPE html>

<html]

<head>

    <title>Justin Dani</title>

</head>

<body><h1>Mengenal <b>HTML</b> bersama Pak Wanto</h1>

    <h4> Nama : Justin Dani </h4>

    <h6> Alamat : Jl. Budi Mulia No 4A </h6>

    <h6>RT/RW : 08/08</h6>

    <h6>Kecamatan : Pademangan Barat</h6>

    <h6>Kelurahan : Pademangan</h6>

    <h6>Nomor tlp : 085155557777</h6>

    <p>Call Me!</p>

    <p><b>HTML</b>(Hypertext Markup Language) merupakah suatu bahasa pemrograman untuk membuat suatu halaman website.

    </p>

    <br>

    <p> Website buatan html bisa menjadi sebuah website yang statik ataupun dinamis. </p>

    <p>Kalian bisa mengetik HTML di android ataupun di laptop dengan menggunakan w3schools.com ataupun dengan menggunakan visual studio code seperti yang digunakan oleh banyak programmer-programmer</p>

    </pre>

    <h5>Beberapa contoh teks yang bisa dibuat/diketik 0di html</h5>

    <p>Ini kalimat yang normal</p>

    <p><b>Ini kalimat yang tebal</b></p>

    <p><i>Ini kalimat yang miring</i></p>

    <p><em>Ini kalimat yang di tekankan</em></p>

    <p><small>Ini kalimat yang menjadi kecil</small></p>

    <p>Ini kalimat yang di <mark>tandai </mark></p>

    <p>Ini kalimat yang di <del>hilangkan</del></p>

    <p>Ini kalimat yang di <ins>digaris bawahi</ins></p>

    <p>Ini kalimat yang <sub>diatur menjadi sedikit ke bawah</sub></p>

    <p>Ini kalimat<sup>yang sedikit lebih keatas dari teks normal</sub></p>

    <p><b>Dibawah ini merupakan contoh dari beberapa teks yang bisa digunakan untuk membuat judul</b></p>

    <!-- <br> untuk ganti baris -->

    <!-- <p> untuk Paragraf -->

    <!-- <b> untuk menebalkan -->

    <!-- <em> untuk menekan text -->

    <!-- <del> untuk mencoret text -->

    <!-- <mark> untuk menandai text -->

    <!-- <ins> untuk menggaris bawahi text -->

    <!-- <sub> untuk mengatur text menjadi agak kebawah -->

    <!-- <sup> untuk mengatur text menjadi agak keatas -->

    <!-- <small> untuk mengecilkan text -->

    <br>

    <h1>Contoh Heading buat judul</h1>

    <h2>Contoh Heading buat judul</h2>

    <h3>Contoh Heading buat judul</h3>

    <h4>Contoh Heading buat judul</h4>

    <h5>Contoh Heading buat judul</h5>

    <h6>Contoh Heading buat judul</h6>

    <br>

    <p>Dan dibawah ini akan ada contoh untuk kalimat yanh berwarna dengan menambahkan "style ="color:(warna};"></p>

    <p style="color:red;">Contoh kalimat berwarna merah.</p>

    <p style="color:blue;">Contoh kalimat berwarna biru.</p>

    <p style="color:green;">Contoh kalimat berwarna hijau.</p>

    <p style="color:purple;">Contoh kalimat berwarna ungu.</p>

    <p style="color:brown;">Contoh kalimat berwarna coklat.</p>

    <p style="color:yellow;">Contoh kalimat berwarna kuning.</p>

    <p style="color:pink;">Contoh kalimat berwarna pink.</p>

    <p style="color:grey;">Contoh kalimat berwarna abu-abu.</p>

    <p style="color:orange;">Contoh kalimat berwarna oranye.</p>

    <p style="color:white">Contoh kalimat berwarna putih.</p>

    <br>

    <p><b>Contoh cara memasukan atribut untuk menambahkan atribut di HTML</b></p>

    <a href="https://www.google.com/url?sa=t&source=web&rct=j&url=http://smkn1jakarta.sch.id/&ved=2ahUKEwitgOHmhZP5AhViw3MBHaexBJgQFnoECA4QAQ&usg=AOvVaw3R2g91qXEbO3C_sAnKFAUc">Kunjungi Wesbite SMKN 1 ya!!!</a>

    <p><b>Dibawah ini merupakan gambar dari website web3schools </b></p>

    <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

    <img src="https://www.google.com/images" alt="Workplace" usemap="#workmap" width="400" height="379">

    <map name="workmap">

        <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

        <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">

        <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">


    </map>

    <!-- Semua elemen HTML dapat memiliki atribut -->

    <!-- Atribut href dari <a> menentukan URL halaman yang dituju tautan -->

    <!-- Atribut src dari <img> menentukan jalur ke gambar yang akan ditampilkan -->

    <!-- lebar dan atribut tinggi <img> memberikan informasi ukuran untuk gambar -->

    <!-- Atribut alt dari <img> menyediakan teks alternatif untuk gambar -->

    <!-- Atribut style digunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, dan lainnya -->

    <!-- Atribut lang dari tag <html> menyatakan bahasa halaman Web -->

    <!-- Atribut judul mendefinisikan beberapa informasi tambahan tentang suatu elemen -->

    <p><b>Jadi itu sekilas dari pemrograman dasar html dari pelajaran Pak Wanto</p>

    <p>Segera kunjungin blog saya untuk melihat hasil pelajaran hari ini </p>

    </pre>

</body>

</html>


Dengan hasil tampilan web seperti dibawah ini





 


Posting Komentar

Lebih baru Lebih lama