SlideShare uma empresa Scribd logo
1 de 28
Baixar para ler offline
By Altech
HTML adalah…

Bahasa yang digunakan untuk membuat dokumen
hypertext yang bebas platform
Atau bisa kita imajinasikan, HTML adalah
“kerangka/tengkorak” sebuah sistem/aplikasi
File HTML memiliki
ekstensi .html. Dan
dijalankan dengan browser
Aturan Penulisan

Ada karakter khusus dalam HTML yang disebut tag
Tag tersebut ada tag buka (<>) dan tag tutup (</>)
HTML hanya akan membaca data dari tag <html>
sampai tag </html> saja
Dan isi dari data HTML hanya boleh di tempatkan di
tag <body> sampai tag </body> saja

Tes1.html

Tes2.html

<html>
<body>
Ini badan HTML
</body>
</html>

<html>
<body>
Ini badan HTML
</body>
Di luar badan HTML
</html>
Diluar HTML
Coba!
“


Save as : coba1.html, tulis di notepad

<html>
<head>
<title>Judul HTML, suka tampil di tab
browser</title>
</head>
<body>
Badan HTML, disinilah tag-tag HTML dituliskan. By the way, tag head di
atas itu apa? Itu kepalanya HTML. Apa fungsinya? Nanti dia menghasilkan
apa? Biasanya disana tempat untuk Javasript dan CSS (monggo di googling
kalo kepo). Terus tag title didalam tag head itu apa? Itu untuk memberi judul
apa sih isi dari HTML kita. Mau pakai tag head dan title atau tidak, tidak
masalah
</body>
</html>
No Copas !!!

Ketik sendiri
Dan rasakan sensasinya
Tahukah kalian, salah satu cara mengingat sesuatu itu adalah dengan melihat dan
mencoba/menyentuh sesuatu. Dengan kita mengetik contoh-contoh HTML, otak
kita sedang menyimpan apa saja tag HTML yang kita ketik. InsyaAllah akan lebih
lama ingat dibandingkan cuma sekedar melihat tapi tidak mencobanya.
Jangan lupa! Save as
atau
HTML file (.html)


Silahkan eksplorasi
Ganti kata-katanya, coba
Tulis kalimat di luar tag
html, head ,body
Bagaimana hasilnya?
Heading

Heading
Nilainya dari 1 sampa 6. Digunakan untuk judul HTML
(bedakan dengan title. Heading ada di dalam browser,
title ada di tab browser)
Garis Horizontal
Digunakan untuk membuat garis horizontal. Tag yang
satu ini tidak punya tag penutup
Coba!
“



<html>
<head>
<title>Heading dan garis</title>
</head>
<body>
<h1>Gila! Gede banget</h1>
<h2>Wuih! Gedeeee!</h2>
<h3>Wow. Gede.</h3>
<h4>Ya standarlah ukurannya!</h4>
<h5>Hmm, kecil juga yah</h5>
<h6>Ih kecilnya cimit cimit! ><
</h6>
<br/></br>
<hr size=10 width="60%"
align="center" color="yellow">
<hr size=10 width="50%"
align="center" color="orange">

<hr size=10 width="40%" align="center"
color="red">
<hr size=10 width="30%" align="center"
color="pink">
<hr size=10 width="20%" align="center"
color="silver">
<hr size=10 width="30%" align="center"
color="pink">
<hr size=10 width="40%" align="center"
color="red">
<hr size=10 width="50%" align="center"
color="orange">
<hr size=10 width="60%" align="center"
color="yellow">
</body>
</html>
Peraturan HTML!

HTML tidak mengenal ENTER

Saat kita menulis :
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
Rupa-rupa warnanya
Hijau kuning kelabu
Merah muda dan biru
</body>
</html>

Yang akan tampil di
browser :
Balonku ada limaRuparupa warnanyaHijau
kuning kelabuMerah
muda dan biru




Solusinya
?
Coba!
“
1.
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
<br/>Rupa-rupa warnanya
<br/>Hijau kuning kelabu
<br/>Merah muda dan biru
</body>
</html>



2.
<html>
<head>
<title>Judul HTML, suka tampil
di tab
browser</title>
</head>
<body>
<pre>
Balonku ada lima
Rupa-rupa warnanya
Hijau kuning kelabu
Merah muda dan biru
</pre>
</body>
</html>
Coba!
“
3.
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
<p/>Rupa-rupa warnanya
<p/>Hijau kuning kelabu
<p/>Merah muda dan biru
</body>
</html>


Lihat hasilnya. Apa
perbedaan dari setiap
hasilnya. Apa bedanya
tag-tag itu ya?


1. <br/>
Tag “enter” yang sederhana. Hanya bisa men”enter” satu baris
kalimat saja. Kalau kita ingin 100 kali “enter”, maka tulis </br>
100 kali
2. <pre></pre>
Tag yang mengikuti apa yang kita ketik. Bahkan, kalau kita ingin
meng”enter” 100 kali, cukup lakukan “enter biasa”. Maka secara
otomatis <pre> akan mengikutinya
3. <p></p>
Sebenarnya itu bukan untuk meng“enter”, tapi untuk membuat
garis baru sebuah paragraf/memisahkan antar paragraf. Bukankah
membuat paragraf baru berarti harus di enter juga kan? Tidak
masalah pakai tag ini, tapi jarak antar barisnya cukup besar
Format Teks dan Font

Tag Format Teks
Untuk memodifikasi bentuk teks
Pada umumnya ada bold, italic, underline, strike,
supperscript, dan
subscript

Tag Font
Untuk mengubah gaya, warna, ukuran tulisan
Coba!
“



<html>
<head>
<title>Heading dan garis</title>
</head>
<body>
<b>BOLD</b> &nbsp;
<i>ITALIC</i> &nbsp;
<u>UNDERLINE</u> &nbsp;
<s>STRIKECROSS</s> &nbsp;
<big>BIG</big> &nbsp;
<small>SMALL</small> &nbsp;
<strong>STRONG</strong>
&nbsp;
<blink>BLINK</blink> &nbsp;
<sub>SUBSCRIPT</sub> &nbsp;
<sup>SUPPERSCRIPT</sup>
&nbsp;

<br/> <font face="papyrus"
color="aqua">
<sup>Naik</sup>
<sup>Naik</sup> ke puncak
gunung </font>
<br/> <font face="papyrus"
color="fuchsia"> Tinggi tinggi
sekali </font>
<br/> <font face="papyrus"
color="teal"> Kiri kanan kulihat
saja </font>
<br/> <font face="papyrus"
color="silver"> Banyak <sub>
pohon stroberi </sub> </font>
</body>
</html>
Warna teks, ada 2 macam
1. Pakai nama warnanya
Contoh orange, blue, maroon, cyan
2. Pakai kode warna
Contoh #FFFFFF (putih), #000000 (hitam)
#993399 (ungu gelap)

<tont tace=“calibri” size=“7” color=“orange”> Jeruk makan jeruk </font>

Catatan :
Dianjurkan pakai kode warna
karna warnanya lebih kaya. Kalau
pakai nama warna, emang warna
hijau sedikit biru apa namanya hayo?
green little blue?
<font color=“green little blue”> ?
Untuk mendapatkan kode warna
bisa dilihat di colorpicker
Photoshop
<img>

Untuk memasukan gambar
Coba ini !
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img src=“unikom.jpg”>
</body>
</html>

Siapkan gambar,
tempatnya 1 folder ya
dengan file HTML anda

Sudah di coba?
Sudah lihat hasilnya?
Coba edit !
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img src=“unikom.jpg”
width=“100”
height=“100”>
</body>
</html>
Bagaimana?

Silahkan simpulkan
sendiri bagaimana
menurut anda.
Sekarang tempatkan
gambar di luar folder

CTRL+X

CTRL+V
Coba!
“



<html>
<head>
<title>Gambar</title>
</head>
<body>
<img
src=“../unikom.jpg”>
</body>
</html>

Sudah di coba?
Sekarang buat folder a, simpan
gambar di folder a. Coba edit
seperti ini
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img
src=“../a/unikom.jpg”>
</body>
</html>

Didalam folder a, buat folder
b. Didalam folder b, buat
folder c. Coba edit seperti ini
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img
src=“../a/b/c/unikom.jpg”>
</body>
</html>

Silahkan disimpulkan
Sendiri 
Eksplorasi


Tag HTML itu ada banyak sekali
jadi tidak mungkin dijelaskan satu persatu
sisanya anda yang mengeksplorasi
coba tulis script HTML dibawah ini dan lihat
hasilnya
ubah beberapa script HTMLnya
can simpulkan bagaimana menurut anda
1.
<html>
<head>
<title> AT&amp;T WorldNet
Service</title>
</head>
<body bgcolor=“gray”>
<p>
<font face=“Arial”><b>Still have
question?</b> In the United States,
Call 1-800-WORLDNET (1-800-9675363). Outside the U.S. call 201WORLDNET (201-967-5363)</font>
</br>
</p>
<p align=“left”>
<font size=“1”>
<sup>*</sup> Today card
member may be liable for the first $50

of change as the card member notifies
AT&amp;T Universal Card of the loss
with in 24 hours and otherwise of
<i>card member</i> or <i>authorized
user</i>
</font>
</p>
<p align=“left”>
<font size=“1”>
Copyright &copy; 1996
AT&amp;T. All right reserved.
AT&amp;T WorldNet is a service mark
of AT&amp;T
</font>
</p>
</body>
</html>
2.
<html>
<head>
<title> AT&amp;T WorldNet
Service</title>
</head>
<body bgcolor=“#663366”>
<p align=“right”>
<font size=“8” color=“red”
face=“Times Roman”>
Internet for everybody
</font>
</br>
</p>
<p align=“left”>
<font face=“arial”>
<b>Discover new ways</b> to
stay in touch with the people, ideas,
and information that are imortant for
you. Make travel reservation anytime

Day or night. Find out mutual fund are
hot and which ones are not. Play games.
Do research. Stay on top of current
evants. Converse in our newsgroup, or
keep in touch with e-mail. Armed with
AT&amp;T WorldNet member
directory, meeting new people and
finding old friend is easy.<br/> Click <a
href=“#signup”>here</a> to learn how
to join the AT&amp;T WorldNet
community</font>
</p>
</body>
</html>
3.
<html>
<head>
<title> Karakter Khusus </title>
</head>
<body bgcolor=“#3399cc”>
<h1>Karakter Khusus</h1>
<hr size=“5” width=“90%”>
align=“center”>
<pre>
&lt; &gt; &amp; &ouml; &ntilde;
&egrave; &quot; &cent; &pound;
&yen;
&copy; & reg; &deg; &frac14;
&frac12;
&frac34; &times;
</pre>
<hr size=“5” width=“90%”>
Referensi
Contoh-contoh latihan, dan tutorial dapat anda dapatkan
Lebih banyak lagi di internet.
Tutorial bahasa inggris lebih banyak dan lebih lengkap
Anda bisa coba sambil melatih kemampuan bahasa inggris anda

Ilmukomputer.org
Youtube.com (codeschool & jream)
Slideshare.com
Bisa karena terbiasa
Terbiasa karena mau mencoba
orang rajin tak berbakat

akan mengalahkan

orang cerdas yang tak serius

Mais conteúdo relacionado

Mais procurados

Membuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadMembuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadArdiyanto Top
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot comantony96
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2Dhan junkie
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasaredy sinaga
 
04 materi table
04 materi table04 materi table
04 materi tableMenny SN
 
Presentasi tentang dasar-dasar HTLM untuk pemula
Presentasi tentang dasar-dasar HTLM untuk pemulaPresentasi tentang dasar-dasar HTLM untuk pemula
Presentasi tentang dasar-dasar HTLM untuk pemula1smail12
 
Tutorial HTML
Tutorial HTMLTutorial HTML
Tutorial HTMLRheyz
 
Tutorial HTML
Tutorial HTMLTutorial HTML
Tutorial HTMLRheyz
 
Membuat web-sederhana-xi
Membuat web-sederhana-xiMembuat web-sederhana-xi
Membuat web-sederhana-xiWyitry Jyanth
 
8.materi desain frame (ok)
8.materi desain frame (ok)8.materi desain frame (ok)
8.materi desain frame (ok)Nacha Evangelion
 
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphpAfdi Njomplank
 

Mais procurados (20)

Membuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadMembuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepad
 
Tag html
Tag htmlTag html
Tag html
 
Pertemuan 02
Pertemuan 02Pertemuan 02
Pertemuan 02
 
Belajar html!!
Belajar html!!Belajar html!!
Belajar html!!
 
Pemrogramanweb
PemrogramanwebPemrogramanweb
Pemrogramanweb
 
Pemrogramanweb
PemrogramanwebPemrogramanweb
Pemrogramanweb
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot com
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
 
PWEB HTML
PWEB HTMLPWEB HTML
PWEB HTML
 
Modul web-design
Modul web-designModul web-design
Modul web-design
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasar
 
Materi Web Statis
 Materi Web Statis Materi Web Statis
Materi Web Statis
 
04 materi table
04 materi table04 materi table
04 materi table
 
Presentasi tentang dasar-dasar HTLM untuk pemula
Presentasi tentang dasar-dasar HTLM untuk pemulaPresentasi tentang dasar-dasar HTLM untuk pemula
Presentasi tentang dasar-dasar HTLM untuk pemula
 
Tutorial HTML
Tutorial HTMLTutorial HTML
Tutorial HTML
 
Tutorial HTML
Tutorial HTMLTutorial HTML
Tutorial HTML
 
Membuat web-sederhana-xi
Membuat web-sederhana-xiMembuat web-sederhana-xi
Membuat web-sederhana-xi
 
8.materi desain frame (ok)
8.materi desain frame (ok)8.materi desain frame (ok)
8.materi desain frame (ok)
 
Modul html
Modul htmlModul html
Modul html
 
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphp
 

Destaque

лосик как собираемся внедрять Agile в финансовой организации
лосик   как собираемся внедрять Agile в финансовой организациилосик   как собираемся внедрять Agile в финансовой организации
лосик как собираемся внедрять Agile в финансовой организацииMagneta AI
 
lina proyecto de etica
lina proyecto de etica lina proyecto de etica
lina proyecto de etica L32ina
 
éTica colaborativa 5.3 teoria del valor
éTica colaborativa 5.3 teoria del valoréTica colaborativa 5.3 teoria del valor
éTica colaborativa 5.3 teoria del valorvictor7230
 
Calendario formazione L'Officina dello storico 2013-14
Calendario formazione L'Officina dello storico 2013-14Calendario formazione L'Officina dello storico 2013-14
Calendario formazione L'Officina dello storico 2013-14officinadellostorico
 
NP Incremento altos cargos en Lyma
NP Incremento altos cargos en LymaNP Incremento altos cargos en Lyma
NP Incremento altos cargos en LymaUPyD Getafe
 
nzgrassland_publication_188
nzgrassland_publication_188nzgrassland_publication_188
nzgrassland_publication_188Rodger Jensen
 
Gender Essay
Gender EssayGender Essay
Gender EssaySophie Sg
 
Company Profile for smc
Company Profile for smcCompany Profile for smc
Company Profile for smcmurali rao
 
Poolias Kundenbroschüre
Poolias KundenbroschürePoolias Kundenbroschüre
Poolias KundenbroschüreDietmar Cremers
 

Destaque (17)

Amélie Faure en Influence One Madrid 2015
Amélie Faure en Influence One Madrid 2015Amélie Faure en Influence One Madrid 2015
Amélie Faure en Influence One Madrid 2015
 
лосик как собираемся внедрять Agile в финансовой организации
лосик   как собираемся внедрять Agile в финансовой организациилосик   как собираемся внедрять Agile в финансовой организации
лосик как собираемся внедрять Agile в финансовой организации
 
lina proyecto de etica
lina proyecto de etica lina proyecto de etica
lina proyecto de etica
 
brigiht pimentel
brigiht pimentelbrigiht pimentel
brigiht pimentel
 
éTica colaborativa 5.3 teoria del valor
éTica colaborativa 5.3 teoria del valoréTica colaborativa 5.3 teoria del valor
éTica colaborativa 5.3 teoria del valor
 
Calendario formazione L'Officina dello storico 2013-14
Calendario formazione L'Officina dello storico 2013-14Calendario formazione L'Officina dello storico 2013-14
Calendario formazione L'Officina dello storico 2013-14
 
sociologia
sociologiasociologia
sociologia
 
Essay
EssayEssay
Essay
 
Legislative-Platform-2014-SS
Legislative-Platform-2014-SSLegislative-Platform-2014-SS
Legislative-Platform-2014-SS
 
NP Incremento altos cargos en Lyma
NP Incremento altos cargos en LymaNP Incremento altos cargos en Lyma
NP Incremento altos cargos en Lyma
 
nzgrassland_publication_188
nzgrassland_publication_188nzgrassland_publication_188
nzgrassland_publication_188
 
Gender Essay
Gender EssayGender Essay
Gender Essay
 
Company Profile for smc
Company Profile for smcCompany Profile for smc
Company Profile for smc
 
Dossier de produção
Dossier de produçãoDossier de produção
Dossier de produção
 
Question 2
Question 2Question 2
Question 2
 
Poolias Kundenbroschüre
Poolias KundenbroschürePoolias Kundenbroschüre
Poolias Kundenbroschüre
 
ΑΓΧΙΝΟΙΑ 01
ΑΓΧΙΝΟΙΑ 01ΑΓΧΙΝΟΙΑ 01
ΑΓΧΙΝΟΙΑ 01
 

Semelhante a HTML Dasar I

Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + phpSaikhu Zaenul
 
Modul dasar html
Modul dasar htmlModul dasar html
Modul dasar htmlUjiWardoyo1
 
Sourcode Web Berbasis HTML, PHP, CMS, MYSQL
Sourcode Web Berbasis HTML, PHP, CMS, MYSQLSourcode Web Berbasis HTML, PHP, CMS, MYSQL
Sourcode Web Berbasis HTML, PHP, CMS, MYSQLAngga Joe Amstrong
 
3.struktur elemen html.pdf
3.struktur elemen html.pdf3.struktur elemen html.pdf
3.struktur elemen html.pdfOjik3
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)T Ghazali
 
HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)Sahrul Sindriana
 
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno
 
Mengenal script html 2
Mengenal script html 2Mengenal script html 2
Mengenal script html 2Ali Muntaha
 
02 materi dasar html
02 materi dasar html02 materi dasar html
02 materi dasar htmlMenny SN
 

Semelhante a HTML Dasar I (20)

Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Modul html
Modul htmlModul html
Modul html
 
Modul dasar html
Modul dasar htmlModul dasar html
Modul dasar html
 
Modul html
Modul htmlModul html
Modul html
 
Buku ajar desain web
Buku ajar desain webBuku ajar desain web
Buku ajar desain web
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Modul css
Modul cssModul css
Modul css
 
Sourcode Web Berbasis HTML, PHP, CMS, MYSQL
Sourcode Web Berbasis HTML, PHP, CMS, MYSQLSourcode Web Berbasis HTML, PHP, CMS, MYSQL
Sourcode Web Berbasis HTML, PHP, CMS, MYSQL
 
Web html
Web htmlWeb html
Web html
 
3.modul css
3.modul css3.modul css
3.modul css
 
3.struktur elemen html.pdf
3.struktur elemen html.pdf3.struktur elemen html.pdf
3.struktur elemen html.pdf
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)
 
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web Programming
 
Tag HTML: #(3)
Tag  HTML: #(3)Tag  HTML: #(3)
Tag HTML: #(3)
 
Mengenal script html 2
Mengenal script html 2Mengenal script html 2
Mengenal script html 2
 
02 materi dasar html
02 materi dasar html02 materi dasar html
02 materi dasar html
 
05 XHTML CSS
05 XHTML CSS05 XHTML CSS
05 XHTML CSS
 

Último

Makna, hukum, hikmah dan keutamaan puasa.pdf
Makna, hukum, hikmah dan keutamaan puasa.pdfMakna, hukum, hikmah dan keutamaan puasa.pdf
Makna, hukum, hikmah dan keutamaan puasa.pdfAdindaRizkiThalia
 
power point mengenai akhlak remaja: menghindari tawuran
power point mengenai akhlak remaja: menghindari tawuranpower point mengenai akhlak remaja: menghindari tawuran
power point mengenai akhlak remaja: menghindari tawuranapriandanu
 
Materi Presentasi PPT Komunitas belajar 2.pptx
Materi Presentasi PPT Komunitas belajar 2.pptxMateri Presentasi PPT Komunitas belajar 2.pptx
Materi Presentasi PPT Komunitas belajar 2.pptxnursamsi40
 
Materi pesantren kilat Ramadhan tema puasa.pptx
Materi pesantren kilat Ramadhan  tema puasa.pptxMateri pesantren kilat Ramadhan  tema puasa.pptx
Materi pesantren kilat Ramadhan tema puasa.pptxSuarniSuarni5
 
Paparan Model Kompetensi Kepala Sekolah.pptx
Paparan Model Kompetensi Kepala Sekolah.pptxPaparan Model Kompetensi Kepala Sekolah.pptx
Paparan Model Kompetensi Kepala Sekolah.pptxagunk4
 
Aksi Nyata Modul 3.3.pdf tentang kepemimpinan murid
Aksi Nyata Modul 3.3.pdf tentang kepemimpinan muridAksi Nyata Modul 3.3.pdf tentang kepemimpinan murid
Aksi Nyata Modul 3.3.pdf tentang kepemimpinan muridYusnelMarni
 
Aminullah Assagaf_Regresi Lengkap 19_8 Nov 2023_Inc. Data panel & Perbandinga...
Aminullah Assagaf_Regresi Lengkap 19_8 Nov 2023_Inc. Data panel & Perbandinga...Aminullah Assagaf_Regresi Lengkap 19_8 Nov 2023_Inc. Data panel & Perbandinga...
Aminullah Assagaf_Regresi Lengkap 19_8 Nov 2023_Inc. Data panel & Perbandinga...Aminullah Assagaf
 
Tanqihul Qoul Bab 14 - Keutamaan Ibadah Fardhu.pptx
Tanqihul Qoul Bab 14  - Keutamaan Ibadah Fardhu.pptxTanqihul Qoul Bab 14  - Keutamaan Ibadah Fardhu.pptx
Tanqihul Qoul Bab 14 - Keutamaan Ibadah Fardhu.pptxMMuminSholih
 
contoh DOKUMEN AKSI NYATA DALAM HAL PENERAPAN COACHING KEPADA PESERTA DIDIK
contoh DOKUMEN AKSI NYATA DALAM HAL PENERAPAN COACHING KEPADA PESERTA DIDIKcontoh DOKUMEN AKSI NYATA DALAM HAL PENERAPAN COACHING KEPADA PESERTA DIDIK
contoh DOKUMEN AKSI NYATA DALAM HAL PENERAPAN COACHING KEPADA PESERTA DIDIKTaufik241763
 
,.,,.,.,.,.,.,.,.,.,.,.,Swamedikasi.pptx
,.,,.,.,.,.,.,.,.,.,.,.,Swamedikasi.pptx,.,,.,.,.,.,.,.,.,.,.,.,Swamedikasi.pptx
,.,,.,.,.,.,.,.,.,.,.,.,Swamedikasi.pptxfurqanridha
 
BMMB 1134 KETERAMPILAN BERBAHASA HALANGAN KOMUNIKASI
BMMB 1134 KETERAMPILAN BERBAHASA HALANGAN KOMUNIKASIBMMB 1134 KETERAMPILAN BERBAHASA HALANGAN KOMUNIKASI
BMMB 1134 KETERAMPILAN BERBAHASA HALANGAN KOMUNIKASIsyedharis59
 
UTS CT (ppg prajabatan gelombang 1 tahun 2023).pptx
UTS CT (ppg prajabatan gelombang 1 tahun 2023).pptxUTS CT (ppg prajabatan gelombang 1 tahun 2023).pptx
UTS CT (ppg prajabatan gelombang 1 tahun 2023).pptxYusufAmirudin3
 
Nasab Nabi Muhammad SAW. dari Nabi Ibrahimpptx
Nasab Nabi Muhammad SAW. dari Nabi IbrahimpptxNasab Nabi Muhammad SAW. dari Nabi Ibrahimpptx
Nasab Nabi Muhammad SAW. dari Nabi IbrahimpptxSuGito15
 
Seminar Seri AI Talks - AI dan Media Kristen
Seminar Seri AI Talks - AI dan Media KristenSeminar Seri AI Talks - AI dan Media Kristen
Seminar Seri AI Talks - AI dan Media KristenSABDA
 
keutamaan dan hikmah shaalat fardhu .pdf
keutamaan dan hikmah shaalat fardhu .pdfkeutamaan dan hikmah shaalat fardhu .pdf
keutamaan dan hikmah shaalat fardhu .pdfatsira1
 
2024 - PSAJ PAI SMK Kisi-kisi Utama.docx
2024 - PSAJ PAI SMK Kisi-kisi Utama.docx2024 - PSAJ PAI SMK Kisi-kisi Utama.docx
2024 - PSAJ PAI SMK Kisi-kisi Utama.docxaljabarkoho
 
MATERI PESANTREN KILAT RAMADHAN AQIDAH ISLAM.pptx
MATERI PESANTREN KILAT RAMADHAN  AQIDAH ISLAM.pptxMATERI PESANTREN KILAT RAMADHAN  AQIDAH ISLAM.pptx
MATERI PESANTREN KILAT RAMADHAN AQIDAH ISLAM.pptxSuarniSuarni5
 
materi pondok romadon sekolah dasar dengan materi zakat fitrah
materi pondok romadon sekolah dasar dengan materi zakat fitrahmateri pondok romadon sekolah dasar dengan materi zakat fitrah
materi pondok romadon sekolah dasar dengan materi zakat fitrahkrisdanarahmatullah7
 
Menyiapkan Guru Masa Depan yang Bagus da
Menyiapkan Guru Masa Depan yang Bagus daMenyiapkan Guru Masa Depan yang Bagus da
Menyiapkan Guru Masa Depan yang Bagus daWijaya Kusumah
 

Último (20)

Makna, hukum, hikmah dan keutamaan puasa.pdf
Makna, hukum, hikmah dan keutamaan puasa.pdfMakna, hukum, hikmah dan keutamaan puasa.pdf
Makna, hukum, hikmah dan keutamaan puasa.pdf
 
power point mengenai akhlak remaja: menghindari tawuran
power point mengenai akhlak remaja: menghindari tawuranpower point mengenai akhlak remaja: menghindari tawuran
power point mengenai akhlak remaja: menghindari tawuran
 
Persiapandalam Negosiasi dan Loby .pptx
Persiapandalam  Negosiasi dan Loby .pptxPersiapandalam  Negosiasi dan Loby .pptx
Persiapandalam Negosiasi dan Loby .pptx
 
Materi Presentasi PPT Komunitas belajar 2.pptx
Materi Presentasi PPT Komunitas belajar 2.pptxMateri Presentasi PPT Komunitas belajar 2.pptx
Materi Presentasi PPT Komunitas belajar 2.pptx
 
Materi pesantren kilat Ramadhan tema puasa.pptx
Materi pesantren kilat Ramadhan  tema puasa.pptxMateri pesantren kilat Ramadhan  tema puasa.pptx
Materi pesantren kilat Ramadhan tema puasa.pptx
 
Paparan Model Kompetensi Kepala Sekolah.pptx
Paparan Model Kompetensi Kepala Sekolah.pptxPaparan Model Kompetensi Kepala Sekolah.pptx
Paparan Model Kompetensi Kepala Sekolah.pptx
 
Aksi Nyata Modul 3.3.pdf tentang kepemimpinan murid
Aksi Nyata Modul 3.3.pdf tentang kepemimpinan muridAksi Nyata Modul 3.3.pdf tentang kepemimpinan murid
Aksi Nyata Modul 3.3.pdf tentang kepemimpinan murid
 
Aminullah Assagaf_Regresi Lengkap 19_8 Nov 2023_Inc. Data panel & Perbandinga...
Aminullah Assagaf_Regresi Lengkap 19_8 Nov 2023_Inc. Data panel & Perbandinga...Aminullah Assagaf_Regresi Lengkap 19_8 Nov 2023_Inc. Data panel & Perbandinga...
Aminullah Assagaf_Regresi Lengkap 19_8 Nov 2023_Inc. Data panel & Perbandinga...
 
Tanqihul Qoul Bab 14 - Keutamaan Ibadah Fardhu.pptx
Tanqihul Qoul Bab 14  - Keutamaan Ibadah Fardhu.pptxTanqihul Qoul Bab 14  - Keutamaan Ibadah Fardhu.pptx
Tanqihul Qoul Bab 14 - Keutamaan Ibadah Fardhu.pptx
 
contoh DOKUMEN AKSI NYATA DALAM HAL PENERAPAN COACHING KEPADA PESERTA DIDIK
contoh DOKUMEN AKSI NYATA DALAM HAL PENERAPAN COACHING KEPADA PESERTA DIDIKcontoh DOKUMEN AKSI NYATA DALAM HAL PENERAPAN COACHING KEPADA PESERTA DIDIK
contoh DOKUMEN AKSI NYATA DALAM HAL PENERAPAN COACHING KEPADA PESERTA DIDIK
 
,.,,.,.,.,.,.,.,.,.,.,.,Swamedikasi.pptx
,.,,.,.,.,.,.,.,.,.,.,.,Swamedikasi.pptx,.,,.,.,.,.,.,.,.,.,.,.,Swamedikasi.pptx
,.,,.,.,.,.,.,.,.,.,.,.,Swamedikasi.pptx
 
BMMB 1134 KETERAMPILAN BERBAHASA HALANGAN KOMUNIKASI
BMMB 1134 KETERAMPILAN BERBAHASA HALANGAN KOMUNIKASIBMMB 1134 KETERAMPILAN BERBAHASA HALANGAN KOMUNIKASI
BMMB 1134 KETERAMPILAN BERBAHASA HALANGAN KOMUNIKASI
 
UTS CT (ppg prajabatan gelombang 1 tahun 2023).pptx
UTS CT (ppg prajabatan gelombang 1 tahun 2023).pptxUTS CT (ppg prajabatan gelombang 1 tahun 2023).pptx
UTS CT (ppg prajabatan gelombang 1 tahun 2023).pptx
 
Nasab Nabi Muhammad SAW. dari Nabi Ibrahimpptx
Nasab Nabi Muhammad SAW. dari Nabi IbrahimpptxNasab Nabi Muhammad SAW. dari Nabi Ibrahimpptx
Nasab Nabi Muhammad SAW. dari Nabi Ibrahimpptx
 
Seminar Seri AI Talks - AI dan Media Kristen
Seminar Seri AI Talks - AI dan Media KristenSeminar Seri AI Talks - AI dan Media Kristen
Seminar Seri AI Talks - AI dan Media Kristen
 
keutamaan dan hikmah shaalat fardhu .pdf
keutamaan dan hikmah shaalat fardhu .pdfkeutamaan dan hikmah shaalat fardhu .pdf
keutamaan dan hikmah shaalat fardhu .pdf
 
2024 - PSAJ PAI SMK Kisi-kisi Utama.docx
2024 - PSAJ PAI SMK Kisi-kisi Utama.docx2024 - PSAJ PAI SMK Kisi-kisi Utama.docx
2024 - PSAJ PAI SMK Kisi-kisi Utama.docx
 
MATERI PESANTREN KILAT RAMADHAN AQIDAH ISLAM.pptx
MATERI PESANTREN KILAT RAMADHAN  AQIDAH ISLAM.pptxMATERI PESANTREN KILAT RAMADHAN  AQIDAH ISLAM.pptx
MATERI PESANTREN KILAT RAMADHAN AQIDAH ISLAM.pptx
 
materi pondok romadon sekolah dasar dengan materi zakat fitrah
materi pondok romadon sekolah dasar dengan materi zakat fitrahmateri pondok romadon sekolah dasar dengan materi zakat fitrah
materi pondok romadon sekolah dasar dengan materi zakat fitrah
 
Menyiapkan Guru Masa Depan yang Bagus da
Menyiapkan Guru Masa Depan yang Bagus daMenyiapkan Guru Masa Depan yang Bagus da
Menyiapkan Guru Masa Depan yang Bagus da
 

HTML Dasar I

  • 2. HTML adalah…  Bahasa yang digunakan untuk membuat dokumen hypertext yang bebas platform Atau bisa kita imajinasikan, HTML adalah “kerangka/tengkorak” sebuah sistem/aplikasi File HTML memiliki ekstensi .html. Dan dijalankan dengan browser
  • 3. Aturan Penulisan  Ada karakter khusus dalam HTML yang disebut tag Tag tersebut ada tag buka (<>) dan tag tutup (</>) HTML hanya akan membaca data dari tag <html> sampai tag </html> saja Dan isi dari data HTML hanya boleh di tempatkan di tag <body> sampai tag </body> saja
  • 4.  Tes1.html Tes2.html <html> <body> Ini badan HTML </body> </html> <html> <body> Ini badan HTML </body> Di luar badan HTML </html> Diluar HTML
  • 5. Coba! “  Save as : coba1.html, tulis di notepad <html> <head> <title>Judul HTML, suka tampil di tab browser</title> </head> <body> Badan HTML, disinilah tag-tag HTML dituliskan. By the way, tag head di atas itu apa? Itu kepalanya HTML. Apa fungsinya? Nanti dia menghasilkan apa? Biasanya disana tempat untuk Javasript dan CSS (monggo di googling kalo kepo). Terus tag title didalam tag head itu apa? Itu untuk memberi judul apa sih isi dari HTML kita. Mau pakai tag head dan title atau tidak, tidak masalah </body> </html>
  • 6. No Copas !!!  Ketik sendiri Dan rasakan sensasinya Tahukah kalian, salah satu cara mengingat sesuatu itu adalah dengan melihat dan mencoba/menyentuh sesuatu. Dengan kita mengetik contoh-contoh HTML, otak kita sedang menyimpan apa saja tag HTML yang kita ketik. InsyaAllah akan lebih lama ingat dibandingkan cuma sekedar melihat tapi tidak mencobanya. Jangan lupa! Save as atau HTML file (.html)
  • 7.  Silahkan eksplorasi Ganti kata-katanya, coba Tulis kalimat di luar tag html, head ,body Bagaimana hasilnya?
  • 8. Heading  Heading Nilainya dari 1 sampa 6. Digunakan untuk judul HTML (bedakan dengan title. Heading ada di dalam browser, title ada di tab browser) Garis Horizontal Digunakan untuk membuat garis horizontal. Tag yang satu ini tidak punya tag penutup
  • 9. Coba! “  <html> <head> <title>Heading dan garis</title> </head> <body> <h1>Gila! Gede banget</h1> <h2>Wuih! Gedeeee!</h2> <h3>Wow. Gede.</h3> <h4>Ya standarlah ukurannya!</h4> <h5>Hmm, kecil juga yah</h5> <h6>Ih kecilnya cimit cimit! >< </h6> <br/></br> <hr size=10 width="60%" align="center" color="yellow"> <hr size=10 width="50%" align="center" color="orange"> <hr size=10 width="40%" align="center" color="red"> <hr size=10 width="30%" align="center" color="pink"> <hr size=10 width="20%" align="center" color="silver"> <hr size=10 width="30%" align="center" color="pink"> <hr size=10 width="40%" align="center" color="red"> <hr size=10 width="50%" align="center" color="orange"> <hr size=10 width="60%" align="center" color="yellow"> </body> </html>
  • 10. Peraturan HTML!  HTML tidak mengenal ENTER Saat kita menulis : <html> <head> <title>Judul HTML, suka tampil di tab browser</title> </head> <body> Balonku ada lima Rupa-rupa warnanya Hijau kuning kelabu Merah muda dan biru </body> </html> Yang akan tampil di browser : Balonku ada limaRuparupa warnanyaHijau kuning kelabuMerah muda dan biru 
  • 12. Coba! “ 1. <html> <head> <title>Judul HTML, suka tampil di tab browser</title> </head> <body> Balonku ada lima <br/>Rupa-rupa warnanya <br/>Hijau kuning kelabu <br/>Merah muda dan biru </body> </html>  2. <html> <head> <title>Judul HTML, suka tampil di tab browser</title> </head> <body> <pre> Balonku ada lima Rupa-rupa warnanya Hijau kuning kelabu Merah muda dan biru </pre> </body> </html>
  • 13. Coba! “ 3. <html> <head> <title>Judul HTML, suka tampil di tab browser</title> </head> <body> Balonku ada lima <p/>Rupa-rupa warnanya <p/>Hijau kuning kelabu <p/>Merah muda dan biru </body> </html>  Lihat hasilnya. Apa perbedaan dari setiap hasilnya. Apa bedanya tag-tag itu ya?
  • 14.  1. <br/> Tag “enter” yang sederhana. Hanya bisa men”enter” satu baris kalimat saja. Kalau kita ingin 100 kali “enter”, maka tulis </br> 100 kali 2. <pre></pre> Tag yang mengikuti apa yang kita ketik. Bahkan, kalau kita ingin meng”enter” 100 kali, cukup lakukan “enter biasa”. Maka secara otomatis <pre> akan mengikutinya 3. <p></p> Sebenarnya itu bukan untuk meng“enter”, tapi untuk membuat garis baru sebuah paragraf/memisahkan antar paragraf. Bukankah membuat paragraf baru berarti harus di enter juga kan? Tidak masalah pakai tag ini, tapi jarak antar barisnya cukup besar
  • 15. Format Teks dan Font  Tag Format Teks Untuk memodifikasi bentuk teks Pada umumnya ada bold, italic, underline, strike, supperscript, dan subscript Tag Font Untuk mengubah gaya, warna, ukuran tulisan
  • 16. Coba! “  <html> <head> <title>Heading dan garis</title> </head> <body> <b>BOLD</b> &nbsp; <i>ITALIC</i> &nbsp; <u>UNDERLINE</u> &nbsp; <s>STRIKECROSS</s> &nbsp; <big>BIG</big> &nbsp; <small>SMALL</small> &nbsp; <strong>STRONG</strong> &nbsp; <blink>BLINK</blink> &nbsp; <sub>SUBSCRIPT</sub> &nbsp; <sup>SUPPERSCRIPT</sup> &nbsp; <br/> <font face="papyrus" color="aqua"> <sup>Naik</sup> <sup>Naik</sup> ke puncak gunung </font> <br/> <font face="papyrus" color="fuchsia"> Tinggi tinggi sekali </font> <br/> <font face="papyrus" color="teal"> Kiri kanan kulihat saja </font> <br/> <font face="papyrus" color="silver"> Banyak <sub> pohon stroberi </sub> </font> </body> </html>
  • 17. Warna teks, ada 2 macam 1. Pakai nama warnanya Contoh orange, blue, maroon, cyan 2. Pakai kode warna Contoh #FFFFFF (putih), #000000 (hitam) #993399 (ungu gelap) <tont tace=“calibri” size=“7” color=“orange”> Jeruk makan jeruk </font> Catatan : Dianjurkan pakai kode warna karna warnanya lebih kaya. Kalau pakai nama warna, emang warna hijau sedikit biru apa namanya hayo? green little blue? <font color=“green little blue”> ?
  • 18. Untuk mendapatkan kode warna bisa dilihat di colorpicker Photoshop
  • 19. <img> Untuk memasukan gambar Coba ini ! <html> <head> <title>Gambar</title> </head> <body> <img src=“unikom.jpg”> </body> </html> Siapkan gambar, tempatnya 1 folder ya dengan file HTML anda Sudah di coba? Sudah lihat hasilnya? Coba edit ! <html> <head> <title>Gambar</title> </head> <body> <img src=“unikom.jpg” width=“100” height=“100”> </body> </html>
  • 20. Bagaimana?  Silahkan simpulkan sendiri bagaimana menurut anda. Sekarang tempatkan gambar di luar folder CTRL+X CTRL+V
  • 21. Coba! “  <html> <head> <title>Gambar</title> </head> <body> <img src=“../unikom.jpg”> </body> </html> Sudah di coba? Sekarang buat folder a, simpan gambar di folder a. Coba edit seperti ini <html> <head> <title>Gambar</title> </head> <body> <img src=“../a/unikom.jpg”> </body> </html>
  • 22.  Didalam folder a, buat folder b. Didalam folder b, buat folder c. Coba edit seperti ini <html> <head> <title>Gambar</title> </head> <body> <img src=“../a/b/c/unikom.jpg”> </body> </html> Silahkan disimpulkan Sendiri 
  • 23. Eksplorasi  Tag HTML itu ada banyak sekali jadi tidak mungkin dijelaskan satu persatu sisanya anda yang mengeksplorasi coba tulis script HTML dibawah ini dan lihat hasilnya ubah beberapa script HTMLnya can simpulkan bagaimana menurut anda
  • 24. 1. <html> <head> <title> AT&amp;T WorldNet Service</title> </head> <body bgcolor=“gray”> <p> <font face=“Arial”><b>Still have question?</b> In the United States, Call 1-800-WORLDNET (1-800-9675363). Outside the U.S. call 201WORLDNET (201-967-5363)</font> </br> </p> <p align=“left”> <font size=“1”> <sup>*</sup> Today card member may be liable for the first $50 of change as the card member notifies AT&amp;T Universal Card of the loss with in 24 hours and otherwise of <i>card member</i> or <i>authorized user</i> </font> </p> <p align=“left”> <font size=“1”> Copyright &copy; 1996 AT&amp;T. All right reserved. AT&amp;T WorldNet is a service mark of AT&amp;T </font> </p> </body> </html>
  • 25. 2. <html> <head> <title> AT&amp;T WorldNet Service</title> </head> <body bgcolor=“#663366”> <p align=“right”> <font size=“8” color=“red” face=“Times Roman”> Internet for everybody </font> </br> </p> <p align=“left”> <font face=“arial”> <b>Discover new ways</b> to stay in touch with the people, ideas, and information that are imortant for you. Make travel reservation anytime Day or night. Find out mutual fund are hot and which ones are not. Play games. Do research. Stay on top of current evants. Converse in our newsgroup, or keep in touch with e-mail. Armed with AT&amp;T WorldNet member directory, meeting new people and finding old friend is easy.<br/> Click <a href=“#signup”>here</a> to learn how to join the AT&amp;T WorldNet community</font> </p> </body> </html>
  • 26. 3. <html> <head> <title> Karakter Khusus </title> </head> <body bgcolor=“#3399cc”> <h1>Karakter Khusus</h1> <hr size=“5” width=“90%”> align=“center”> <pre> &lt; &gt; &amp; &ouml; &ntilde; &egrave; &quot; &cent; &pound; &yen; &copy; & reg; &deg; &frac14; &frac12; &frac34; &times; </pre> <hr size=“5” width=“90%”>
  • 27. Referensi Contoh-contoh latihan, dan tutorial dapat anda dapatkan Lebih banyak lagi di internet. Tutorial bahasa inggris lebih banyak dan lebih lengkap Anda bisa coba sambil melatih kemampuan bahasa inggris anda  Ilmukomputer.org Youtube.com (codeschool & jream) Slideshare.com
  • 28. Bisa karena terbiasa Terbiasa karena mau mencoba orang rajin tak berbakat akan mengalahkan orang cerdas yang tak serius