Mengenal HTML
-
Upload
yulef-dian -
Category
Education
-
view
1.173 -
download
6
description
Transcript of Mengenal HTML
![Page 2: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/2.jpg)
Mengenal HTML
Html itu ?
• HTML Hyper Text Markup Language• HTML bukan sebuah bahasa
program, hanya disebut markup language
• Markup language terdiri dari markup tags
• HTML uses markup tags menampilkan halaman web
![Page 3: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/3.jpg)
Mengenal HTML
![Page 4: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/4.jpg)
Contoh HTML
<html><body>
<h1>Heading 1</h1>
<p>Di sini isi paragraf</p>
</body></html>
Awal Tag
Akhir Tag
![Page 5: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/5.jpg)
Mengenal Tag HTML
• <html>• <title>• <h1> …. <h6>• <body>• <p>• <ul>• <ol>• <br>
• <b> <i> <u> • <img src=> • <a href=> • <form>• <input>• <table>• <div>• <hr>• <!-- This is a comment -->
![Page 6: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/6.jpg)
AtributTag HTML
• Class =classname (css)• Id =uniqueid (css)• Style =style_defenition (css)• Title =tooltips_text
![Page 7: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/7.jpg)
AtributContoh
<html>
<body style="background-color:yellow;"><h2 style="background-color:red;">Apa yang terlihat pada heading ini ?</h2><p style="background-color:green;">Bagaimana dengan paragraf ini ? </p></body>
</html>
![Page 8: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/8.jpg)
AtributContoh
<p><font size="3" face="verdana" color="blue">This paragraph is in Verdana, size 3, and in blue text color.</font></p>
![Page 9: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/9.jpg)
AtributContoh
<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>
![Page 10: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/10.jpg)
PentingHTML
<a href="http://www.alamat.com/" target="_blank"> Klik di Sini Yaa.. </a>
<a href="http://www.alamatpalsu.com/">Ayu Ting Ting</a>
Kedua tautan di atas akan berbeda dalam apa ?
![Page 11: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/11.jpg)
Tag SeringHTML
<img src="url" alt=“keterangan teks"/><img src=“gambar.jpg" alt=“ini gambar lho"
width="304" height="228" />Bagaimana kalau digabung ?
<a href="http://www.alamat.com/" target="_blank"> <img src=“gambar.jpg" alt=“ini gambar lho" width="304" height="228" /> </a>
![Page 12: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/12.jpg)
Tabel DalamHTML
<table border="1"><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td></tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td></tr></table>
![Page 13: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/13.jpg)
Listing DalamHTML
<ul><li>Coffee</li><li>Milk</li></ul>
<ol><li>Coffee</li><li>Milk</li>
</ol>
Bullet & Numbering
![Page 14: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/14.jpg)
FormulirHTML
<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>
<input type="text" name="firstname" /><input type="password" name="pwd" /><input type="radio" name="sex" value="male" /><input type="checkbox" name="vehicle" value="Bike" />
![Page 15: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/15.jpg)
WarnaWarniHTML
17 warna standar : aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Contoh :DarkBlue kode Hexadecimal-nya =#00008BDodgerBlue kode Hexadecimal-nya =#1E90FF
![Page 16: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/16.jpg)
WarnaWarniHTML
17 warna standar : aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Contoh :DarkBlue kode Hexadecimal-nya =#00008BDodgerBlue kode Hexadecimal-nya =#1E90FF
![Page 17: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/17.jpg)
Blog & HTML
Blogspot
![Page 18: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/18.jpg)
Blog & HTML
Wordpress
![Page 19: Mengenal HTML](https://reader033.fdocuments.us/reader033/viewer/2022051313/5480e517b4795932578b4789/html5/thumbnails/19.jpg)
Thanks for Attention