Senin, 21 Mei 2018


BSI Purwokerto-Belajar Membuat Web (part 6)

PERCABANGAN PHP
====================================

1.Percabangan IF,yaitu mengeksekusi tindakan bersyarat jika satu kondisi terpenuhi/benar.
Struktur Percabangan IF:

if(kondisi){
pernyataan;
}

Contoh kode Percabangan IF:
-Buatlah sebuah folder baru dalam htdocs dengan nama:percabangan
-Buat file di dalam folder percabangan dengan nama:
latihanif.php,lalu isikan coding dibawah ini:

<?php
$x=10;
if($x>9)
{
echo"Benar bahwa x>9";
}
?>

<?php
$nama="dawen";
if($nama=="dawen"){
echo"Dawen adalah teman saya";
}
?>










2. Percabangan Else IF,yaitu mengeksekusi tindakan bersyarat jika kondisi pertama tidak terpenuhi dan dipenuhi dengan kondisi berikutnya.

Struktur percabangan Else IF:
if(kondisi1){
pernyataan1;
pernyataan2;
}
else if(kondisi2){
pernyataan1;
pernyataan2;
}

Contoh kode Percabangan Else IF:
-Buatlah file di dalam folder percabangan dengan nama:
latihanelseif.php,lalu isikan coding dibawah ini:

<?php
$nama="dawen";
if($nama=="dawen"){
echo"dia adalah teman saya";
}else if($nama=="sasi"){
echo"dia bukan teman saya";
}
?>





3. Percabangan Else ,yaitu mengeksekusi tindakan bersyarat jika semua kondisi tidak terpenuhi,sehingga kondisi terakhir (Else) yang akan di eksekusi.

Struktur Percabangan Else:
if(kondisi1){
pernyataan;
}
else if(kondisi2){
pernyataan;
}
else{
pernyataan;
}

Contoh kode percangan Else:
-Buat file di dalam folder percabangan dengan nama:
latihanelse.php,lalu isikan coding di bawah ini:

<?php
$nilai=7;
if($nilai>8){
echo"Anda dapat Grade A";
}else if($nilai>6){
echo"Anda dapat Grade B";
}else{
echo"Anda dapat Grade C";
}
?>

<?php
$nama="daina";
if($nama=="daina"){
echo"dia adalah teman saya";
}else if($nama=="sasi"){
echo"dia saudara saya";
}
else{
echo"dia bukan siapa siapa";
}
?>






SWITCH-CASE
===========================
Struktur kode:

switch(variabel){
case"kodisi1";
pernyataan;
break;
case"kondisi2";
pernyataan;
break;
default:
pernyataan;
}

Contoh Script Percangan Switch PHP:
-Buatlah sebuah folder baru di dalam htdocs dengan nama:switch
-Buat file di dalam folder switch dengan nama:switchcase.php lalu isikan coding dibawah ini:

<?php
$bahasa="php";
switch($bahasa){
case"basic":
echo"Ini adalah Basic";
break;
case "php":
echo"Ini adalah PHP";
break;
default:
echo"bukan bahasa pemrograman";
}
?>

PERULANGAN (LOOPING)
===============================

Macam-macam perulangan di PHP:
1. While
2. Dwo while
3.For
4.Foreach

========================================
1.While
Struktur kode:

while(kondidi benar){
pernyataan;
}

Contoh:
-Buat folder di dalam htdocs dengan nama:perulangan
-Buat file di dalam folder perulangan dengan nama:while.php,lalu isikan coding dibawah ini:

<?php
$x=1;
while($x<=5){
echo"Nomor$x<br/r>";
$x++;
}
?>

2. Do While
Struktur Kode:

do{
pernyataan;
}
while(kondisi);

Contoh:
-Buat file dalam folder perulangan dengan nama:dowhile.php
<?php
$x=1;
do{
echo"Nomor$x<br/>";
$x++;
}
while($x<=5);
?>





3. Perulangan For
for(nilai_awal;syarat;bil_pencacah){
pernyataan;
}

Contoh:
-Buat file di dalam folder perulangan dengan nama:for.php

<?php
for($x=1;$x<=9;$x++){
echo"Nomor$x<br/>";
}
?>






4. Perulangan Foreach(ARRAY)

Struktur kode:

foreach($array as $value){
pernyataan;
}

Contoh:
-Buat file di dalam folder perulangan dengan nama:foreach.php

<?php
$merk_mobil=array('Honda','Suzuki','Daihatsu');
foreach($merk_mobil as $value){
echo"$value<br/>";
}
?>

Minggu, 29 April 2018


BSI Purwokerto - Belajar Membuat Web (part 5)

1. Masuk folder htdocs
2. Buat folder dengan nama website_2f



3. Didalam folder website_2f buat folder css dan file dengan nama index.html
disimpan dalam folder website_2f



contoh coding/struktur data index.html

<html>
<head>
<title>Membuat layout WEB responsive sederhana HTML dan CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>header</h2>
</div>

<div class="nav">
<a href="#">menu 1</a>
<a href="#">menu 2</a>
<a href="#">menu 3</a>
</div>

<div class="row">
<div class="content">
<div class="card">
<h2>Judul artikel</h2>
<h5>Rabu, 22 Februari 2018</h5>
<div class="img" style="height:200px;">Image</div>
<p>Deskripsi deskripsi</p>
</div>
</div>
<div class="sidebar">
<div class="widget">
<h2>Widget 1</h2>
</div>
<div class="widget">
<h2>Widget 2</h2>
</div>
<div class="widget">
<h2>Widget 3</h2>
</div>
<div class="widget">
<h2>Widget 4</h2>
</div>
</div>
</div>

<div class="row">
<div class="footer">
<h2>Footer 1</h2>
</div>
<div class="footer">
<h2>Footer 2</h2>
</div>
<div class="footer">
<h2>Footer 3</h2>
</div>
<div class="footer">
<h2>Footer 4</h2>
</div>
</div>

</body>
</html>







Hasil coding

4. Buat struktur data kemudian simpan dalam folder css dengan nama style



Struktur data syle

* {
box-sizing: border-box;
}

body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}

.header {
padding: 10px;
font-size: 40px;
text-align: center;
background: white;
}

.nav {
overflow: hidden;
background-color: #333;
}

.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.nav a:hover {
background-color: #ddd;
color: black;
}

.content {
float: left;
width: 75%;
}

.sidebar {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 10px;
}

.img {
background-color: #aaa;
width: 100%;
padding: 10px;
}

.card {
background-color: white;
padding: 10px;
margin-top: 10px;
}
.widget{
background-color: white;
padding: 10px;
margin-top: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}

.footer {
padding: 10px;
width: 25%;
text-align: center;
background: white;
margin-top: 20px;
display: inline-block;
float: left;
}


@media (max-width: 800px) {
.content, .sidebar,.footer{
width: 100%;
padding: 0;
}
}

@media (max-width: 400px) {
.nav a {
float: none;
width:100%;
}
}










Hasil coding





css (caasading style sheet)
1.insline css
2.internal css
3.eksternal css

INLINE CSS
berada dalam sebuah tag (method: style)
<p style="font-size:12px;color:red">
AMIK BSI PURWOKERTO
</P>

INTERNAL CSS
berada dalam satu halaman/file website
<style type="text/css>
p {
font-size:12px;
color:red;
}
</style>
<body>
<p>AMIK BSI PURWOKERTO</P>
</body>

EKSTERNAL CSS
-membentuk file tersendiri berekstensi (.css)
-pemanggil file css diantara tag <head>

<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>

p {
font-size"12px;
color:red;
}

h1 {
font-size:18px;
color: blue;
}

PHP=> Hypertext Preprocessor
PHP=> Server side (sisi server) / komputer
PHP=> Untuk pemrosesan data/manipulasi data

syntax php:

<?php -> tag pembuka
...... -> statement
?> -> tag penutup

Contoh penulisan syntax PHP:
-Buatlah folder baru di htdocs dengan nama "belajarphp"
-Buatlah file baru dengan nama "contoh.php" dan isikan di dalamnya:

<?php
echo "Ini adalah contoh penggunaan PHP";
?>


-Simpan dalam folder belajarphp & buka di browser





Variabel PHP

Penulisan variabel:
1.Diawali tanda dollar ($)
2.bersifat Case-sensitive
3.Pengisian nilai variabel menggunakan tanda sama dengan (=)

contoh penulisan variabel:
<?php
$nim=12173488;
$nama="Robin";
?>

-Buatlah sebuah file baru,dengan nama "latihan.php",isikan coding berikut:

<?php
$nim=12173488;
$nama="Robin";
echo "Halo! Nama Saya $nama";
echo "<br>";
echo "NIM saya $nim";
?>

-Simpan dalam folder belajarphp dan buka hasilnya di browser




Tipe Data PHP
-String
-Integer
-Float
-Boolean
-Array

Tipe Data String:
-berbentuk text,bisa angka/huruf/simbol
-diapit oleh tanda petik

Contoh tipe data string:

<?php
$coba="Nomor HP saya 0823454166";
?>

Tipe Data Integer:
-berbentuk angka,bilangan bulat
-tidak perlu diapit tanda petik

contoh tipe data integer:

<?php
$nilaiuts=90;
$nilaiuas=85;
?>

Tipe Data Float:
-berbentuk angka,bilangan desimal/pecahan
-tidak perlu diapit tanda petik

contoh:

<?php
$nilaiuts=80.55;
$nilaiuas=80.77;
?>

Tipe Data Boolean:
-hanya ada 2 nilai:false (salah) atau true (benar)

contoh:
<?php
$x = false;
$y = true;
?>

Tipe Data Array:
-menyimpan banyak nilai variabel

contoh:
<?php
$user=("joko","dwi","mulyanto");
echo $user[0];
?>

Manipulasi String pada PHP

strlen() =menghitung jumlah karakter
str_word_count() =menghitung jumlah kata
strrev() =membalikkan urutan karakter
str_replace() =mengganti kata

contoh:
-Buat file baru dengan nama: manipulasi.php
-Isikan codingnya:

<?php
$nama="Bina Sarana Informatika";
echo strlen($nama);
echo "<br>";
echo str_word_count($nama);
echo "<br>";
echo strrev($nama);
echo "<br>";
echo str_replace("Bina","Tempat",$nama);
?>

-Simpan dan lihat hasilnya di browser


Senin, 16 April 2018


BSI Purwokerto - Belajar Membuat Web (part 4)



Materi Pertemuan 5
#Membuat Form menggunakan tag <table>
1. Aktifkan XAMPP (Apache & MySQL)
2. Buat folder baru di htdocs dengan nama : web2f
3. Buat folder baru di dalam folder web2f dengan nama : webadmin
4. Buat file baru di dalam folder webadmin dengan nama : index.html
5. Ketikkan struktur dasar HTML d dalam file tersebut lalu Simpan
Seperti ini :
Htpp://localhost/web2f/webadmin/
Htpp://localhost/web2f/webadmin/index.html
Catatan :
Tag span <span>…..</span> dan <div>…..</div>
<div> dan <span> keduanya tidak memiliki maksud/tujuan
<div> = block-line (membuat blok/baris baru) <p>, <h1>
<span>= in-line (tidak mmembuat blok/baris baru) <b>, <i>, <u>
<div> sebagai pembatas (materi css) struktur web (header, menu, konten, sidebar, footer)
Buka notepad lalu ketikkan script berikut :
<html>
<head>
<title>Halaman Login Admin</title>
</title>
<body>
<div align="center">
<h2>LOGIN ADMIN</h2>
<table border="0" width="300">
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="tuser"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" name="tpass"></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="LOGIN" name="blogin">
</td>
</tr>
</table>
</div>
</body>


</html>




<html>
<head>
<title>Beranda - Website 2F</title>
</head>
<body>
<table align="center" border="0" width="900">
<tr>
<td height="90" bgcolor="aqua" align="center" colspan="2"</td>
<h1>SITUS RESMI KELAS 2F</h1>
</tr>
<tr>
<td height="35" bgcolor="yellow" align="center"colspan="2"</td>
<a href="index.html">BERANDA</a>
<a href="profil.html">PROFIL</a>
<a href="galeri.html">GALERI</a>


</tr>
<tr height="300">
<td bgcolor="snow" width="700" align="center"</td>
<p align="justify"</p>
<h4>Selamat Datang di website 2F</h4>
<td bgcolor="aqua" width="200" align="center"</td>
<h4>Komentar Baru</h4>
<p>Ini adalah komentar</p>
<h4>Buku Tamu</h4>
<p>Ini adalah buku tamu</p>
</tr>
<tr>
<td height="25" bgcolor="yellow" align="center" colspan="2"</td>
<p>Copyright 2018 - Situs Resmi 2F Dibuat oleh BSI</p>
</tr>
</table>
</body>
</html>









6. Buat file baru di dalam folder web2f dengan nama : index.html
7. Ketikkan struktur dasar HTML di dalam file tersebut lalu simpan
8. Buat file baru namanya : profil.html di dalam folder web2f, Copy semua coding di dalam file index.html ke dalam file profil.html
9. Buat file baru namanya : galeri.html di dalam folder web2f, Copy semua coding di dalam file index.html ke dalam file galeri.html
Script : <html>
<head>
<title>Profil - Website 2F</title>
</head>
<body>
<table align="center" border="0" width="900">
<tr>
<td height="90" bgcolor="aqua" align="center" colspan="2"</td>
<h1>SITUS RESMI KELAS 2F</h1>
</tr>
<tr>
<td height="35" bgcolor="yellow" align="center"colspan="2"</td>
<a href="index.html">BERANDA</a>
<a href="profil.html">PROFIL</a>
<a href="galeri.html">GALERI</a>


</tr>
<tr height="300">
<td bgcolor="snow" width="700" align="center"</td>
<p align="justify"</p>
<h4>Anda Berada di Profil website 2F</h4>
<td bgcolor="aqua" width="200" align="center"</td>
<h4>Komentar Baru</h4>
<p>Ini adalah komentar</p>
<h4>Buku Tamu</h4>
<p>Ini adalah buku tamu</p>
</tr>
<tr>
<td height="25" bgcolor="yellow" align="center" colspan="2"</td>
<p>Copyright 2018 - Situs Resmi 2F Dibuat oleh BSI</p>
</tr>
</table>
</body>
</html>




<html>
<head>
<title>Galeri - Website 2F</title>
</head>
<body>
<table align="center" border="0" width="900">
<tr>
<td height="90" bgcolor="aqua" align="center" colspan="2"</td>
<h1>SITUS RESMI KELAS 2F</h1>
</tr>
<tr>
<td height="35" bgcolor="yellow" align="center"colspan="2"</td>
<a href="index.html">BERANDA</a>
<a href="profil.html">PROFIL</a>
<a href="galeri.html">GALERI</a>


</tr>
<tr height="300">
<td bgcolor="snow" width="700" align="center"</td>
<p align="justify"</p>
<h4>Anda Berada di Galeri Website 2F</h4>
<td bgcolor="aqua" width="200" align="center"</td>
<h4>Komentar Baru</h4>
<p>Ini adalah komentar</p>
<h4>Buku Tamu</h4>
<p>Ini adalah buku tamu</p>
</tr>
<tr>
<td height="25" bgcolor="yellow" align="center" colspan="2"</td>
<p>Copyright 2018 - Situs Resmi 2F Dibuat oleh BSI</p>
</tr>
</table>
</body>
</html>




Sekian rangkuman materi pertemuan 5 tanggal 09 April 2018.

Minggu, 08 April 2018


BSI Purwokerto - Belajar HTML ( part 3 )




PERTEMUAN 4
Tag Form HTML
<form>…….</form>
Digunakan untuk pemrosesan


Di dalam tag <form> ada beberapa elemen pendukung seperti :
<input>,
<select>,
<option>,
<textarea>,dsb..


Attribute pad tag <form> :
1. Action = menuju link pemrosesan
Contoh : <form action=”proses.html”>
2. Method = get(mengambil nilai) atau post(mengirim nilai)
Contoh : <form method=”get”>
3. Enctype = encoding type, saat digunakan method post.
Contoh : <form enctype=”multipart/form-data”>
(multipart/form-data digunakan bila pemrosesan sebuah form mengandung file/gambar)
4. Name = penamaan form
Contoh : <form target=”FBiodata”>
5. Target = menetukan tempat setelah pemrosesan
Contoh : <form target=”_blank”>
(form akan membuka tab baru setelah pemrosesan)

Attribute tag <input>
1. Name = penamaan tag
2. Disable = menonaktifkan tag
3. Width = mengatur lebar tag (type: image)
4. Height = mengatur tinggi tag (type: image)
5. Size = lebar kolom inputan
6. Maxlenght = mengatur jumlah maksimum karakter
7. Placeholder = keterangan tex dalam tag
8. Required = tag harus diisi
9. Readonly = hanya bisa baca, tidak bisa dirubah
10. Value = isi/nilai dari tag
11. Type = tipe inputan
Contoh : <input type=”password>
Attribute type pada tag <input> : text, checkbox, file, submit, reset, password.


Berikut script dan hasil latihan membuat Formulir pada HTML :


<html>
<head>
<title>Contoh Formulir</title>
</head>
<body>
<h2>FORMULIR PENDAFTARAN</h2>
<form action="proses.html" method="post"
enctype="multipart/form-data" name="form_reg">
Nama Lengkap : <input type="text" name="nama_lengkap" size="30" maxlength="5" value="Saefur Rohman" required>
<br>
Jenis Kelamin :
<input type="radio" name="jekel" value="Pria"> Pria
<input type="radio" name="jekel" value="Wanita">Wanita
<br>
Hobi :
<input type="checkbox" name="hobi" value="Renang"> Renang
<input type="checkbox" name="hobi" value="Basket"> Basket
<br>
Foto :<input type="file" name="foto">
<br>
Status : <select name="status" size="1">
<option value="Menikah">Menikah</option>
<option value="Belum Menikah">Belum Menikah</option>
</select>
<br>
Alamat :
<textarea name="alamat" rows="5" cols="50"></textarea>
<br>
<br>
<input type="submit" value="SIMPAN" name="bsimpan">
<input type="reset" value="BATAL" name="bbatal">
</form>
</body>
</html>


Dan ini tampilannya :




Sekian rangkuman pertemuan 4 tanggal 2 April 2018 MK : Web Programing 12.2F.21, terima kasih.

Senin, 02 April 2018

BSI Purwokerto - Belajar HTML (Part 2)


PERTEMUAN 3 – 12.2F.21 26 MARET 2018
MEMBUAT TABEL MENGGUNAKAN HTML

TAG <table>
Struktur :
Tabel terdiri dari baris dan kolom
Dalam HTML :
<table> terdiri dari <tr> dan <td>/<td>
<tr> adalah table row (baris table)
<td> adalah table data (isi table)
<th> adalah table heading (judul kolom)
Contoh penerapannya sbb :


Ini artinya tabel terdiri dari 2 baris dan 2 kolom.
ATTRIBUTE HTML <table>,<tr>,<td>,<th>
Penulisan Attribute HTML :
<nama_tag nama_attribute=”isi_attribute”>
Contoh: <table width=”400”

Align = Perataan(center,left,right)
Contoh: <table align=”center”> rata tengah

Width = Lebar (satuan px/piksel/%)
Contoh: <table width=”500px”>
<table width=”30%”>

Border = Garis Tepi (satuan piksel/px)
Contoh: <table border=”5px”>

MENGUBAH WARNA TABEL
<tr (spasi) bgcolor=”grey”> = dalam satu baris (untuk warna bisa langsung menggunakan nama warna dalam b.inggris)
<table bgcolor=”grey”> (semua baris)

Cellspacing = jarak garis tepi dengan garis luar
Contoh: <table cellspacing=”2”>

Cellpadding= jarak garis tepi dalam dengan teks
Contoh : <table cellpadding=”2”>

Rowspan = menggabungkan baris
Contoh : <td rowspan=”3”>

Colspan = menggabungkan kolom
Contoh : <td colspan=”2”>

Target =”_blank” = agar tampilan menjadi di new tab
Title =”Halaman Percobaan”= untuk memunculkan tulisan ketika disorot.
Jika ingin menambahkan gambar, pastikan gambar tersebut berada pada folder yang sama dengan file.html Anda.


MEMBUAT HYPERLINK/LINK

Tag Anchor <a>……</a>
Attribute tag anchor
Href = referensi (alamat web/nama file)
Contoh : <a href=”index.html”>Home</a>
            <a href=http://bsi.ac.id/>Home</a>

Title = tooltip (muncul keterangan saat link di sorot)
Contoh : <a title=”Halaman Beranda”>Home</a>

MENAMPILKAN GAMBAR MENGGUNAKAN HTML
Tag Image <img>
Attribute tag image
Src= source (alamat gambar)
Title = tooltip muncul keterangan saat gambar disorot
Height = Tinggi
Width = Lebar
Alt = keterangan pengganti gambar tidak berhasil diload
Contoh : <img src=”mie ayam.jpg” title=”gambar mie ayam” height=”300” width=”500” alt=”gambar mie ayam”/>

Berikut ini cara penulisan dan hasilnya :


Untuk keterangan kegunaan scriptnya sudah saya jabarkan diatas




Sekian materi pertemuan 3 Web Programing.

Minggu, 25 Maret 2018

BSI Purwokerto - Belajar HTML (Part 1)



Materi Perkuliahan Mata Kuliah Web Programing Tentang HTML


Apa itu HTML? Mungkin pertanyaan inilah yang terbersit dalam benak kalian yang baru masuk ke dalam dunia web programming. HTML merupakan bahasa pemrograman dasar yang wajib dikuasai oleh seorang web developer, karena HTML merupakan unsur dasar dari pembangunan sebuah website. Jika diibaratkan, HTML menjadi pondasi pada sebuah rumah atau bangunan, karena bentuk pada halaman website dibuat dengan menggunakan HTML.


PENGENALAN HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh banyak orang di banyak Negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.


LANGKAH2 DASAR MENGOPERASIKAN HTML
Berikut langkah-langkah yang harus kita perhatikan : 


1. Tentu kita harus install Xampp terlebih dahulu.
2. Setelah terinstal, buka aplikasi Xampp Control Panel


3. Setelah terbuka kemudian klik tombol start pada bagian Apache dan MYSQL, fungsi keduanya nantinya adalah sebagai Server(Apache) dan Database(Mysql) 


4. Kemudian buka Windows Explorer
5. Masuk ke folder instalasi Xampp, biasanya ada di Local Disc C.
6. Masuk ke folder htdocs.
7. Hapus 2 file yang bernama index (index.php dan index.html)
8. Buka Web Browser (firefox,chrome dsb) pilih salah satu.
9. Ketikan di kolom url address bar “localhost” = c : /xampp/htdocs.
10. Buat folder baru bernama “lat1” di dalam folder htdocs.
11. Ulangi langkah ke 9, maka nanti folder lat1 akan muncul.
12. Buka Notepad ++/Notepad (bawaan dari windows), nah disinilah nanti kita membuat scriptnya.
13. Isikan di notepad, struktur dasar html, langsung ketik pasangannya beserta tag title : <title>……JUDUL…..</title> untuk judul (Terserah mau dikasih judul apa nantinya).
14. Simpan file tersebut ke dalam folder “lat1” dengn nama : percobaan.html


15. Ulangi langkah ke 9, pilih folder lat1, maka nanti muncul file percobaan.html, klik dan lihat hasilnya.

Demikian langkah-langkah sederhananya,semoga dapat dimengerti sebagai pembelajaran. 

Selanjutnya, mari kita bahas tentang struktur HTML, dan macam2 tag HTML

STRUKTUR DASAR HTML


<html>

<head> ... </head>

<body>


....................

</body>

</html>


CONTOH PENGGUNAAN SCRIPT HTML

<html>

<head>

<title>BSI Purwokerto</title> -----------------> Judul Web

</head>

<body>

Halo Apa Kabar? <br>

Mudah-mudahan kabarnya baik

</body>

</html>

TAG HTML
Tag adalah bagian dari struktur html yang dituliskan diapit oleh tanda < tag >, dan tag dituliskan berpasangan, dengan maksud < tag >-->tag pembuka dan < /tag > --> tag penutup.
• Contoh TAG HTML

<b>...</b> = huruf tebal (bold)

<i>...</i> = huruf miring (italic)

<u>...</u> = huruf garis bawah (underline)

<p>...</p> = paragraf

<marquee>...</marquee> = text berjalan

<br> = ganti baris/enter (break)

<hr> = garis horizontal (horizontal ruler)
Berikut contohnya :


TAG HEADING 
Biasanya digunakan untuk membuat judul pada halaman web, tag heading pada HTML terdiri dari 6 tingkatan yaitu yang terdiri dari h1,h2,h3,h4,h5,h6. Tag heading secara default di tampilkan oleh browser dengan huruf tebal (bold), tag heading yang paling besar adalah h1 dan yang paling kecil adalah h6.

<h1>...</h1> = Paling besar ukuran font nya

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6> = Paling kecil ukuran font nya

TAG BULLET & NUMBERING 

HTML mendukung beberapa format list, baik numbering List dan bullets List. 
Tag HTML Numbering List
Ada beberapa tipe Penomoran (numbering list) antara lain: 
type umum (default) dari Numbering adalah lambang bilangan (1,2,3,... dst)
Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>. 
Contoh:<ol>
<li>urutan ke-1</li>
<li>urutan ke-2</li>
<li>urutan ke-3</li>
<li>urutan seterusnya...</li>
</ol>
Hasilnya akan terlihat seperti ini:
Contoh: 
urutan ke-1 

urutan ke-2 

urutan ke-3 

urutan seterusnya... 
Ket: Tag ini selalu berpasangan 

Huruf romawi (I, II, III, ... atau i, ii, iii,... ),
Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="I"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
Contoh:<ol type="I">
<li>urutan ke-1</li>
<li>urutan ke-2</li>
<li>urutan ke-3</li>
<li>urutan seterusnya...</li></ol>
Hasilnya akan terlihat seperti ini:
Contoh:

urutan ke-1 

urutan ke-2 

urutan ke-3 

urutan seterusnya... 
Huruf Alfabet ( A,B,C,... atau a,b,c,...)
Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="A"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
Contoh:<ol type="I">
<li>urutan ke-1</li>
<li>urutan ke-2</li>
<li>urutan ke-3</li>
<li>urutan seterusnya...</li></ol>
Hasilnya akan terlihat seperti ini:
Contoh:

urutan ke-1 

urutan ke-2 

urutan ke-3 

urutan seterusnya... 
Tag HTML Bullet List
Ada beberapa tipe Bullet (bullet list) antara lain: 
Tipe Disc,
Penulisan Tag HTML nya( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
Contoh:<ul type="Disc"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
Hasilnya:
Contoh: 
urutan ke-1 
urutan ke-2 
urutan ke-3 
urutan seterusnya... 
Tipe Circle
Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
Contoh:<ul type="Circle"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
Hasilnya sbb:
Contoh: 
urutan ke-1 
urutan ke-2 
urutan ke-3 
urutan seterusnya... 
Tipe Square
Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
Contoh:<ul type="Square">
<li>urutan ke-1</li><li>urutan ke-2</li><li>urutan ke-3</li><li>urutan seterusnya...</li></ul>
Hasilnya sebagai berikut:
Contoh: 
urutan ke-1 
urutan ke-2 
urutan ke-3 
urutan seterusnya... 

Berikut contoh script an hasilnya :





Itulah sedikit ulasan mengenai HTML, semoga artikel ini bermanfaat ^-^















Senin, 12 Maret 2018

Ini merupakan pengalaman pertama saya membuat blog sekaligus sebagai Tugas Mata Kuliah Web Programing pada Semester 2 dengan Dosen Pengampu : Pak Fandi (FBF) Blog : IMANIAWAN.ID
Nama Saya sendiri Winda Tiani dengan Nim 12170294 kelas 12.2F.21 BSI Purwokerto

Jujur saya sendiri belum paham, tapi saya harap dengan adanya Mata Kuliah Web Programing pada Semester 2 ini bisa membuat saya lebih paham dan lebih berkembang.

BSI Purwokerto-Belajar Membuat Web (part 6) PERCABANGAN PHP ==================================== 1.Percabangan IF,yaitu mengeksekusi t...