Kelas Dasar HTML Dasar SMK Al-Muhajirin Sabtu, 29 November 2014.

Presentasi berjudul: "Kelas Dasar HTML Dasar SMK Al-Muhajirin Sabtu, 29 November 2014."— Transcript presentasi:

1 Kelas Dasar HTML Dasar SMK Al-Muhajirin Sabtu, 29 November 2014

2 Roadmap ● Pengenalan Tag HTML ● Struktur dasar HTML ● Berbagai Tag HTML

3 Pengenalan Tag HTML ● Halaman HTML = Sekumpulan Tag yang terstruktur ● Contoh tag : ● Mayoritas Tag berpasangan ada pembuka dan penutup ● Tag penutup diawali terdapat garis miring di awal tag. ● Tag yang tidak berpasangan ditutup dengan garis miring pada tag tersebut

4 Struktur Dasar HTML Judul Halaman Ini Heading Ini paragraph.

5 Berbagai Tag HTML Contoh berbagai tag dan atribut HTML ● Heading ● Paragraph ● Horizontal Rule ● Pre ● Style ● Formatting ● Hyperlink ● Image ● Dan banyak lainnya....

6 Berbagai Tag HTML: Heading Ini heading 1 Ini heading 2 Ini heading 3 Ini heading 4 Ini heading 5 Ini heading 6

7 Berbagai Tag HTML: Paragraph Tentang Saya Saya adalah seorang siswa SMK Al-Muhajirin. Saya rajin menabung dan tidak sombong. Saya memiliki 2 orang kakak dan satu orang adik. Saya tinggal di sebuah rumah lucu yang penuh dengan orang-orang lucu. If you move the mouse over the paragraph above, the title will display as a tooltip.

8 Berbagai Tag HTML: Horizontal Rule Tag hr berarti horizontal rule: Ini paragraf. Ini paragraf.. Ini paragraf.

9 Berbagai Tag HTML: Pre Tag pre diperlukan untuk menampilkan tulisan yang telah kita format sebelumnya My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

10 Berbagai Tag HTML: Style This is a heading This is a paragraph. I am Red I am Blue This is a heading This is a paragraph. This is a heading This is a paragraph.

11 Berbagai Tag HTML: Style (Cont’d) body {background-color:lightgrey} h1 {color:blue} p {color:green} This is a heading This is a paragraph.

12 Berbagai Tag HTML: Formatting This text is normal. This text is bold. This text is strong. This text is italic. This text is emphasized. HTML Small Formatting HTML Marked Formatting My favorite color is blue red. My favorite color is red. This is subscripted text. This is superscripted text.

13 Berbagai Tag HTML: Hyperlink Visit our HTML tutorial Visit our HTML tutorial

14 Berbagai Tag HTML: Hyperlink Visit our HTML tutorial Visit our HTML tutorial

15 Berbagai Tag HTML: Image Spectacular Mountains

16 Berbagai Tag HTML: Image (Cont’d) <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px"> A paragraph with an image. A paragraph with an image. The image floats to the left of the text.

17 Berbagai Tag HTML: Table Jill Smith 50 Eve Jackson 94

18 Berbagai Tag HTML: Table (Add Style) table, th, td { border: 1px solid black; border-collapse: collapse; }...

19 Berbagai Tag HTML: List Unordered List with Default Bullets Apples Bananas Unordered List with Square Bullets Coffee Tea Milk

20 Berbagai Tag HTML: Block Element: Divider London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

21 Berbagai Tag HTML: Inline Element: Span My Important Heading

22 Berbagai Tag HTML: Classes.cities { background-color:black; color:white; margin:20px; padding:20px; }...

23 Berbagai Tag HTML: Classes (cont’d)... London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

24 Berbagai Tag HTML: Classes (cont’d)... London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

25 Belajar Membuat Layout Silahkan buka file html_layout.html dan pelajari dengan seksama. Silahkan bertanya pula jika bingung. :)

26 Exercise ● Referensi www.w3schools.com ● Latihannya adalah Buatlah satu halaman tentang profil kalian menggunakan seluruh tag yang telah diajarkan. ● Materi slide akan ada di technoclass.alfath.co.id ● Kirim ke email fajar@alfath.co.id ● Fajar: 081511095623

27 Sumber ● Materi di adaptasi dari http://www.w3schools.com/