1st Meet Web Study Jam.pptx

WEB PORTOFOLIO
STUDY JAM
Here starts
the lesson!

1 PRESENCE
https://qrco.de/1stpresence
st

Lomba LKS bidang web
technology tingkat
kabupaten Pati tahun 2023
Juara 2
Juara 1
Muhammad Fahmi
‘Ainunnajib
Lomba LKS bidang IT
Software solution for
business tingkat kabupaten
Pati tahun 2022

Juara 1
Lomba LKS bidang IT
jepara tahun 2022
Juara 2
Lomba LKS bidang IT
Jepara tahun 2023
Rian Hidayat
Saputra

“Langit tidak pernah
menjelaskan bahwa dirinya
tinggi”
Sedikit kutipan
dari mas rian

https://shorturl.at/fhn18 https://shorturl.at/BP679
Learn the
difference
PPT
HTML
PPT
CSS

Hypertext Markup
Language (HTML)
Universitas Safin Pati

Definisi
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa markup standar
untuk membuat halaman web, yang kemudian dapat diakses untuk menampilkan
berbagai informasi di dalam web internet (Browser). Bahasa Markup bukan bahasa
pemrograman (programming language).
HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam
komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs
dalam web internet (Browser)

Fungsi
Secara umum, fungsi HTML adalah untuk mengolah serangkaian data dan informasi
sehingga suatu dokumen dapat diakses dan ditampilkan di internet melalui layanan web
Fungsi spesifik:
● Membuat halaman website
● Menampilkan berbagai informasi di dalam sebuah browser internet
● Membuat link menuju halaman web lain dengan kode tertentu (hypertext)

TAG HTML

<head>
<title></title>
Menuliskan judul website
<style></style>
Menuliskan syntax CSS
<script></script>
Menuliskan syntax JavaScript
<meta></meta>
Mendeskripsikan website

Heading

Heading
Tag <h1>,<h2>, …, <h6>
Heading adalah judul atau subjudul yang dapat ditampilkan di halaman web.

Paragraf

Tag Paragraf
Tag Fungsi
<p></p> Membuat teks paragraf
<br> Menambah baris baru
<hr> Membuat garis horizontal
<b></b> Membuat tulisan tebal
<i></i> Membuat tulisan miring
<u></u> Membuat tulisan bergaris bawah

Example Tag <b></b>,<i></i>,<u></u>

Example Tag <br></br>,<hr></hr>

Tag List

Macam-macam Tag List
<ol></ol>
Ordered List
<ul></ul>
Unordered List

Struktur Dasar
Tag Ordered
List

Type Ordered List
<ol type=”1”></ol> 1. Data
<ol type=”A”></ol> A. Data
<ol type=”a”></ol> a. Data
<ol type=”i”></ol> i. Data
<ol type=”I”></ol> I. Data Note :
Secara default ordered list
adalah ber-type 1

Struktur Dasar
Tag Unordered
List

Type Unordered List
<ul type=”disc”></ul> ● Data
<ul type=”square”></ul> ❏ Data
<ul type=”circle”></ul> ❖ Data
Note :
Secara default unordered list
adalah ber-type disc

Tea Break
Silahkan dapat mengambil
snack di meja!!!

Hyperlink

Definisi
Link ditemukan di hampir semua halaman web. Link memungkinkan
pengguna untuk berpindah dari halaman ke halaman.

External Link
<a href=“https://www.w3schools.com/ ”></a>
<a href=“https://www.youtube.com/”></a>
<a href=“http://gmail.com/”></a>

Internal Link
Internal Link dapat digunakan apabila
terdapat file html di lokasi yang sama
dengan website yang kita buat
Index.html
page2.html

Relative URL
Relative URL dapat digunakan apabila
terdapat file html di dalam folder(folder
dalam folder) tetapi lokasinya masih
dalam satu folder yang sama dengan
website yang kita buat
Index.html
page2.html

Page Anchor
Coba dan identifikasi code di
samping ini lalu klik link yang
berada di atas dan lihat apa
yang terjadi
Perhatikan kotak berwarna
merah! Penulisan href harus
menyesuaikan dengan id

Gambar dapat meningkatkan desain dan tampilan halaman web.

Atribut
<img src=“ ” alt=“ ”>
<img src=“ ” width=“ ”>
<img src=“ ” height=“ ”>

Atribut : alt
Memberikan alternatif text pada gambar
apabila terjadi error pada gambar

Atribut : width & height
Mengatur ukuran lebar & tinggi gambar
Note:
Disarankan menggunakan salah satu (width/height)
supaya mendapatkan gambar yang proporsional

Tabel HTML memungkinkan pengembang web untuk mengatur data
ke dalam baris dan kolom.

Definisi
Formulir HTML digunakan untuk mengumpulkan input pengguna. Input
pengguna paling sering dikirim ke server untuk diproses.

Cascade Style Sheet
(CSS)

Definisi
CSS (Cascade Style Sheet) adalah sebuah markup language untuk mengatur tampilan
web sehingga terlihat lebih menarik dan indah.
Dengan menggunakan CSS, kita dapat mengatur layout (tata letak), warna, font, garis,
background, animasi, dan lain-lain.

Fungsi
● Digunakan untuk memilih dan memanipulasi elemen spesifik pada HTML.
● Elemen HTML dipilih berdasarkan tag, id, class, bahkan pola/pater.
● Semakin kompleks struktur HTML, selector juga bisa semakin kompleks / spesifik

Selector

Example
Dibaca:
Pilih seluruh elemen h1. Lalu, ubah
warna teks di dalamnya menjadi
warna cyan.
h1 { color: cyan; }

Example
Menyeleksi lebih dari satu elemen
gunakan tanda koma untuk
memisahkan tiap elemen

Example
Note:
● Gunakan tanda titik untuk menyeleksi
sebuah class
● Gunakan tanda # untuk menyeleksi
sebuah id
Pilih tag h1 yang berada di dalam class satu. Lalu, ubah warnanya menjadi merah
Pilih tag h1 yang berada di dalam id dua. Lalu, ubah warnanya menjadi hijau

Penempatan
css

Penempatan
Tipe Penjelasan Syntax
Embed Ditulis di dalam tag <style> <style><style>
Inline Ditulis di atribut elemen HTML; <h1 style= color: cyan;>…</h1>
External Ditulis di file CSS terpisah dengan HTML. <link rel="stylesheet" href="style.css">

Embed
Kode CSS yang ditulis di dalam tag <style>. Embed juga dikenal
dengan Internal CSS.
Tag <style> bisa ditulis di dalam tag <head>, bisa juga ditulis di
dalam tag <body>. Namun kebanyakan orang menulisnya di
dalam <head>.

Inline
Kode CSS yang ditulis langsung pada atribut style di elemen
HTML.
Kode CSS ditulis langsung tanpa menggunakan kurung kurawal {
... }. Kemudian properti tetap dipisah dengan titik koma.

External
Kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS
ditulis di dalam file khusus yang berekstensi .css.

Font Styling

Property Font
Property Fungsi
font-family Mengatur jenis font yang akan digunakan
font-size Mengatur ukuran font
font-weight Mengatur ketebalan font
font-variant Mengubah font menjadi small caps
font-style Mengubah font menjadi bercetak miring
line-height Mengatur jarak antar baris

Font Size
Satuan ukuran:
● px
● %

Font Variant
Secara default font-variant adalah
normal
Value:
● normal
● small-caps

Font Style
Value:
● normal
● italic
● oblique
Secara default font-style adalah
normal

Line Height
Satuan ukuran:
● normal
● px

Text Styling

Property Text
Property Fungsi
color Memberi warna pada tulisan
text-align Mengatur format paragraf / teks
text-indent Memberi indentasi pada paragraph / teks
text-decoration Mengatur dekorasi pada teks
text-transform Mengubah jenis huruf menjadi huruf besar, kecil, & kapital
letter-spacing Mengatur spasi antar huruf
word-spacing Mengatur spasi antar kata

Color
Nama Warna
Hexadecimal
RGB

Text Decoration : none
Tag <a> tanpa text-decoration Tag <a> dengan text-decoration

Text Decoration : line through

Background

Property Text
Property Fungsi
background-color Mengatur warna pada background
background-image Mengatur gambar yang akan digunakan pada background
background-position Mengatur posisi gambar pada background
background-size Mengatur ukuran gambar pada background

Background : Background Position

Link Styling

Example
Kondisi saat kursor
berada di atas link

Table Styling

Table Size
Lebar dan tinggi tabel ditentukan oleh
properti lebar (width: ;) dan (tinggi
height: ;)

Table Alignment
Horizontal Alignment

Properti teks-alignment mengatur
perataan horizontal (kiri, kanan, atau
tengah) dari konten di <th> atau <td>
Secara default, konten elemen <th>
adalah center (rata tengah) dan konten
elemen <td> adalah left (rata kiri)
left
right
justify
center

Vertical Alignment
Properti vertical-align mengatur
perataan vertikal (atas, bawah, atau
tengah) konten di <th> atau <td>.
Secara default, konten elemen <th>
dan <td> adalah center (rata tengah).
baseline
middle
bottom

Flex Box

Flexbox
Teknik CSS untuk membuat layout atau mengatur
posisi pada sebuah halaman website
Model layout satu dimensi yang dapat mengatur
jarak dan penjajaran antar item dalam sebuah
container

Properti pada Container
Property Value Fungsi
display flex Membuat sebuah elemen parent menjadi flex
box dan membuat elemen-elemen di dalamnya
bisa berperilaku flex juga
flex-direction row, row-reverse, column, column-reverse Mengatur arah/urutan items di dalam container
flex-wrap no-wrap, wrap, wrap-reverse Secara default semua items di dalam container
akan berada pada satu baris meskipun
ukurannya sudah tidak cukup wrap
memungkinkan untuk memindahkan items ke
baris di bawahnya
justify-content flex-start, flex-end, center, space-between,
space-around, space-evenly
Mengatur jarak antar items secara horizontal
align-items flex-start, flex-end, center, stretch, base-line Mengatur kesejajaran items secara vertical
align-content flex-start, flex-end, center, stretch, space-
between, space-around
Mengatur jarak antar items terhadap garis
vertical (hanya berfungsi ketika items lebih dari
satu baris)

flex-direction
Mengatur arah/urutan items di dalam
container
Value:
● row
● row-reverse
● column
● column-reverse

flex-wrap
Secara default semua items di dalam container akan berada pada satu
baris meskipun ukurannya sudah tidak cukup wrap memungkinkan
untuk memindahkan items ke baris di bawahnya.
Value:
● no-wrap
● wrap
● wrap-reverse

Wrap
Kotak nomor 5 turun ke
bawah karena panjang
containernya tidak muat
untuk menampung 5 kotak

justify-content
Mengatur jarak antar items secara horizontal
Value:
● flex-start
● flex-end
● center

align-items
Mengatur kesejajaran items secara vertical
Value:
● flex-start
● flex-end
● center
● stretch
● base-line

stretch
Note:
Tinggi items akan
memenuhi container
apabila items tidak diberi
height

Terimakasiii

—Jack Ma
“Never give up. Today is
hard, tomorrow will be
worse, but the day after
tomorrow will be
sunshine.”

FEEDBACK
https://qrco.de/feedback1st

1st Meet Web Study Jam.pptx

Recommended

Recommended

More Related Content

Similar to 1st Meet Web Study Jam.pptx

Similar to 1st Meet Web Study Jam.pptx (20)

1st Meet Web Study Jam.pptx