Kamis, 30 November 2017

Membuat link yang disimpan berbeda tempat (folder) dari file linknya.

Caranya :

Buat teks/kode  di Notepad seperti berikut :

<html>
<head>
<title> Membuat Link berbeda tempat file kita memanggil link </title>
</head>
<body>
<a href ="file:///C:/Users/ASUS/Documents/DesainWeb/Desain/Format%20teks.html">Format teks.html</a>                                                   
</body>                    
html>


Tampilan di Browser :





Dokumen HTML di atas saya simpan dengan nama 'Link.html' yang berada pada folder DesainWeb.
Lihat gambar berikut :


Sedangkan link html yang saya buat pada dokumen tersebut adalah 'Format teks.html' saya simpan pada folder berbeda yakni pada folder dengan nama Desain. Jadi, dia berada di folder yang berbeda.
Lihat gambar berikut :


Kurang lebih seperti itu. Selamat Mencoba 🙂



Membuat Link Pada Dokumen HTML



1.       Link Relatif

Teks di Notepad :

<html>
<head>
<title> Link Relatif</title>
</head>
<!--Link Relatif berfungsi membuat link dari satu page ke page lainnya
pada komputer yang sama dapat dilakukan dengan menuliskan langsung nama filenya.-->
<body>
<a href="Heading.html">Heading</a></body>
</html>

Tampilan di Browser :


 

2.       Link Absolut

Teks di Notepad :

<html>
<head>
<title> Link Absolut</title>
</head>
<!--Link Absolut berfungsi membuat link ke page web lain yang berada pada website lain di internet dilakukan dengan menuliskan nama URL dan nama filenya.-->
<body>
<a href="http://www.poligon.ac.id">Link ke poligon.ac.id</a>
</body>
</html>

Tampilan di Browser :

 

3.       Link Kebagian lain dalam dokmen yang sama

Teks di Notepad :

<html>
<head>
<title> Link Kebagian lain dalam dokmen yang sama</title>
</head>
<!--Link ini dipakai jika dokumennya terlalu panjang, sehingga apabila
ditampilkan di browser akan mengharuskan kita melakukan scroll layer berulang-ulang.-->
<body>
<p> Isi Bab : </p>
<p><a href="#isibab1">1. Bab 1</a><br>
   <a href="#isibab2">2. Bab 2</a><br>
   <a href="#isibab1">3. Bab 3</a></p>
<p>&nbsp;</p>
<h2><a name="isibab1">Bab1</a></h2>
<p>isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,
isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,
isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,
isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,
isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,</p>
<h2><a nama="isibab2">Bab 2</a> </h2>
<p>isi penjelasan bab 2, isi penjelasan bab 2, isi penjelasan bab 2,
isi penjelasan bab 2, isi penjelasan bab 2, isi penjelasan bab 2,
isi penjelasan bab 2, isi penjelasan bab 2, isi penjelasan bab 2,
isi penjelasan bab 2, isi penjelasan bab 2, isi penjelasan bab 2,
isi penjelasan bab 2, isi penjelasan bab 2, isi penjelasan bab 2,</p>
<h2><a name="isibab3">Bab 3 </a></h2>
<p>isi penjelasan bab3, isi penjelasan bab3, isi penjelasan bab3,
isi penjelasan bab3, isi penjelasan bab3, isi penjelasan bab3,
isi penjelasan bab3, isi penjelasan bab3, isi penjelasan bab3,
isi penjelasan bab3, isi penjelasan bab3, isi penjelasan bab3,
isi penjelasan bab3, isi penjelasan bab3, isi penjelasan bab3,</p>
</body>
</html>

Tampilan di Browser :

 

4.       Link New Window

Teks di notepad :

<html>
<head>
<title> Link new window</title>
</head>
<!--Link ini untuk membuat link supaya membuka window baru
 dapat ditambahkan atribut : target="_blank".-->
<body>
<a href="http://www.poligon.ac.id" target="_blank"> www.poligon.ac.id</a>
</body>
</html>

Tampilan di Browser :

 
5.       Link Mailto

Teks di notepad :

<html>
<head>
<title> Link Mailto</title>
</head>
<!--Link ini untuk menghubungkan ke sebuah alamat email-->
<body>
Kirim alamat email ke : <a href="mailto:rahma_dani58@yahoo.com">rahma_dani58@yahoo.com</a>
</body>
</html>

Tampilan di Browser :



Semoga Bermanfaat ! 😀
 

Kamis, 23 November 2017

Pemformatan Teks HTML



1.      Pemformatan Teks

Teks pada editor teks (notepad) :
<html>
<head>
<title>Format Teks</title>
</head>
<!--Pemformatan teks dalam HTML artinya  teks dalam dokumen web dapat diformat secara khusus untuk membuat perbedaan dan penekanan  terhadap isi dan maksud teks tersebut.Perbedaan dan penekanan ditampilkan  dalam bentuk huruf tebal(menggunakan tag <b>),miring(menggunakan tag <em>), digarisbawahi(menggunakan tag<i>),mengecilkan huruf(menggunakan tag<small>), superscript(menggunakan tag <sup>) dan subscript(menggunakan tag <sub>).-->
<body>
<p><b>Tulisan ini tebal (bold)</b></p>
<p><em>Tulisan ini mirng (empahasize) </em></p>
<p><big>Tulisan ini besar (big)</big></p>
<p><i>Tulisan ini miring (italic)</i></p>
<p>Tulisan ini <sub>subscript</sub></p>
<p>Tulisan ini <sup>superscript</sup></p>
</body>
</html>

 Tampilan di Browser :




2.       Teks Preformat

Teks pada editor teks (notepad) :
<html>
<head>
<title>Preformat</title>
</head>
<!--Tag <pre> dan </pre> dapat kita gunakan untuk  menampilkan sesuai dengan dokumen web tersebut
dalam editor teks dengan kata lain tampilan di web akan seperti apa adanya sebgaimana ditulis pada editor teks-->
<body>
<pre>
                                Tugas Desain Web

Ini adalah Tugas Matakuliah
Matakuliahnya desain web
                tugasnya membuat pemformatan teks pada HTML
                Dosennya adalah Pak Roys Pakaya, S.Kom.,M.T.
               
</pre>
</body>
</html>

 Tampilan di Browser :



3.       Quotation

Teks pada editor teks (notepad) :
<html>
<head>
<title>Quotation</title>
</head>
<!-- Quotation menggunakan Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. -->
<body>
tulisan ini bukan quotation
<blockquote
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
</blockquote>
</body>
</html>

  
Tampilan di Browser :

  

Semoga Bermanfaat !