Home Posts filed under HTML
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Wednesday, 19 June 2019

|

Membuat Tampilan Teks Kutipan (Quote) Dengan HTML


Membuat Tampilan Teks Kutipan (Quote) Dengan HTML - Adakalah ketika kita sedang membangun sebuah website terkadangan ada halaman artikel yang didalamnya terdapat teks kutipan (quote), untuk dapat membedakan bahwasanya teks tersebut adalah sebuah kutipan (quote) maka kita harus membuatnya sedikit lebih menarik. Dalam sintaks html kita dapat menggunakan tag <blockquote> . . . </ blockquote > untuk membuat tampilan tersebut.

Berikut contoh penggunakannya :


<HTML>
<HEAD>
    <TITLE>Blockquote</TITLE>
</HEAD>
<BODY>
Ini berada di luar tag blockquote
<BLOCKQUOTE>
<P>Ini paragraf berada di dalam blockquote dan sedikit masuk kedalam.</P>
<P align="justify">"Ini juga contoh paragraf yang sedikit masuk kedalam. Dengan kalimat yang cukup panjang, kita lihat bahwa semua baris dalam paragraf ini letaknya sedikit masuk ke dalam. Sama rata sama jauhnya.</P>
</BLOCKQUOTE>
<P>Nah, paragraf ini kembali normal, karena tag blockquote sudah berakhir atau sudah ditutup di atas.<P>
</BODY>
</HTML>

Output :

Demikianlah Membuat Tampilan Teks Kutipan (Quote) Dengan HTML, semoga  bermanfaatkan dan dapat dikembangkan lagi. Terima kasih telah  berkunjung, jika tutorial ini bermanfaat silahkan "LIKE dan SHARE".  Jangan lupa komen juga ya.... 


Read More
|

Menampilkan Teks Sama Seperti Yang Diketikkan Dalam Dokumen HTML


Menampilkan Teks Sama Seperti Yang Diketikkan Dalam Dokumen HTML - Untuk dapat membuat agar teks yang tampil pada halaman website sama dengan yang diketik pada sintaks html maka kita dapat menggunakan tag <pre>....</pre>.

Berikut contoh penggunaannya :

<html>
  <head>
    <title> Paragraf </title>
  </head>
  <body>
   <pre>
   STMIK KAPUTAMA
            Merupakan kampus ilmu komputer pertama di kota binjai
   Saat ini terdapat 2 jenjang pendidikan di STMIK KAPUTAMA,
            Diploma 3 (D3) dan
            Sarjan (S1)
   </pre>
  </body>
</html>

Output :

   STMIK KAPUTAMA
            Merupakan kampus ilmu komputer pertama di kota binjai
   Saat ini terdapat 2 jenjang pendidikan di STMIK KAPUTAMA,
            Diploma 3 (D3) dan
            Sarjan (S1)

Demikianlah Menampilkan Teks Sama Seperti Yang Diketikkan Dalam Dokumen HTML, semoga bermanfaatkan dan dapat dikembangkan lagi. Terima kasih telah berkunjung, jika tutorial ini bermanfaat silahkan "LIKE dan SHARE". Jangan lupa komen juga ya....
Read More
|

Mengatur Paragraf Pada Pemrograman HTML


Mengatur Paragraf Pada Pemrograman HTML - Jika kita membuat sebuah dokumen dengan menggunakan aplikasi Ms. Word maka kita akan sering mengatur tampilan paragraf pada dokumen tersebut,baik rata kiri, kanan dan lain sebagainya, begitu juga dalam pemrograman HTML kita juga dapat mengatur tampilan paragraf pada web yang kita bangun agar tampilan nya sesuai dengan yang kita inginkan.

Berikut sintaks penulisannya :
<p [align=”left”|”center”|”right”]> . . . </p>

Contoh :

<html>
  <head>
    <title> Paragraf </title>
  </head>
  <body>
     <h2 align="center"> STMIK KAPUTAMA </h2>
     <p align="right">
         Merupakan kampus ilmu komputer pertama di kota binjai
     </p>
     <p align="left">
         Saat ini terdapat 2 jenjang pendidikan di STMIK KAPUTAMA, Diploma 3 (D3) dan Sarjan (S1)
     </p>
  </body>
</html>

Output :

STMIK KAPUTAMA

Merupakan kampus ilmu komputer pertama di kota binjai
Saat ini terdapat 2 jenjang pendidikan di STMIK KAPUTAMA, Diploma 3 (D3) dan Sarjan (S1)


Demikianlah Mengatur Paragraf Pada Pemrograman HTML, semoga bermanfaatkan dan dapat dikembangkan lagi. Terima kasih telah berkunjung, jika tutorial ini bermanfaat silahkan "LIKE dan SHARE". Jangan lupa komen juga ya....
Read More
|

Menggunakan Heading pada Pemrograman HTML


Menggunakan Heading pada Pemrograman HTML - Saat membangun sebuah website terkadang kita membutuhkan teks dengan ukuran yang cukup besar yang biasanya digunakan untuk judul dari sebuah artikel, nah kali ini kita akan menggunakan fungsi heading untuk dapat membuat seperti tampilan yang dimaksud.

Berikut penulisan sintaks heading dalam pemrograman HTML :
<h1 [align=”left”|”center”|”right”]> . . . </h1>
<h2 [align=”left”|”center”|”right”]> . . . </h2>
.
.
<h6 [align=”left”|”center”|”right”]> . . . </h6>

Contoh :
<html>
  <head>
   <title> Heading </title>
  </head>
  <body>
    <h1 align="center"> Heading 1: STMIK KAPUTAMA </h1>
    <h2 align="center"> Heading 2: STMIK KAPUTAMA </h2>
    <h3 align="center"> Heading 3: STMIK KAPUTAMA </h3>
    <h4 align="center"> Heading 4: STMIK KAPUTAMA </h4>
    <h5 align="center"> Heading 5: STMIK KAPUTAMA </h5>
    <h6 align="center"> Heading 6: STMIK KAPUTAMA </h6>
  </body>
</html>

Output :

Heading 1: STMIK KAPUTAMA

Heading 2: STMIK KAPUTAMA

Heading 3: STMIK KAPUTAMA

Heading 4: STMIK KAPUTAMA

Heading 5: STMIK KAPUTAMA
Heading 6: STMIK KAPUTAMA

Demikianlah Menggunakan Heading pada Pemrograman HTML, semoga bermanfaatkan dan dapat dikembangkan lagi. Terima kasih telah berkunjung, jika tutorial ini bermanfaat silahkan "LIKE dan SHARE". Jangan lupa komen juga ya....
Read More

Tuesday, 18 June 2019

|

Membuat Background Dengan HTML


Membuat Background Dengan HTML - Agar tampilan sebuah website tampak lebih menarik dilihat maka background atau latar belakang dari halaman web tersebut dapat kita beri warna atau gambar.

Memberi warna pada background (latar belakang)
Berikut sintaks standar yang dapat digunakan :
<body text = #nnnnnn bgcolor=#nnnnnn> . . . </body>

Contoh
<html>
  <head>
     <title> Penggunaan Latar Belakang Warna </title>
  </head>
  <body text="red" bgcolor="cyan">
    Kami sedang mulai belajar Pemrograman Web Di STMIK KAPUTAMA
  </body>
</html>

Ouput :
Menggunakan background (latar belakang) gambarBerikut sintaks standar yang dapat digunakan :
<body background=“nama_file_gambar”> . . . </body>

Contoh :
Buatlah folder gambar pada folder project web yang kita buat, kemudian sediakan file gambar dengan format .jpg dan simpan didalam folder tersebut, selanjutnya ubah nama file gambar tersebut menjadi bg.jpg.

<html>
  <head>
     <title> Penggunaan Latar Belakang Warna </title>
  </head>
  <body background="gambar/bg.jpg">
    Kami sedang mulai belajar Pemrograman Web Di STMIK KAPUTAMA
  </body>
</html>

Output :
Demikianlah Membuat Background Dengan HTML, semoga bermanfaatkan dan dapat dikembangkan lagi. Terima kasih telah berkunjung, jika tutorial ini bermanfaat silahkan "LIKE dan SHARE". Jangan lupa komen juga ya....
Read More

Friday, 6 October 2017

|

Dasar Pemrograman HTML (HyperText Markup Language)


Dasar Pemrograman HTML (HyperText Markup Language) - HTML merupakan bahasa yang digunakan untuk menampilkan informasi  pd halaman web. Bahasa ini menggunakan tanda (markup) untuk menandai perintah-perintahnya menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen.

Software yang diperlukan:
Text editor sederhana.
Contoh:
Windows: Notepad
Linux: gEdit, mcedit
Web browser untuk menampilkan dokumen web yang dibuat.
Contoh:
Windows: Internet Explorer, dan Firefox
Linux: Firefox dan Conqueror.



Istilah Dalam HTML
Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir).
        <namatag> ..... </namatag>

Element – Jenis-jenis dari tag. Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
Contoh :

        <title><!--ini adalah tag pembuka judul dokumen HTML -->
        Disini Judul Dokumen HTML
        </title> <!-- ini adalah tag penutup judul dokumen HTML -->

Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut.



<html>
<!– untuk menyatakan suatu dokumen HTML -->
    <head>
        <!-- memberikan informasi mengenai dokumen HTML -->
       
    </head>
    <body>
        <!-- menyimpan informasi atau data yang akan ditampilkan dalam     dokumen HTML -->
    </body>
</html>

Contoh HTML Sederhana:
<html>
<head>
    <title>Pemrograman Web I</title>
</head>
<body>
    Ini Web Pertama Saya Lo...
</body>
</html>

Output :

Ini Web Pertama Saya Lo...

Penggunaan Komentar
Format :
<!-- -->
 
Fungsi :
- Mendiskripsikan tujuan pengkodean tertentu dalam dokumen HTML

Contoh Penggunaan Komentar
<html>
<head>
    <!-- ini adalah judul web -->  
    <title>Pemrograman Web I</title>
</head>
<!--
Author : Siswan Syahputra, M.Kom
Contact : siswansyahputra90@gmail.com
-->
<body>
    <!-- ini adalah isi web -->
    Ini Web Pertama Saya Lo...
</body>
</html>
 
Element Body

 <body alink="y" background="uri" bgcolor="w" link="x" text="v" vlink="z"> ..............
</body>

  • Attribute text memberikan warna pada teks,
  • bgcolor memberikan warna pada latarbelakang dokumen HTML,
  • background memberikan latarbelakang dokumen HTML dalam bentuk gambar
  • link memberikan nilai warna untuk link,
  • alink memberikan warna untuk link yang sedang aktif,
  • vlink memberikan warna untuk link yang telah dikunjungi.

Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.

Demikianlah dasar pemrograman HTML (HyperText Markup Language), semoga bermanfaatkan dan dapat dikembangkan lagi. Terima kasih telah berkunjung, jika tutorial ini bermanfaat silahkan "LIKE dan SHARE". Jangan lupa komen juga ya....
Read More
Subscribe to: Posts (Atom)