HTML Programming 3 - Basic Tag Html
Assalamu'alaikum
Selamat sore, melanjutkan pembahasan html kembali. Di pembahasan ini saya ingin menjelaskan basic tag lanjutan dari pembahasan sebelumnya. Seperti paragraf, simbol pada html, listing html, memasukan gambar kedalam html dan tag lainnya untuk mengakali spasi di web browser yang pintar :v.
Tag Paragraf
Tag paragraf dasarnya berbentuk <p>...</p>. Tentu elemen align bisa di gunakan pada tag paragraf ini. Untuk latihan kita akan coba buat beberapa paragraf dengan elemen align yang berbeda disetiap paragraf. Berikut script htmlnya. Dan untuk melihat perbedaan setiap paragraf, kita buat paragraf dengan isi yang panjang seperti contoh.
| <html> <head> <title> Latihan Paragraf | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <!--paragram rata kiri--> <p align=left> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> <!--paragram rata tengah--> <p align=center> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> <p></p> <!--tanpa nbsp--> <!--paragram rata kanan--> <p align=right> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> <p> </p> <!--dengan nbsp--> <!--paragram rata kiri kanan--> <p align=justify> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Karakter Spesial Pada HTML
Di dalam html, beberapa simbol atau karakter spesial tidak bisa dituliskan secara langsung. Dikarenakan beberapa simbol tersebut merupakan simbol untuk membangun html. Seperti contoh simbol "<" harus menggunakan kode simbol <. Berikut beberapa karakter spesial dengan kode simbol untuk mengaktifkannya pada html.
- tanda kutip : "
- tanda apostrof : '
- kurang dari : <
- lebih dari : >
- sum : ∑
- square root : √
- integral : ∫
- not equal : ≠
- less or equal : ≤
- greater or equal : ≥
Sisanya kalian bisa cek di w3schools atau web-web lainnya yang menyediakan listing simbol berupa kode simbolnya. Langsung saja berikut contoh penggunaan karakter spesial pada scripting html.
| <html> <head> <title> Latihan Simbol | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </title> </head> <body> <pre> "Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019" ' < > ∑ √ ∫ ≠ ≤ ≥ </pre> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Listing atau Daftar Pada HTML
Listing seperti yang kita tau adalah untuk membuat uraian atau listing sebuah tulisan. Beberapa jenis listing dapat kita gunakan pada html yaitu :
- List tanpa nomor
- List dengan nomor
- List definisi
Untuk tag listing sendiri dibuka dengan tag <ul> lalu poin poin listingnya dimasukan diantara tag <li>...</li> lalu baru di tutup dengan tag </ul>. Jika ingin menggunakan listing dengan jenis yang berbeda tag <ul> diganti dengan tag <ol> dan di berikan elemen type dengan value yang di inginkan pada jenisnya. Langsung saja berikut contohnya.
| <html> <head> <title> Latihan Listing | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</title> </head> <body> <ul> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 <li>Listing1</li> <li>Listing2</li> <li>Listing3</li> <ul> <li>SubListing3.1</li> <li>SubListing3.2</li> <li>SubListing3.3</li> <ul> <li>SubListing3.3.1</li> <li>SubListing3.3.2</li> <li>SubListing3.3.3</li> </ul> </ul> </ul> <ul> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 <li>Listing1</li> <li>Listing2</li> <li>Listing3</li> </ul> <ol type=A> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 <li>Listing1</li> <li>Listing2</li> <li>Listing3</li> </ol> <ol type=a> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 <li>Listing1</li> <li>Listing2</li> <li>Listing3</li> </ol> <ol type=I> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 <li>Listing1</li> <li>Listing2</li> <li>Listing3</li> </ol> <ol type=i> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 <li>Listing1</li> <li>Listing2</li> <li>Listing3</li> </ol> <ol type=1> Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 <li>Listing1</li> <li>Listing2</li> <li>Listing3</li> </ol> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Menampilkan Gambar Di HTML
Selanjutnya image pada html. Dasarnya menggunakan tag <img>...</img> dengan elemen wajibnya src (valuenya lokasi file gambar) dan width (lebar dari gambar). Ekstensi gambar yang di support web browser ada tiga jpg, png dan gif namun lebih di sarankan menggunakan png karena bebas dari lisensi ekstensi.
Untuk memposisikan gambar disarankan mengunakan tag <center> misalnya. Karena tag align untuk memposisikan gambar tidak akan aktif pada tag <img>. Dan satu lagi catatan, ada bagusnya penamaan file gambar tidak sulit, tidak ada spasi dan disarankan menggunakan huruf kecil. Dan lokasi posisi file berada di dalam satu file yang sama dengan file html yang kalian gunakan, seperti contoh berikut ini. Dimana lokasi file image berada di dalam folder yang sama dengan file latihan2.4.html.
Untuk contoh htmlnya, berikut contohnya.
Untuk memposisikan gambar disarankan mengunakan tag <center> misalnya. Karena tag align untuk memposisikan gambar tidak akan aktif pada tag <img>. Dan satu lagi catatan, ada bagusnya penamaan file gambar tidak sulit, tidak ada spasi dan disarankan menggunakan huruf kecil. Dan lokasi posisi file berada di dalam satu file yang sama dengan file html yang kalian gunakan, seperti contoh berikut ini. Dimana lokasi file image berada di dalam folder yang sama dengan file latihan2.4.html.
Untuk contoh htmlnya, berikut contohnya.
| <html> <head> <title>Latihan Image | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</title> </head> <body> <center> <img src="./image/ss.png" width="700px"> </center> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Dan kira-kira hasilnya akan seperti contoh berikut.
Tag Format Karakter
Terakhir di pembahasan kali ini adalah tag format karakter. Terdapat beberapa tag yang bisa digunakan untuk melakukan format kustomisasi terhadap karakter seperti persis yang kita inginkan. Seperti contoh ketika kita ingin melakukan spasi yang banyak namun tidak bisa di lakukan karena browser pintar hanya mendeteksi spasi sebanyak satu kali, kita bisa menggunakan tag <pre>...</pre>. Berikut beberapa tag untuk format karakter.
- <pre>...</pre> : tag untuk menampilkan spasi sesuai yang kita inginkan
- <address>...</address> : tag standarisasi penulisan alamat website, bentuk umumnya tulisan dengan cetak miring.
- <blockquote>...</blockquote> : tag untuk membuat teks kutipan, bentuk dasarnya berupa tulisan yang diarahkan jauh dari sisi kiri untuk menandai teks kutipa tsb.
- <!--Komentar--> : tag untuk memberikan comment pada meja kerja html. Dengan menggunakan tag ini, tulisan yang berada di antara tag yang di warnai merah tidak akan muncul pada tampilan website.
- <abbr> atau <acronym) dengan tag penutupnya : tag yang digunakan untuk memberikan komentar terhadap suatu tulisan yang di tampilkan pada website.
Langsung saja apa perbandingan kelima tag yang disebutkan, kalian bisa cek dengan menggunakan scripting html berikut.
| <html> <head> <title> Latihan Tag Lainnya | Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019</title> </head> <body> <!--tag pre--> <pre> testing --------------------------- ----------------------------------- --------------- ------------------------------ ------------------- -------------------------------------- </pre> <p> testing </p> <!--tag address--> <address> In Your Head </address> <!--tag blockquote--> <blockquote> kutipan <br> kutipan <br> <blockquote> kutipan ini <br> ini kutipan </blockquote> </blockquote> <!--tag acronym--> <acronym title="OUCCHHH LMAO :v" > LMAO </acronym> <br> <!--tag abbr--> <abbr title="OUCCHHH LMAO :v" > LMAO </abbr> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Dan itulah beberapa tag yang bisa digunakan sebagai dasar yang perlu di ketahui web designnya atau web maker apalagi blogger. Demikian penjelasan poembahasan kali ini, semoga bermanfaat untuk kalian. Sekian dari saya, sampai bertemu di pembahasan berikutnya. Salam programming!!.
Unknown