Front-end
Development
Hypertext Markup Language (HTML)
PART I
APA ITU
FRONT-END ?
07/10/19 Frontend Designer - HTML 1
“
Frontend adalah sebuah bagian dari
website yang membuat tampilan yang
menarik kepada user
APA ITU
HTML ?
07/10/19 Frontend Designer - HTML 3
“
HTML (Hypertext Markup
Language) adalah sebuah
standar yang digunakan secara
luas untuk menampilkan
halaman web.
Kegunaan HTML
● Membuat struktur dari halaman website.
● Mengatur tampilan dan isi dari halaman web.
● Membuat tabel dengan tag HTML table.
● Membuat form HTML.
● Membuat gambar dengan canvas.
● Mempublikasikan halaman website secara online.
07/10/19 Frontend Designer - HTML 4
APA SAJA
HTML Editors ?
HTML Editors
07/10/19 Frontend Designer - HTML 5
Dokumentasi HTML
<! DOCTYPE html> mendefinisikan dokumen ini sebagai HTML5
<html> elemen root dari halaman HTML
<head> berisi informasi meta tentang dokumen
<title> menentukan judul untuk dokumen
<body> berisi konten halaman yang terlihat
07/10/19 Frontend Designer - HTML 4
Struktur Halaman HTML
<html>
<head>
<title> Title page html </title>
</head>
<body>
<div>
Content html
</div>
</body>
</html>
07/10/19 Frontend Designer - HTML 4
Contoh Halaman HTML
Content HTML
07/10/19 Frontend Designer - HTML 6
Contoh Tag HTML
Menggunakan tag div
<div>
Content HTML
</div>
07/10/19 Frontend Designer - HTML 6
Tag Heading & Paragraph HTML
Heading dibagi dari heading
1 sampai 6
<h1>Heading Satu</h1>
<h6>Heading Enam</h6>
<p>Paragraph</p>
07/10/19 Frontend Designer - HTML 6
Styling pada Paragraph HTML
<strong>membuat text lebih tebal</strong>
<em>penekanan pada text menjadi italic</em>
<s>membuat text dengan garis tercoret</s>
<br/>(line break, untuk membuat garis baru)
07/10/19 Frontend Designer - HTML 6
Styling pada Paragraph HTML
07/10/19 Frontend Designer - HTML 6
Tag Link HTML
<a href=”[Link]
website alterra
</a>
07/10/19 Frontend Designer - HTML 6
Tag Link HTML
Tag Link dengan membuka tab
baru
<a href=”[Link]
target=”_blank”>
website alterra
</a>
07/10/19 Frontend Designer - HTML 6
Tag Image HTML
<img
src=”[Link]”
/>
07/10/19 Frontend Designer - HTML 6
List HTML
Ada dua jenis List dalam HTML:
1. Ordered List adalah list yang berurut. ( <ol> )
2. Unordered List adalah list yang tak terurut. ( <ul> )
Setiap list item pada Ordered List dan Unordered List dideklarasikan
menggunakan tag <li>.
07/10/19 Frontend Designer - HTML 6
Contoh Ordered List HTML
<ol></ol> Default dari tag ol untuk menandai item yang terurut.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
</ol>
07/10/19 Frontend Designer - HTML 6
Contoh Ordered List HTML
Untuk mengganti tipe urutan dari Ordered List menggunakan
<ol type=”...”>
Contoh:
<ol type=”a”> </ol>
<ol type=”A”> </ol>
<ol type=”i”> </ol>
<ol type=”I”> </ol>
07/10/19 Frontend Designer - HTML 6
Contoh Unordered List HTML
<ul></ul> Default dari tag ul untuk menandai item yang tidak berurut.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
</ul>
07/10/19 Frontend Designer - HTML 6
Contoh Unordered List HTML
Untuk mengganti simbol dari Unordered List menggunakan
<ul type=”...”>
Contoh:
<ul type=”square”> </ul>
<ul type=”disc”> </ul>
<ul type=”circle”> </ul>
07/10/19 Frontend Designer - HTML 6
Tag Table HTML
Membuat table pada HTML menggunakan tag <table></table>
Setiap baris table di deklarasikan menggunakan <tr></tr>
Setiap kolom table di deklarasikan menggunakan <td></td>
Untuk kolom pada tabel header menggunakan <th></th>
07/10/19 Frontend Designer - HTML 6
Table HTML
07/10/19 Frontend Designer - HTML 6
Tag Form HTML
<form>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="full-name">Full Name</label>
<input id="full-name" name="fullName" type="text" placeholder=”Full
Name...” />
</div>
<div>
<label for="email">Email Address</label>
<input id="email" name="email" type="email" placeholder=”email” />
</div>
</fieldset>
</form>
07/10/19 Frontend Designer - HTML 6
Form HTML
07/10/19 Frontend Designer - HTML 6
Link Pembelajaran HTML
HTML5 Tutorial w3school :
[Link]
HTML5 Tutorial codecademy:
[Link]
07/10/19 Frontend Designer - HTML 6
PART II
Analogi CSS
CSS
Dapat menghias Dapat mengatur
halaman web. posisi pada
Cascading (color, size, font, halaman web.
Style Sheets background, (float, align,
width, height, display, position,
dll). dll).
Tanpa CSS Menggunakan CSS
12/20/18 Front-end -- CSS 1
Menambahkan file CSS
3 cara menambahkan file CSS ke dalam HTML:
1. External CSS
2. Internal CSS
3. Inline CSS
12/20/18 Front-end -- CSS 1
External CSS
<link rel=”stylesheet” href=”[Link]”>
Syntax ini disisipkan ke dalam tag <head> pada HTML.
Ekstensi file CSS adalah .css
12/20/18 Front-end -- CSS 1
Internal CSS
<style>
Syntax ini dapat digunakan di
body {
background-color: #19355f; dalam satu file HTML.
}
Didefinisikan di dalam elemen
h1 {
color: #f47523; <style>, di dalam bagian
margin-left: 40px; <head> atau di dalam bagian
}
<body>.
</style>
12/20/18 Front-end -- CSS 1
Inline CSS
- Syntax ini dapat digunakan
untuk elemen tunggal pada
<h1 style=”color:
HTML.
#19355f;”>Hello World</h1>
- Di prioritaskan untuk
menerapkan style yang unik.
12/20/18 Front-end -- CSS 1
Syntax CSS
Selector Declaration Declaration
h1{ color: pink; font-size: 15px; }
Property Value Property Value
12/20/18 Front-end -- CSS 1
CSS Selector
Pola yang digunakan untuk memilih
element, yang ingin di styling.
Penanda HTML ke dalam CSS. Dapat menggunakan selector ID dan Class.
1. ID → (#)
● Setiap elemen hanya dapat memiliki satu tag id
● Dalam satu halaman tidak boleh ada dua penamaan id yang berbeda
2. Class → (.)
● Tag class dengan nama yang sama dapat dipakai berulang-ulang
pada satu halaman.
● Satu elemen boleh memiliki lebih dari satu Class yang berbeda-beda.
12/20/18 Front-end -- CSS 1
CSS Selector
ID = (#)
HTML CSS
<html> #content {
<body> padding: 20px;
<div id="content"> font-size: 20px;
Alterra Academy font-family: ‘Muli’,
</div> sans-serif;
</body> font-weight: 700;
</html> }
12/20/18 Front-end -- CSS 1
Demo -> ID = (#)
12/20/18 Front-end -- CSS 1
CSS Selector
Class = (.)
HTML CSS
<html> .content {
<body> padding: 20px;
<div class="content"> font-size: 16px;
Alterra font-family: 'Muli',
</div> sans-serif;
</body> font-weight: 800;
</html> }
12/20/18 Front-end -- CSS 1
Demo -> Class = (.)
12/20/18 Front-end -- CSS 1
CSS Grouping
Beberapa selector dapat
dikelompokkan dalam satu deklarasi
style.
CSS Grouping
<selector>, <selector>
HTML CSS
<html>
h1,
<body>
H2{
<h1>Hai!</h1>
font-family: ‘Muli’,
<h2>Alpha Tech
sans-serif;
Academy</h2>
color: #f47523;
</body>
}
</html>
12/20/18 Front-end -- CSS 1
Demo -> <selector>,<selector>
12/20/18 Front-end -- CSS 1
CSS Font
Beberapa style font di css.
CSS Fonts Properties
Font Menetapkan semua properti font dalam satu deklarasi
Font-family Menentukan kelompok font teks
Font-size Menentukan ukuran font teks
Font-weight Menentukan ketebalan untuk font teks
Font-style Menentukan font teks menjadi miring
12/20/18 Front-end -- CSS 1
CSS Fonts
Font online: [Link]
Import font:
@font-face {
font-family: 'SFCompactDisplay-Bold';
font-weight: 700;
src: url("../fonts/[Link]")
format("truetype");
}
12/20/18 Front-end -- CSS 1
Import font:
@font-face {
font-family: 'SFCompactDisplay-Light';
font-weight: 300;
src: url("../fonts/[Link]")
format("truetype");
}
12/20/18 Front-end -- CSS 1
CSS Margin &
Padding
Membuat ruang disekitar element.
CSS Margin & Padding
MARGIN
PADDING
CSS
.content {
margin: 25px 20px; CONTENT
padding: 25px 40px;
}
12/20/18 Front-end -- CSS 1
Demo -> margin dan padding
12/20/18 Front-end -- CSS 1
CSS Background
Beberapa style background di css.
CSS Background Properties
Background-color Menetapkan warna background pada suatu elemen
Background-image Menentukan gambar background pada suatu elemen
Background-repeat Menentukan gambar background untuk di ulang
Background-size Menentukan ukuran gambar untuk background
Background-position Mengatur posisi awal gambar background
12/20/18 Front-end -- CSS 1
CSS Background
.content {
Background-image: url(../img/[Link]);
Background-position: right top;
Background-repeat: no-repeat;
Background-color: #f2f2f2;
Background-size: 100%;
}
12/20/18 Front-end -- CSS 1
CSS Link Event
Beberapa link event pada CSS
CSS Link
:hover Kondisi style ketika mouse berada diatas elemen.
:active Style ketika link “a” ditekan.
:visited Style dimana elemen link “a” telah di kunjungi / di klik.
a:hover { a:active { a:visited {
color: #19355f; color: #19355f; color: #19355f;
} } }
12/20/18 Front-end -- CSS 1
CSS Transisi
Transisi CSS dapat mengubah value properti menjadi lebih halus dalam durasi
yang ditentukan.
a {
transition: all 0.5s ease;
}
a:hover {
color: #19355f;
}
12/20/18 Front-end -- CSS 1
CSS Display
Menentukan tampilan pada elemen
CSS Display
Menentukan bagaimana tampilan suatu elemen.
Block Elemen block selalu dimulai pada baris baru.
(dimulai dari kiri ke kanan).
Inline-block Elemen inline-block membutuhkan lebar sesuai
yang diperlukan.
None Menyembunyikan elemen untuk tidak ditampilkan.
12/20/18 Front-end -- CSS 1
CSS Table
Membuat style pada elemen table
HTML
CSS Table
Border Menambahkan border pada
table, th dan td
Border-collapse Membuat border menjadi
single border
:nth-child(even) Membuat background stripe
12/20/18 Front-end -- CSS 1
Style clearfix
.clearfix::after {
display: block;
clear: both;
content: "";
}
*,
::after,
::before {
box-sizing: border-box;
}
12/20/18 Front-end -- CSS 1
Fonts → [Link]
W3school css → [Link]
Box shadow css → [Link]
Gradient css → [Link]
Color picker → [Link]
12/20/18 Front-end -- CSS 1
PART
III
WEBSITE
MASA KINI
1. HTML + CSS
HTML
CSS
2. BOOTSTRAP
HTML
CSS
APA ITU FRONTEND
FRAMEWORK?
Front End Framework adalah sekumpulan
aturan kode yang bisa kita gunakan untuk
mempermudah dalam membuat suatu
tampilan website
KENAPA BOOTSTRAP?
GRATIS MUDAH CEPAT MENDUKUNG
DIPELAJARI RESPONSIF
BOOTSTRAP
MEMULAI BOOTSTRAP
1. Untuk dapat menggunakan bootstrap, dapat langsung menuju
website bootstrap dan unduh secara langsung di
[Link]
2. Setelah mengunduh bootstrap, langkah selanjutnya adalah bisa
dengan cara mempelajari example, ataupun mempelajari
komponen-komponen yang ada pada bootstrap di
[Link]
CLASS PADA BOOTSTRAP
Container container, container-fluid
Row row
Column col-md-12, col-lg-12, col-sm-6
Button btn-primary, btn-success, btn-danger
CONTAINER
<div class=”container”>
<h1> My bootstrap head </h1>
<p> This is some text </p>
</div>
<div class=”container-fluid”>
<h1> My bootstrap head </h1>
<p> This is some text </p>
</div>
container-fluid
container
SISTEM GRID
SISTEM GRID
col-*-6
col-*-6
SISTEM GRID
col-*-4
col-*-2
col-*-3
col-*-3
<div class=”container”>
<div class=”row”>
<div class=”col-md-6”>
<p> this is the content </p>
</div>
<div class=”col-md-6”>
<p> this is the content </p>
</div>
</div>
</div>
BEDAH WEBSITE
[Link]
MEMILAH KOMPONEN
5
HEADER 1
header, container-fluid, align, grid
col-3 col-9
container-fluid
col-6 col-6
container-fluid
OUR CULTURE 2
container, grid
container
row
col-12
col-6
col-6
col-12
col-7
col-5
WHAT THEY SAY 3
container, grid
col-6
col-6
col-4
col-4
col-4
CONTENT 4
FOOTER 5
col-3 col-2 col-4 col-3
Document Object Model (DOM)
WHAT IS DOM ?
“DOM is a standard for how to get, change, add,
or delete HTML elements. It defines HTML
elements as object, properties of all elements,
methods to access HTML elements and
“events” for all
HTML elements.
DOM TREE
-code editor
<!DOCTYPE html>
<html>
<head>
<title>About elk</title>
</head>
<body>
The truth about elk.
</body>
</html>
Finding HTML Elements
Method Description
[Link](id) Find an element by element id
[Link](name) Find elements by tag name
[Link](name) Find elements by class name
Changing HTML Elements
Property Description
[Link] = new html content Change the inner HTML of an element
[Link] = new value Change the attribute value of an HTML element
[Link] = new style Change the style of an HTML element
Method Description
[Link](attribute, value) Change the attribute value of an HTML element
<!DOCTYPE html>
<html>
DOM
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ATA</title>
Example: </head>
<body>
Find and Changing Element
<div id="demo"></div>
<script>
[Link]("demo").innerHTML = "Alterra Academy";
</script>
</body>
</html>
<!--
Output
Alterra Academy
-->
DOM EVENTS
An event is a signal that something has happened. All DOM nodes
generate such signals (but events are not limited to DOM). Here’s a list of
the most useful DOM events, just to take a look at:
● Mouse events: click, contextmenu, mouseover, mousedown,
mousemove.
● Form element events: submit, focus.
● Keyboard events: keydown, keyup.
● Document events: DOMContentLoaded.
● CSS events: Transitionend.
<!DOCTYPE html>
<html>
DOM
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ATA</title>
Example 1: </head>
<body>
DOM Event
<p onClick="[Link]='You Got Me!'">Click Me!</p>
<p class="demo"></p>
<button onclick="pressKey();">Press Me!</button>
<script>
function pressKey() {
var x = [Link]("demo");
x[0].innerHTML = "Great!";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
DOM
.demoClass {
color: red;
}
</style>
</head>
Example 2:
<body>
<h1>Hello Alterra</h1>
DOM Event
<button onclick="myFunction()">Add Class</button>
<script>
function myFunction() {
var h1 = [Link]("H1")[0];
var att = [Link]("class");
[Link] = "demoClass";
[Link](att);
}
</script>
</body>
</html>
.end
HTML/CSS
