Belajar dasar HTML

HTML menjadi dasar dalam pembelajaran coding web karena codingnya yang emang hypertext sehingga cocok digunakan untuk belajar coding web. membuat web yang menjadi dasarnya dari web adalah dengan HTML oleh karena itu mempelajari HTML sangat diperlukan bagi calon developer web. Html sendiri mempunyai pengertian yaitu adalah format data untuk membuat dokumen hypertext yaitu dapat dibaca dari satu platform komputer ke komputer lainnya tanpa perlu menggunakan perubahan apapun. Dokumen html adalah suatu dokument text biasa, sehingga di plaform apapun dokumen dapat dibaca.

Html disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Menentukan dimana suatu gambar harus muncul dan jenis performatan apa yang berlaku pada suatu kumpulan teks tertentu.

Html juga dapat membuat tabel, form ataupun dokumen dengan bingkai-bingkai didalamnya dengan menggunakan tanda-tanda html tersebut. Semua halaman web yang sering dibuka seperti facebook.com, twitter.com dan sebagainya ditampilkan menggunakan html.

Pengenalan tag HTML

Karena html adalah markup language maka html hanya digunakan untuk me-markup suatu dokumen. Misal untuk mem-format suatu teks menjadi miring kita tambahkan tag<em> atau <i> setiap tag html akan menjadi isi dari tag lainnya, untuk membuat hirarki dari dokumen html tertentu

cobalah kalian buka software sublime dan buatlah suatu file lalu beri nama latihan1.html kita akan mulai belajar coding dasar html setelah kamu membuat file latihan1.html maka masukan coding dibawah ini untuk cara singkat menulis coding ini jika anda menggunakan sublime cukup ketik( HTML) lalu tab maka akan langsung muncul coding seperti ini tetapi jika kamu menggunakan visual studio code maka kamu cukup mengetikan tag ini ! dan langsung tekan enter maka akan langsung muncul coding seperti dibawah ini:

Contoh :

<!DOCTYPE html>

<html>
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>

Tag yang digunakan untuk menginformasikan kepada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini harus dicantumkan disetiap dokumen HTML yang akan dibuat.

semua kode html yang dibuat akan ditulis di dalam tag ini, perhatikan setiap tag harus ada tag penutup.

tag ini digunakan untuk menyimpan sebagai informasi tantang dokumen html.

<title>judul file html </title>

Title tag ini untuk menampilkan teks pada judul browser atau pada tab browser.

Tag ini digunakan untuk menampilkan apa yang akan atau ingin ditampilkan pada browser akan ditulis dalam tag ini, tag body merupakan tag pembuka dari badan dokumen html.

A. Elemen tag HTML

Berikut beberapa contoh elemen html

1. Heading

Adalah kata yang menjadi judul atau sub dalam suatu dokumen html. Heading tersedia 6 tingkatan. Heading level 1 menjadi judul utama. Hhtml mempunya beberapa atribut pada elemen heading yang kan ditampilkan dikiri dan dikanan di bagian tengah jendela browser.

contohnya seperti coding dibawah ini

<!DOCTYPE html>

<html>
<head>
    <title>Document</title>
</head>
<body>
    <h1>HEADING 1</h1>
    <h2>HEADING 2</h2>
    <h3>HEADING 3</h3>
    <h4>HEADING 4</h4>
    <h5>HEADING 5</h5>
    <h6>HEADING 6</h6>
    
</body>
</html>

tag ini digunakan untuk memperbesar suatu huruf

2. Paragraf

Elemen <p></p> digunakan untuk menandai suatu paragraf didalam dokumen html. <p> digunakan untuk awal paragraf sedangkan </p> digunakan untuk ahir paragraf namun tag </p> tidak selau digunakan karena secara otomatis paragraf semebelumnya akan berakhir.

contoh :

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
<p>Paragraf Pertama</p>
    <p>BTS (Hangul: 방탄소년단; RR: Bangtan Sonyeondan), 
        juga dikenal sebagai Bangtan Boys, 
        adalah sebuah boy band beranggotakan tujuh orang asal 
        Korea Selatan yang dibentuk oleh Big Hit Entertainment. 
        Nama tersebut kemudian berakronim menjadi Beyond the Scene pada bulan Juli 2017. 
        Pada tanggal 12 Juni 2013, mereka membawakan lagu berjudul 
        "No More Dream" dari album awal mereka 2 Cool 4 Skool</p>
    <p>yang mendukung debut mereka pada tanggal 13 Juni 2013.
        Mereka memenangkan penghargaan New Artist of the Year atas lagu "No More Dream", 
        termasuk di Melon Music Awards dan Golden Disc Awards 2013 dan Seoul Music Awards 2014. 
        Mereka semakin menarik perhatian dengan album Dark & Wild (2014), 
        The Most Beautiful Moment in Life, Part 2 (2015) dan The Most Beautiful Moment in Life: 
        Young Forever (2016), dengan dua album terakhir ini memasuki Billboard 200 AS. 
        The Most Beautiful Moment in Life: Young Forever memenangkan penghargaan Album of the Year di Melon Music Awards 2016.</p>
    
</body>
</html>

3. Berpindah baris

Elemen <br> digunakan untuk memaksa berpindah baris ke baris yang ada di bawahnya. Lebih mirip seperti enter.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
<p>Paragraf Pertama</p>
    <p>BTS (Hangul: 방탄소년단; RR: Bangtan Sonyeondan), 
        <br> juga dikenal sebagai Bangtan Boys, 
       <br> adalah sebuah boy band beranggotakan tujuh orang asal 
      <br>  Korea Selatan yang dibentuk oleh Big Hit Entertainment. 
      <br>  Nama tersebut kemudian berakronim menjadi Beyond the Scene pada bulan Juli 2017. 
      <br>  Pada tanggal 12 Juni 2013, mereka membawakan lagu berjudul 
      <br>  "No More Dream" dari album awal mereka 2 Cool 4 Skool</p>
    <p>yang mendukung debut mereka pada tanggal 13 Juni 2013.
      <br>  Mereka memenangkan penghargaan New Artist of the Year atas lagu "No More Dream", 
      <br>  termasuk di Melon Music Awards dan Golden Disc Awards 2013 dan Seoul Music Awards 2014. 
      <br>  Mereka semakin menarik perhatian dengan album Dark & Wild (2014), 
      <br>  The Most Beautiful Moment in Life, Part 2 (2015) dan The Most Beautiful Moment in Life: 
       <br> Young Forever (2016), dengan dua album terakhir ini memasuki Billboard 200 AS. 
       <br> The Most Beautiful Moment in Life: Young Forever memenangkan penghargaan Album of the Year di Melon Music Awards 2016.</p>
    
</body>
</html>

4. Perataan

Elemen pada tabel digunakan untuk mengatur bentuk perataan di dalam dokumen html yang digunakan untuk paragraf. elemen ini memiliki tag elemen yang berbeda-beda didalamnya namun tetap sama fungsinya

<align =”center”></> untuk perataan paragraf tengah

<align =”left”></> untuk perataan paragraf kiri

<align =”right”></> untuk perataan paragraf kanan

<!DOCTYPE html>

<html>
<head>
    <title>Document</title>
</head>
<body>
        <p align ="center">paragraf ini menggunakan perataan tengah </p>
        <p align ="left">paragraf ini menggunakan perataan kanan</p>
        <p align ="right">paragraf ini menggunakan perataan kanan</p> 
</body>
</html>

5. Physical Style

Physical stylee adalah suatu jenis format yang diberikan pada teks tanpa tergantunng jenis dari elemen dasar teks tersebut. elemen ini sering digunakan dalam suatu program untuk mengolah kata seperti menebalkan atau membuat miring suatu teks.

Elemen-elemen yang bisa dikategorikan dalam physical style adalah:

<b>untuk menebalkan teks</b>

<i>untuk memiringkan teks</i>

<u>untuk menggaris bawahi teks</u>

<s>untuk memberikan coretan pada teks</s>

<strike>untuk memberikan coretan pada teks</strike>

<blink>untuk membuat teks berkedip, hanya ada pada netscape</blink>

<sub>untuk membuat teks subript(co₂)</sub>

<sup>untuk membuat teks superscript(50²)</sup>

6. Font

Untuk menentukan ukuran suatu teks, element font menyediakan atribut size dengan nilai 1 sampai 7. Dengan nilai 1 untuk ukuran teks paling kecil dan 7 untuk ukuran teks paling besar.

<!DOCTYPE html>

<html>
<head>
    <title>Document</title>
</head>
<body>
    <font size="1">SIZE </font>
    <font size="2">SIZE 2</font>
    <font size="3"> SIZE 3</font>
    <font size="4">SIZE 4</font>
    <font size="5">SIZE 5</font>
    <font size="6">SIZE 6</font>
    <font size="7">SIZE 7</font>
</body>
</html>

a. Jenis Font

Digunakan untuk menampilkan teks satu jenis font yang ditentukan dari setting browser.

<!DOCTYPE html>

<html>

<head>

       <title>menggunakan font face</title>

</head>

<body>

       <font face="Arial">INI JENIS FONT ARIAL</font>
       <br>
       <font face="Geneva">INI JENIS FONT GENEVA</font>
        <br>
       <font face="Courier New">INI JENIS FONT COURIER NEW</font>

</body>

</html>

7. Color

Penggunaan warna pada teks dengan menggunakan atribut COLOR pada elemen font.penggunaan warna dapat dinyatakan dalam dua cara yaitu dengan nama seperti: red, green, atau yellow dan melalui nilai rgb suatu warna.

<!DOCTYPE html>

<html>

<head>

       <title>menggunakan warna </title>

</head>

<body>

<font color="blue">INI ADALAH WARNA BIRU</font><br>
<font color="#00ffff">INI ADALAH WARNA BIRU LAUT</font><br>
<font color="#00ff00">INI ADALAH WARNA HIJAU</font><br>
<font color="#ffc0b">INI ADALAH WARNA MERAH JAMBU</font><br>

</body>

</html>

8. Elemen <HR>

Digunakan untuk membuat garis pemisah. kamu juga bisa mengukurnya dengan meenggunakan width didalamnya sebagai lebar garisnya dan height untuk tingginya

<!DOCTYPE html>
<html>
<head>

       <title>menggunakan garis pemisah  </title>

</head>

<body>
<br>
<br>
<br>
<br>
<hr color="red" width="900" height="100">

</body>
</html>

A. List Menu atau Daftar

1. Ordered List atau numbered list

Adalahdaftar tyang didalamnya memiliki nomor secara berurutan.

Html juga menyediakan fasilitas untuk daftar berurutan menggunakan berbagai macam variasi seperti:

Atribut	Fungsi
Type =”A”	Membuat daftar berurutan dengan huruf besar(A,B,C,D...)
Type =”a”	Membuat daftar berurutan dengan huruf kecil(a,b,c...)
Type =”I”	Membuat daftar berurutan dengan bilangan romawi besar(I,II,III...)
Type =”i”	Membuat daftar berurutan dengan bilangan romawi kecil(i,ii,iii...)
Type =”1”	Membuat daftar berurutan pada nomor(default)(1,2,3,...)
Start =”x”	Menentuukan nilai awal dari item dalam daftar, dimana x adalah nilai awal daftar

<!DOCTYPE html>

<html>
<head>

       <title>menggunakan font size </title>

</head>

<body>
<ol>
    <li type="A">Membuat daftar berurutan dengan huruf besar(A,B,C,D...)</li>
    <li type="a">Membuat daftar berurutan dengan huruf kecil(a,b,c...)</li>
    <li type="I">Membuat daftar berurutan dengan bilangan romawi besar(I,II,III...)</li>
    <li type="i">Membuat daftar berurutan dengan bilangan romawi kecil(i,ii,iii...)</li>
    <li type="1">Membuat daftar berurutan pada nomor(default)(1,2,3,...)</li>
    <li type="x">Menentuukan nilai awal dari item dalam daftar, dimana x adalah 
        nilai awal daftar</li>
</ol>
</body>
</html>

2. Unordered List/Bulleted

Adalah suatu daftar dimana urutannya tidak tiidak diutamakan. Setiap item unordered list ditandai dengan titik atau kotak.unordered list menggunakan tag <ul>...</ul> dengan item dialamanya menggunakan tag <li>..</li>.

Berikut ada atribut tambahan dari unordered list

Atribut	Fungsi
Type =”circle”	Membuat tanda lingkaran untuk item
Type =”square”	Membuat tanda kotak untuk item
Type =”disc”	Membuat tanda cakram untuk item

<!DOCTYPE html>

<html>
<head>

       <title>menggunakan font size </title>

</head>

<body>
<ul>
    <li type="circle">Membuat tanda lingkaran untuk item</li>
    <li type="square">Membuat tanda kotak untuk item</li>
    <li type="disc">Membuat tanda cakram untuk item</li>
</ul>
</body>
</html>

B. Membuat Tabel

Untuk menampilkan tipe tabel dalam html bisa menggunakan tag <table></table> sedangkan untuk menentukan banyaknya baris gunakan tag <tr></tr> dan untuk menentukan banyaknya kolom tergantung pada banyaknya tag <td></td>.

<!DOCTYPE html>

<html>
<head>
       <title>menggunakan font size </title>
</head>
<body>
    <table border="1">
        <tr>
            <td>BARIS 1 KOLOM 1</td>
            <td>BARIS 2 KOLOM 2</td>
            <td>BARIS 3 KOLOM 3</td>
        </tr>
        <tr>
            <td>BARIS 4 KOLOM 4</td>
            <td>BARIS 5 KOLOM 5</td>
            <td>BARIS 6 KOLOM 6</td>
        </tr>
    </table>
</body>
</html>

a. Atribut border

Berfungsi untuk memberi garis tepi bagi tabel yang dibuat. Border diikuti dengan satu angka yang menunjukan pada ketebalan garis dalam satuan pixel.

Contoh: Border=4. Yang berarti memberikan garis ketebalan pada tepi bagian tabel yang kita buat setebal 4 pixel.

b. Attribut Width

Berfungsi untuk mengatur lebar suatu tabel atau suatu sel.

Contoh : <table width =”500”>

Berarti tabel yang akan dibuat memiliki lebar 500 pixel.

C. Membuat File Multimedia

Digunakan untuk menyisipkan gambar, audio, dan video. Sebelum itu siapkanlah file seperti yang diatas untuk melengkapi pembelajaran coding html kalian karena nanti kita akan mencoba memanggil file di atas kedalam html.

1. Memuat File Gambar

untuk memunculkan gambar maka kalian harus menempatkan gambar di folder yang sama dengan folder html ditempatkan lalu jangan lupa beri nama gambar dengan nama yang mudah diingat atau mudah di tulis lalu masukkan nama ddari gambar tersebut ke dalam coding seperti coding di bawah ini.

<!DOCTYPE html>
<html>
<head>
<title>FILE HTML</title>
</head>
<body>
 <img src="myjodoh.jpg">
<p>INI ADALAH MASA DEPAN CERAHKU</p>
</body>
</html>

2. Memuat File Video

Untuk memuat sebuah video pada html kita akan menggunakan tag<video> untuk coding video sendiri Buatlah satu copyan lagi video dengan extensiya ogg agar video dapat berjalan seperti yang sayaa beritahukan diatas

<!DOCTYPE html>
<html>
<head>
    <title>FILE HTML</title>
</head>
<body>
   <p><h1 align="center"><font color="#9932cc">INI ADALAH PEMUTARAN VIDEO PADA FILE HTML</h1></p></font>
   <center>
   <video width="900px" height="550px" controls>
    <source src="BTS_Dynamite.mp4" type="video/mp4">
    <source src="BTS_Dynamite.ogg" type="video/ogg">
   </video> </center>
</body>
</html>

3. Memuat file audio

Untuk memuat sebuah audio pada dokumen html, kita akan menggunakan tag <audio>. Karena saya sudah memiliki filenya makan saya tinggal memasukan file audionya kedalam html

<!DOCTYPE html>
<html>
<head>
<title>FILE HTML</title>
</head>
<body>
       <center><h4>Blackpink - Pretty Savage</h4>
       <audio src ="BLACKPINK_Pretty_Savage.mp3" controls="autoplay">
       </audio></center>
</body>
</html>

D. Form

Adalah sarana untuk membuat server web lebih interaktif yang memungkinkan user mengirim dan menerima informasi melalui elemen yang disebur control seperti :

a. One-line text box

Untuk memasukan data dalam satu baris

<!DOCTYPE html>

<html>
<head>
<title>FILE HTML</title>
</head>
<body>
        <input type="text" name="nama" size="25">
</body>
</html>

Tipe password juga bisa di input untuk berupa password teks akan ditampilkan berupa tanda (****) ada tipe hidden yang memungkinkan input akan di sembunyikan

<!DOCTYPE html>

<html>
<head>
<title>FILE HTML</title>
</head>
<body>
        <input type="password" password="nama" size="25">
</body>
</html>

b. Scrolling text-box

Control yang memasukan untuk data lebih dari satu baris

<!DOCTYPE html>

<html>
<head>
<title>FILE HTML</title>
</head>
<body>
    <textarea rows="4" name="comment" cols="20"></textarea>
</body>
</html>

c. Check box

Untuk user menggunakan kotak periksa

<!DOCTYPE html>

<html>
<head>
<title>FILE HTML</title>
</head>
<body>
    <input type="checkbox" name="cek" value="ON" checked>JUNGKOOK
    <br>
    <input type="checkbox" name="cek" value="ON" checked>MIN SUGA
</body>
</html>

d. Radio button

Digunkan untuk user dalam memilih item dari kelompok pilihan lain yang tersedia

<!DOCTYPE html>

<html>
<head>
<title>FILE HTML</title>
</head>
<body>
        <input type="radio" name="pilih" value="VI" checked="">LISA BLACKPINK
        <br>
        <input type="radio" name="pilih" value="VI" checked="">JENNIE BLACKPINK
        <br>
        PILIH YANG MANA HAYOO?:D
</body>
</html>

e. Dropdown menu

Yang memungkinkan user memilih daftar menu

</select>

<!DOCTYPE html>

<html>
<head>
<title>FILE HTML</title>
</head>
<body>
        <select name="menu" size="1">

                <option selected="" value="menu 1">LISA BLACKPINK</option>
                <option value="menu 2">ROSE BLACKPINK</option>
                <option value="menu 3">JENNIE BLACKPINK</option>
                <option value="menu 3">JISO BLACKPINK</option>
      
         </select>
</body>
</html>

f. Submit dan reset button

Untuk meengirim dan membatalkan data yang akan dikirim ke server web

<!DOCTYPE html>

<html>
<head>
<title>FILE HTML</title>
</head>
<body>
        <input type="submit" name="B1" value="kirim">
        <input type="reset" name="B2" value="batal">
</body>
</html>

Seperti itulah belajar dasar coding dari HTML jangan pernah menyerah dalam belajar karena ilmu yang didapat untuk menentuukan masa depan kalian sendiri mohon maaf bila ada kekurangan karena kesempurnaan hanyalah milik tuhan semangat kepada calon web developer terus belajar dan kembangkan bahasa pemrograman kalian.

Header Ads

Belajar dasar HTML

Post a Comment

Tidak ada komentar

STAY WITH US

Facebook

Popular Posts

Subscribe Us

Random Posts

Recent Posts

Recent in Sports

Header Ads

Belajar dasar HTML

Related Posts

Post a Comment

Tidak ada komentar

STAY WITH US

Facebook

Popular Posts

Subscribe Us

Random Posts

Recent Posts

Recent in Sports