Tag: dasar html

Photo by Ferenc Almasi on Unsplash

Pada bab sebelumnya kita sudah mengetahui pengertian CSS dan bagaimana CSS disisipkan dengan teknik inline CSS. pada artikel kali ini , kita akan belajar bagaimana menyisipkan CSS dengan menggunakan internal/embeded CSS dan external CSS.

Link MangcodingInternal CSS

Sebelumnya kita sudah mendapatkan gambaran bahwa Internal CSS adalah sintaks CSS yang ditulis bersamaan dengan file HTML yang kita buat dengan menggunakan elemen <style>… </style>.

Internal CSS lazimnya ditulis didalam tag/elemen <head> yang berada pada bagian atas dokumen HTML, namun meskipun disimpan didalam body atau didalam elemen lainnya akan tetap terbaca selama elemen yang membutuhkannya berada di bawahnya.

Untuk menyeleksi elemen yang akan kita gunakan dalam Internal CSS kita akan mengenal istilah selector yang mana akan kita pelajari setelah memahami penggunaan External CSS.

<html>
    <head>
        <meta charset="UTF-8">
        <title>tes HTML</title>
        <style>
            header {
                background: url('https://mangcoding.com/wp-content/uploads/2017/02/cropped-pexels-photo-48727.jpeg') 
                           no-repeat center center;
                padding: 50px;
            }
            h2 {
                color: #007EC7;
                text-align: center;
            }
            .subtitle {
                background: rgba(255, 255, 255, 0.7);
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <header>
            <h2>Welcome to my Site</h2>
            <p class="subtitle">Selamat datang disitus pembelajaran coding. Tempat berbagi ilmu dan pendidikan</p>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aut,
 nesciunt eaque ullam. Quasi, laudantium optio enim. Sequi, eaque quod. Voluptatum vero 
rerum, assumenda itaque totam consequatur dicta dolore.</p>
    </body>
</html>

 

berdasarkan contoh diatas, bandingkan pengunaan CSS internal dengan inline CSS, lebih rapih dan mudah bukan? ^_^. Meskipun demikian, penggunaan CSS internal sedikit sekali di gunakan untuk membangun sebuah web.

CSS internal biasanya di generate bersamaan dengan tag HTML yang dihasilkan oleh server side scripting seperti PHP, nodeJS, Ruby, dll. CSS pada umumnya dibuat dengan menggunakan External CSS seperti yang akan kita bahas dibawah ini. masih semangat kan kawan-kawan?

Link MangcodingExternal CSS

External CSS memisahkan antara file html dengan file CSS. file CSS berkestensi .css kemudian dihubungkan dengan menggunakan tag/elemen <link> yang biasanya di simpan di dalam tag <head>.

Penggunaanya mirip sekali dengan Internal CSS yang membutuhkan selector untuk menyeleksi elemen mana yang akan kita sisipkan CSS. untuk memahami penggunaan CSS External, ikuti langkah berikut ini :

  1. Buatlah halaman html yang terdiri dari header berisi text (seperti pada materi sebelumnya) kemudian berikan judul dan konten pada halaman web yang anda buat. (lihat contoh dibawah ini)
  2. pada tagbuatlah tag seperti dibawah ini, atau jika anda menggunakan sublime text cukup mengetikkan kata link lalu pencet tab, pastikan tampilan headnya jadi seperti ini.
<head>
  <meta charset="UTF-8">
  <title>External HTML</title>
  <link rel="stylesheet" href="style.css"/>
</head>

 

Seperti yang telah anda buat sebelumnya pada materi internal CSS (Lihat contoh dibawah ini)

Demikian penjelasan singkat mengenai CSS internal dan external. pada saat kita membuat CSS pada contoh diatas, secara tidak langsung kita sudah menyeleksi elemen mana yang akan kita beri CSS dengan menggunakan selector Tag/Elemen.

Apa itu Selector? Berapa banyak tipe selector? Pokok bahasan ini kita pelajari pada bagian selanjutnya.

Keep Learning ^_^ Semangat

Itulah artikel Pengenalan CSS bagian 2 (Internal dan External CSS) yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Tag: dasar html

Photo by Gabriel Heinzer on Unsplash

Sebelum kita masuk ke bab ini, pastikan terlebih dahulu sudah memiliki text-editor seperti sublime text, notepad++, atau yang lainnya (silakan pilih salah satu). jika tidak, saya sarankan cek artikel sebelumnya untuk mengenal editor dan bagaimana cara menyimpan file html.

Elemen/Tag

Pada bab sebelumnya, kita sudah mengetahui bahwa html terdiri dari sekumpulan tag yang mewakili suatu konten. jadi, untuk membuat suatu konten kita harus mengetahui terlebih tag yang digunakan. suatu HTML biasanya terdiri dari tag pembuka, dan tag penutup dengan konten/isinya berada di kedua tag tersebut.

Bentuk baku :

<tagname>isi dari tag yang kita buat</tagname>

<h3>contoh tag pembuatan judul </h3>
<p>contoh pembuatan paragraf </p>

 

Attribute

Pada Umumnya semua elemen/tag HTML memiliki attribute. Attribut berisi informasi tambahan mengenai tag yang akan kita buat. contohnya kita akan membuat suatu judul dengan membuat H6. H6 ini ingin rata tengah maka kita bisa menambahkan align=”center”. Attribute pada html disimpan di tag pembuka dan biasanya bentuk umum dari suatu attribute adalah name=”value”.

<h6 align="center">Judul dengan rata tengah</h6>
<p align="left">Paragraph dengan rata kiri </p>
<a href="https://www.mangcoding.com" target="_blank">Klik disini</a>

 

Headings digunakan untuk membuat judul pada artikel atau paragraf yang akan kita buat. Heading terdiri dari h1, h2,h3, sampai dengan h6

<h1>ini heading 1</h1>
<h2>ini heading 2</h2>
<h3>ini heading 3</h3>
<h4>ini heading 4</h4>
<h5>ini heading 5</h5>
<h6>ini heading 6</h6>

 

Untuk membuat paragraf, kita cukup menggunakan tag p, jika kita menggunakan sublime text 3, kita cukup mengetikkan huruf p di keyboard kemudian pencet tab maka secara otomatis akan memunculkan tag pembuka dan tag penutup. untuk mendapatkan tulisan dengan dummy text lorem ipsum, kita cukup mengetikkan lorem kemudian pencet tab

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum esse inventore reiciendis voluptate, sapiente, perspiciatis minima et debitis dignissimos harum nisi ex? Odit non perspiciatis adipisci. Dicta nisi, cupiditate alias. </p>

 

Formatting text

Seperti halnya belajar software pengolah text, kadang kala kita membutuhkan tulisan berbentuk tebal, miring, dll. HTML menyediakan tag untuk formatting text, berikut adalah tag-tag yang dipakai untuk membuat format text

Tag Description
<b> Untuk membuat text menjadi tebal
<em> Untuk membuat text menjadi miring
<i> Untuk membuat text menjadi miring
<small> Untuk membuat text menjadi lebih kecil
<strong> Untuk membuat text menjadi tebal
<sub> Untuk membuat tulisan seperti H2O
<sup> Untuk membuat tulisan seperti M2
<ins> Untuk membuat garis dibawha tulisan
<del> Untuk membuat tulisan yang dicoret
<mark> Untuk menandai tulisan (defaultnya warna kuning)

List

List terbagi menjadi 2, yaitu ordered list dan unordered list

Ordered List

  1. ordered list digunakan untuk list dengan penomoran berurut
  2. tag ol digunakan untuk membuka ordered list
  3. tag li digunakan untuk isi list
  4. tag ol memiliki attribute type “a”, “A”, “I”, “i”, “1”

Unordered List

  • unordered list digunakan untuk list dengan tidak memandang urutan
  • tag ul digunakan untuk membuka ordered list
  • tag li digunakan untuk isi list
  • tag ol memiliki attribute type “square”, “circle”, “disc”, “none”

untuk memahami Ol dan Ul silakan anda buat file dibawah ini kemudian save lalu buka di browser kesayangan anda.

<h2 align="center">Mengenal List</h2>
<p>List itu terbagi menjadi 2</p>
<h4>Ordered List</h4>
<ol>
  <li>tag ol digunakan untuk membuka ordered list</li>
  <li>tag li digunakan untuk isi list</li>
  <li>tag ol memiliki attribute type "a", "A", "I", "i", "1"</li>
</ol>
<h4>Unordered List</h4>
<ul>
  <li>tag ul digunakan untuk membuka ordered list</li>
  <li>tag li digunakan untuk isi list</li>
  <li>tag ol memiliki attribute type "square", "circle", "disc", "none"</li>
</ul>
<a href="dasar.html" target="_parent">Halaman dasar</a>

 

Hyperlink digunakan untuk membuat link dari satu halaman ke halaman lain atau ke url diluar website kita. misalnya kita punya file index.html lalu dengan mengklik tombol tertentu maka akan menuju ke halaman about.html atau ketika kita klik lari ke halaman facebook kita. untuk melakukan semua itu diperlukan suatu hyperlink.
Contoh penulisan hyperlink adalah sebagai berikut :

<a href="url/link tujuan">link text</a>
<a href="https://www.facebook.com/mangcoding/" target="_blank">Lihat FB saya</a>

 

cara default, semua link html akan muncul seperti ini di smua browser :
  • Link yang belum dikunjungi akan terlihat berwarna biru dan bergaris bawah
  • Link yang sudah dikunjungi akan terlihat berwarna purple namun tetap bergaris bawah
  • Link memiliki attribute target (“_blank”,”_self”,”_top”,”_parent”)

Menyisipkan Gambar

Tag yang digunakan untuk menyisipkan image dalam HTML adalah img. selain src img memiliki attribut width dan height untuk mengatur lebar dan tinggi gambar, serta alt untuk memberikan keterangan pada gambar

<img src="gambar.jpg" alt="gambar anda" width="200px" height="auto" />

 

Demikian penjelasan singkat untuk dasar HTML, mudah-mudahan bermanfaat. Keep Learning ^_^
Semangat.