12 Mar 2015

Perancangan Web



”HTML” 

  •   Perkenalan HTML
Html adalah bahasa html markup untuk menggambarkan web dokumen (halaman web).
Html adalah singkatan dari "Hyper Text Markup Language".
Dokumen html digambarkan oleh tag html.
Setiap tag html menjelaskan konten dokumen yang berbeda.
HTML contoh:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Penjelasan:
Deklarasi doctype yang mendefinisikan jenis dokumen.
Teks antara <html>  dan </ html> menggambarkan web dokumen.
Teks antara <body> dan </body> menjelaskan isi dari halaman tersebut.
Teks antara <h> dan </h> menggambarkan judul.
Teks antara <p> dan</p> menjelaskan paragraf.




  • HTML Tag
Tag html adalah kata kunci ( tag nama ) dikelilingi oleh sudut kurung.

Tag html biasanya datang dalam pasangan seperti p dan / p.
Tag awal ini sering disebut pembukaan tag.Tag akhir ini sering disebut menutup tag.

  • Web browser
Tujuan dari web browser ( chrome, firefox, safari ) adalah untuk membaca dokumen html dan menampilkan mereka.Browser tidak menampilkan yang tag html, tetapi mereka menggunakan untuk menentukan bagaimana untuk menampilkan dokumen.



Struktur Halaman HTML
Di bawah adalah sebuah visualisasi dari sebuah struktur halaman html:
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

  • HTML editor 
mengedit html dokumen bisa menggunakan editor berikut :
  •   Adobe dreamweaver
  •   Microsoft expression web
  •   Coffecup html editor

html dokumen 
semua dokumen harus di mulai dengan tipe deklarasi : <!DOCTYPE html>
dan dokumen html dimulai dengan <html> diakhiri dengan </html> "menggunakan slash sebelum 'html' nya "
dan isi di dalam dokumen di deskripsikan dengan <body>....</body>

contoh:

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Judul html : judul di deskripsikan sebagai berikut. <h1>.....</h1> hingga <h6>.....</h6>
contoh:

<!DOCTYPE html>
<html>
<body>
<p><h1>heading 1</h1></p>
   <p><h2>heading 2</h2></p>
   <p><h3>heading 3</h3></p>
   <p><h4>heading 4</h4></p>
   <p><h5>heading 5</h5></p>
   <p><h6>heading 6</h6></p>
   <p></body>
</html>

 



paragraf html:
deskripsi paragraf html adalah <p>.....</p>.
contoh:

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

kita juga bisa menggunakan line break yang fungsi nya hampir sama dengan paragraf. tapi line break digunkan tanpa penutup seperti paragraf, contoh :

<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>



html image 
"image" di deskiripsikan dengan tag <img>
contoh :

<html>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"></body>
</html>

Garis horizontal
untuk garis horizontal di dalam html kita bisa mengggnakan tag <hr> tanpa penutup.
contoh:

<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>

warna background dan text kita bisa mendeskripsikan sebagai berikut.

<body style="background-color:yellow;">
-untuk mewarnai background.

<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
-untuk mewarnai text.

contoh:
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

Font Style
kita bisa mendeskripsikan nya sebagai berikut. contoh:

    <!DOCTYPE html>
    <html>
    <body>
    <h1 style="font-family:verdana;">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
    </body>
    </html>


 Bold :
   Dalam html penggunaan penebalan text dapat di deskripsikan degan <b> ….</b> atau dengan <strong>….</strong>
Italic atau text miring :
   Italic dapat di deskripsikan dengan <i>….</i> atau <em>….</em>
Underline :
  Underline di desrkripsikan dengan <u>….</u>

deskripsi format text yang lain:
Tag
Deskripsi
<b>
 bold text
<em>
 emphasized text 
<i>
 italic text
<small>
 smaller text
<strong>
 important text
<sub>
 subscripted text
<sup>
 superscripted text
<ins>
inserted text
<del>
 deleted text
<mark>
 marked/highlighted text

demikian sedikit info tentang “html” yang bisa saya share, moga bermanfaat saya masih belajar, jadi jangan sungkan kalo kita saling bagi info. Mempelajari lebih mendalam kalian bisa berkunjung disiniw3school

0 komentar:

Posting Komentar