Catatan Belajar TamaAndy: HTML5 Dasar – BuildwithAngga.com

/
HTML5 Dasar BWA Featured Images

Catatan:

  1. Singkatan: hypertext markup language,
  2. Pengertian: bahasa markup yang digunakan oleh website developer untuk membuat struktur utama pada suatu website,
  3. Ruang Lingkup: Navigation, Header, Footer, Body, Content dll
  4. Alat Belajar: Google chrome & Visual Studio
  5. Menggenali struktur dasar html yaitu <html> <head> <body>
  6. Step belajar:
    1. Install live server extension untuk membuat local host sebagai contoh localhost sebagai berikut: http://127.0.0.1:5500/index.html
    2. Mempelajari fungsi header <h1></h1> , <h2></h2> , <h3></h3> hingga <h6></h6>
    3. Mempelajari fungsi paragraf atau <p></p> dan <br>
    4. Membuat unordered list<ul> dan ordered list<ol>, contohnya: <ol><li><ul><li> </li></ul></li></ol>
    5. 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>
    6. Lalu mempelajari <img src=”[image source url]” alt=”[alt]”> dan bisa disetting heightnya menjadi <img height=”200″ src=”images/scenery.jpg” alt=”gambar pemandangan”>
    7. 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
    8. Membuat fungsi nav <nav> </nav> seperti contoh berikut
    9. menambahkan <footer></footer> salah satu fungsinya adalah untuk menambahkan copyright seperti ini
    10. 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:
    11. Membuat table dengan rumus, seperti contoh berikut:
      • <table></table>
      • <tr></tr> = table row
      • <th></th> = table header
      • <td></td> = table data
    12. 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”>
    13. 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.
    14. Membuat progress bar seperti contoh berikut: sehingga jadinya seperti ini secara tampilan webnya:
      • untuk code htmlnya sebagai berikut <progress value=”10″ max=”30″></progress>
    15. 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>
    16. 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
  7. Referensi:
    1. html-tags-for-seo ,
    2. Using_HTML_Sections_and_outlines,
    3. flatuicolors.com

3 thoughts on “Catatan Belajar TamaAndy: HTML5 Dasar – BuildwithAngga.com”

  3. 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].

    Reply

Leave a Comment