Kamis, 02 Agustus 2018

#2 Basic Web | Web Programming Tutorial

Assalamualaikum wr, wb


Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang Basic Web. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Saya akan menjelaskan sedikit tentang Tag - tag dasar pada pemrograman web( Seperti Heading, Paragraf, Strong, Dan Lain sebagainya )

Akan ada 4 sub bahasan kita kali ini, antara lain :

  1. Tag Heading <h1 - h6>
  2. Tag Paragraf <p>
  3. Tag Gambar <img>
  4. Tag Link <a>

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Bab 1

Tag Heading


Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa. Tidak hanya sekedar untuk memberikan penampilan yang lebih tegas dan penekanan, TAG Heading juga sangat penting dalam kaitannya dengan teknik Search Engine Optimization (SEO).

TAG Heading dalam HTML terdiri dari 6 tingkatan berdasarkan tingkat penting dan ukurannya. dari H1, H2, H3, dan H3. TAG H1 memiliki ukuran paling besar, sedangkan TAG h6 memiliki ukuran paling kecil.

Perlu diperhatikan bahwa walaupun TAG Heading ini memiliki ukuran yang bervariasi dan lebih tebal serta besar dari tag biasa, namun jangan gunakan TAG Heading ini hanya untuk membuat tulisan yang lebih besar. Gunakanlah TAG Heading hanya untuk membuat judul dan subjudul, bukan untuk membuat tulisan berukuran besar. Karena pada dasarnya untuk membuat tulisan besar kita bisa menggunakan CSS.

Biasanya H1 hanya digunakan satu kali dalam sebuah halaman web, yaitu sebagai judul utama (judul besar). H2, H3 dan seterusnya bisa kita gunakan beberapa kali sebagai sub judul, seperti contoh diatas .


Contoh Penggunaan Tag Heading

This is Heading

This is Heading

This is Heading

This is Heading

This is Heading
This is Heading

Bab 2

Tag Paragraf


Paragraf dan teks memegang peranan cukup penting dalam desain website. Oleh karena tu, kita perlu mengetahui tag dan aturan menulis kode HTML untuk membuat paragraf serta teks yang mernarik. Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML sederhana.

Kalau kita ingin memisahkan dua baris teks itu, maka kita harus memberi tahu web browser bahwa keduanya harus dibuat terpisah. Salah satunya adalah membuat tag untuk paragraf. HTML menyediakan tag khusus untuk membuat paragraf , yaitu dengan menggunakan tag p pada masing-masing baris teks.


Contoh Penggunaan Tag Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum (Ini adalah paragraf ke 1)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum (Ini adalah paragraf ke 2)

Bab 3

Tag Gambar

Untuk menginput gambar kita bisa menggunakan tag img yang berarti Image atau src Source. Kita juga sebenarnya bisa menambah dan mempercantiknya dengan CSS. Saya akan mununjukan cara penginputan gambar dengan file yang berdasarkan pada local source pada komputer kita, dan gambar dengan file source dari internet berbentuk link gambar.


Contoh Penggunaan Tag Heading

Gambar Pertama Dengan File Directory Local
Gambar dengan directory file local dan ukuran custom

Bab 4

Tag Link

a menunjukkan sebuah anchor. Apa itu anchor? Anchor adalah teks yang menunjukkan awalan dan akhiran sebuah hypertext link. HTML a element digunakan untuk mendefinisikan sebuah hyperlink. Link dapat merujuk ke halaman yang sedang terbuka ataupun ke halaman lain (website lain).

Jika sebuah a element memiliki href attribute, maka element tersebut menunjukkan sebuah hyperlink (hypertext anchor), tetapi jika element tersebut tidak memiliki href attribute, maka element tersebut menunjukkan sebuah placeholder. Attribute target, download, rel, href dan type tidak boleh digunakan jika pada element a tersebut tidak disebutkan href attribute.


Contoh Penggunaan Tag Anchor

Kunjungi Angga Gemilang Blog
ini merupakan link slide 2

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #2 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

0 komentar:

Posting Komentar