TIPOLOGI BANGUNAN materi penjelasan minggu pertama
Ā
HTML_CSS_Panduan
1. ā¢ Apa itu html?
ā¢ Tag, Atribut
ā¢ Named character references (entities)
ā¢ Doctype dan Komentar.
Hari ā 6
By : Muhammad Viky
ā¢ Cascading Style Sheet (CSS)
ā¢ Stylesheet : Inline, Internal, Eksternal
ā¢ Jenis-jenis selector CSS, Propety, Value.
Teitra Mega
Open Class Web Programming
HTML dan CSS
2. Apa itu HTML?
ā¢ Akronim dari āHyper Text Markup Languageā
ā¢ Bukan bahasa pemrograman tetapi bahasa markah
ā¢ Memarkahi konten website seperti : kalimat teks, gambar, audio, video dan lainnya.
ā¢ HTML menggunakan elemen tag yang diawali dan diakhiri dengan kurung siku dan tag penutup menggunakan garis
miring ā/ā.
Sebagai contoh kita memarkahi content website teks paragraf :
<p>Teks paragraf disini </p>
3. HTML berupa sekumpulan elemen-elemen (markah). Hingga struktur hierarki ini disebut dengan DOM:
Document Object Model.
<title>Judul Website</title>
<h1>Heading 1</h1>
<img src=āimage.JPGā />
<p>teks paragraf </p>
<hr/> garis
4. HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah
text itu ditulis sebagai sebuah paragraf, gambar, atau sebagai link? Dalam HTML, tanda ini dikenal
dengan istilah tag.
Tag
<p>teks paragraf </p>Contoh paragraph ditulis dengan markah <p></p> :
Atribut
Berupa informasi tambahan yang diberikan kepada tag. Bisa berupa intruksi warna dari teks, judul
tag, link atau styles dan lain-lain.
Setiap atribut memiliki nama dan nilai(value), dan ditulis dengan name=āvalueā nilai diapit diapit
dengan tanda kutip satu (ā) atau dua (ā) .
<p title=āJudul Atributā>teks paragraf </p>Contoh paragraph ditulis dengan markah <p></p> dengan atribut title :
5. Named Character References (entities)
Named character references sering disebut juga entities digunakan untuk mencetak karakter yang memiliki makna
dalam HTML. Sebagai contoh, HTML menerjemahkan tanda lebih kecil dari dan lebih besar dari sebagai pemisah
tag.
ā¢ > menandakan lebih besar dari (>)
ā¢ < menandakan lebih kecil dari (<)
Doctype
Tag paling awal dari struktur dasar HTML DTD atau DOCTYPE. DTD adalah singkatan dari Document Type
Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah
HTML.
Komentar
Ditulis dengan cara <!ā dan penutup ā>
6. CSS (Cascading Style Sheet)
CSS digunakan para web designer untuk mengatur style element yang
ada dalam halaman web mereka, mulai dari memformat teks, sampai
memformat layout.
Dengan tujuan memperoleh keindahan gaya atau penampilan suatu
website.
7. ā¢ Inline: Penulisan dengan tag <style></style> diantara atau didalam tag <head></head>
Getting Started
ā¢ Cara Penulisan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh Penulisan CSS</title>
<style>
/* letakkan css disini */
</style>
</head>
<body>
</body>
</html>
Contoh penulisan inlne stylesheet
8. ā¢ Internal : penulisan dengan menggabungkan stylesheet pada tag HTML, dengan menggunakan atribut style=āā .
<p style="color: red;">Contoh penulisan css Internal</p>
ā¢ Eksternal : menulis css dengan memisahkan antara dokumen HTML dan CSS
dengan cara memanggil file seperti ini (diantara atau didalam tag <head></head> ):
Tag HTML
stylesheet
<link rel="stylesheet" href="css/style.css">
File cssFolder
10. Jenis-jenis Selector
Selector digunakan untuk menentukan elemen mana yang akan dibuat stylesheet.
ā¢ Tag html h1 { font-weight: bold; }
ā¢ Selector ID #selector_id { color: red; }
ā¢ Selector Class .selector_class { text-decoration: underline; }
ā¢ Pseudo Clases :hover, :active, :focus, :lang(character),