< Hallo World />

@dikyarga

www.DikyArga.com

@riya_flames

Umriya Afini

fb.com/MaulanaIkhsan

Tak kenal maka ....

Kenalan

Materi - Pengenalan

  • HTML5

  • CSS3

  • JavaScript [ JS ]

  • PHP5

  • Konsep Front-End dan Back-End

  • Gambaran Proyek Akhir

H

T

M

L

iper

ext

arkup

anguage

doscom.org/university

Versi 4 - 1997

Versi 5 - 2008

sumber : www.xmcl.org/

Didukung banyak browser dan diberbagai perangkat

Fitur HTML5

  • Video dan Suara

  • Vector Graphic and Animation

  • Drag and Drop

Ayo Ngoding :*

* Contoh Sintaks HTML5

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>

<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

HTML Tag

<namatag>konten</namatag>

Tag Kosong

<br/>

Misal :

HTML Tag

Heading (Judul) : <H1> sampai <H6>

<h1>Ini judul I</h1>
<h2>Ini judul II</h2>
<h3>Ini judul III</h3>

Paragraf : <p>

<p>ini paragraf</p>

Link : <a>

<a href="doscom.org"> Kunjungi Website Doscom </a>

HTML Tag

Gambar : <img>

<img src="doscom-logo.png" alt="Logo Doscom" width="100" height="120">

Paragraf : <p>

<p>ini paragraf</p>

Link : <a>

<a href="doscom.org"> Kunjungi Website Doscom </a>
* src (source) ** alt (alternative)

Atribut HTML

  • Berisi tambahan informasi elemen tag
  • Format penulisan : nama = "nilai"

Lang Attribute

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Penggunaan Quote

Pakai "dua petik" atau 'satu petik' ?

<p title="Doscom 'Keren' Banget">
<p title='Doscom "Keren" Banget'>

/

Tabel : <table> 

<table border="1" style="width:100%">
  <tr>
    <td>Diky</td>
    <td>Arga</td> 
    <td>19</td>
  </tr>
  <tr>
    <td>Umriya</td>
    <td>Afini</td> 
    <td>20</td>
  </tr>
</table>

<tr> : Table Row 

<td> : Table Data

<th> : Table Headings

 

List

Unordered List

Ordered List

Description List

  1. Mahdan
  2. Eko
  3. Anis
  • Bowo
  • Alfin
  • Setyadi

Item Pertama

Deskripsi item

Item Kedua

Deskripsi item

List

Ordered List

  1. Mahdan
  2. Eko
  3. Anis
<ol type="1">
  <li>Mahdan</li>
  <li>Eko</li>
  <li>Anis</li>
</ol>

<ol> : Mendefinisikan Ordered List

<li> : List Item 

Type yang bisa dipakai : "1", "A", "a", "I", dan "i"

 

List

Unordered List

  • Bowo
  • Alfin
  • Setyadi
<ul style="list-style-type:circle">
  <li>Bowo</li>
  <li>Alfin</li>
  <li>Setyadi</li>
</ul>

<ul> : Mendefinisikan Unordered List 

<li> :  List Item

style yang bisa dipakai : circle, disk, square, dan none.

List

Description List

Item Pertama

Deskripsi item

Item Kedua

Deskripsi item

<dl>
  <dt>Teh</dt>
  <dd>- Minuman nikmat dari pucuk daun teh</dd>
  <dt>Kopi</dt>
  <dd>- Minuman paling enak buat temen ngoding ato ngambar</dd>
</dl>

<dl> : Mendefiniskan Description List

<dt> : Description Term (Nama)

<dd> : Data Description

List Bersarang

<ul>
  <li>Kopi</li>
  <li>Teh
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
      <li>Jasmine tea</li>
    </ul>
  </li>
  <li>Susu</li>
</ul>
  • Kopi
  • Teh
     

 

 

  • Susu
  • Black tea
  • Green tea
  • Jasmine tea

Dalam List terdapat List lagi

Formulir : <form>

<form action="nama.php">
First name: <input type="text" name="namadepan">
<br>
Last name: <input type="text" name="namabelakang">
<br><br>
<input type="submit" value="Kirim">
</form>

action : memanggil file yang dikenai ketika form di Submit

<input> : Menampilkan field imputan,

type : text / radio (pilihan) / submit (tombol) ,

name : nama variabel yang dimasukin via form tersebut.

value : nilai yang di kirim ketika tombol ditekan.

<select> element [ Dropdown ]

<select name="tealinus">
<option value="jasmine">Jasmine Tea</option>
<option value="green">Green Tea</option>
<option value="black">Black Tea</option>
<option value="white">White Tea</option>
</select>
<select name="tealinus">
<option value="jasmine">Jasmine Tea</option>
<option value="green">Green Tea</option>
<option value="black" selected>Black Tea</option>
<option value="white">White Tea</option>
</select>

Detail - HTML5

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
  <option value="Firefox">
  <option value="Firefox Developer Edition">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 
</form>

<textarea> element

<textarea name="pesan" rows="10" cols="30">
Contoh isi pesan
</textarea>

C

S

S

ascading

tyle

heet

HTML :

Kerangka 

CSS :

Penghiasnya

Sintaks CSS

H1 {
    color: blue;
    font-size=12px;
}
p {
    color: red;
    /* Ini komentar satu baris */
    text-align: center;
}

/* ini untuk 
komentar 
banyak baris */

Komentar Dalam CSS :

ID Selector

#doscom {
    text-align: center;
    color: red;
}

CSS Code :

<h1 id="doscom">
    Doscom University Keren
</h1>

HTML Code :

Class Selector

.besar {
    font-size:30px;
}

CSS Code :

<h1 id="doscom" class="besar">
    Doscom University Keren
</h1>

HTML Code :

CSS Code :

p.besar {
    font-size:30px;
}

HTML Code :

<p class="besar">
    Doscom University Keren
</p>

Grouping Selector

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
h1, h2, p {
    text-align: center;
    color: red;
}

3 Cara memasukan kode CSS

  1. External Style Sheet

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

index.html

body {
    CSS code
}

style.css

3 Cara memasukan kode CSS

2. Internal Style Sheet

index.html

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

3 Cara memasukan kode CSS

2. Inline Styles

index.html

<h1 style="color:blue;margin-left:30px;">Doscom Keren</h1>

Multiple Style Sheets

h1 {
    color: navy;
    margin-left: 20px;
}

Eksternal CSS

Inline CSS

h1 {
    color: orange;    
}
color: orange;
margin-left: 20px;

<H1>

Multiple Style Sheets

  1. Browser default (bawaan)
  2. External style sheet
  3. Internal style sheet (dalam <head>)
  4. Inline style (dalam elemen HTML)

Urutan Prioritasnya :

CSS Background

Didalam Background kita bisa lakukan :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS Background

background-color :

body {
    background-color: #b0c4de;
}
  • HEX : "#ff0000"
  • RGB : "rgb(255,0,0)"
  • Nama Warna : "red"

Jenis nilai yang bisa dimasukan

PHP: Hypertext Preprocessor

  • Open Source (Gratis dan Bebas) 

  • Server side

  • Berjalan di banyak platform 

  • Mendukung web server (Apache, IIS, dll)

Taukah kamu ?

Pake PHP

Apa yang bisa di Lakukan PHP ?

  • Membuat Halaman Web secara Dinamis
  • Tambah, Edit, Delete data di Database
  • Mengkontrol User-access
  • Mengengkripsi Data
  • Membuat, Membuka, Melihat, Menulis, Menghapus File di Server.
  • .....

Sintaks Dasar PHP

<?php 
Taruh kodemu disini
?>

Simpan dengan ektensi .php ,

letakan file di folder htdocs (Server side).

<!DOCTYPE html>
<html>
<body>

<h1>Hi Doscom</h1>

<?php
echo "Hello Doscom!";
?>

</body>
</html>

index.php

echo : Mencetak ke layar

akhiri setiap statment dengan " ; "

Komentar di PHP

<!DOCTYPE html>
<html>
<body>

<?php
// Komentar 1 baris

# Ini juga komen satu baris

/*
Nah kalo ini bisa koment banyank baris
Fungsi komen adalah untuk dokumentasi
buat kita sendiri maupun orang lain
yang membaca koding kita.
*/

// bisa juga disisipkan ditengah statment
$x = 5 /* + 15 */ + 5;
echo $x;
?>

</body>
</html>

Case Sensitivity PHP

Di PHP kata kunci dalam pemprograman, seperti  if, else, while, echo, dll.

Tidak (Not) case sensitive

<?php
ECHO "Eko Edogawa<br>";
echo "Kahitna<br>";
EcHo "Hamdan<br>";
?>

tapi, 

Kalo variabel, dia Case Sensitive

<?php
$warna = "Biru";
echo "Langit berwarna " . $warna . "<br>";
echo "Rumahku berwarna " . $wARnA . "<br>";
echo "Mobilku berwarna " . $WARNA . "<br>";
?>

Selanjutnya kita bakal belajar Variabel .....

Client Server

Web Server

Request doscom.org

Sent html files

Proyek Akhir

My Todo's

< Terimakasih />

 Slides.com/dikyarga

Made with Slides.com