Tugas HTML 1: Struktur Dasar HTML

HTML 5
HTML 5

Struktur Dasar HTML

Dalam tugas ini akan dibahas tentang cara penulisan HTML. Kita akan mulai dengan
mempelajari pengertian tag, element, dan atribut pada HTML, melihat struktur dasar dari kode
HTML, mengenal aturan penulisan HTML, serta melakukan validasi kode HTML agar memenuhi
standar W3C.

Petunjuk tugas:

  • Tulis code program di software IDE Visual Studio Code
  • Setiap element silahkan diberi nama dengan nama disesuaikan element tersebut. Misal ketika membuat paragraf element maka simpan file dengan nama paragraf.html
  • Simpan di folder dengan rapi
  • File html nya silahkan di buka di browser google chrome/mozila untuk mengetahui jalan tidaknya.
  • Dibawah ini merupakan element-element yang harus dikerjakan

1. Struktur Dasar

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar HTML</title>
</head>
<body>
  <h1>Belajar HTML</h1>
  <p>Hello World…</p>
</body>
</html>

Komentar di HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar HTML</title>
</head>
  <body>
  <!-- Ini adalah komentar, dan tidak akan ditampilkan pada web browser -->
  <h1>Belajar HTML</h1>
  <p>HTML is fun!</p>
</body>
</html>

Tag br dan hr

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar HTML</title>
</head>
<body>
  Berikut adalah beberapa aplikasi web browser yang bisa anda gunakan: <br>
  <hr>
  Google Chrome <br>
  Mozilla Firefox <br>
  Microsoft Internet Explorer <br>
  Opera <br>
  Apple Safari <br>
</body>
</html>

2. Text Elements

Paragraf Align

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Paragraf HTML</title>
</head>
<body>
<p style="text-align: justify">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  
</p>
<p style="text-align: right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  
</p>
</body>
</html>

Anchor / Link

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Link HTML</title>
</head>
<body>
  <a href="https://www.kelasinformatika.com/login.html">Halaman Login</a>
</body>
</html>

Anchor halaman yang sama

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Link HTML</title>
</head>
<body>
  <h1>Belajar HTML</h1>
  <a href="#bab1">Menuju Bab 1</a>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <p id="bab1">Ini adalah paragraf pembuka di dalam bab 1</p>    
</body>
</html>

Heading

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Link HTML</title>
</head>
<body>
  <h1>Judul Artikel dengan h1</h1>
  <h2>Judul Artikel dengan h2</h2>
  <h3>Judul Artikel dengan h3</h3>
  <h4>Judul Artikel dengan h4</h4>
  <h5>Judul Artikel dengan h5</h5>
  <h6>Judul Artikel dengan h6</h6>
</body>
</html>

Strong, Bold dan Italic

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Emphasis, Strong, Bold, dan Italic Element</title>
</head>
<body>
  <p> 
    <strong>Kabar gembira</strong>, saat ini sudah dibuka gerai 
    <i>Alfamart</i> baru di daerah <b>Kemang</b>. 
    Hari ini mereka mengadakan discount besar-besaran, 
    <em>tunggu apa lagi?</em>
  </p>
</body>
</html>

underline dan strikethrough

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Underline dan Strikethrough Element</title>
</head>
<body>
  <p> 
    <s>CSS</s> <ins>HTML</ins> merupakan singkatan dari 
    <u>Hypertext Markup Language</u>. 
    Singkatan ini terdiri dari 3 komponen kata, 
    yakni Hypertext, Markup dan <del>League</del> Language.
  </p>
</body>
</html>

superscript dan subscript

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Superscript dan Subscript Element</title>
</head>
<body>
  <p> 
    Akhir-akhir ini kadar CO<sub>2</sub> di udara semakin parah. 
    Sebanyak 20.000<sup>2</sup> ton CO2 dikeluarkan dari jalanan 
    setiap tahunnya.
  </p>
</body>
</html>

Preformatted Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Preformatted Element</title>
</head>
<body>
  <pre> 
  Tulisan ini akan tampil dengan ‘apa     adanya’.
  		Seluruh spasi, 	tab, dan karakter enter akan tampil
  
  Tanpa di format. 
        Umumnya 	teks ini ditampilkan dalam font courier new.
  </pre>
</body>
</html>

Belajar Code, Samp, KBD, dan Var Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Code, Samp, KBD, dan Var Element</title>
</head>
<body>
  <p>
    <code>echo</code> adalah perintah PHP untuk menampilkan sesuatu. 
    Contohnya: <samp>echo "Hello World"</samp>. 
    Untuk membuat variabel PHP, ditulis dengan tanda dollar, 
    seperti: <var>$a</var>.
  </p>
  <p>
    Untuk melihat hasil kode HTML dari PHP bisa menggunakan 
    web developers tool, dengan menekan <kbd>CRTL+Shift+i</kbd>.   
  </p> 
</body>
</html>

Belajar Cite, Quote dan Blockquote Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Cite, Quote dan Blockquote Element</title>
</head>
<body>
  <p>
    Seperti kata <cite>Albert Einstein</cite>: 
    <q>person who never made a mistake never tried anything new.</q>
  </p>
  <blockquote>
    Friendship... is not something you learn in school. 
    But if you haven't learned the meaning of friendship, 
    you really haven't learned anything.
    <cite>Muhammad Ali</cite>
  </blockquote>
</body>
</html>

Belajar Cite, Quote dan Blockquote Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Cite, Quote dan Blockquote Element</title>
</head>
<body>
  <p>
    Seperti kata <cite>Albert Einstein</cite>: 
    <q>person who never made a mistake never tried anything new.</q>
  </p>
  <blockquote>
    Friendship... is not something you learn in school. 
    But if you haven't learned the meaning of friendship, 
    you really haven't learned anything.
    <cite>Muhammad Ali</cite>
  </blockquote>
</body>
</html>

Belajar Mark Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Mark Element</title>
</head>
<body>
  <p>
    Berikut adalah hasil pencarian dari kata <mark>"web hosting"</mark> :
  </p>
  <p>
    Perusahaan jasa penyedia <mark>web hosting</mark> 
    juga memiliki paket-paket sendiri, sesuai dengan fitur 
    dan harga yang disediakan, seperti paket basic, personal, 
    bisnis, corporate, dll. 
  </p>
  <p>	
    Dalam tutorial kita akan membahas 
    tentang hal-hal teknis yang bisa jadi pertimbangan 
    untuk memilih paket <mark>web hosting</mark>.
  </p>
</body>
</html>

Belajar Abbr Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Abbr Element</title>
</head>
<body>
  <p>
    <abbr title="Hypertext Markup Language">HTML</abbr> 
    adalah dasar dari semua halaman web di internet. 
    Jika anda ingin mempelajari cara membuat website, 
    maka <abbr>HTML</abbr> adalah langkah pertama anda.
  </p>
</body>
</html>

Belajar Address Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Address Element</title>
</head>
<body>
  <address>
    Anda bisa menghubungi kami di 
    <a href="https://www.kelasinformatika.com/contact_us">
    www.kelasinformatika.com</a>.
    <br>
    Jika ada kritik/saran/pertanyaan, bisa email ke 
    <a href="mailto:admin@kelasinformatika.com">admin kelasinformatika</a>.
    <br>
    Alamat kantor kami berada di: Jl. Sudirman Blok 37, 
    No 42A, Pegangsaan Dua, Jakarta Utara. 14250.
  </address>
</body>
</html>

Belajar BDO Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar BDO Element</title>
</head>
<body>
  <p>
    <bdo dir="ltr">HTML adalah dasar semua website di internet.
    Jika anda ingin mempelajari cara membuat website,
    maka hal pertama yang harus dipelajari adalah HTML</bdo>
  </p>
  <p>
    <bdo dir="rtl">HTML adalah dasar semua website di internet.
    Jika anda ingin mempelajari cara membuat website,
    maka hal pertama yang harus dipelajari adalah HTML</bdo>
  </p>
</body>
</html>

Belajar Dfn Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Dfn Element</title>
</head>
<body>
  <p>
    <dfn>HTML</dfn> adalah bahasa markup standar 
    yang digunakan untuk membuat halaman web.
  </p>
  <p>
    <dfn title="Hypertext Markup Language">HTML</dfn> 
    adalah bahasa markup standar yang digunakan 
    untuk membuat halaman web.
  </p>
  <p>
    <dfn>
      <abbr title="Hypertext Markup Language">HTML</abbr>
    </dfn>
    adalah bahasa markup standar yang digunakan 
    untuk membuat halaman web.
  </p>
</body>
</html>

Belajar Small Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Small Element</title>
</head>
<body>
  <p>
    Duniailkom adalah situs belajar ilmu komputer, 
    diharapkan duniailkom.com akan dapat menjadi 
    media belajar dan saling berbagi tentang programming, 
    hardware, maupun toeri seputar ilmu komputer. 
    <small>2015 Dunia Ilkom. All Rights Reserved.</small>
  </p>
</body>
</html>

Belajar Wbr Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Wbr Element</title>
</head>
<body>
  <h2>Belajar HTML</h2>
  <p>
    Baiklah, saya bersedia untuk memper<wbr>tanggung<wbr>jawabkan
    perbuatan yang saya lakukan di hari itu. 
    Kejadian itu berawal dari hal-hal sepele.
  </p>
</body>
</html>

Belajar Wbr Element

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Wbr Element</title>
</head>
<body>
  <h2>Belajar HTML</h2>
  <p>
    Baiklah, saya bersedia untuk memper<wbr>tanggung<wbr>jawabkan
    perbuatan yang saya lakukan di hari itu. 
    Kejadian itu berawal dari hal-hal sepele.
  </p>
</body>
</html>

Tag Deprecated pada HTML5

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tag Deprecated pada HTML5</title>
</head>
<body>
  <p>
    <acronym title="HyperText Markup Language">
      HTML
    </acronym> 
    adalah dasar dari semua halaman web di internet. 
    Jika anda ingin mempelajari cara membuat website,
    hal pertama yang harus dipelajari adalah 
    <strike>CSS</strike> HTML.
  </p>
  
  <p>
    Beberapa <big>Referensi</big> 
    yang saya gunakan untuk buku ini adalah
    <font color="blue" face="arial" size="4px">
      Learning Web Design
    </font>,
    dan <font color="green" size="5px">
    HTML Ultimate Reference
    </font>
  </p>
  
  <p>
    Dalam halaman ini terdapat banyak tag yang berstatus 
    <tt>deprecated</tt>.
    Anda disarankan untuk tidak menggunakan tag-tag ini.
  </p>

  <p>
    Akan tetapi, seperti yang anda lihat, 
    web browser masih mendunkung
    sebagian besar tag-tag ini.
    <blink>Tag Blink </blink>sudah tidak didukung,
    namun tag marquee masih ditampilkan oleh web browser
    seperti contoh berikut: 
  </p>

  <marquee>Sedang serius belajar HTML</marquee>
  <center>Copyright duniailkom.com 2015</center>
</body>
</html>

Belajar HTML Entity

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar HTML Entity</title>
</head>
<body>
  <p>&copy; 2015 Dunia Ilkom. All Rights Reserved.</p>
  <p>&#169; 2015 Dunia Ilkom. All Rights Reserved.</p>
  <p>&#x000A9; 2015 Dunia Ilkom. All Rights Reserved.</p>
</body>
</html>

Belajar Non-Breaking Space

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar Non-Breaking Space</title>
</head>
<body>
  <h3>Belajar HTML</h3>
  <h3>Belajar &nbsp; &nbsp; &nbsp; &nbsp; HTML</h3>
  <p>&nbsp; &nbsp; Belajar &nbsp; &nbsp; HTML</p>
</body>
</html>
label

About the author

Leave a Reply