Catatan:
- Singkatan: hypertext markup language,
- Pengertian: bahasa markup yang digunakan oleh website developer untuk membuat struktur utama pada suatu website,
- Ruang Lingkup: Navigation, Header, Footer, Body, Content dll
- Alat Belajar: Google chrome & Visual Studio
- Menggenali struktur dasar html yaitu <html> <head> <body>
- Step belajar:
- Install live server extension untuk membuat local host sebagai contoh localhost sebagai berikut: http://127.0.0.1:5500/index.html
- Mempelajari fungsi header <h1></h1> , <h2></h2> , <h3></h3> hingga <h6></h6>
- Mempelajari fungsi paragraf atau <p></p> dan <br>
- Membuat unordered list<ul> dan ordered list<ol>, contohnya: <ol><li><ul><li> </li></ul></li></ol>
- Membuat anchor hyperlink <a href=”[target url]”>[anchor text]</a> jika ingin membuat efek open new tab jadinya seperti ini, <a target=”_blank” href=”[target url]”>[anchor text]</a>
- Lalu mempelajari <img src=”[image source url]” alt=”[alt]”> dan bisa disetting heightnya menjadi <img height=”200″ src=”images/scenery.jpg” alt=”gambar pemandangan”>
- Selanjutnya dipelajari <section></section> dalam section ini kita bisa membuat bagian perbagian website dengan lebih tertata lagi, 1 section bisa membawa 1 <h1> , beberapa <h2> atau <h3>, beberapa <p> dll
- Membuat fungsi nav <nav> </nav> seperti contoh berikut
- menambahkan <footer></footer> salah satu fungsinya adalah untuk menambahkan copyright seperti ini
- Selanjutnya adalah fungsi <div></div>, fungsinya hampir sama seperti section tapi nanti setelah kita membuat halaman website dengan html bareng dengan CSS fungsi <div> ini baru lebih terasa, untuk saat ini penggunaan <div> seperti screenshot berikut:
- Membuat table dengan rumus, seperti contoh berikut:
- <table></table>
- <tr></tr> = table row
- <th></th> = table header
- <td></td> = table data
- Membuat form login, seperti contoh berikut:
- <form action=””> </form> (khusus form yang menggunakan javascript atau php)
- <form></form>
- <p>Username:</p><input type=”text” name=”username”/>
- <p>Password:</p><input type=”password” name=”password”>
- Membuat form login dapat masuk ke halaman dashboard profile adalah dengan cara memakai <form action=”admin.html”> </form> seperti screenshot berikut:
- Dan membuat button <button type=”submit”>Login</button>
- button <button type=”reset”>Kosongkan</button> yang berfungsi untuk mengosongkan isi kolom username dan password
- Note: saat kolom username dan password lalu login button terklik sebenarnya isi dari username dan password menjadi sebuah parameter di url, password masih terlihat, ini karena belum ssl saja.
- Membuat progress bar seperti contoh berikut:
sehingga jadinya seperti ini secara tampilan webnya:
- untuk code htmlnya sebagai berikut <progress value=”10″ max=”30″></progress>
- Colors pada text, sebagai contoh:
dan hasilnya seperti ini
- dengan syntax sebagai berikut: <font color=”green”>Perkenalan</font> atau memakai hex color menjadi seperti ini <font color=”#63cdda”>Riset Pertama</font>
- Membuat text formatting dari bold, italic dan underline, untuk bold menggunakan <strong></strong>, italic menggunakan <i></i> dan underline menggunakan <u></u> sebagai contoh sebagai berikut:
- <strong>3 dimensi</strong>
dan hasilnya seperti ini
,
- <i>1</i>
hasilnya seperti ini
- <u>Download Online</u>
hasilnya seperti ini
- <strong>3 dimensi</strong>
- Referensi:
Itís difficult to find experienced people for this topic, but you seem like you know what youíre talking about! Thanks
You should take part in a contest for one of the greatest blogs on the web. I most certainly will recommend this website!
HostGator: HostGator is known for its affordable plans and reliable performance. They offer unlimited storage and bandwidth, a variety of hosting options, and excellent customer support.
DreamHost: DreamHost is a well-established hosting provider, known for its solid uptime and fast-loading websites. They offer a wide range of hosting options, including shared, VPS, and dedicated hosting. [url=http://webward.pw/]http://webward.pw/[/url].