Modul IV

Modul III
Semantics Element, Selector CSS, HTML Layout
1. Semantic Element
1.1. Pengertian Semantic Element
Semantic element merupakan elemen yang memiliki makna atau arti atau tujuan
yang terkandung dalam suatu kata. Semantic element juga dapat digunakan
untuk mendesain konten atau makna dari bagian halaman html.Terdapat tag
html yang berada pada semantic element dan tidak dalam semantic element,
yaitu:
1) Non semantic element
Tag yang masuk kedalam non-semantic element adalah <div> dan
<span>. Kedua tag html tidak memiliki makna dan tujuan dalam
mendefinisikan konten. Tag <div> berfungsi untuk membuat suatu kotak
yang didalamnya terdapat elemen-elemen yang dikelompokkan dalam
satu blok.
Gambar 1. Penggunaan div

Tag <span> berfungsi untuk mengelompokkan sesuatu yang penting yang
dapat ditambahkan inline (dalam baris) dari elemen.
Gambar 2. Penggunaan span
2) Semantic element
Tag yang masuk kedalam semantic element adalah <article>, <header>,
<details>, <nav>, dsb. Penggunaan struktur web dapat menggunakan
<header>, <nav>, <section>, <main>, <section> <article>, <aside>,
<footer>.
Listing Code 1. Penggunaan Struktur Web dengan Semantics

Element
<html>
<head>
<title>Example</title>
</head>
<body>
<header>
Here goes logo, navigation, etc.
</header>
<main>
A place for website's main content
</main>
<footer>
Footer information, links, etc.
</footer>
</body>
</html>
Gambar 3. HTML Layout
1.2. Penggunaan Semantic Element

1) <header>
Tag <header> digunakan untuk membuat bagian header dari
halaman website yang didalamnya berisi logo atau title dari
website. Anda juga dapat menggunakan <header> sebagai
header bagi suatu artikel dengan menggunakan style sesuai
kebutuhan masing-masing struktur website anda.
Listing Code 2. Penggunaan header

<header>
<h1>Title Website</h1>
<img src="logo_website.png" />
</header>
2) <nav>
Tag <nav> digunakan untuk membuat bagian menu navigasi
yang digunakan untuk memudahkan pengguna untuk
menjelajah halaman website.
Listing Code 3. Penggunaan navigasi

<nav>
<a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
<a href="about.html">About Us</a>
</nav>
Anda juga dapat menambahkan tag <nav> sebagai elemen

didalam tag <header>.
Listing Code 4. Penggunaan navigasi didalam header

<header>
<img src="logo.png" alt="logo"/>
<nav>
<a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
<a href="about.html">About Us</a>
</nav>
</header>
3) <section>
Tag <section> digunakan sebagai pembungkus pada bagian
konten dari website anda. Tag section dapat digunakan
untuk membagi beberapa bagian dalam satu halaman
website. Sebagai contoh anda ingin menampilkan bagian
atas terdapat artikel dan dibagian tengah ada gallery,
disampingnya terdapat form pemesanan. Anda juga dapat
menggunakan tag section untuk membungkus satu artikel
dalam satu halaman website.
Listing Code 5. Penggunaan section
<section>
<h2>Syntax Basics</h2>
<p>Understanding statements, variable naming,
whitespace...</p>
</section>
<section>
<h2>Operators</h2>
<p>Operators allow you to manipulate values...</p>
</section>
<section>
<h2>Conditional Code</h2>
<p>Sometimes you only want to run a block of code under
certain conditions...</p>
</section>
4) <article>
Tag <article> digunakan untuk membungkus konten dari
halaman website yang membentuk suatu artikel. Anda dapat
menuliskannya didalam tag section ataupun tag main.
Listing Code 6. Penggunaan article
<article>
<h1>JavaScript Basics</h1>
<p>JavaScript is a rich and expressive language...</p>
</article>
Anda juga dapat menambahkan tag article section didalam

tag article
Listing Code 7. Tag section sebagai elemen dari article
<article>
<section>
whitespace...</p>
</section>
<section>
<h2>Operators</h2>
</section>
<section>
</section>
5) <main>
Tag <main> merupakan bagian yang digunakan sebagai
pembungkus pada bagian utama dari sebuah halaman web.
Penggunaan <main> dapat dilakukan hanya 1 kali pada
halaman web yang anda buat.
Listing Code 8. Penggunaan main
<main>
<article>
<section>
whitespace...</p>
</section>
<section>
<h2>Operators</h2>
</section>
<section>
</section>
</article>
</main>
6) <aside>
Tag <aside> digunakan untuk memberikan tanda pada
bagian struktur website. Tag ini bukan bagian dari konten
utama web, tetapi bagian ini memiliki keterkaitan dengan
konten utamanya. Biasanya tag ini digunakan pada bagian
sidebar, karena bagian sidebar berhubungan dengan artikel.
Listing Code 9. Penggunaan aside
<aside>
<p>Viewed by 1503 people</p>
<p>Author: John Smith</p>
</aside>
7) <footer>
Tag <footer> digunakan pada bagian bawah dari halaman
website. Biasanya digunakan untuk menampilkan bagian
keterangan dari website seperti copyright, ataupun informasi
singkat dari website anda seperti informasi social media,
nama instansi atau oraganisasi.
Listing Code 10. Penggunaan footer
<footer>
<p>Footer - Copyright pluralsight.com</p>
</footer>
2. Pengenalan CSS
CSS (Cascading Style Sheets) digunakan untuk mengontrol tata letak beberapa
halaman dengan menambahkan kode css pada bagian elemen-elemen html
untuk dapat ditampilkan dilayar, atau di media lain.CSS dapat ditambahkan
dalam elemen html dengan tiga cara, yaitu:
1) Inline CSS
Digunakan untuk menerapkan gaya unik pada elemen html tunggal. Cara ini
dituliskan pada atribut style didalam elemen html.
Contoh penulisan
<h1 style="color:blue;">This is a Blue Heading</h1>
2) Internal CSS
Digunakan untuk mendefinisikan style pada satu halaman html. Contoh
penulisannya ada pada listing code 11.
Listing Code 11. Pengenalan internal css

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3) Eksternal CSS
Dapat digunakan pada beberapa halaman html lain. Anda dapat
menggunakan eksternal css untuk mengubah halaman website anda hanya
dengan menggunakan satu halaman css saja. Contohnya anda buat file
dengan ekstensi css dan halaman html. Contohnya seperti ini
Listing Code 12. Style.css

body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
Listing Code 13. penggunaan-css.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Terdapat aturan dalam menuliskan skrip CSS, Satu set aturan css terdiri dari selector
dan declaration block. Contohnya seperti ini :
Gambar 4. Rule Penulisan Skrip CSS
Selector digunakan untuk menunjuk ke elemen html yang ingin anda beri style atau
gaya. Kemudian declaration block merupakan suatu blok yang mendeklarasikan satu
atau lebih deklarasi yang dipisahkan oleh titik koma. DIdalam declaration block terdapat
nama property dan nilainya. Penulisan property dan value dipisahkan oleh titik dua dan
diakhiri titik koma. Penggunaan declaration block dikelilingi oleh tanda kurung kurawal.

Modul IV

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul IV

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul III

Semantics Element, Selector CSS, HTML Layout

Gambar 1. Penggunaan div

Gambar 2. Penggunaan span

Listing Code 1. Penggunaan Struktur Web dengan Semantics

Gambar 3. HTML Layout

1.2. Penggunaan Semantic Element

Listing Code 2. Penggunaan header

Listing Code 3. Penggunaan navigasi

Anda juga dapat menambahkan tag <nav> sebagai elemen

Listing Code 4. Penggunaan navigasi didalam header

Anda juga dapat menambahkan tag article section didalam

Listing Code 11. Pengenalan internal css

Listing Code 12. Style.css

Listing Code 13. penggunaan-css.html

Anda mungkin juga menyukai