Belajar HTML Untuk Pemula Level 1


Halo Sobat Lautan, semoga sehat selalu ya. 
Sudah lama sekali, Lautan tidak update ya. Mohon maaf, lagi fokus dengan ujian akhir :D, ya gak bisa dibilang fokus juga sih, karena kenyataannya, Lautan kebanyakan tidur :v.

Kembali membahas tentang program, kali ini kita akan belajar tentang 5 Elemen Tag, yakni Tag Link , Tag Script, Tag Style, HTML5Shiv, Tag Anchor. Tanpa bertele-tele lagi, berikut ini adalah pembahasannya.

Tag Link. 

Adalah tag yang digunakan untuk memberikan bahasa script website kedalam struktur HTML, ataupun biasa digunakan untuk pembuatan untuk Favicon, atau Favorit Icon. Icon yang biasa muncul pada bagian title, tepat diatas address bar suatu halaman website. 

Contoh dari Skripnya adalah. . 

<link href ="style.css" type="text/css" rel="stylesheet" media="all">

Contoh Skrip yang digunakan untuk membuat Favicon. 

<!Doctype HTML>
<html>
<head>
<meta charset = "UTF -8"> 
<link rel= "icon" href="fav.png">
<title>Belajar HTML</title>
</head>
<body>
Mantab Di Djiwa
</body>
</html>  

Letakkan file gambar yang hendak dijadikan sebagai Favicon didalam folder yang letaknya berrsamaan dengan flle html.

Tag Script 

Sama halnya seperti, Tag Link, tag Script, juga digunakan untuk memasukkan bahasa pemrograman website kedalam struktur HTML. 
Umumnya, bahasa pemrograman yang bisa dimasukkan sebagai value dari atribut type yang digunakan pada tag Script, adalah JavaScript. Value dan atribut daripada, tag Script tersebut bersifat tidak wajib, artinya default. Tidak ditulis tidak apa-apa. 
Pada dasarnya dalam penulisan script didalam website, tidak terdapat ISO. 


<script type="text/javascript"> ......</script>

Atau 

<script> ...,</script>

Untuk dapat menginput file Javascript yang terletak pada folder yang berbeda daripada file HTML / tidak satu Folder, maka gunakan atribut SRC, source

<script src ="javascript.js"></script>

Tag Style

Konsep pengertian, yang digunakan hampir sama yang dengan apa yang ada pada tag Script, hanya saja obyeknya adalah bahasa CSS

Contoh :

<style type = "text/css"> </style>

dan <style> ....</style>

HTML5Shiv

Html5Shiv, sebenarnya adalah kode yang diperlukan untuk mengatasi ketidakmampuan daripada browser untuk menterjemahkan bahasa HTML versi 5. 
Terdapat dua cara yang dapat digunakan sebagai implementasi daripada HTML5Shiv. 

Cara dari komputer lokal..

1. Download File JavaScript, di https://github.com/afarkas/html5Shiv
2. Extract File
3. Buat link di HTML kita <script src="html5shiv.js"> </script>

Cara dari CDN (Content Delivery Network).

Menambahkan atribut src pada tag script jadi


<script type="text/javascript" src="https://cdjns.cloudflare.com/ajax/libs/html5Shiv/3.7.3/html5Shiv.js"> 
</script> 

Dengan adanya HTML5Shiv ini, anda bisa dimanfaatin untuk fitur cache (penyimpanan sementara tanpa file di downoad)

Tag Anchor 

Termasuk inline level element, tag untuk membuat link ke halaman lain atau ke file, dengan atributnya href. Contoh 
<a href = "http://www.duniailkom.com/login.html"> Halaman Login </a>

Contoh Script !

<!DOCTYPE html>
<!-- Belajar Anchor Sekilas -->
<html>
<meta charset = "UTF -8">
<head>
<link rel="icon" href="favicon.png">
<title> Belajar HTML </title>
</head>
<body>
<a href="Hello World 2.html"> Yuhu </a>
<a href="Favicon.html"> Mantab Djiwa </a>
</body>
</html>

Alamat lokasi File terbagi 2 pada atribut tag Anchor, absolut dan relatif. Alamat Absolut adalah alamat yang didalamnya di tampilkan URL secara lengkap. 
Sedangkan, alamat relatif adalah merujuk, pada file berdasarkan struktur folder.
Kita dapat memahaminya dengan gambar dibawah ini..



Untuk dapat membuat link dari script index.html menuju tabel.html, maka script yang digunakan adalah 
<a href ="Folder_a/tabel.html">Halaman Tabel</a>

Dari kodingan hello_world.html menuju ke index.html, naik dari satu tingkat menggunakan garis miring. 
<a href =".../index.html">Halaman Index</a>

Dari kodingan hello_world.html menuju ke register.html, maka script yang ditulis adalah..
<a href ="../folder_b/register.html">Halaman Register</a>

Post a Comment

0 Comments