0% menganggap dokumen ini bermanfaat (0 suara)
27 tayangan17 halamanPengantar HTML
Belajar html
Diunggah oleh
Tung-tungHak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
27 tayangan17 halamanPengantar HTML
Belajar html
Diunggah oleh
Tung-tungHak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF atau baca online di Scribd
/ 17
Pengantar HTML
CSS, dan PHP
See) 3-1 HTML sebagai Bahasa Dasar untuk
Sogh eo is | Berkomunikasi dengan Internet
eae a ene
Jika Anda sudah terbiasa dengan HTMI, tulisan di subbab ini boleh
‘Anda lompati atau Anda baca secara cepat, Namun, bagl yang belum
terbiasa dengan HTML, inlah saataya untuk mengenalinya.
Soto
ew HTML (Hypertext Markup Language) adalah bahasa yang digunakan
Coe
epee untukmembuattamplan dialaman Web, Versiyangsoatiniigurakan
eee ‘adalah HTMLS, Contoh skrip HTML ditunjukan di bawah ii:
& skrip: sensor hem!
Sfnoaae
Shieal
Rios
Skrip ini dapat ditulis dengan menggunakan sebarang editor teks
(misalnya Notepad++). Sebagai contoh, file tersebut disimpan di
folderC: \web dengan nama sensor . htm], Anda bisa memanggit
{filetersebut di barisalamat di sebarang browser dengan mengetikkan:
C1\wob\sensor-neml 20 _Dosor Pemrograman intemet untuk Proyek Berbass Arduino
Browser pun akan meneremahkan skip tersebut menjaditampilan yang dtunjukkan pada g,
ambay
B-omy
€ 9) © \ filey/Cywebysensor. htm! Sim
ha
1) Pemantan Sua dan Ke
SAUBAR3.1. Hasil sensor. htm! dithat di browser
‘krip HTML mengandung sejumlah tag yang dinyatakan dalam tanda <>. Setiap tag mempunyaimain,
tersendi. Tulsan yang terhat di browser adalah tulisan yang berada di pasangan dan)
body>. Teks deg; menyatakan simbol dan «#37; menyatakan tanda %
3.2 Dasar HTML
Kunci penting dalam memahami kode HTML adalah memahami fungsi tag. Berdasarkan contoh g
depan, , , dan adalah contoh tag. Tag menyatakan elemen dalam HTML
Dalam halini html, head, dan body adalah contoh elemen dalam dokumen atau skrip HTML dengan
html berkedudukan sebagai elemen tertinggi atau disebut akar.
Berikut adalah penjelasan singkat makna tag yang terdapat pada sensor. html.
1. _Sebuah dokumen HTMILS diawali dengan .
2. Pasangan tag dan mengawali kode HTML. Di dalamnya terdapat pasangin
dan serta dan .
3. Pasangan dan mengawali halaman web. Pasangan tag dan <
‘titLe> digunakan untuk memberikan judul halaman web, yatu yang terletak oi bagian ters
jendela browser.
4. Pasangan dan merupakan bagian yang menyatakan isi halaman web. Bain
inilah yang mencantumkan informasi yang ditujukan ke pengunjung. Bagian ini dapat mengansune,
banyak tag. Namun, pada contoh hanya terdapat satu tag, yakni
. 5. Tag
tidak punya pasangan. Kegunaannya adalah untuk memindahkan bars. Tidak banyak jens tag yang diibatkan di sensor . htm]. Oleh karena tu, akan diperkenalkan sejunsh tag isin. Tabel 3.1 memberikan cingkasan mengenai sejumiah tag penting yang perludipahami dal skrip HTML. Tag,tag yang dibahas ini diletakkan di dalam pasangan dan . AB 3 Pengantar HIML, C88, don PHP 2A TWSEL3.1_ Daftar sojumiah tag dasar yang perl dketahuliht> Taq ii digunakan untuk membuat judul. Slain
. erdapat pula
e ea>
shoe n>
sen ee
Sense <>
Senge nee
Makin Besar angka yang teftak sesudah h ukuran
udu makin ke
Digunakan untuk mendetniskan satu divs. Satu de
Ws dapat dibayangkan sabaga sejumish paragra
Digunakan untuk menyatakan satu paragrat
<> Untuk membuat gars horizontal
![]()
), propert-properti C3S memunghinkan
untuk mengatursfatsfat di ist. :
PPenggunaan style untuk mengatur suatu elemen HTML memiliki format seperti berikut
nanaselektor (
anaProperti: ilats
Sebagai contoh, Anda
body (
font-family + verdana;
color: white;
background-color: black;
,
Pada contoh tersebut,
‘mendefiniskan style untuk elemen body seperti berikut:
body adalah nama selektor,
bagian yang berada dalam tanda { dan } adalah baglan deklarasi properti,
font-family, color, dan background-color menyatakan nama propert,
verdana adalah nilai untuk properti font-family, dan
white adalah nila untuk properti color, dan
black adalah nilal untuk properti background-color,
Gambar 3.4 memberikan penjelasan visual terhadap style datas 24 osor Pemogromaninemet untuk royok Berboss AGI
Ss
A i rerianal es tata
Gelert waiter =
ek fontlor sso
y Warne urauk
tauaan 4 Contoh sive dan penjelasannys
Sekarang, gabungkan style yang dibahas di depan ke dalam skrip HTML seperti beriku:
Stone
ay ¢
fnt-fansive verdana:
Scotavoupdscolors blacks
1
epsnyie>
‘Siipronancavan sensorc/nt>
Sdivseontoh int meninjukkan penggunaan
Sebereps, tag AEM unto
Senberiian ganbaran obra senulisan dan
Setinet feta,
Save
SGivptomperacars 92.006dag:6
‘GGivoratenbabans 70,00049%)
Sing arene poo?
Sooty
cinent>
Penggunsan Tage/tstle>
ean
Perhatikan, cara untuk menuliskan style CSS pada skrip i atas, yakni:
13 Pengantar HIM. C3S.don PHP 25
Pasangan tag diletakkan
4ielemen head. Hasil penambahan style ini dapat_-_ © owen * 2
ailhat pada Gambar 35. & > © Omsicrmerannt
Suatu style CSS dapat clletakkan pada filetersendi
Sebagai contoh, Anda bisa membuat ile dengan
ekstensi css seperti berikut:
‘Ahir sketsa caMBAR 2.5 Hasil pengaturan style CSS.
Selanjutnya, file CSS tersebut digunakan di skrp HTML dengan menuliskan kode seperti berikut:
atyleshest” href="eksternal.css">
juge pada elemen head, Perwujudan di skrip HTML adalah seperti berikut
5 Seen
fn Senaor
beberapa tag HTML untuk
enberikan ganbaran cara nenuliskan dan
erst
“dlvotemporatur: 32.004degrC
‘Saivokelenbaban: 70,0021377
ie
Jika yang Anda tuliskan sudah benar, akan diperoleh hal seperti terlihat di Gambar 3.6 ketika Anda
memanggil tag3. html, arduino
26 pore: Pemvograman inte!
wc sh) ASS
dang, selektor YAN.
selettor yong sigunakan dl dalam 21" style [seers eo
ferkat
perupa nama elemen HTML: Te i
digunakan berupa nama Kelas Ya" igunakan pad a
iereniah elemen HTML, Hal nt an62t pemanteat Sian
wratuk memformat sejumlah efemen Yon berkelas soma. aR
Namakelasdalamelemen HTMLattusdenan
menggunakan a
atribut class, contohnva .
vunjukkan pemberian Kelas Pa
pedi
.da elemen
‘conto int men
. 5. Tag
tidak punya pasangan. Kegunaannya adalah untuk memindahkan bars. Tidak banyak jens tag yang diibatkan di sensor . htm]. Oleh karena tu, akan diperkenalkan sejunsh tag isin. Tabel 3.1 memberikan cingkasan mengenai sejumiah tag penting yang perludipahami dal skrip HTML. Tag,tag yang dibahas ini diletakkan di dalam pasangan dan . AB 3 Pengantar HIML, C88, don PHP 2A TWSEL3.1_ Daftar sojumiah tag dasar yang perl dketahul
[0 emtvtcorions at
Cer
Selektor Kelas
{UNBAR3.7 Has penggunaan selektor Kelas
CATATAN, S272 set ur cS yang ise ana plan Untuk endl, Anda bie
‘membaca buku penulis yang berjudul "Belajar Sendiri Past Bisa C353"
3.4 PHP
PHP merupakan salah satu bahasa pemrograman untuk membuat halaman web. Untuk mempraktikkan
kr PHP, Anda perlu menggunakan web server. Untuk keperluan ini, Anda perlu menginstal perangkat
lunak seperti XAMPP, yang dapat diunduh di
b jends.org/download.html
(008. apachet:
Setelah mengunduhnya, instal perangkat lunak ini Sampal Anda menjumpai tampilan seperti terliat
pada Gambar 3.8.
8 sat esata 8 =
[Ere conse Panetva22 a
4MB4R 2.8 Panol pongontrol XAMPP 28 Doxor Pemrograman intemet untuk Provek Berbasis AKGUINP
tik pada tombot [Saal] yang terltak ai Kanan tullsan Apache sehingga judul tomboy
beri
stop’ Dengan cara sepert itu, webserver Apache telah diaktifan a,
menjadi
Tada Kesempatan lan, ka Anda ign mengontol Control panel tersebut (ae
CATATAN Sisctonangam onl seer beri :
1. Klik pada posisi berikut pada task bar:
2. Klik pada possi berikut:
SetelshAnda menginstlXAMPR,
pada drive C: akan terdapat_ | O°"
folder bernama xampp. Di dalam iO aiee 7
folder ini terdapat subfolder [une
bernama htdocs. Subfolder
inilh yang digunakan untuk :
meletakkan dokumen/skrip XAMPP Apache + MariaDB +
fc, map yg =
boleh diakses melalui browser. P Hi EY Perl
127.0.0.1
‘Alamat ini menyatakan alamat
web server di komputer Anda.
Jika tak ada kesalahan, Anda Welcome to XAMPP for Windows 7.0.9
akan menjumpai hasil seperti
terlhat pada Gambar 3.9
Fite ue ele ig: | emmroapescstoe
Scan fe poneteE
ig hose bana |
Xe sald i alu, gan | acecccectnaen ta
menggunakan browser apa saja, "9" yr Goes cen
ieiieet abo Oe
Community
Contribute to XAMPP translation at translate. apacheftien
org.
ame
3.9 Halaman utama web server BABS Pengantor IML, C38, don PHP 29
Grmaaany
© > (0 nro
| Fee i200
eat 7000
{ANBAR 3.10. Hasil pemanggian skrip sensor-html. yang dletakkan di web server
Selanjutnya, akan mencoba skrip PHP. Buatia skripberikut dengan menggunakan editor teks apa saja
dan simpanlah ke xampp/htdo
Bi seprtesaktupn 5
‘ @ [OMB Vn
Hm 26102016 |
{HMBER3.11- asi pemanggjlanskrip PHP
Tanggal yang ditampilkan pada browser akan bergantung pada tanggat Anda menguf skip. Itulah
salah satu kelebihan skrip PHP dibanding kalau hanya menggunakan HTML. Skrip PHP diawal dengan:
efnead>
ebay?
me
echo date ("e
e/ntel>
ia ee
Hasiinya ditunjukkan pada Gambar 3.12.
x07
5 -ons
Te
9 © Owo0tra
am 26102016
{ANBAR 3.12 Hasil pemanggilan skrip yang menggabungkan HTML dan PHP
CATATAN ‘ean bermakaud mendalam PHP, Anda bisa membaca buku penulisyang beth!
"Dasar Pemrograman Web Dinamis Menggunakan PHP".
3.5 Formulir di HTML
web ke we?
Formulir biasa digunakan untuk mengirimkan data yang diketik pemakai di halaman
alse?
‘server, contohnya nama yang dimasukkan oleh pemakai dikirim ke server. Untuk mencoba
ini, Anda perlu menyiapkan skrip PHP seperti berikut terlebih dahulu: BABS Pengantor HIML. CSS, dan PHP 341
$s rengantar ri. cs. can rr? 34
";
dan
echo “Usia: Susiacbr>"?
Pernyataan pertama mula-mula menampilkan string *Nama Anda:" dan cikuti dengan nia
‘Snama serta tag
. Tag terakhir in digunakan untuk memindahkan ke baris berikutnya. Untuk mengufiskrip PHP ini, Anda bisa mengetikkan di baris URL milk browser seperti berikut: 127.0.0.1/bacanana.php?nana-andikasusia-20 ‘Maka, Anda akan mendapatkan hasi di halaman web seperti yang diperinatkan pada Gambar 3.13. B-om (Gmina = [© > © [0 rrpoirsasniynana-aatna 2 | Nasa de Anta AMAR 3.13. Hasi pengujan skip bacadata. php Itulah kelebihan metode GET, Anda bisa melewatkan nama varabel dan nilainya dengan format semacam: nanamandika ostanid Dalam hain tanda""clletakkansesudah namaskrip PHP dan & memisahkanpasangan var iabel=nama, Sekarang, Anda bisa melengkapiformulir yang melewatkan nama dengan metode GET. Berikutskripnya: 32 _ Dosa: Pervogroman Intemet untuk Proyek BerbosisArdWIno Bi Skripsformutirhtim!
prety
head
input (
Sisplay: 2
epneac
rpacadata.php” method~"get
pubnit” valuee"Ririn">
Epneal>
‘Suatu formulir akan diawali dengan tag <£orn> dan diakhiri dengan . Atribut yangbas
isertakan di tag
. Tag terakhir in digunakan untuk memindahkan ke baris berikutnya. Untuk mengufiskrip PHP ini, Anda bisa mengetikkan di baris URL milk browser seperti berikut: 127.0.0.1/bacanana.php?nana-andikasusia-20 ‘Maka, Anda akan mendapatkan hasi di halaman web seperti yang diperinatkan pada Gambar 3.13. B-om (Gmina = [© > © [0 rrpoirsasniynana-aatna 2 | Nasa de Anta AMAR 3.13. Hasi pengujan skip bacadata. php Itulah kelebihan metode GET, Anda bisa melewatkan nama varabel dan nilainya dengan format semacam: nanamandika ostanid Dalam hain tanda""clletakkansesudah namaskrip PHP dan & memisahkanpasangan var iabel=nama, Sekarang, Anda bisa melengkapiformulir yang melewatkan nama dengan metode GET. Berikutskripnya: 32 _ Dosa: Pervogroman Intemet untuk Proyek BerbosisArdWIno Bi Skripsformutirhtim!
