Dasar website 1

Website merupakan bagian yang tidak terpisahkan dari perkembangan internet, jumlah pengguna

sampai saat ini mencapai lebih dari 1,9 miliar di seluruh dunia (internetlivestats, 2022). Kumlah

ini di perkirakan akan terus mengalami peningkatan melihat saat ini website juga terus

berkembang dan semakin bagus. Tujuan penggunaan website awalnya hanya digunakan untuk

kalangan pribadi, namun sekrang hampir seluruh perusahan, intansi, bahkan usaha kuliner juga

memiliki website untuk media informasi mereka.

Website yaitu kumpulan halaman yang berisi suatu informasi tertentu yang kemudain bisa di

akses oleh siapapun, dimanapun dan kapanpun dengan mudah melalui koneksi internet. Proses

pembuatan website salah satunya dapat dilakukan dengan dengan pemrograman web atau

menuliskan sebuah intruksi–intruksi yang di berikan kepada komputer untuk membuat suatu tugas

atau fungsi tertentu. Dengan kata lain Pemrograman Web merupakan cara atau Proses untuk

menjalankan intruksi ataupun perintah kepada komputer yang terhubung dengan internet yang dapat

digunakan untuk membuat tugas maupun fungsi lainnya. Kemudian ketika menjalankan sebuah

program ini di dalam web dapat melaui web browser misalnya: Opera, mozilla, Chrome, dll.

a) Jenis - jenis Website

• Website Statis

Website Statis merupakan web yang isi atau kontennya tidak pernah di perbaharui

atau di update dalam durasi waktu tertentu, atau bisa di katakana isinya tidak pernah

berubah sama sekali, contoh website statis seperti web company profile suatu instansi atau

perusahaan dll. Tujuan web ini yaitu user atau masyarakat dapat melihat tentang profil dari

instansi atau perusahaan ini . Website statis ini cenderung tidak responsive, hal ini

karena ketika akan mengupdate fitur dari webnya harus mengubah scriptnya atau perintah

program secara langsung, tidak dapat dilakukan melalui CMS yang tersedia.

• Website Dinamis

Situs web yang dinamis yaitu situs web yang konten atau elemen lainnya sering

berubah karena pengguna atau pengunjung lain dapat memperbarui informasi situs secara

diam-diam. Website dinamis ini biasanya cocok di gunakan untuk web blog, jejaring sosial,

toko online dll. Pembuatan website ini membutuhkan waktu yang cukup lama karena

menggunakan database untuk menyimpan semua data dari website yang bersangkutan.

• Website Interaktif

Website Interaktif yaitu website yang hampir mirip dengan website yang bersifat

statis; namun, interaksi di situs web interaktif lebih sering atau sering terjadi karena

ditujukan untuk pengguna yang juga akan menggunakannya untuk mengedit konten di situs

web ini . Tidak seperti website dinamis yang pilihannya hanya share atau tinggalkan

komentar. Seorang pengguna atau pengguna juga dapat melakukan tindakan saat mengedit

konten di situs web interaktif seperti YouTube.

b) Development Web

Dalam development web, terdapat istilah yang dinamakan Client - side serta Server - side

Scripting. Dua istilah ini digunakan untuk mengelompokkan dimana bahasa atau kode

pemrograman ini dijalankan, apakah berjalan di sisi client atau di sisi server. Jika diartikan dalam

arti lain, Client-side memiliki arti sisi pengguna dan Server-side memiliki arti sisi server atau penyedia.

Berikut penjelasan singkat mengenao web client dan web server.

• Client Side Scripting

Klien web, sering dikenal sebagai skrip sisi klien, yaitu bagian dari bahasa

pemrograman web di mana pemrosesan sintaksis terjadi di sisi klien. Dalam proses klien web,

browser web berfungsi sebagai klien. Namun, ada juga perpustakaan yang tersedia di aplikasi

browser web yang dapat digunakan untuk menulis ulang kode atau struktur sintaksis apa pun

yang ditemukan di halaman web yang menggunakan skrip sisi klien. Akibatnya, dapat

dikatakan bahwa skrip sisi klien mengacu pada aktivitas apa pun yang dilakukan di sisi

pengguna atau klien (komputer pengguna). Contoh skrip sisi klien meliputi, antara lain,

XHTML, HTML, JavaScript, CSS, JQUERY, dan XML.

• Server Side Scripting

Yang dimaksud dengan “server-side scripting” yaitu bahasa pemrograman web yang

proses pengembangannya dilakukan di sisi server, yaitu web server yang terintegrasi dengan

web engine. Tujuan dari mesin pencari online yaitu untuk meng-goagle setiap kemungkinan

frase nanti. Mesin web yaitu komponen server web yang perlu diinstal di komputer

sesegera mungkin.

Ada skrip sisi server di situs web dinamis. Dalam skrip sisi server, kecepatan dan efisiensi

komputer server yaitu faktor penentu seberapa cepat situs web memuat atau beroperasi.

Karena pada dasarnya bersifat rahasia, sintaks tertulis di sisi server tidak dapat dilihat di

antarmuka klien atau pengguna. PHP, Active Server Pages (ASP), Lasso, Java Server Pages

(JSP), dan SSI yaitu contoh program skrip sisi server.

1.2 APA ITU HTML ?

HTML, sering dikenal sebagai Hyper-Text Markup Language, yaitu bahasa utama yang

digunakan di seluruh dunia oleh situs web. Hampir semua website yang tersedia di internet dibuat

dengan menggunakan variasi HTML. Pengembang dapat menambahkan teks, multimedia, dan tautan

ke browser yang kompatibel dengan atribut atau elemen lain dengan menggunakan HTML. Dari

elemen yang dapat terhubung ke dokumen Anda (hiperteks) hingga elemen yang membuat dokumen

Anda lebih interaktif, semuanya terdapat dalam satu file HTML.

Dengan kata lain, HTML (Hypertext Markup Language) yaitu bahasa yang biasa digunakan

untuk menandai dokumen yang akan dipublikasikan secara online. Dalam bahasa sederhana, HTML

mengilustrasikan struktur halaman Web, yang terdiri dari serangkaian elemen HTML, untuk

menjelaskan kepada browser web cara menampilkan konten yang telah dipilih.

HTML memiliki standar yang dibuat oleh W3C (World Wide Web Consortium) pada tahun 1997

dan semakin lama semakin bermanfaat. Dalam HTML, ada tag yang digunakan untuk menunjukkan

struktur. Tag dan elemen dapat dilindungi dengan menggunakan karakter < dan >.

1.3 SEJARAH SINGKAT HTML

• Awal mula kemunculan HTML yaitu dimulai dari seorang ilmuan yang bernama Tim Berners-Lee

yang bekerja di CERN.

• CERN bukanlah bisnis yang berhubungan dengan teknologi atau bahkan internet. CERN yaitu

singkatan dari Dewan Riset Nuklir Eropa, atau singkatnya CERN. Ini mengacu pada Komisi Eropa

untuk Fisika Nuklir.

• Sejak awal, HTML telah mengalami banyak bug, dan versi HTML terbaru saat tulisan ini dibuat

yaitu HTML5. Dalam hal bahasa markup, HTML5 telah memimpin akhir-akhir ini dan sudah

menyertakan beberapa fitur yang ada di versi HTML sebelumnya, serta fitur yang dihilangkan

tetapi ternyata ada di versi XHTML sebelumnya. Meskipun tidak ada pembaruan versi khusus

untuk setiap rilis baru, fitur baru ditambahkan ke HTML5 hampir setiap hari. Baik audio maupun

video pada dasarnya berbeda antara HTML dan HTML5, tetapi di setiap fitur HTML, masing-

masing yaitu produk dari HTML5, seperti yang dapat dilihat pada contoh gambar di bawah ini.

1.4 HTML dan HTML5

• HTML5 mendukung SVG, kanvas, dan grafik vektor lainnya, sedangkan dalam HTML, grafik vektor

hanya dapat digunakan dengan teknologi lain seperti Flash, VML (Vector Markup Language),

Silver-light, dan lain-lain. SVG (Scalable Vector Graphic) yaitu format gambar yang menggunakan

XML (eXtensible Markup Language) sebagai dasar pembuatan gambar vektor dua dimensi. HTML5

menggunakan database web SQL, sedangkan HTML hanya memiliki cache browser yang dapat

digunakan untuk tujuan ini. HTML5 juga menggunakan aplikasi untuk caching data.

HTML 4.01

HTML 2.0

HTML 5

Xhtml 1.0

Html 3.2

1995

1997

1999

2000

2014

Developed by the IETF’s

HTML Working Group

Added support for more

multimedia, scripting

language, style shett, etc

A work in progress, intends

to replace HTML 3.2, HTML

4 and XHTML 1.x.

W3C’s first recommendation

for HTML which represented

the consensus on HTML

features for 1996

Whith a wealth of new

feature, XHTML 1.0 was a

reformulation of HTML 4.01 in

XML

• Perbedaan lain antara HTML dan HTML5 yaitu bahwa HTML5 tidak mencegah JavaScript berjalan

di browser itu sendiri (berjalan di utas terpisah di bagian luar browser), sedangkan HTML5

melakukannya.

• HTML5 mendukung kontrol formulir baru, termasuk waktu dan tanggal, email, nomor telepon,

jangkauan, telegraf, url, pencarian, dan lain-lain.

Gambar 1.3 Perbandingan HTML 4 dengan HTML 5

1.5 CASCADING STYLE SHEETS (CSS)

Singkatan CSS yaitu singkatan dari "Cascading Style Sheets". Sesuai dengan namanya, CSS

memiliki pengertian “style sheet language” dalam bahasa pemrograman yang digunakan untuk

pengembangan web. CSS yaitu bahasa pemrograman yang digunakan untuk membuat website

header. CSS menggunakan id dan penanda yang dapat dikenali kelas saat mendesain header situs web.

Di bidang pemrograman dan teknologi yang berkembang pesat , CSS tidak lagi hanya digunakan

dengan HTML dan XHTML, namun sudah bisa digunakan untuk mengembangkan tampilans aplikasi

Android . CSS dijalankan menggunakan id atau kelas .

Fungsi CSS

• Mempercantik variasi tampilan

• Membuat website tampil lebih rapi di berbagai ukuran layar

• Mempercepat Loading Halaman Web

• Memudahkan pengelolaan kode

1.6 JAVA SCRIPT (JS)

Javascript yaitu satu - satunya bahasa web yang dapat membuat beranda situs web Anda lebih

menarik dan dinamis .Eksekusi bahasa Javascript terjadi di ujung pengguna situs web atau lokasi lain

daripada di server, yang berbeda dari PHP. Javascript digambarkan berbeda dari HTML dan CSS. HTML

digunakan untuk mengubah format tabular konten , dan CSS mengubah tata letak, oleh karena itu

desain keseluruhannya sangat berbeda .Ada beberapa contoh orang yang menggunakan HTML , CSS,

dan javascript secara bersamaan, termasuk konstruksi rumah , dekorasi interior , dan lampu serta pintu

- pintu.

Akibatnya , HTML digambarkan sebagai sebuah blok bangunan yang dapat digunakan untuk

merenungkan segala sesuatu, bahkan tempat - tempat dengan alamat tetap seperti tembok, pintu,

atap, dan lain - lain.Sebaliknya, CSS yaitu alat dekorasi rumah yang dapat mengubah tampilan

wallpaper, karpet , dan hal - hal lain di rumah Anda .Javascript berguna untuk hal - hal yang perlu

responsif dan menghidupkan , seperti menyalakan lampu atau membuat pintu.

Javascript makes websites more responsive since, even in the absence of a problem, their

contents will still change significantly. You can find your house number. The absence of a light or a

pintu may not be a problem, but the large house may become dim and begin to leak a little bit of

moisture. Selain itu, ketiadaan javascript membuat website menjadi kurang menarik.

1.7 ANALOGI PERBEDAAN HTML CSS DAN JS

Agar lebih mudah memahami hubungan antara HTML CSS dan Java Script, silahkan lihat gambar

1.4 di bawah ini.

Dari gambar di atas dapat di pahami jika HTML di analogikan sebagai badan dari seseorang

manusia tanpa pakaian. Karena HTML merupakan kerangka dasar yang digunakan untuk membangun

sebuah web.

Sedangkan CSS dianalogikan sebagai pakaian seperti baju, celana, dasi, ikat pinggang dan lain

sebagainya. Yang di maksud dalam analogi ini yaitu agar membuat tubuh manusia terlihat lebih cantik

atau keren dengan berbagai macam jenis pakaian yang ada seperti di dunia nyata ini. Sehingga dapat

membuat tampilan website menjadi indah.

Java script dianalogikan sebagai otak manusia, hal ini di maksud karena otak manusia memiliki

peran inti dalam menggerakkan atau menjalankan tindakan dari anggota tubuh manusia menjadi

interaktif. Manusia dapat berbicara sesuai topik yang di bahas, dapat bergerak dan lain sebagainya itu

didasari dari perintah yang ada dalam otak. Jadi dengan menggunakan java script website akan

menjadi interaktif, dapat di berikan banyak animasi dan juga lebih user friendly.

1.8 TEXT EDITOR

Editor teks yaitu perangkat lunak atau program komputer yang memungkinkan pengguna,

dalam hal ini Anda, untuk membuat, mengedit, atau memodifikasi file teks biasa. Editor teks ini secara

alami dapat digunakan untuk membuat program komputer dan mengekstrak kode sumber dari bahasa

pemrograman. Selain itu, editor teks dapat digunakan untuk membuat situs web, templat situs web,

dan aplikasi terkait lainnya.

Beberapa aplikasi text editor diantaranya :

a) NotePad / NotePad ++

Gambar 1.5 Icon Notepad dan Notepad ++

Microsoft Notepad merupakan software pemrosesan kata yang disediakan oleh Windows.

Sehingga software ini sudah tersedia jika anda menggunakan system operasi windows. Notepad dapat

digunakan untuk membuat file tipe log ataupun segala bentuk file termasuk HTML, CSS dan Java Script.

Namun demikian notepad bawaan windows memiliki belum memiliki fitur – fitur dalam

mendukung penulisan perintah – perintah pemrograman. Sehingga dikembangkanlah aplikasi ini

yang terdapat fitur – fitur dalam mempermudah dalam digunakan untuk menulis intruksi – intruksi

Bahasa pemrograman, aplikasi ini dinamakan notepad plus – plus yang bisa di unduh pada

https://notepad-plus-plus.org/downloads/.

b) Adobe Dreamweaver

Program editor web yang dikenal dengan nama Adobe Dreamweaver dikembangkan oleh Adobe

Systems sesudah sebelumnya dikenal dengan nama Macromedia Dreamweaver oleh Macromedia.

Karena fiturnya yang mudah digunakan dan digunakan secara luas oleh pengembang web, aplikasi ini

sering digunakan. Versi 8 Macromedia Dreamweaver dirilis sebelum Adobe Systems mengakuisisi

Macromedia. Versi terbaru Dreamweaver dari Adobe Systems yaitu versi 12, yang tersedia di Adobe

Creative Cloud (sering disingkat Adobe Cc). Versi gratis Aalikasi tersedia untuk diunduh di

https://www.adobe.com/id_id/products/dreamweaver/free-trial-download.html

c) Sublime Text

Gambar 1.7 Icon Sublime Text

Perangkat lunak pengedit teks yang disebut Sublime Text sering digunakan oleh programmer,

terutama pengembang web. Aplikasi ini sangat penting untuk pengembang web saat membangun

aplikasi apa pun. Banyak para programer menggunkan aplikasi sublime text ini untuk

menyempurnakan situs web yang mereka buat. Aplikasi ini memberikan warna dari tulisan koding yang

bervariasi, interaktif, multiple tabs, tab multi select, dan tentunya sangat menarik. Anda juga dapat

mengubah warna tema pada sublime, selain itu variasi warna pada coding membuat program anda

menjadi lebih beragam dan interaktif, sehingga membuat anda untuk lebih santai dalam proses coding.

Text editor ini berfungsi dalam menulis sejumlah code script serta dapat mendukung berbagai

macam jenis file. Selain itu, sublime Text juga mendukung berbagai macam programming languages

diantaranya CSS, C, C++, C#, html, ASP dan lain sebagainya. Python API pada sublime telah diperbarui

ke Python 3.8. Aplikasi ini dapat di unduh pada https://www.sublimetext.com/download

d) Visual Studio Code

Gambar 1.8 Icon Visual Studio Code

Visual Code Studio yaitu editor kode gratis yang dapat digunakan pada sistem operasi desktop

berbasis Windows, Linux, dan Macintosh. Kode untuk editor ini dibuat oleh Microsoft, penyedia

teknologi terdepan di dunia. Kode Visual yaitu editor perangkat lunak yang tangguh, namun

terkadang mengalami kegagalan fungsi saat digunakan. Dia mampu membuat dan menulis kode

ringkasan dalam berbagai bahasa pemrograman. Yakni, JavaScript, TypeScript, dan Node.js.

Juga kompatibel dengan bahasa lain dan lingkungan runtime, seperti PHP, Python, Java, and.NET,

yaitu Visual Code Studio. Ini terkait dengan ekonomi yang kuat dan perluasan pengetahuan yang

mengancam. Anda bisa mendapatkan Visual Studio Code dari situs ini :

https://code.visualstudio.com/download

Selain itu masih banyak lagi aplikasi text editor lainnya. Dalam praktikum pemrograman web 1

ini nantinya bebas ingin menggunakan aplikasi text editor yang mana saja karena pada dasarnya

perbedaan text editor hanya terletak pada vasilitas yang di milikinya. Intinya anda harus menyimpan

file ini dengan ekstensi penyimpanan file ini .

1.9 WEB BROWSER

Tujuan dari web browser, juga dikenal sebagai web browser, web browser, atau penelusur web

(Bahasa Inggris: web browser), yaitu untuk mengambil dan mengirimkan informasi dari Internet.

Sepotong informasi diidentifikasi dengan menggunakan metode untuk mengenalinya sebagai

informasi, yang dapat berupa situs web, gambar, video, atau jenis konten lainnya. Browser Web, biasa

disebut sebagai browser, yaitu alat yang digunakan untuk mengakses, menyimpan, dan mengirimkan

informasi di internet. Dan satu-satunya format yang digunakan untuk informasi yaitu HTML.

Kode HTML yang dibuat akan dievaluasi oleh browser web untuk memastikan bahwa kode

ini ditampilkan sebagaimana mestinya. Menurut teorinya, setiap browser web dapat

menampilkan kode HTML dengan benar, namun jika Anda terbiasa dengan desain dokumen, setiap

browser memiliki beberapa perbedaan. Google Chrome, Firefox, Internet Explorer, Opera, dan Safari

yaitu beberapa browser online yang umum.

HTML dibuat dan diadopsi oleh W3C, sebuah organisasi standar global dengan fokus pada web

(World Wide Web Consortium). Hal ini disebabkan oleh fakta bahwa setiap perangkat lunak browser

web menggunakan standar pengkodean HTML yang berbeda, sehingga diperlukan pembuatan standar

yang seragam untuk semua browser. Namun, dalam praktiknya, standar ini hanya berfungsi sebagai

saran. Beberapa browser web dapat membuat gambar sendiri.

Berikut yaitu referensi web browser yang bisa di gunakan

a) Mozila Firefox

Gambar 1.9 Icon Mozila Firefox

Dapat didownload pada https://www.mozilla.org/id/firefox/new/

b) Google Chrome

Gambar 1.10 Icon Google Chrome

Dapat didownload pada https://www.google.com/intl/id_id/chrome/

c) Microsoft Edge

Gambar 1.11 Icon Microsoft Edge

Dapat didownload pada https://www.microsoft.com/id-id/edge/home?form=MA13FJ

1.10 STRUKTUR DASAR HTML

Untuk membuat dokumen HTML standar, gunakan tag html, head, dan body serta tag yang

berjarak sama. Sebagai contoh, dokumen HTML berikut dihasilkan melalui sistem tag-by-tag:

Gambar 1.12 Struktur Dasar HTML

o Semua dokumen HTML harus diawali dengan deklarasi "<!DOCTYPE html>."

o Dokumen HTML itu sendiri diawali dengan <html> dan diakhiri dengan </html>.

o Kode HTML yang dapat dilihat di web browser berada di antara tag "<body>" dan "</body>".

Contoh :

Gambar 1.13 Contoh Perintah HTML

Kemudian simpan file dengan ekstensi .html dan bukalah file trsebut dengan web browser.

Gambar 1.14 Contoh Hasil

Deklarasi <! DOCTYPE>

Informasi yang di tuliskan pada tag

<body>

…

</body>

ini yaitu judul web,

di tulis di antara tag <title> … </title>

• <!DOCTYPE> deklarasi ini akan menjelaskan jenis dokumen untuk membantu browser supaya

tampilan halaman web dapat di tampilkan dengan benar. Tag ini cukup di tuliskan sekali saja,

pada bagian paling atas halaman (sebelum tag HTML).

• <!DOCTYPE>deklarasi ini tidak case sensitive.

• <!DOCTYPE>deklarasi HTML5 yaitu :

1.11 DEFINISI TAG

Tag yaitu nama yang diberikan pada penanda awalan dan eksekusi elemen HTML saat ini.

Tag dibuat dengan tanda kurung siku (<...>), kemudian diberi nama dan kadang-kadang disertai atribut.

Konteks: "<p>", "<a>", "<body>", "<head>", dan istilah sejenis lainnya.

Tag secara konsisten menggunakan kata "pasangan". Terdapat tag untuk pembuka dan penutup.

Namun ada juga beberapa tag yang memiliki pasangan penutup yang tidak beraturan. Tag ditulis

dengan jelas dengan menggunakan karakter garis miring (/) di awal nama tag.

Gambar 1.15 Contoh Tag Pembuka Isi dan Penutup

Setiap tag memiliki fungsi yang berbeda. Ada alat yang tersedia untuk membuat judul, tautologi,

paragraf, judul, dan elemen lainnya.

Tag yang sering di gunakan dalam HTML

Tabel 1.1 Tag dan Fungsinya

Tag Pembuka Tag Penutup Isi Tag

1.12 DEFINISI ELEMENT

Elemen HTML yaitu komponen yang mendukung dokumen HTML. Elemen juga disebut sebagai

simpul karena merupakan satu-satunya jenis simpul dalam diagram HTML yang dapat digunakan untuk

menyisipkan kode HTML dalam teks.

Gambar 1.16 Element dalam HTML

Ada tiga jenis simpul pada diagram yang dimaksud, elemen Node, atribut Node, dan teks Node.

Elemen terdiri dari penutup, isi, dan tag pembuka. Kadang juga menyebutkan beberapa atribut.

Contoh:

Gambar 1.17 Element Tag

• Pada contoh di atas, hanya ada satu elemen dengan tag <p> yang memiliki atribut

align="center" dan bertuliskan Hello World!

• Elemen tidak hanya berisi teks, terkadang juga mengandung jenis elemen lainnya. biasanya ini

disebut sebagai elemen bersarang atau elemen di dalam elemen.

Element <head>

Selain berisi element title, Element ini berisi informasi meta tentang halaman HTML. Metadata

yaitu data tentang dokumen HTML. Metadata umumnya akan menentukan judul dari dokumen,

kumpulan karakter, skrip, gaya dan informasi meta lainnya serta Metadata tidak akan ditampilkan di

halaman, tetapi dapat diurai oleh mesin.

Elemen meta saat ini ditujukan untuk "program robot" seperti mesin telusur daripada

pengguna atau orang yang mengunjungi web (mesin pencari). <meta charset=”utf-8”>? Menurut

definisi resmi, charset yaitu sekumpulan instruksi yang digunakan untuk mengubah bit-bit dalam

HTML menjadi karakter. Akibatnya, rangkaian karakter UTF-8 memberikan petunjuk ke browser web

tentang cara mengonversi karakter UTF-8 rangkaian karakter HTML.

Elemen yang bisa masuk ke dalam elemen <head> yaitu : <title> , <style>, <base>, <link>,

Gambar 1.18 Element di dalam Head

1.13 DEFINISI ATRIBUT

Kata tertentu yang ada di badan tag disebut atribut. Selain itu, atribut digambarkan sebagai

pengubah yang akan menunjukkan persyaratan elemen. Atribut dapat diterapkan ke elemen apa pun.

Ada elemen lain yang memerlukan penggunaan atribut, seperti elemen "a", "img", "video", dan "dll".

Gambar 1.19 Atribut Element <a>

• Tag "<a>" yaitu tag yang digunakan untuk membuat link. Tag ini harus menggunakan atribut

href untuk menampilkan tujuan dari tautan yang rusak.

• Jumlah elemen atribut mungkin lebih besar dari satu.

Contoh:

Gambar 1.20 Atribut Element <img>

Atribut "src" khusus untuk tag "<img>” yang berfungsi sebagai tempat penampung gambar

yang akan ditampilkan. Atribut sebelumnya yang mengubah bentuk objek yaitu lebar dan tinggi.

Contoh :

Gambar 1.21 Atribut src dalam Element <img>

“<h2>” berfungsi sebagai judul tag “h2”.

Align yaitu nama atributnya,

Center yaitu nilai atributnya, dan

Pengenalan atribut HTML yaitu elemen dari tag h2.

BAB 2

HEADING, PARAGRAF, LIST & IMAGE

TUJUAN :

a. Mahasiswa mampu memahami penggunaan Heading

b. Mahasiswa mampu membuat dokumen HTML dengan melakukan formatting

paragraph

c. Mahasiswa mampu melakukan listing pada dokumen HTML

d. Mahasiswa dapat menampilkan gambar pada HTML

Overview :

Pada sesi ini akan di pelajari bagaimana fungsi dari tag h1, h2, h3, dst atau di sebut heading,

membuat format text dan paragraph seperti membuat text tebal, garis bawah, miring, warna

font, ukuran font dan sejenisnya dengan menggunakan fungsi HTML. Juga di bahas cara

membuat list dan menampilkan gambar pada HTML.

2.1 HEADING

Heading yaitu kumpulan kata-kata yang berfungsi sebagai judul atau subtitle dari dokumen

HTML dan tersedia dalam berbagai ukuran yang berbeda. Menurut aturan, tag <Hx> digunakan untuk

menunjuk judul apa pun, di mana "x" menunjukkan level apa pun dari 1 hingga 6. Tag Heading, sering

dikenal sebagai <Hx>, yaitu tag yang mencakup kedua tag untuk awal dan tag untuk akhir.

Format : <H1>...........</H1> sampai <H6>.......</H6>

Contoh :

Gambar 2.1 Contoh Sintak Heading

Hasilnya :

Gambar 2.2 Hasil Sintak Heading

2.2 PARAGRAF

a) Fromating Paragraf

Jika Anda membuat situs web, Anda juga harus mempertimbangkan untuk menyertakan

informasi yang akan diperlukan. HTML juga menyertakan elemen khusus untuk menggunakan

markup khusus untuk menentukan teks.

HTML dapat menggunakan tag <p> untuk membuat sebuah paragraph yang nantinya juga bisa

di berikan atribut sesuai kehendak yang diinginkan.

Elemen format yang dapat di gunakan untuk membuat atau menampilkan gaya khusus dari teks :

➢ Cetak Tebal : tag “<b>”

➢ Cetak Penting : tag “<strong>“

➢ Cetak Miring : tag “<i>“

➢ Garis bawah : tag “<u>“

➢ Menekankan : tag “<em>“

➢ Penanda / Menandai : tag “<mark>“

➢ Menjadi Kecil : tag “<small>“

➢ Menghapus : tag “<del>“

➢ Memasukan : tag “<ins>“

➢ Pangkah dibawah / Subscript : tag “<sub>“

➢ Pangkat diatas / Superscripts : tag “<sup>“

Gambar 2.3 Contoh 1 Sintak Formating Paragraf

Hasilnya dari sintak diatas seperti gambar berikut ini :

Gambar 2.4 Hasil Contoh 1 Sintak Formating Paragraf

Sampai disini dapat di pahami proses penulisan dan apa masing-masing tag, elemen, dan

atribut untuk memahami cara membuat paragraf dalam HTML. Paragraf di bawah ini berfungsi

sebagai titik awal untuk membuat paragraf dalam format yang diinginkan. Ada tiga atribut / tag

yang dapat digabungkan langsung dengan tag paragraf <p> dalam kalimat ini. Tag atribut yang

dimaksud yaitu :

➢ Menjadikan paragraf menjadi rata kiri dapat memakai <p align=”left”> … isi paragraf </p>

➢ Menjadikan paragraf menjadi rata kanandapat memakai <p align=”right”>.. isi paragraf </p>

➢ Menjadikan paragraf menjadi rata tengah dapat memakai <p align=”center”>.. isi paragraf </p>

➢ Menjadikan paragraf rata kiri kanan dapat memakai <p align=”justify”>.. isi paragraf </p>

Gambar 2.5 Contoh 2 Sintak Formating Paragraf

Berikut hasil syntac diatas:

Gambar 2.6 Hasil Contoh 2 Sintak Formating Paragraf

b) Line Break

Jika kita terbiasa menekan Enter untuk memasukkan teks, ini tidak akan berfungsi saat menulis

dokumen HTML. Mempertimbangkan seberapa sering kami menggunakan tombol Enter, kami

tidak dapat mengatakan bahwa ini yaitu pertama kalinya.

Untuk membuat baris baru berperilaku serupa dengan tombol Enter keyboard, gunakan tag

HTML Line Break. Menggunakan tag <br> untuk jeda baris

Gambar 2.7 Contoh Sintak Line Break

c) Preformatted Text

Hubungan antara setiap kata dalam teks atau kalimat yang relevan dalam dokumen web secara

konsisten satu dan sama. Teks yang ditulis dalam bahasa Galia harus diberi tag "<pre>" di awal

dan "</pre>" di akhir agar web browser menampilkan dokumen sesuai dengan alamat web yang

dimasukkan.

Dengan tag "<pre>", teks yang sudah "diformat sebelumnya" akan ditampilkan di browser

dengan ukuran font yang lebih mudah dibaca. Tag ini juga akan menimbulkan spasme, baris baru,

dan tap yang sesuai dengan teks asli saat ditampilkan di browser.

Gambar 2.8 Contoh Sintak Preformatted Text

d) Mengolah Properti Font

Selama proses pengkodean, mungkin ada saatnya Anda perlu melakukan beberapa pekerjaan

persiapan, atau bahkan Anda mungkin perlu mencocokkan jenis huruf yang Anda gunakan dengan

alasan saat ini, mungkin karena informasi penting yang perlu dipahami lebih baik, dll.

Tag style="property:value" dapat digunakan untuk merubah style property dari font. Berikut

ini bebrapa atribut style yang dapat digunakan untuk elemen styling HTML.

➢ “Face : mengubah jenis font

➢ “color : mengubah warna text

➢ “font-family : mengubah font text

➢ “font-size : mengubah ukuran text

➢ “text-align : mengubah perataan text

Gambar 2.9 Contoh Sintak Properti Font

e) Membuat Garis Horizontal

Gunakan bilah horizontal, sering disebut sebagai "garis horizontal", untuk memperbarui

header situs web secara visual. Tag yang digunakan yaitu "hr". Atribut ini termasuk ALIGN,

SIZE, dan WIDTH. Bersama dengan tag br (<br>), tag hr yaitu tag referensi langsung. Oleh karena

itu, tag penutup tidak perlu digunakan.

Gambar 2.10 Contoh Sintak Membuat Horizontal Line

Hasilnya :

Gambar 2.11 Hasil Contoh Sintak Membuat Garis Horizontal

2.3 LIST HTML

Dalam HTML, terdapat 3 jenis tag list istilah, yaitu berurutan (ordered list) , tidak berurutan

(unordered list) dan definition list.

a) Ordered list akan ditampilkan menggunakan huruf atau angka dan menggunakan tag "<ol>",

sedangkan tag "<li>" akan digunakan untuk daftar itu sendiri. Ordered list mempunyai atribut type

untuk mengganti tipe list yaitu 1, A, a, I, i. contoh :

b) Unordered list ditampilkan dengan sebuah lingkaran atau persegi dan menggunakan tag <ul>,

sedangkan untuk list sendiri menggunakan tag <li>. Unordered list mempunyai atribut type untuk

mengganti tipe list yaitu disc, circle, square, none. Contoh :

c) Definition list menampilkan daftar formulir dengan deskripsi masing-masing formulir. Tag "<dl>"

dan "<dt>" mendefinisikan deskripti dokumen, "<dt>" mendefinisikan nama institusi, dan "<dd>"

mendeskripsikan masing-masing institusi; namun, tag "<li>" digunakan untuk mendefinisikan

daftar itu sendiri.

Perhatikan contoh di bawah ini agar lebih mudah memahaminya.

Gambar 2.12 Contoh Sintak Membuat List

Hasilnya dapat dilihat pada gambar berikut ini:

Gambar 2.13 Hasil Contoh Sintak Membuat List

2.4 HTML IMAGES

Tag img digunakan untuk meletakkan gambar dalam dokumen HTML dan terlihat seperti ini:

Menurut standar teknis, gambar tidak ditambahkan ke database situs web; sebaliknya, mereka hanya

ditambahkan ke database situs web. Tag img membuat ruang kosong tempat gambar yang relevan

dapat ditampilkan.

Tag <img> memiliki beberapa atribut yang di gunakan :

• Src : Digunakan untuk memberi tahu browser tempat untuk menemukan gambar

• Alt : Memberikan informasi teks alternatif untuk gambar

• Title : Memberikan Nama pada gambar pada saat cursor berada di wilayah gambar

• Width : Menentukan lebar gambar, ukuran gambar default (px) pixcel dan persen (%)

• Hight : Menentukan tinggi gambar, ukuran gambar default (px) pixcel dan persen (%)

Penulisan tag img External :

Penulisan tag <img> Internal

Gambar 2.14 Contoh Sintak Menyisipkan Gambar

Gambar 2.15 Hasil Contoh Sintak Menyisipkan Gambar

LATIHAN MANDIRI

1. Buatlah sintac HTML untuk menampilkan tulisan seperti berikut ini

CO2

X2 + 6x + 6

Windows merupakan salah satu contoh Operating System

2. Buatlah sintac HTML untuk menampilkan pesan seperti berikut ini

Daftar Nama Mahasiswa Kelas Pemrograman Web

• Pria

1. Dendy Kurniawan

2. Antariksa Wibawa

• Wanita

1. Erinda Anasia Agustin

2. Safira Berliana Putri

BAB 3

HYPERLINK & FORM PADA HTML

TUJUAN :

a. Mahasiswa dapat menge-link-kan halaman antar dokumen HTML.

b. Mahasiswa mampu membuat tautan ke tujuan tertentu dari sebuah dokumen HTML.

c. Mahasiswa dapat membuat form pada dokumen HTML

d. Pengguna memahami cara menggunakan fungsionalitas formulir di header dokumen

HTML

e. Mahasiswa dapat menyisipkan field sesuai dengan tujuan penggunaannya.

Overview :

Salah satu keunggulan aplikasi berbasis web yaitu dapat menghubungkan satu dokumen dengan

dokumen yang berada di server yang berbeda, baik yang berada di server yang sama maupun server

yang berbeda. HTML memungkinkan Anda melakukan "interaksi yang lebih luas" dengan dokumen itu

sendiri. Misalnya, kemampuan dokumen HTML dapat menyediakan fasilitas input atau pengiriman

pengguna. Informasi ini dapat diolah lebih teliti menjadi informasi yang sangat dibutuhkan oleh

pengunjung situs maupun organisasi pengelola situs ini . Teknik pengisian ini menggunakan

bentuk elemen.

3.1 HYPERLINK HTML

Elemen utama HTML yaitu tautan, sering dikenal sebagai tautan hypertext, hyperlink, atau

lebih dikenal sebagai tautan. Dengan hyperlink ini, Anda dapat membuka lebih banyak dokumen HTML

atau mengarahkan langsung ke dokumen HTML yang diinginkan. Hyperlink ini dapat diaktifkan pada

teks tertentu atau bahkan gambar, namun jika diaktifkan pada teks, teks akan ditampilkan dengan cara

yang berbeda dan peringatan akan berubah (secara default).Tag yang di gunakan yaitu tag <a> yang

mempunyai arti anchor atau jangkar.

Tabel 3.1 Atribut Dalam Hyperlink

Penulisan External Link :

Penulisan Internal Link :

Penulisan Relatif Link atau berbeda Folder penyimpanan :

Untuk menggunakan tautan yang akan mengarah ke badan dokumen, klik di sini.

“#nama_section” menjadi

Dengan ketentuan kita harus memberikan Id terlebih dahulu.

Contoh : buat 3 file html berikut ini

File name : index.html

Gambar 3.1 Sintak index.html untuk Link

Tabel 3.2 Penjelasan Sintak Pada Gambar 3.1

LINE PENJELASAN

Line 7 id=”title” yaitu untuk memberikan nama id title pada tag h1 line 7 yang nantinya

dapat di panggil oleh tag <a href = “title”> atau bagian document.

line 9 – 10 pemanggilan internal link file html untuk di tampilkan jika di klik

line 14 – 18 isi pesan yang di tampilkan dari halaman beranda (index.html)

line 19 membuat baris

line 20 memanggil dokumen bagian dengan nama ID footer (ada pada line 25)

line 21 – 24 berisi enter untuk membuat halaman menjadi panjang (agar bisa di scrall untuk

menunjukan pemanggilan dokumen ke bagian) Anda dapat mengisi bagian ini dengan

article / text apapun

line 25 seperti line 7, berguna untuk memebrikan nama ID footer pada tag div line 25

line 26 &copy membuat symbol ©, memanggil external link stekom.ac.id dengan nama

Universitas Stekom, target=_blank untuk membuka link di new tab

line 28 Memanggil dokumen bagian dengan nama ID title (ada pada line 7) Selanjutnya Anda

harus membuat file contact.html dan about.html agar ketika link yang ada di

index.html di klik, akan mengarah ke file yang dituju. Jika nama file salah atau file

belum di buat maka akan di tampilkan halaman berikut ini

Gambar 3.2 Contoh Saat Halam Belum di Buat

File Name : contact.html

Gambar 3.3 Sintak contac.html untuk Link

Penjelasan masing – masing line source code, sama dengan penjelasan file index.html.

namun ada tambahan api pada line 17 yang fungsinya mindirect ke WA nomer ini untuk

mengirim pesan “Saya tertarik dengan Web Anda”. sesudah ini Anda membuat file about.html

File name : about.html

Gambar 3.4 Sintak about.html untuk Link

Penejelasan seperti file index.html. Silahkan jalankan file html ini dengan web

browser yang ada di computer Anda. Coba persatu tombol Beranda, Contact, About yang ada di header

serta tombol scrall ke atas, scrall ke bawah yang ada pada halaman beranda dan tombol universitas

stekom yang ada pada footer masing – masing halaman web ini . Catatatn : letakkan 3 file

ini ke dalam 1 folder yang sama

Gambar 3.4 Peletakan ke Tiga File untuk Link

3.2 FORM

Dalam HTML, formulir yaitu bagian dari konten yang berfungsi sebagai kolom input atau

sebagai permintaan pengguna; itu akan segera dihapus atau diubah agar dapat digunakan sesuai

kebutuhan. Pertimbangkan prosedur transfer data, browsing, hapus, penguncian data, dan yang

serupa lainnya. Prosedur pengisian formulir HTML dijelaskan di sini.

"Nama Formulir" mengacu pada nama formulir yang sekarang digunakan, "Metode" mengacu

pada metode atau sarana yang digunakan untuk mentransfer data ke server, dan "Action" mengacu

pada alamat atau file lain yang digunakan untuk menerima input dari form di server.

a) MEDIA INPUT DALAM FORM

Salah satu kegunaan pembuatan media inputan yaitu untuk membantu user agar lebih

mudah dalam memasukan data kedalam halaman web. Media inputan terdiri dari Kontrol berupa

text, radio button, checkbox, dropdown list dan button.

1) KONTROL BERUPA TEXT

Menggunakan dua textarea dan input tag anak, formulir HTML dapat digunakan untuk

memasukkan informasi berbasis teks. Tag input digunakan untuk memasukkan teks yang

hanya berisi satu bar, sedangkan tag textarea digunakan untuk memasukkan teks yang

memiliki beberapa baris.

Hasilnya :

Didalam text area terdapat beberapa atribut yaitu

• Name, digunakan untuk memberi nama pada tag textarea

• Id, digunkan untuk memberi nama pada textarea

• Cols, digunakan untuk menentukan panjang dari textarea

• Rosw, digunakan untuk menentukan tinggi dari textarea

Dengan menggunakan properti height dan width CSS, Anda juga dapat mengubah

margin kiri dan kanan textarea.

Meskipun dapat menampung jumlah kata yang banyak, textareas tidak dapat digunakan

untuk semua situasi entri data. Biasanya menginginkan pengguna untuk memasukkan data

satu digit dari sejumlah besar teks. Anda dapat menggunakan elemen masukan untuk jenis

masukan seperti :

Hasilnya :

Ketahuilah bahwa elemen ini akan menggunakan tipe atribut untuk menunjukkan tipe

data yang akan didistribusikan. Ada banyak tipe data yang bisa diakses, dan browser akan

mencocokkan tipe teks yang tersedia dengan atribut yang Anda tentukan. Mendefinisikan

istilah untuk jenis atribut meliputi:

2) KONTROL BERUPA RADIO BUTTON

Tombol radio digunakan untuk menunjukkan pilihan dengan komponen emosional

yang kuat. Biasanya digunakan di situs web untuk pertanyaan komprehensif seperti yang

ditanyakan saat pendaftaran online, pilihan ini biasanya berkaitan dengan keyakinan

seseorang dalam hal agama, politik, atau topik lainnya.

Tombol radio dibuat menggunakan input elemen HTML dan atribut ndengan type :

`radio`

yang akan menghasilkan elemen masukan seperti berikut:

Dalam proses pembuatan tombol radio elemen, dua atribut lainnya—nama dan nilai—

harus ditentukan. Atribut nama digunakan untuk memberi tahu browser bahwa tombol radio

tertentu milik grup tombol radio tertentu, sehingga pengguna tidak dapat memilih dua opsi

untuk tombol radio yang dipilih.

3) KONTROL BERUPA CHECKBOX

Berbeda dengan tombol radio yang hanya memungkinkan pengguna memilih satu

opsi, kotak yang menyala memungkinkan pengguna memilih satu, beberapa, atau tidak

ada opsi sama sekali. Ini biasanya digunakan untuk mengumpulkan data operasional

berkualitas tinggi. Anda dapat menggunakan "Centang kotak" untuk masking atribut.

Kotak centang input yaitu alat untuk memilih opsi atau pilihan tertentu. Jika Anda

mengisinya, pengguna akan memeriksanya (mencentang), dan jika tidak, Anda hanya akan

mendapatkan peringatan sederhana.

Mirip dengan tombol radio, elemen ini dibuat menggunakan elemen input yang jenis

atributnya menentukan kotak centang.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

4) KONTROL BERUPA DROPDOWN LIST

Penciptaan dua komponen menu drop-down, pilih dan opsi, dilakukan. Elementselect

menyertakan semua opsi elemen yang tersedia untuk membuat menu drop-down. Elemen

sebenarnya dari opsi yaitu pengidentifikasi dropdown yang diinginkan. Perhatikan kode

di bawah ini:

Yang menghasilkan

Jika kita menambahkan atribut multiple

Maka akan menghasilkan tampilan

b) BUTTON

Kontrol input bertipe button pada HTML mewakili tombol yang dapat diklik, yang biasanya

digunakan untuk mengirimkan formulir ke alamat tujuan atau action dalam form.

1) Submit

Tujuan tombol ini yaitu menampilkan URL yang telah disetujui untuk tindakan atribut.

Pembuatan tombol submit juga melibatkan penggunaan elemen input, yang jenis atributnya

diidentifikasi oleh nomor submit, seperti yang terlihat di bawah ini:

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

2) Reset

Tombol ini bertujuan untuk mengirim form ke tahap awal (mengosongkan nilai semua elemen

yang ada pada form). Mirip dengan kirim tombol, pembuatan tombol dilakukan dengan kondisi

yang sama, tetapi dengan nilai tipe atribut yang berbeda yang ditunjukkan oleh tombol reset

pada tombol saat ini.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

c) ORGANISASI ELEMEN FORM

HTML juga menyediakan elemen yang dapat digunakan sebagai penanda elemen yang

digunakan dalam formulir untuk memberikan informasi kepada pengguna. Label, fieldset, dan

legend yaitu satu-satunya elemen yagn yang dapat digunakan untuk tujuan ini.

1) Label

Label elemen menawarkan kemampuan untuk melampirkan teks ke label dengan

menggunakan formulir elemen. Unsur dalam kalimat ini ditentukan oleh deskripsi yang

dimaksudkan dari atribut kalimat itu. Atribut untuk label elemen memiliki nilai numerik yang

sama dengan id atribut untuk formulir pengiriman elemen. Nilai serupa akan menyertakan

elemen input dan label yang disorot, memungkinkan pengguna mengklik teks yang telah

disediakan oleh elemen label untuk menghasilkan nilai.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

2) Fieldset

Element fieldset yaitu alat yang digunakan untuk mengelompokkan sejumlah elemen yang

berhubungan dengan bentuk untuk menunjukkan bahwa masing-masing elemen ini yaitu

bagian dari satu grup atau jika tidak terhubung.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

3) Legend

Legenda elemen digunakan untuk memberikan fieldset dengan judul. Penggunaan

elemen legenda sangat mudah dan hanya perlu mengacu pada elemen sebagai anak pertama

dari fieldset, seperti yang terlihat di bawah ini:

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

d) VALIDASI MASUKAN FORM

Validasi formulir digunakan untuk memeriksa keakuratan data yang dimasukkan ke dalam

formulir. Misalnya, jika kami ingin memvalidasi bahwa bidang email dalam formulir memerlukan

alamat email, kami memerlukan pengguna untuk memasukkan alamat email dalam format yang

valid. Jika pengguna memasukkan alamat email dalam format yang tidak valid, pesan kesalahan

akan muncul di lapangan dan data tidak dapat diproses. Validasi formulir memastikan bahwa

browser dapat mengeksekusi data yang dimasukkan pengguna dalam format yang konsisten

dengan yang ditentukan dalam standar HTML.

1) Atribut requied

Atribut ini digunakan untuk mengidentifikasi bahwa form harus diisi. Jika pengguna

tidak mengisikan form yang sudah ada atribut ini maka akan tampil pesan peringatan.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

2) Atribut maxlength

Atribut ini digunakan untuk mengatur berapa jumlah karakter yang dapat di input

form. Penggunaanya kita harus menambahkan atribut maxlength dan menentukan value yang

merupakan jumlah max karakter inputan.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

3) Atribut type : |number|url|email|

Penggunaan atribut type mempunyai fungsi bermacam macam, jika kita menginginkan

form hanya bisa diisi dengan angka saja maka gunakan number pada typenya. Jika kita

menginginkan yang diisikan tipe url atau email, ganti dengan url atau email. Sebagai contoh

perhatikan sintaks di bawah ini:

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

Contoh Membuat Form :

Form.html

Hasilnya :

Gambar 3.5 Hasil dari form.html

BAB 4

MEMBUAT TABEL & LAYOUT WEB PAGE

TUJUAN :

a. Pengguna dapat membuat dan memformat tabel dalam dokumen HTML.

b. Pengguna dapat memahami cara membuat bingkai dalam dokumen HTML.

c. Pengguna dapat memahami cara menggunakan frame yang dimaksud.

d. Mahasiswa dapat menyesuaikan batasan frame.

e. Mahasiswa mampu mengenali target sel frame dari hyperlink.

Overview :

Tabel yaitu metode untuk menampilkan informasi di header situs web dalam format baris dan kolom.

Hampir setiap situs web dengan kualitas dan profesionalisme tinggi perlu dianalisis menggunakan

tabel. Mirip dengan spreadsheet yang memiliki kolom dan berformat angka-angka, tabel online

memiliki kolom yang berformat link, gambar, dan teks.

Saat membuat situs web, penggunaan tabel dan bingkai dimungkinkan. Secara umum, tidak ada

perbedaan yang sangat signifikan dalam situasi ini, tetapi selama pembuatan waktu akses situs web,

kemungkinan hal ini akan menjadi sangat jelas dalam kaitannya dengan waktu respons yang

diperlukan.

Frame akan dapat mengubah satu dokumen HTML menjadi beberapa dokumen HTML. Meskipun

demikian, setiap bagian tertaut ke dokumen HTML yang valid.

4.1 TABEL

Tabel digunakan untuk menampilkan data dalam format kolom dan bar. Padahal, setiap kolom

memiliki data yang sejenis, dan setiap baris yang ditempatkan pada sebuah kolom mencakup data

yang telah disusun menjadi satu kesatuan. Setiap tabel memiliki judul, tempat bagi Anda untuk

menunjukkan peringatan atau kode bar yang sedang digunakan, bar untuk informasi, dan sel

untuk setiap item. Kolom pertama pada tabel di bawah berisi informasi tentang header; setiap

baris mengubah tag HTML untuk tabel; dan setiap kolom mengubah fungsi atau tujuan dari

sebuah tag. Elemen yang sering digunakan dalam membuat tabel HTML dibahas di bagian ini.

Elemen tabel> HTML membuat data tabular dengan menyajikan informasi dalam tabel dengan

dua dimensi yang terdiri dari sel berisi data dan kolom teks. Ada beberapa tag yang harus

dipahami sebelum membuat tabel HTML:

• <table> pembungkus tabel

• <thead> pembungkus kepala tabel

• <tbody> pembungkus body tabel

• <tfoot> pembungkus kaki tabel

• <tr> “tabel row” membuat baris di tabel

• <td> “table data” membuat sel di tabel

• <th> “table head” membuat judul pada header tabel

Selain itu juga terdapat Tag Atribut yang dapat digunakan untuk mengatur tabel didalam html,

berikut ini contoh Tag atribut yang dapat di gunakan :

• Align=left | Center | right, digunakan untuk mengatur posisi tabel

• Width, Atribut digunakan untuk menentukan lebar yang diinginkan dari seluruh table, jika

atribut tidak ada , lebar table ditentukan oleh data

• Colspan, Atribut digunakan untuk meggabungkan kolom

• Rowspan, Atribut digunakan untuk menggbungkan baris

• Bgcolor, digunakan untuk memberikan warna pada table.

• Border, digunakan untuk menentukan lebar garis

• Caption, digunakan untuk membuat judul dari table.

Bentuk penulisan tag Table pada Html dapat diihat pada contoh di bawah ini:

table.html

Haslinya jika di tampilkan pada browser

Gambar 4.1 Hasil Syntac table.html

a) Fungsi Tag Caption

Tujuan dari Tag Caption yaitu untuk membuat judul tabel. Elemen ini terletak di dalam

tabel elemen dan memiliki atribut yang disejajarkan dengan bagian atas dan tombol. Bentuk

penulisanya:

b) Fungsi Tag Th

Baris pertama yang kita gunakan saat membuat tabel yaitu sebagai judul baris berikutnya di

bawahnya. Biasanya, tabel pertama dalam skenario ini memiliki perbedaan visual dari tabel kedua

agar lebih menonjol, misalnya dengan menggunakan font atau warna yang berbeda.

HTML memiliki tag khusus yang dapat digunakan untuk keperluan ini, yang dikenal dengan tag

"<th>" (singkatan dari table head). Untuk menggunakan tag th, yang harus dilakukan yaitu

mengganti tag td dengan th pada kolom pertama tabel.

Anda dapat melihat contoh penggunaan tag "<th>" dan atribut "align", "rowspan and colspan",

dan "caption" pada gambar di bawah ini.

Tag.html

Hasilnya akan seperti pada gambar di bawah ini

Gambar 4.2 Hasil dari syntac tag.html

c) Tag Thead, Tbody dan Tfoot

Pada tag html juga di sediakan tag yang digunakan untuk membedakan antara bagian header

table, body table dan footer table. Tag <thead> digunakan unutk membungkus kepala table yang

biasanya berisi judul dari masing masing fild yang di buat, Tag <tbody> digunakan unutk

membungkus badan atau body table, yang berisi isi utama dari dari sebuah table. Tag <tfoot> Tag

untuk membungkus bagian footer dari table, yang berisi kesimpulan atau penjumlahan dari table

yang telah dibuat. Sebagai contoh lihat Latihan berikut:

thead.html

Gambar 4.3 hasil dari sintac thead.html

Elemen thead, tbody, dan tfoot digunakan untuk menyorot konten atau elemen yang

terlihat masing-masing di bagian atas (head), bawah (foot), dan tengah (body) dari tabel

tertentu.

Saat digunakan, elemen <thead> digunakan bersamaan dengan elemen <tbody> dan

<tfoot> yang masing-masing menentukan bagian atas (tubuh) dan bagian bawah (kaki) dari tabel

tertentu.

Tidak ada atribut khusus yang tersedia untuk elemen "<tbody>" di HTML5, meskipun

beberapa atribut, termasuk align, bgcolor, char, charoff, dan valign, tersedia di HTML4.01.

Namun, atribut ini sudah digunakan, dan Anda sebaiknya hanya menggunakan CSS untuk

memodifikasi elemen <tbody>.

4.2 FRAME

Dengan menggunakan framing pada HTML, dimungkinkan untuk membuat dokumen HTML

dari tampilan file HTML yang telah dibagi menjadi beberapa bagian, dengan setiap bagian berisi

satu atau beberapa bagian yang bertentangan satu sama lain. Ini memungkinkan penggunaan

bandwidth internet yang efisien dan kelancaran proses pengunduhan. Berikut yaitu contoh

sintaks pembuatan frame standar yang sering digunakan.

Tabel 4.1 Atribut yang digunakan dalam frame

Dengan memanfaatkan frame ini, kita dapat menentukan tampilan layout website kita lebih

mudah dan rapi. Contoh layout web :

Gambar 4.4 Contoh Layout Web

Dan yang akan di praktikan dalam modul ini yaitu layout seperti di bawah ini

Gambar 4.5 Contoh Layout yang Akan di Buat

Terdapat enam bagian pada layout yang akan di buat di antaranya : header, menu, konten, sidebar

1, sidebar 2 dan sidebar 3. Masing – masing halaman dokumen kita buat file html sendiri – sendiri.

Silahkan simpan file dokumen html yang akan di buat di bawah ini di satu folder yang sama

1. header.html

Keterangan :

- &nbsp yaitu syntac yang di gunakan untuk memberikan sepasi pada html

- Marquee yaitu alat dalam HTML yang memungkinkan teks bergerak atau berhenti

bergerak. Atribut apa saja yang dapat dituliskan pada sebuah marquee dapat dilihat pada

tabel 4.2 berikut ini :

Tabel 4.2 Atribut Marquee

NAMA ATRIBUT KETERANGAN VALUE

width mengubah lebar teks Pixel dalam %

height mengubah tinggi teks Pixel dalam %

direction

Mengubah arah dari

gerakan teks

Left

Right

down

behaviour Mengubah gerakan

Slide: Teks bergerak sekali lalu

berhenti Scroll: Teks bergerak

berputar

frasa yang berbeda yaitu : teks

bergerak dari kiri ke kanan lalu

berulang

scrolldelay

mengubah waktu

tunda gerakan dalam

mili detik

Value

scrollmount

mengubah r kecepatan

gerakan

Value dalam pixel

bgcolor

mengubah warna latar

belakang teks

color

Loop

mengubah jumlah

perulangan

Value

-1

infinite

Vspace

mengubah ruang

antara atas/bawah

dengan teks

Value

Hspace

mengubah ruang

antara kiri/kanan

dengan teks

Value

Teks berjalan dari kanan ke kiri:

Teks dengan atribut behaviour:

eksperimen lainnya:

Dan ketika header.html ini di buka pada web browser maka dia menampilkan seperti

berikut ini

Gambar 4.6 hasil header.html

2. menu.html

Keterangan :

- Pada bagian ini hanya membuat hyperlink dengan tampilan teks yang di arahkan atau di

targetkan pada “content”. Nama content ini nantinya kita buat denga

menggunakan frame

- Untuk line 11 <a href=”#”> merupakan link buntu yang mana dia membuat link namun

belum aktif atau tidak aka nada respon apa – apa ketika link ini di klik

- Jika halaman ini di buka dengan web browser maka hasilnya akan seperti di bawah

ini

Gambar 4.7 Hasil menu.html

3. content_beranda.html

Keterangan :

- Anda dapat mengisi halaman content_beranda.html ini dengan sesuka hati Anda.

Hasilnya akan seperti gambar 4.8

- Anda juga dapat membuat dokumen html untuk content – content yang lainnya untuk di

tautkan ke dalam hypelink dokumen menu.html

- Misalkan Anda membuat dokumen content_galeri.html di bawah ini, dan hasilnya seperti

gambar 4.9

- Hanya di bedakan isi nya saja antar content satu dengan content yang lainnya

Gambar 4.8 Hasil content_beranda.html

Gambar 4.9 Hasil content_galeri.html

4. sidebar1.html

Gambar 4.10 syntac dan hasil sidebar1.html

5. sidebar2.html

Gambar 4.11 syntac dan hasil sidebar2.html

6. sidebar3.html

Gambar 4.12 syntac dan hasil sidebar3.html

sesudah membuat 6 dokument html di atas, sekarang saatnya membuat dokumen html fame

yang berfungsi menggabungkan ke 6 dokumen di atas di dalam satu layout web.

7. index.html

Keterangan :

- line 6 : membagi baris menjadi 2 bagian dengan ukuran baris 15% dan baris 2 dengan

ukuran 85% dengan ukuran border = 1

- Line 7 : memberi name=”header” pada baris pertama (15%) dimana name ini nanti dapat

di gunakan untuk target hyperlink. Selain itu pada line 7 ini juga memanggil dokumen

header.html yang sudah kita buat sebelumnya

- Line 8 : membagi kolom pada baris ke dua (85%) menjadi tiga bagian dengan ukuran

masing – masing 10%, 75% dan 20% dengan border = 1

- Line 9 : Memberikan name menu dan memanggil dokumen menu.html untuk di

tampilkan pada bagian layout (ukuran 10% )

15%

85%

70% 20% 10%

15%

85%

- Line 10 : Memberikan name content dan memanggil dokumen content_beranda.html

untuk di tampilkan pada bagian layout (ukuran 70% tadi)

- Line 11 : membagi bagian layout pada baris ke 2 kolom ke 3 (ukuran 20% tadi) menajdi 3

baris dengan masing – masing berukuran 30%

- Line 12 – 14 : Masing – masing memberikan nama sidebar1, sidebar2, dan sidebar3 serta

memanggil dokumen sidebar1.html, sidebar2.html dan sidebar3.html untuk di tampilkan

pada bagian yang telah di atur pada line 11 tadi.

TUGAS MANDIRI 2 :

Tambahkan dokument content_profile.html kemudian silahkan tampilkan biodata diri anda seperti

berikut : (isi data dengan identitas diri Anda masing – masing)

BIODATA DIRI

DATA DIRI KETERANGAN FOTO

Nama Dendy Kurniawan

NPM 12345678

Jurusan Sistem Komputer

Jenis Kelamin Laki – laki

TTL Kendal, 1 Januari 1991

Alamat Jalan Suka Maju No. 57 Kendal

Hobi Programing

Ketentuan :

1. Halaman biodata ini akan tampil di dalam layout saat menu MY PROFILE di klik

2. Untuk bagian header, content beranda, content gallery, sidebar 1- 3 jika Anda modifikasi isi

nya dan di tampilkan lebih menarik, akan mempengaruhi nilai.

BAB 5

PENGENALAN CASCADING STYLE SHEET (CSS)

TUJUAN :

a. Mahasiswa Mampu Memahami dan mengetahui Penggunaan CSS pada HTML

b. Mahasiswa Mengetahui selector dalam CSS

c. Mahasiswa Mengetahui dan mengimplementasi cara Menulis CSS

d. Mahasiswa Mampu mengubah baground dengan CSS

e. Mahasiswa Mampu mengubah Hyperlink dengan CSS

Overview :

CSS (Cascading Style Sheets) yaitu lembar gaya khusus bahasa yang digunakan untuk

mengubah format dokumen yang telah diterbitkan menggunakan markup. Pada tahun 1996, CSS mulai

dikenal lebih luas sebagai standar untuk membangun website. Nama CSS berasal dari fakta bahwa

setiap deklarasi hubungan homoseksual yang berbeda satu sama lain dapat dilaksanakan secara

perlahan sebelum menciptakan hubungan antara orang tua dan anak untuk setiap hubungan gay.

Aplikasi CSS yang paling umum yaitu memformat halaman web yang ditulis dalam HTML dan

XHTML. Spesifikasi CSS dibuat oleh World Wide Web Consortium (W3C). CSS memungkinkan gambar

identik ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti input

braille, layar, cetak, dan teks (yang dapat dibaca dengan cara berbeda tergantung pengaturan dasar-

suara browser). Dokumen dalam HTML atau XML yang serius juga dapat disajikan secara berbeda, baik

dengan menggunakan jenis font yang berbeda atau skema warna yang berbeda dengan CSS.

5.1 OVERVIEW CSS

Singkatan CSS singkatan dari "Cascading Style Sheets." Sesuai dengan namanya, CSS memiliki

definisi “bahasa style sheet” yang mengacu pada bahasa pemrograman yang digunakan dalam desain

web. CSS yaitu satu-satunya bahasa pemrograman yang paling banyak digunakan untuk membuat

situs web header. Saat mendesain header situs web, CSS menggunakan id dan penanda yang dapat

dikenali oleh pengguna secara sekilas.

Dalam bidang pemrograman dan teknologi yang berkembang pesat, CSS tidak lagi hanya

digunakan bersamaan dengan HTML dan XHTML, namun masih mampu diterapkan pada

pengembangan aplikasi Android. CSS dapat digunakan menggunakan id, class, atau tag tag, yang

biasanya disebut sebagai "pemilik".

Font, ukuran font, gaya font, dan format font semuanya dapat diubah dengan CSS. Buat tata

letak yang sempit, tinggi, dan ringan, buat situs web yang responsif, ubah bidang formulir, dan lakukan

beberapa tugas lain dengan CSS tetapi saya tidak akan membahasnya secara mendalam dalam

pelajaran mempelajari prinsip-prinsip CSS ini.

Margin dapat digunakan untuk mengubah ukuran font, warna dapat diubah untuk mengubah

warna huruf, dan definisi font dapat diubah untuk mengubah jenis huruf. Menggunakan "latar

belakang" dapat digunakan untuk memindahkan teks atau gambar lebih jauh dari penampil. Gunakan

"ukuran font" untuk mengubah ukuran font. jenis font yang menggunakan "font-family" dan beberapa

gaya font lainnya.

a) Selector

Gambar 5.1 Selector CSS

Karena CSS digunakan untuk mengelola atau bahkan memodifikasi konten HTML, diperlukan

metode untuk "gaiting" atau menghubungkan kode CSS dengan tag HTML yang sesuai. Dalam CSS,

inilah yang dimaksud dengan Selector.

Sesuai dengan namanya, sebuah pemilih dapat digunakan untuk mencari halaman online yang

perlu diubah ukurannya atau ditata. Misalnya, "cari seluh tag <p>", "cari seluh tag HTML yang

memiliki atribut class="warning", atau "cari seluh link yang ada di dalam tag <p>".

CSS paling sederhana untuk digunakan yaitu tag dari dokumen HTML standar, seperti tag

<p>, <h1>, <li>, atau dll. Pemilih CSS dapat menjadi objek yang kompleks tergantung pada

kebutuhan pengguna.

1) Universal Selector

Hanya satu pemilih universal tanda "*" yang tersedia di CSS. Selektor Ini dimaksudkan untuk

"mencari" semua tag yang tersedia. CSS Pemilah Universal Contoh:

Kode CSS yang disediakan di sini efektif untuk membuat setiap tag HTML berwarna coklat dan

tampilan latar menjadi hijau. Pada selector universal ini biasanya juga di gunakan untuk

mereset settingan default yang ada pada web browser.

2) Element Type Selector

Sintaks untuk pemilihan yang pada dasarnya yaitu tag untuk HTML itu sendiri yaitu

Pemilih Jenis Elemen, juga dikenal sebagai Pemilih Tag. Setiap tag HTML dapat digunakan

sebagai pemilih, dan pilihan khusus ini akan mencakup semua tag yang ditemuinya.

Menggunakan Pemilih Tipe Elemen Contoh CSS:

Kode CSS pada contoh ini akan membuat semua tag dengan tag h1 bergerak ke kiri

dan semua tag dengan tag p memiliki lebar 14 piksel. Pengaruh pemilih jenis elemen yaitu

dari tag pertama hingga tag terakhir. Jika ada tag I di dalam tag "<p>", maka tag ini juga

akan memiliki lebar 14 piksel hingga diikuti oleh tag penutup "</p>".

3) Class selector

Class Selector yaitu satu-satunya pemilih yang paling populer dan sering digunakan. Pemilih

Kelas akan "mencari" setiap tag yang memiliki atribut kelas dengan nilai yang sesuai. Untuk

menggunakan Pemilih Kelas, Anda harus memiliki tag HTML dengan atribut kelas. Contohnya:

Ingatlah bahwa kita menambahkan nama kelas itu sendiri sebagai kelas atribut untuk setiap

tag pada daftar di atas. Nama kelas dapat diberikan oleh lebih dari satu tag, dan sebuah tag

dapat mencakup lebih dari satu kelas. Misalnya pada paragraf terakhir dari contoh di atas, tag

h2 memiliki atribut class="judul penting berwarna". Tag ini terdiri dari tiga kelas: judul,

penting, dan kelas berwarna.

Sebaliknya, kode Pemilih Kelas CSS yaitu sebagai berikut:

Di CSS, pemilih kelas diterapkan dengan memberi tanda centang di depan nama kelas. Sebagai

contoh kita, setiap kelas yang memiliki nilai "paragraf pertama" akan menyebabkan teks

menjadi merah. Dan setiap judul kelas akan memiliki jenis huruf 20 piksel.

4) ID Selector

Selector yang paling dasar dan sering digunakan yaitu ID Selector, yang bekerja

berdampingan dengan class Selector (walaupun tidak sesering class selector). Penggunaan

pemilih ID hampir identik dengan penggunaan pemilih kelas, kecuali bahwa dengan pemilih

kelas, atribut seperti kelas digunakan untuk mengidentifikasi tag HTML, dengan pemilih ID,

atribut seperti id digunakan. Contoh penggunaan ID atribut dalam tag HTML:

Selain digunakan sebagai pemilih CSS, atribut id juga berfungsi sebagai tag unik untuk masing-

masing tag (terutama dipakai untuk kode JavaScript). Karena itu, setiap ID yang digunakan

harus unik dan tidak boleh sama dengan yang lain. Dengan kata lain, sebuah ID hanya boleh

digunakan satu kali di dalam satu halaman web dan tidak boleh sama. Contoh penggunaan

kode pemilih id pemilih kelas CSS yaitu sebagai berikut:

Di CSS, kami menggunakan tanda hash "#" untuk menunjukkan bahwa kami sedang mencari

tag dengan id tertentu.

5) Attribute Selector

Dibandingkan dengan selektor-selektor sebelumnya, selektor ini sedikit lebih rumit.

Pemilih atribut ini digunakan untuk menemukan setiap tag dengan atribut yang telah diformat

dengan benar. Konteks penggunaan pemilih atribut CSS yaitu sebagai berikut:

Seperti yang terlihat dari contoh di atas, setiap atribut yang digunakan harus

ditempatkan di antara tanda kurung "[" dan "]". [href] akan berfungsi dengan semua tag yang

memiliki atribut bernama "href", terlepas dari nilainya (yang biasanya ditemukan pada tag

"<a>"). Misalnya, [type="kirim"] Ini akan berfungsi dengan tag yang memiliki atribut dengan

nilai kirim, yang dalam hal ini akan berfokus pada tombol kirim formulir. Meskipun memiliki

kemampuan untuk mengidentifikasi tag yang cukup spesifik, atribut ini sering digunakan.

b) Property

Properti CSS yaitu elemen atau gaya yang akan dipisahkan dari tag HTML. CSS memiliki

beberapa properti yang dapat diterapkan untuk menghasilkan hasil akhir yang kita inginkan.

Hampir setiap properti CSS dapat diterapkan ke semua pengguna.

Jika pemilih digunakan, misalnya, untuk "menemukan setiap tag <p>", maka propertinya

yaitu "apa pun yang ingin Anda ekstrak dari tag <p> itu", seperti ukuran teks, warna, dan jenis

font.

c) Value

Nilai CSS yaitu ukuran properti. Misalnya, nilai atau ciri properti backgroundcolor, yang

digunakan untuk mengubah warna latar belakang suatu pilihan, dapat berupa kombinasi merah,

biru, hitam, atau putih.

5.2 PENEMPATAN CSS

CSS menggunakan pemilih (id dan kelas) untuk mengidentifikasi elemen yang akan dimodifikasi atau

menerima pesan CSS. Jika HTML dianggap sebagai tiang pada bangunan rumah tertentu, maka CSS

berfungsi sebagai dekorasi dan aksen pada bangunan rumah ini . Ada tiga teknik

pengembangan CSS, yaitu:

o Inline CSS Style

o Internal CSS Style

o External CSS Style

Pada pelajaran kali ini, kita akan membahas dan mempelajari tiga teknik penulisan CSS (inline dan

internal).

a) In Line Style

Pengkodean sintaks gaya inline yaitu teknik pengkodean sintaks CSS yang tidak memerlukan

penyeleksi (id dan class). Oleh karena itu, sintaks CSS digunakan baik secara eksplisit maupun

implisit untuk elemen HTML. Sintaks CSS diimplementasikan dalam atribut style=" ".

Contoh gaya CSS sebaris:

Untuk membuat contoh penulisan CSS dengan gaya inline dapat menyediakan file HTML. Langkah

awal buatlah HTML file dengan diberi nama index.html.

index.html

Perhatikan contoh di bawah ini. Sintaks CSS diterapkan ke elemen h1 melalui atribut style=” ”.

Properti CSS yang disebut warna memiliki fungsi mengubah font yang digunakan untuk peringatan.

Akibatnya, dalam contoh gaya CSS sebaris ini, tajuk h1 dibuat menggunakan jenis huruf yang

diubah menjadi peringatan birch (Biru).

Dan ketika peluncuran selesai, hasilnya yaitu sebagai berikut:

Gambar 5.2 hasil dari index.html in line style

b) Internal / Embedded CSS Style

Penyisipan Sintaks Gaya Internal yaitu teknik implementasi CSS yang memungkinkan

integrasi file tunggal dengan file HTML atau PHP. Sintaks CSS dijelaskan dalam tag gaya dan

diakhiri dengan tag /style>. Faktanya, tag HTML ditempatkan di dalam tas tag.

CSS Internal Contoh Gaya

Perhatikan contoh penataan CSS internal di atas. sintaks css digabungkan dengan html dalam

file yang sama. Sintaks CSS diimplementasikan dalam tag gaya. Padding CSS untuk sintaks memiliki

fungsi menyorot teks di dalam saudara elemen. Dalam contoh ini, kami memberikan batas sekitar

10 piksel atau 10 piksel. CSS mengelola kelas pemilih dengan awalan "." dan mengelola id pemilih

dengan awalan "#."

Gambar 5.3 hasil dari index.html internal embedded CSS style

c) External Style

Sintaks CSS dengan Gaya Eksternal yaitu teknik penulisan yang dapat bekerja dengan file

CSS dan HTML. Cara terbaik untuk menggunakan CSS yaitu dengan menggunakan teknik

penulisan ini karena ini mencegah kode program kita rusak karena sintaks untuk CSS ada di file

yang sama dengan kode kita. File CSS dan HTML ditautkan bersama menggunakan gaya

eksternal (contoh CSS):

Untuk membuat contoh CSS menggunakan gaya eksternal, gabungkan satu file html dengan satu

file CSS. Pada bagian ini, saya telah membuat sebuah file dengan memberi nama yaitu index.html

beserta style.css.

Gambar 5.4 Contoh file html dan CSS

index2.html

style.css

Jika di buka hasilnya akan seperti di bawah ini

Gambar 5.5 Eksternal CSS

5.3 MEMULAI CSS

a) MENGUBAH BAGROUND DENGAN CSS

Background atau batas bawah header website hanyalah dua elemen yang harus didesain agar

menghasilkan header website yang terlihat tajam dan kekinian. Ada berbagai metode untuk

mengubah latar belakang situs web atau tajuknya. Memanfaatkan gambar sebagai latar belakang

situs web dimungkinkan. Jika menggunakan gambar bukan yang Anda inginkan, Anda juga dapat

mengubah warna tampilan latar menggunakan CSS jika Anda tidak ingin menggunakannya.

Gunakan properti latar belakang CSS untuk mengubah warna latar belakang. Selain digunakan

untuk mengubah backdrop body website, properti background juga dapat digunakan untuk

mengubah gambar background dari elemen HTML tertentu.

Cara mengganti background dengan css

Dalam pelajaran CSS, metode untuk menghapus latar belakang menggunakan CSS akan dibahas.

cara menghilangkan background dengan css. Lanjutkan proses memodifikasi CSS untuk header.

buat file HTML baru dengan nama unik Anda sendiri. Di lokasi ini saya membuatnya dengan nama

index3.html. lalu buat file CSS dengan nama yang sama seperti Anda, tetapi saya sudah

memberinya nama style3.css dalam contoh ini.

1. Mengubah warna background dengan CSS

Perhatikan informasi di bawah ini tentang cara mengubah warna latar belakang

menggunakan CSS.

Index3.html

style3.css

Hasilnya

Gambar 5.6 Mengubah Warna Background

Pada kode CSS diatas, kita menentukan body yang akan dimodifikasi. Kami kemudian menentukan

warna latar belakang menjadi biru (biru), dan warna font menjadi putih (putih).

2. Mengubah gambar background dengan CSS

Akan dijelaskan pada bagian berjudul "Mengubah Tampilan Website dengan CSS" cara

menggunakan gambar untuk mengubah tampilan header website. Untuk melakukannya,

Anda harus menyediakan file grafik untuk digunakan sebagai gambar latar situs web. Dalam

hal ini, saya memberikan gambar menghadap ke belakang yang akan saya gunakan sebagai

foto sepia. Untuk mencegah hal ini terjadi, tempatkan file gambar dalam satu folder dengan

file html dan CSS. Nama file gambarnya yaitu stekom.png.

Gambar 5.7 File html gambar dan css

index4.html

style4.css

Perhatikan sintaks CSS di atas. Gunakan sintaks berikut untuk membuat gambar latar:

background: url('stekom.png');

Hasilnya

Gambar 5.8 Mengubah Background dengan gambar

The game has successfully been used as a backdrop halaman. Silahkan ber Eksperimen di

rubah nilai pixel atau mengganti tempat penyimpanan style.css dan juga mengganti warna

serta gambar baground dari tutorial diatas.

b) HYPERLINK DENGAN CSS

Hyperlink dibuat untuk mengubah halaman target saat diklik. Dalam HTML, hyperlink atau

kalimat dibuat dengan tag "a" dan diakhiri dengan tag "/a". Dan menggunakan CSS untuk

membuat, memodifikasi, atau membuat hyperlink cukup sederhana. Dalam kursus pembelajaran

CSS ini, prosedur pembuatan hyperlink yang disempurnakan dengan CSS akan dibahas. Lanjutkan

dengan menambahkan peringatan pada tautan, mengubah bentuk tautan menjadi tombol,

membuat teks hyperlink menjadi kuning saat diklik, dan seterusnya.

Ada dua status yang dikontrol oleh HTML dan dapat diubah menggunakan CSS. Yaitu:

Link : Ini yaitu koneksi default yang aktif.

Visited : ini yaitu status link yang sudah dibuka.

Hover : yaitu status tautan saat penunjuk mouse digerakkan di atasnya.

Active : status tautan atau hyperlink saat diklik.

Sebaliknya, status penggunaan atau pemeliharaan tautan dapat dinyatakan menggunakan

sintaks berikut:

➢ a:link = untuk link biasa

➢ a:visited = mewakili status tautan yang baru saja diklik.

➢ a:hover = Saat mouse digerakkan di atas tautan, status tautan itu ditunjukkan oleh

atribut.

➢ a:aktif = Status tautan atau hyperlink saat diklik ditunjukkan dengan atribut.

Contoh

index.html

style.css

Hasil ketika tidak ditunjuk kursor

Gambar 5.9 Hyperlink dengan CSS

Ketika di tunjuk kursor

Gambar 5.10 Hyperlink dengan CSS ketika di hover cursor

Silahkan Anda coba di bawah ini

index2.html

style2.css

Amatilah hasilnya dan silahkan bereksperimen mengganti value dari masing – masing style nya.

BAB 6

MENGATUR FONT, FORMAT TEKS, MENGUBAH LIST

DAN MENGATUR BORDER DENGAN CSS

TUJUAN :

a. Mahasiswa mampu mengatur font dengan CSS

b. Mahasiswa mampu mengatur format teks dengan CSS

c. Mahasiswa mampu mengubah list dengan CSS

d. Mahasiswa mampu mengubah border dengan CSS

Overview :

Desain web merupakan hal yang sangat penting di pertimbangkan. Semakin bagus desain

yang di berikan, maka konsumen ataupun pengunjung web akan merasa tertarik untuk mengetahui isi

web dan nyaman dalam membuka web ini .

Dengan menggunakan CSS kita dapat mengatur font, format teks, mengubah gaya list dan

border seperti yang akan di pelajari dalam BAB 6 disini.

6.1 MENGATUR FONT DENGAN CSS

Tutorial saat ini akan menjelaskan cara menyesuaikan jenis huruf menggunakan CSS. seperti

Merubah, hiasan Ukuran, Warn, dan Typefaces (garis miring, huruf tebal, tulisan miring).

Beberapa sintaks CSS yang digunakan untuk mengubah font yaitu :

➢ font-size digunakan untuk mengubah ukuran font.

Tabel 6.1 font size

➢ font-weight : digunakan untuk mengubah font pada ketebalan

Tabel 6.2 font weight

➢ font-family : untuk mengubah jenis font (fantasy, inherit, serif, monospace)

Tabel 6.3 font family

Dalam pemilihan font-family Anda juga bisa langsung mengetikkan jenis font seperti pada

pilihan font di MS Office dengan di himpit tanda petik, contoh

➢ font-style : digunakan untuk menulis ulang karakter dalam jenis huruf.

➢ color : digunakan untuk membuat jenis huruf peringatan atau warna huruf.

Berikut terdapat contoh cara mengubah font dengan css.

index.html

style.css

Hasilnya dalap dilihat dalam gambar 6.1 di bawah ini

Gambar 6.1 Hasil mengatur font dengan css.

Anda dapat melihat contoh cara mengubah font menggunakan CSS di atas. Anda dapat menggunakan

karakter "color" untuk mengubah warna font, sedangkan "font-family" dan "font-style" digunakan

untuk mengubah jenis font (miring, normal, dan opsi lainnya). Font-size digunakan untuk mengubah

ukuran font. Demikian pula, font-weight digunakan untuk menyorot sisi font tebal.

Note : Anda dapat melihat pilihan di https://www.w3schools.com/css/

6.2 FORMAT TEXT DENGAN CSS

Dalam buku ini akan diperlihatkan cara menggunakan CSS untuk memformat atau

memodifikasi teks sehingga akan terlihat seperti yang Anda inginkan dan berfungsi sesuai kebutuhan.

Misalnya, Anda dapat mengubah justifikasi teks menjadi justify atau yang biasa Anda sebut "rat kiri

rata canan", mengubah indent spacing teks menjadi justified, mengubah kursif teks menjadi huruf

besar, huruf kecil, tebal, atau miring, mengubah warna teks menjadi merah, dan ubah desain teks

menjadi ornamental. Silakan baca informasi di bawah ini tentang mengubah format teks yang dapat

dilakukan dengan menggunakan CSS.

Ada satu konstruksi CSS yang dapat digunakan untuk mengubah format teks, yaitu sintaks

beberata.

• color

Apa pun yang dapat ditentukan sebagai peringatan atau kode peringatan digunakan

untuk mengubah teks peringatan.

• text-align

Untuk mengubah perataan teks atau konten lainnya, tersedia nilai berikut: tengah

untuk membuat teks rata tengah, kiri untuk membuat teks rata kiri, kanan untuk membuat

teks rata kanan, dan justify untuk membuat teks rata kanan dan rata kiri.

• text-decoration

Ketika digunakan untuk mengubah dekorasi teks, nilai yang tersedia yaitu none

untuk membuat teks tanpa dekorasi, overline untuk membuat teks memiliki dekorasi di pojok

kiri atas, line-through untuk membuat dekorasi yang mencoreng di dalam teks, dan garis

bawah untuk membuat dekorasi di dalam teks. pojok kanan bawah (garis bawah).

• text-transform

When used to change the size of the capital letters in a text, the options available are

uppercase for larger capital letters, lowercase for smaller capital letters, and capitalized for

larger capital letters at the beginning of each word.

• text-indent

Nilai yang dapat digunakan untuk mengubah perataan sebaris teks dapat berupa piksel

atau nilai lainnya tergantung situasi.

• text-spacing

Digunakan untuk mengatur perataan karakter dalam teks, dengan nilai dalam format

isi yang terdiri dari piksel dan nilai lainnya.

• word-spacing

Digunakan untuk mengurangi jarak antar kata dalam teks, nilai isi juga memiliki

gambar jam.

• line-height

Digunakan untuk mengubah spasi bar-to-bar pada nilai teks dengan nilai desimal satu

digit.

• text-shadow

Saat digunakan untuk mengubah warna efek baying teks, nilai yang dipilih pertama

menetapkan nilai jarak di bagian atas, yang kedua menetapkan jarak di bagian bawah, dan

yang ketiga menetapkan peringatan. 2 px kali 5 px biru sebagai contoh.

• vertical-align

Kiri, kanan, dan tengah yaitu glif yang digunakan untuk membuat rata-kiri, rata-atas,

dan rata-bawah, masing-masing, untuk teks vertikal.

Untuk mendemonstrasikan cara mengubah format teks menggunakan CSS. membuat file CSS dan

HTML. Di sini, saya telah membuat file style.css dan index.html.

a) Cara mengubah warna text dengan CSS

Perhatikan contoh berikut untuk mengubah peringatan teks menggunakan CSS.

index.html

style.css

Seperti yang bisa dilihat pada contoh di bawah ini, terdapat tag paragraf dengan class tulisan

warna. Lalu, matikan peringatan merah dengan CSS. Kemudian terdapat tag p didalam tag div serta

terdapat juga tag p di luar tag div. jika ingin mengatur ssebuah tag yang terdapat pada dalam tag lain

(tag p di dalam tag div) selector yang kita gunakan yaitu tag yang awal di ikuti (spasi) dengan tag yang

di dalam.

Hasilnya dapat dilihat dalam gambar 6.2 dibawah ini

Gambar 6.2 Hasil Mengubah Warna Teks dengan CSS

b) Cara menggunakan text align CSS

index.html

style.css

Hasil dapat dilihat pada gambar 6.3 di bawah ini

Gambar 6.3 Hasil dari menggunakan text align CSS

c) Contoh mengatur format text lainnya

index.html

style,css

Hasilnya dapat dilihat pada gambar di bawah ini

Gambar 6.4 hasil dari mengubah format teks dengan CSS

6.3 MODIFIKASI LIST DENGAN CSS

CSS has the capability to manage or modify HTML source code. CSS cukup membantu jika ingin

membuat list dengan model yang diinginkan, seperti yang terdiri dari elemen angular, titikal, romawi,

dan lainnya. Dengan menggunakan CSS, Anda dapat memodifikasi format header daftar untuk

mengelola daftar HTML. Atribut "list-style-type", yang menunjukkan gaya daftar, dapat digunakan

untuk mengatur gaya daftar HTML dengan CSS.

Pertimbangkan contoh berikut untuk memodifikasi daftar HTML dengan CSS.

Index.html

Style.css

Hasilnya

Gambar 6.5 modifikasi list dengan CSS

CSS Belajar List Building Menggunakan CSS. Dapat dilihat dari contoh di bawah ini bahwa menggunakan

properti dan nilai CSS akan menghasilkan daftar dengan format persegi:

list-style-type: square; /* list dengan bentuk square */

Anda dapat menggunakan fungsi properti dan nilai CSS untuk membuat daftar dengan bentuk

lingkaran kecil.

list-style-type: circle; /* list dengan bentuk lingkaran */

Gunakan properti dan nilai CSS untuk membuat daftar dengan format abjad.

list-style-type: upper-alpha; /* list dengan bentuk alphabet */

Gunakan CSS properti dan nilai untuk membuat daftar dengan format angka romawi:

list-style-type: upper-roman; /* list dengan bentuk romawi */

sedikit tambahan untuk menghilangkan tanda list anda bisa menggunakan propery dan value sebagai

berikut:

list-style-type: none; /* menghilangkan tanda list */

6.4 MEMODIFIKASI BORDER DENGAN CSS

Dalam buku ini terdapat pembahasan mengenai manupulasi perbatasan dengan menggunakan

perintah CSS. CSS memberi Anda opsi untuk menyesuaikan warna, ukuran dan gaya perbatasan secara

manual. Misalnya border yang terbuat dari titik-titik, strip, dan pakaian bias model.

a) MENGUBAH BORDER STYLE

Ada beberapa gaya atau model yang tersedia di CSS untuk membuat grafik. Ada banyak gaya dan

gaya lain yang dapat diterapkan pada halaman menggunakan CSS, termasuk yang terbuat dari titik-

titik, putus-putus, dan garis ganda. Untuk membuat situs web yang juga menyediakan gaya nilai yang

diinginkan, gunakan properti gaya batas CSS. Berikut contoh nya, silahkan di perhatikan!

index.html

style.css

Hasilnya

Gambar 6.6 hasil mengubah border style dengan CSS

Sedikit tambahan informasi, jika Anda cermati dalam selector style.css yang menagarah pada h2 dan

h3, pen - style an dapat di laksanakan secara bersamaan. Dengan memanggil tag 1 dan tag 2 yang di

pisahkan dengan tanda koma = h2, h3 { isi style 1; }

b) MENGATUR UKURAN BORDER

Anda dapat menggunakan properti CSS borderwidth untuk mengubah lebar border. Berikut

yaitu contoh cara menentukan lebar batas properti untuk membuat bentuk garis.

index.html

style.css

Hasilnya dapat dilihat pada halaman berikutnya

Gambar 6.7 hasil dari mengatur ukuran border

c) MEMBERI WARNA PADA BORDER

Gunakan properti CSS border-color untuk menambahkan peringatan ke border. Ini yaitu contoh

pembuatan peringatan pada grafik dengan menggunakan CSS.

index.html

style.css

Hasilnya

Gambar 6.8 hasil dari membuat warna border dengan CSS

d) CARA CEPAT MEMANIPULASI BORDER DENGAN CSS

Bagaimana mengelola border maupun membuatgaris border dengan Teknik yang cepat melalui

pemanfaatan CSS, properti CSS border secara terus menerus dapat menjadi jawaban dari masalah ini.

demikian pula secara terus menerus gisi nilai ukuran, garis dan jenis peringatan. Pertimbangkan contoh

berikut untuk mempelajari cara melintasi batas dengan cepat menggunakan CSS.

index.html

style.css

Hasilnya pada halaman berikut ini

Gambar 6.9 hasil dari memanipulasi border dengan CSS

Perhatikan contoh sintaks CSS di bawah ini. Dimungkinkan untuk terus mencatat dimensi, jenis

batas, dan peringatan yang diinginkan dalam batas properti untuk membangun batas dengan cepat.

border:2px solid blue;

Contoh di atas memiliki peringatan hitam putih pekat dan diposisikan pada batas lebar 1 piksel. Berikut

ini yaitu beberapa properti lain yang digunakan untuk mengubah batas menggunakan CSS:

BAB 7

MENGATUR MARGIN, PADDING, POSITION

FLOAT DAN TABEL DENGAN CSS

TUJUAN :

a. Mahasiswa mampu mengatur margin dengan CSS

b. Mahasiswa mampu mengatur padding dengan CSS

c. Mahasiswa mampu mengatur position dengan CSS

d. Mahasiswa mampu menampilkan web dengan teknik float dengan CSS

e. Mahasiswa mampu mengatur gaya table dengan CSS

Overview :

Margin dan padding yaitu dua elemen yang paling sering digunakan saat menggunakan CSS

untuk mendesain situs web. Karena margin dan padding digunakan untuk mengubah sisi elemen yang

bersebelahan dengan elemen lainnya.

Untuk mengubah posisi elemen HTML, pemosisian CSS digunakan. Kadang-kadang, kami ingin

membuat atau mengubah posisi satu elemen dalam kaitannya dengan elemen lainnya. Oleh karena

itu, dengan menggunakan properti position CSS, Anda dapat menentukan posisi elemen HTML saat ini

sesuai dengan preferensi Anda.

Salah satu teknik yang paling sering digunakan dalam desain web yaitu floating text.

Pelampung digunakan untuk memindahkan elemen yang berorientasi horizontal.

Anda dapat memberikan gaya CSS untuk kebutuhan tabel karena juga akan diterjemahkan ke

bahasa Inggris oleh BAB untuk membuat hasil yang menarik untuk tabel.

7.1 MARGIN DAN PADDING DENGAN CSS

a) Mengenal Margin pada CSS

Margin yaitu bagian terluar dari elemen apa pun. Misalnya, jika Anda ingin menurunkan

kecepatan elemen tertentu, Anda dapat melakukannya dengan menggunakan sintaks margin. Ada

beberapa istilah yang berhubungan dengan margin, seperti margin atas, yang ditulis sebagai "margin-

top" di CSS, margin bawah, atau batas di sekitar bagian bawah header, yang ditulis sebagai "margin-

bottom", " margin-left," yang berfungsi sebagai border di sekitar elemen kiri, dan "margin-right," yang

mengacu pada margin untuk bagian bawah header. Namun, jika Anda hanya menggunakan sintaks

"margin" untuk hari ini saja, maka secara otomatis Anda akan mempengaruhi elemen at, bawah, kiri,

dan canan. Ini yaitu contoh cara menggunakan margin di CSS.

index.html

style.css

Hasilnya

Gambar 7.1 margin dengan CSS

Perhatikan contoh di bawah ini. Dalam kasus tata letak dua kolom, pengaturan margin kiri

atau margin atas biasanya 70 piksel atau piksel, dan dalam kasus tata letak tiga kolom, margin

atau batas di sekitar setiap baris biasanya 20 piksel.

b) Mengenal Padding pada CSS

Padding yaitu komponen dari elemen tertentu. Anda dapat menggunakan pengisi

sintaks untuk mengubah spasi baris pada elemen tertentu yang Anda kenal. mirip dengan

margin dengan sisi-sisinya. seperti di atas, kiri, kanan, dan bawah. Padding di bagian atas,

bawah, kiri, dan kanan elemen yaitu contoh dari jenis padding ini. Padding di bagian atas,

juga dikenal sebagai sisi dalam sebelah di bagian atas elemen, ditentukan dalam CSS sebagai

"padding-top", sedangkan padding di bagian bawah, juga dikenal sebagai jarak di bagian

bawah elemen, ditentukan sebagai " padding-bottom," "padding-left," dan "padding-right,"

yang berada di sisi luar. Jika memakai sintaks “padding” maka secara otomatis akan mengatur

perataan elemen di header, body, dan footer. Ini merupakan contoh dari cara penggunaan

padding di dalam CSS.

index.html

style.css

Hasilnya dapat dilihat pada halaman berikut ini

Gambar 7.2 padding dengan CSS

Dapat dilihat dari contoh diatas perbedaan ketika menggunakan padding dan padding-

left. Sekarang Anda coba dengan menggunakan padding-right, padding-top, padding-bottom

dan serta di coba tanpa menggunakan height dan width.

7.2 MENGATUR POSITION DENGAN CSS

Posisi dalam CSS digunakan untuk mengubah posisi elemen HTML. terkadang kami ingin

membuat atau menggeser posisi satu elemen relatif terhadap elemen lainnya. Jadi, dengan

menggunakan properti position CSS, Anda dapat menentukan posisi elemen HTML tertentu sesuai

dengan preferensi Anda.

Ada beberapa properti CSS yang dapat digunakan untuk menunjukkan posisi elemen HTML

tertentu:

➢ Static

➢ relative

➢ Fixed

➢ Absolute

Ini yaitu praktik standar untuk menggunakan properti CSS lainnya, seperti atas, kiri, bawah,

dan kanan, untuk membuat posisi atau mengubah posisi elemen individual. namun, properti yang

disebutkan di atas tidak akan berfungsi jika lokasinya tidak segera diubah. karena posisi properti lain

bergantung pada status mereka saat ini.

a) STATIC

Untuk menjadikan elemen sebagai elemen statis secara default, gunakan posisi statis. Elemen akan

secara otomatis kembali ke posisi semula. Contoh penggunaan posisi statis

index.html

Style.css

Note : dalam penulisan perintah dapat di sambung ke kanan, namun setiap perintah ahrus di tutup

dengan tanda ;

Hasilnya

Gambar 7.3 Positon static dengan CSS

b) RELATIVE

Setiap elemen HTML yang menggunakan positi

Dasar website 1

Diposting oleh kromx.blogspot.com

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form

Advertisement

Dasar website 1

Diposting oleh kromx.blogspot.com

Anda mungkin menyukai postingan ini

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

Social Plugin

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form