Selasa, 12 Juni 2018

Cara Menampilkan Gambar dengan HTML




Cara Menampilkan Gambar dengan HTML

Bahan yang dibutuhkan tetap sama seperti kita membuat html sebelumnya yaitu :
1.      Text Editor (notepad, notepad++, Sublime, atom, dll)
2.      Web browser (Mozilla, google chrome, safari, opera, dll)

Berikut langkah – langkah nya

1.       Buka script code yang sebelumnya supaya kita mudah untuk mempelajarinya
2.       Lalu tambahkan script <img =”nama gambar”>

NB : gambar harus ditaruh di dalam satu folder yang sama dengan file index.html
Nama gambar bisa diganti dengan link apabila kita ingin menampilkan gambar dari google seperti dibawah ini 

                            
                        Apabila gambar berada di folder yang berbeda makan sriptnya seperti ini 


Folder diganti dengan nama folder dimana gambar kalian berada

3. tambahkan alternatif apabila nnti gambar tidak muncul dan akan diganti dengan 
    tulisan



4. tambahkan alternatif apabila nnti gambar tidak muncul dan akan diganti dengan 
    tulisan (alt="Tulisan apabila gambar eror")

5. tambahkan ukuran supaya gambar yang kita inginkan bisa tambil dengan bagus




     
6. Kemudian klik save dan buka di browser. Dan akan muncul gambar yang kita akan buka tadi

itulah cara cara untuk menampilkan gambar dengan HTML

Cara Membuat / Memanggil Link dengan HTML



Cara Membuat / Memanggil Link dengan HTML


Disuatu website biasanya terdapat tombol / icon sosmed yang dimana ketika klik akan mengarah kesuatu halaman yang akan dituju pada tombol / icon tersebut, dimana tombol / icon tersebut sudah dipasang script code untuk memanggil / mengaktifkan link tersebut.

Bahan yang dibutuhkan tetap sama seperti kita membuat title yaitu :
      1.      Text Editor (notepad, notepad++, Sublime, atom, dll) 
      2.      Web browser (Mozilla, google chrome, safari, opera, dll)

Berikut langkah – langkah nya
      1.       Buka script code yang sebelumnya supaya kita mudah untuk mempelajarinya
      2.       Lalu tambahkan script <a href=”URL yang dituju”>Nama tombol</a> seperti berikut
       

<a></a> = adalah tag yang digunakan 
href="" = adalah atribut yang digunakan untuk memanggil link 

      3.       Kemudian klik save dan buka di browser. Dan akan muncul tulisan berwarna biru yang dimana ketika kita klik akan mengarah ke link yang akan dituju.




      4.       Untuk membuat open in new window / m=membuka di tab baru maka tambahkan (target=”_blank”) dimana itu akan berfungsi untuk mengarahkan link ke halaman baru / tab baru
       seperti ini


itulah bagaimana cara untuk membuat tulisan berlink  / memanggil link dengan HTML


Minggu, 10 Juni 2018

Cara membuat konten website dengan html



Cara Membuat isi konten web dengan html (heading dan paragraph)

Isi konten pada website ada sebuah teks / gambar yang akan kita tayang kan kepada viewer / pengunjung web kita dimana teks / gambar yang akan kita informasikan ke viewer / pengunjung web kita.

Bahan yang dibutuhkan tetap sama seperti kita membuat title yaitu :

1. Text Editor (notepad, notepad++, Sublime, atom, dll) 
2 .Web browser (Mozilla, google chrome, safari, opera, dll)

Yang pertama cara membuat heading atau judul artikel

ketikkan script dibawah ini pada bagian body di script cara membuat title

<h1> TEKS HEADING  </h1>
<h3> TEKS HEADING </h3>

dan akan menjadi seperti ini :


save dan buka kembali dibrowser.


Maka tampilan akan seperti ini



NB : tag <h1></h1> dan tag <h3></h3> dapat diganti dengan tag<h1></h1> sampai dengan tag<h6></h6> tergantung besar kecil font / isi content yang diinginkan. Untuk melihat perbedaannya silahkan dicoba sendiri :D

Jika ingin tampilan text berada ditengah maka tambahkan kode <center></center> didalam tag seperti berikut :


dan tampilan akan berubah seperti ini...


Teks yang kita kasih tag <center></center> tadi berubah posisi menjadi ditengah


dan untuk membuat teks italic / underlined / bold caranya sama tetapi tagnya saja yang beda untuk tag html bias dilihat disini

kemudian cara membuat paragraf

caranya hampir sama dengan membuat heading hanya tag saja yang berbeda
tagnya adalah  <p></p> didalam tag <body></body> atau di bawah teks heading seperti ini :

<p> TEKS PARAGRAF </p>
 menjadi seperti ini :


dan tampilannya seperti ini :


agar bisa di tengah jangan lupa kasih tag <center></center>

oke sekian dulu untuk, tutor yang lainnya bisa dilihat di bawah sini

Sabtu, 09 Juni 2018

Cara membuat title web dengan html


Cara Membuat title web dengan html


Title biasanya digunakan untuk mengetahui page atau halaman mana yang telah kita buka. Biasanya terletak diatas tab yang kita buka pada browser. disini saya akan mengajarkan kalian bagai mana cara membuat title dengan html
Yang dibutuhkan

1. Text Editor (notepad, notepad++, Sublime, atom, dll)
2. Web browser (Mozilla, google chrome, safari, opera, dll)

Ketikkan kode berikut ke text editor 



disini saya menggunakan teks editor sublime. Jika ada yang menggunakan teks editor lain caranya tetap sama

Kemudian save dengan format index.html
Kemudian buka dengan web browser dan lihat hasilnya.

dan hasilnya akan begini



berikut adalah cara membuat title dengan html

Untuk tutor yang lain bisa dilihat dibawah ini....

Jumat, 08 Juni 2018

HTML

HTML


APA ITU HTML???

 

 Hasil gambar untuk html


HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.

Macam macam Tag HTML


N0
TAG HTML
KETERANGAN
1
<I> </I>
Menyisipkan tulisan miring.   makan
2
<u> </u>
Menyisipkan tulisan bergaris bawah.   minum
3
<b> </b>
Menyisipkan tulisan tebal .   belajar
4
<li> </li>
Menyisipkan bullet.  *  FUNGSI HTML
5
<marquee> </marquee>
Menyisipkan tulisan berjalan .  “welcome to website” bergerak dari kiri ke kanan atau dari atas ke bawah.
6
<blink> </blink>
Menyisipkan tulisan berkedip kedip. <blink> klick here </blink>
7
<center> </center>
Menyisipkan tulisan dalam bentuk ratah tengan .
“hendra simanungkalit”
8
<title> </title>
Menyisipkan title html
9
<head> </head>
Menyisipkan bagian head pada sebuah html.\
10
<body> </body>
Menyisipkan atribut untuk seluruh dokumen. Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth
11
<html></html>
Tag pembuka di dalam membuat sebuah desain web.
12
<h1> </h1>
Menyisipkan tulisan dalam bentuk h1Header 1
13
<h2> </h2>
Menyisipkan tulisan dalam bentuk h2. Header 2
14
<h3></h3>
Menyisipkan tulisan dalam bentuk h3. Header 3
15
<h4></h4>
Menyisipkan tulisan dalam bentuk h4. Header 4
16
<h5></h5>
Menyisipkan tulisan dalam bentuk h5. Header 5
17
<h6></h6>
Menyisipkan tulisan dalam bentuk h6. Header 6
18
<h7> </h7>
Menyisipkan tulisan dalam bentuk h7. Header 7
19
<abbr> </abbr>
Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja
20
<acronym></acronym>
Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
21
<area ></area>
Mendefinisikan daerah yang dapat diklik (link) pada peta gambar
22
<base > </base>
Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen
23
<blockquote> </blockquota>
Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam
24
<cite> </cite>
Mendefinisikan kutipan
25
<code> </code>
Mendefinisikan sebuah bagian dari kode komputer
26
<button> </button>
Mendefinisikan sebuah tombol diklik
27
<cite> </cite>
Mendefinisikan kutipan
28
<font> </font>
Mendefinisikan jenis font, warna dan ukuran untuk teks
29
<form> </form>
Mendefinisikan sebuah form HTML untuk input form
30
<frame> </frame>
Mendefinisikan frame dalam frameset
31
<hr> </hr>
Membuat garis horizontal
32
<small> </small>
Memperkecil ukuran teks dari ukuran defaultnya
33
<span> </span>
Mendefinisikan sebuah section dalam dokumen
34
<strike> </strike>
Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
35
<strong> </strong>
Membuat teks tebal, fungsi tag ini sama dengan tag <b>
36
<tr> </tr>
Membuat baris di dalam sebuah table
37
<ul> </ul>
Mendefinisikan daftar dalam format bullet
38
<td> </td>
Mendefinisikan sel di dalam sebuah table. Height, width, bgcolor, background, align, valign, title, colspan, rowspan
39
<thead> </thead>
Untuk mengelompokkan isi header di dalam sebuah tabel
40
<samp> </samp>
Mendefinisikan contoh keluaran dari program computer
41
<frameset> </frameset>
Mendefinisikan satu set frame
42
<input > </infut>
Mendefinisikan input field pada form
43
<img > </img>
Berfungsi untuk menampilkan gambar pada dokumen HTML. Src, alt, name, border, height, width
44
<big> </big>
Memperbesar ukuran teks sebesar satu point dari defaultnya
45
<em> </em>
Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
46
<fieldset> </fieldset>
Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form
47

Mendefinisikan client-side script
48
<select> </select>
Membuat daftar drop-down
49
<strong> </strong>
Membuat teks tebal, fungsi tag ini sama dengan tag <b>
50
<sub> </sub>
Memberikan efek subscript pada teks. Subscript
51
<sup> </sup>
Memberikan efek superscript pada teks. Superscript
52
<table> </table>
Membuat table. Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign
53
<textarea> <textarea>
Mendefinisikan sebuah kontrol input multiline. Name, rows, cols, wrap
54
<tfoot> </tfoot>
Untuk mengelompokkan isi footer di dalam sebuah tabel
55
<th> </th>
Mendefinisikan sel header di dalam  sebuah table. Height, width, bgcolor, background, align, valign, title, colspan, rowspan
56
<ul> </ul>
Mendefinisikan daftar dalam format bullet
57
<var> </var>
Mendefinisikan sebuah variable
58
<xmp> </xmp>
Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre>
59
<tt> </tt>
Mendefinisikan teletype text
60
<option> </option>
Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down
61
<noscript> </noscript>
Jika browser user tidak mendukung client-side scripts
62
<noframes> </noframes>
Jika browser user tidak mendukung frame
63
<nobr> </nobr>
Mencegah ganti baris pada teks atau gambar
64
<meta > </meta>
Mendefinisikan metadata tentang sebuah dokumen HTML
65
<menu> </menu>
Mendefinisikan sebuah daftar menu
66
<map> </map>
Mendefinisikan client-side peta gambar
67
<listing> </listing>
Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes
68
<legend> </legend>
Mendefinisikan sebuah caption untuk elemen <fieldset>
69
<ol> </ol>
Ordered List (digunakan dengan <li>) . 1. Item 1
70
<p> </p>
Menyisipkan paragraph
71
<br> </br>
Mengganti baris
72
<hr> </hr>
Mengganti horizontall
73
<dt> </dt>
Definition term
74
<dd> </dd>
Definition list
75
<colgroup> </colgroup>
Format yang berlaku bagi kolom. Height, width, align, valign, bgcolor, background, colspan
76
<a> </a>
Membuat link ke dokumen atau situs lainnya. Href, target, style, class, name, id
77
<option> </option>
Selected, name, value
78
<pre></pre>
Preformatted teks. Contoh text
79
<button> </button>
Mendefinisikan sebuah tombol diklik.

source : https://jazakhoirul.files.wordpress.com/2014/12/tag-tag-html.docx