Belajar HTML Untuk Pemula Level 2


Halo Sobat Lautan, semoga sehat selalu ya. 
Kita akan kembali mempelajari tentang HTML.Namun, kali ini, Lautan akan mengulang kembali pelajaran kita seputar teks element. Ya, teks element. 
Tetapi kan sudah kemarin ? Iya memang sudah. Tapi tidak ada salahnya mengulang bukan?
Ya, setidaknya, ini adalah penjelasan lengkap daripada Belajar Teks Element Dari Dasar

Mari kita, pahami setidaknya 11 tag, dalam teks element kali ini. 

Contoh Skrip (Paragraf Dengan Atribut Align)

<p style="text-align: justify">
Berdiri sejak tahun 2017, lautan-it.com adalah website buatan Mahasiswa Yogjakarta, Sistem Informasi dan akan berkomitmen untuk terus membagikan ilmu-ilmu seputar dunia IT  
</p>
<p style="text-align: right">
Tidak hanya mengenai pembelajaran teoritis yang membosankan, lautan-it juga akan memberikan percobaan dengan penjelasan yang lugas, agar langsung dapat diaplikasikan
Anda juga akan menemukan berita dan artikel seputar IT yang dikemas dengan akurat, terpercaya, dan menarik
</p>
</body>
</html>

Seperti yang anda lihat, pada skrip diatas, Tag P, mendeskripsikan sebuah paragraf. 
Pada paragraf pertama, Lautan memberikan style, dengan atribut text-align bernilai justify, sedangkan pada paragraf kedua, Lautan telah memberikan style, dengan atribut text-align, bernilai right. 
Untuk dapat mengetahuinya, lebih lanjut, anda dapat mengubah nilai menjadi left (default), atau center. Cari tau perbedaannya, dengan mencobanya.

Contoh Skrip (Anchor)

<body>
<a href="http://www.lautan-it.com">Home Page</a>
</body>

Pada skrip kedua ini, tag A, menandakan anchor, yang berarti jangkar, dengan atribut href, sebagai tempat yang "dijangkar" oleh tag A. Tidak hanya berupa link, kita dapat mengaitkan nya dengan file html

Contoh Skrip (Anchor di Halaman Yang Sama)

<body>
<h1>Belajar HTML</h1>
<a href="#bab1">Menuju Tak Terbatas Dan Melampauinya</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">Lu Kira Film Toy Story</p>
</body>

Skrip ketiga, menjelaskan teks "Menuju Bab 1" akan menuju teks "Lu Kira Toy Story". 
Untuk dapat mengaitkan atau membuat anchor dihalaman yang sama, harus ada penanda yang diberikan. 
#bab1, menandakan bahwa tag anchor menuju bab 1, dan untuk menjelaskan keberadaan tag yang ingin di "jangkar", maka dibutuhkan atribut tambahan, yakni id, didalam sebuah tag
Contoh didalam tag P terdapat bab1

Contoh Skrip Emphasis, Strong, Bold, Italic 

<body>
<p>
<strong>Kabar gembira</strong>, untuk anda penggemar Lautan-IT
<i>Iya Benar</i> bakal ada modul pembelajaran koding<b>Lengkap</b>.Up To Date, dari sekarang, sampai nanti
<em>tunggu apa lagi?</em> Buruan ikutin perkembanganya
</p>
</body>

Sepertinya, anda dapat mencobanya sendiri

Contoh Skrip Heading 

<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>

Contoh Skrip Underline dan Strikethrough

<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>

Contoh Skrip Superscript dan Subscript

<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>

Contoh Skrip Pre

<pre>
       Akan tampil, apa adanya...........   coba aja
                   di tulis
    pasti itu

</pre>

Contoh Skrip Code, Samp, Kbd

<body>
  <p>
    <code>echo</code> Bukan nama orang, tetapi perintah yang digunakan untuk menampilkan teks di PHP
    Contohnya: <samp>echo "Hello World"</samp>.
    PHP didalam dollar ditulis dengan seperti: <var>$a</var>.
  </p>
  <p>
    Tekan <kbd>CRTL+Shift+i</kbd> untuk melihat hasil
  </p>

</body>

Contoh Skrip Cite, Quote, BlockQuote

<body>
  <p>
    Seperti kata <cite>Lautan</cite>:
    <q>Apa Coba ? Gak Ada Kan</q>
  </p>
  <blockquote>
       Ini adalah blockqoute, iya sangat berfaedah sekali
       Dan andai engkau mengetahuinya, pastiny engkau
       Senang
    <cite>Someone</cite>
  </blockquote>

</body>

Masih ada sekitar 11 tag lagi yang berhubungan dengan teks, element. Kedepannya, akan dijelaskan lengkap dengan contoh skrip. So Pantengin terus ya ;D.

Post a Comment

0 Comments