HTML & Css Modul

TEST 1
Styling link
soal berikutnya:
Macam-macam styling sheet
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
sumber : https://www.w3schools.com/css/css_link.asp
CSS Selector
a. CSS element Selector : menggunakan elemen HTML berdasarkan namanya
contoh:
p {
text-align: center;
color: red;
}
b. CSS id Selector: menggunakan atribut ID pada elemen HTML untuk memilih elemen tertentu
contoh:
#para1 {
text-align: center;
color: red;
}
c. CSS class Selector: menggunakan elemen HTML dengan atribut class tertentu
contoh:
.center {
text-align: center;
color: red;
}
Dapat juga membuat style hanya untuk elemen HTML tertentu
contoh:
p.center {
text-align: center;
color: red;
}
d. Pseudo-classes: mendefinisikan kondisi spesial dari elemen
contoh:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */

a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
sumber:
https://www.w3schools.com/css/css_selectors.asp
https://www.w3schools.com/css/css_pseudo_classes.asp
Macam-macam atribut elemen

a. “Coming Soon” ber tag <h2>, dengan inline style yg diatur ukuran font nya 18 point, yg men override
external style sheet yg diatur ukuran font nya 16 point, jadi ukuran font nya 18 point
b. tag <p> tidak mendefinisikan warna font tertentu, sehingga warna font nya mengikuti tab <body> yaitu
steelbleu
c. tag <p> mendefinisikan font-family : Tahoma, Arial, Sans-Serif
Soal Font color, Background, Font-style
https://www.w3schools.com/css/css_font_style.asp
https://www.w3schools.com/css/css_colors.asp
https://www.w3schools.com/css/css_background.asp
Cara memasukkan CSS (Style Sheet)

Tiga cara untuk memasukkan style sheet:
a. External CSS : Setiap halaman HTML harus memasukkan referensi external style sheet file didalam elemen
<link>, didalam head section
b. Internal CSS : Digunakan jika halaman HTML memiliki style sendiri/unik. Internal style di defined dalam
elemen <style>, didalam head section.
c. Inline CSS : Digunakan unique style untuk elemen tunggal. Untuk menggunakan inline styles, dengan
menambahkan atribut style ke element yang diinginkan. Atribut style dapat berisi berbagai macam
properti CSS
sumber : https://www.w3schools.com/css/css_howto.asp
Memberi komentar pada CSS
soal berikutnya:
Cara memberikan komentar , seperti pada contoh:
p {
color: red; /* ini contoh komentar */
}
Sumber : https://www.w3schools.com/css/css_comments.asp
Tentang Style Sheet
a. Best Practice (Pengalaman Terbaik di lapangan) : CSS harus dicoba disetiap browser karena beberapa
browser memiliki keunikan tersendiri
b. Ketika Style Sheet sudah di setting font-family ,tidak semua font akan bisa ditampilkan, semua bergantung
browsernya
c. Best Practice (Pengalaman Terbaik di lapangan) : Salah satu manfaat menggunakan CSS untuk halaman yg
lain, bisa meminimalisir error
sumber : https://www.w3schools.com/css/css_font.asp
Cara penulisan Lebar & Tinggi (Widht & Length)
Cara penulisan Lebar & Tinggi (Widht & Length) dapat dilihat pada contoh berikut:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element

min-width Sets the minimum width of an element
width Sets the width of an element
sumber : https://www.w3schools.com/css/css_dimension.asp
CSS tag <a>(hyperlink), font-style & font-weight
Soal berikutnya:
a. Cara penulisan style hyperlink, font-style & font-weight:

a:link {
text-decoration: none;
}
b. Cara penulisan style hyperlink, font-style & font-weight:
p.italic {
font-style: italic;
}
c. Cara penulisan style hyperlink, font-style & font-weight:
p.thick {
font-weight: bold;
}
Sumber :
https://www.w3schools.com/css/css_font_style.asp
https://www.w3schools.com/css/css_link.asp
Setting warna, align, size font
Cara mensetting warna font dengan : color: blue;
sumber : https://www.w3schools.com/css/css_text.asp
https://www.w3schools.com/css/css_text.asp
https://www.w3schools.com/css/css_text_align.asp
https://www.w3schools.com/css/css_font_size.asp
Class selector
menggunakan class selector agar dapat digunakan di tag manapun
sumber : https://www.w3schools.com/css/css_selectors.asp
Background-repeat
Sumber : https://www.w3schools.com/cssref/pr_background-repeat.asp
Pada kasus ini background-repeat yang digunakan hanya vertikal kebawah sehingga yang digunakan, seperti
contoh :
body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}
Macam-macam Background-repeat
Value Description
repeat The background image is repeated both vertically and horizontally. The
last image will be clipped if it does not fit. This is default
repeat-x The background image is repeated only horizontally
repeat-y The background image is repeated only vertically
no- The background-image is not repeated. The image will only be shown
repeat once
space The background-image is repeated as much as possible without

clipping. The first and last images are pinned to either side of the
element, and whitespace is distributed evenly between the images
round The background-image is repeated and squished or stretched to fill the

space (no gaps)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
Sumber : https://www.w3schools.com/cssref/pr_background-repeat.asp
Pemahaman override style sheet
a. “The new super skis are out!” memiliki inline style background-color yaitu pink
b. “New item” memiliki internal style background-color yaitu light green
CSS Combinator
Child Selector (>) berguna untuk membuat style pada elemen yang hanya memiliki style yang didalam elemen
tertentu
contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified
element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section> 
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html> elemen <p> child dari elemen <div>
Elemen <p> yang ada didalam <div> saja yang memiliki style div > p.
Hasil programnya sebagai berikut:
sumber : https://www.w3schools.com/css/css_combinators.asp
Gambar dalam HTML
Karena gambar berada dalam folder images dan folder image masih dalam 1 folder aplikasi HTML(*.html) maka
cara memanggilnya “images/kazoo.jpg”
sumber : https://www.w3schools.com/tags/att_img_alt.asp
a. <img> digunakan untuk menampilkan gambar

b. src digunakan untuk mendefinisikan lokasi gambar pada <img>
c. alt digunakan untuk menampilkan tulisan ketika gambar tidak bisa diload
sumber : https://www.w3schools.com/tags/att_img_alt.asp
Vector-based graphic <svg>

a. <svg> berbentuk obyek berbentuk vector ()yang akan dibuat saat berada di browser, sehingga tidak
memakan bandwidth
b. <canvas> digunakan untuk menggambar grafis. <canvar > hanyalah kontainer yang isinya diisi melalui
javaScript
c. <script> adalah kode yang digunakan untuk memanggil kode javascript
d. <img> digunakan untuk menampilkan gambar yang ada
sumber :
https://www.w3schools.com/html/html5_svg.asp
https://www.w3schools.com/html/html5_canvas.asp
https://www.w3schools.com/html/html_images.asp
https://www.w3schools.com/html/html5_svg.asp
Menampilkan video
Soal berikutnya:
contoh menggunakan <video>:
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
sumber : https://www.w3schools.com/html/html5_video.asp
Menampilkan kontrol audio
untuk mengaktifkan kontrol bisa menggunakan:
 controls
 controls=”controls”
sumber : https://www.w3schools.com/html/html5_video.asp
Tatapenulisan HTML
untuk menampilkan nama tab dengan menggunakan <title>
untuk menampilkan yang berada di browser, pada elemen yang didalam <body>
sumber : https://www.w3schools.com/html/default.asp
Komentar dalam HTML
Pemberian komentar seperti pada contoh :

<p>This is a paragraph.</p>

sumber : https://www.w3schools.com/html/html_comments.asp
Simbol dalam HTML
untuk membuat logo copyright yaitu dengan : &copy
sumber : https://www.w3schools.com/html/html_symbols.asp
Tag meta
Cara penulisan <meta>, dapat dilihat sebagai berikut :
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
https://www.w3schools.com/tags/tag_meta.asp
Tag Link
Soal berikutnya
Contoh penulisan <link>:
<head>
<link rel="stylesheet" href="styles.css">
</head>
sumber : https://www.w3schools.com/tags/tag_link.asp
Tag noscript
Untuk menampilkan pesan bahwa browser tidak support javaScript menggunakan <noscript>
sumber : https://www.w3schools.com/tags/tag_noscript.asp
Tag hn
<h1> adalah ukuran font terbesar diantara ukuran heading yang lain
<span> berguna untuk memberi style pada kumpulan teks tertentu
<hr> berguna untuk memberi garis pada halaman web
Sumber :
https://www.w3schools.com/tags/tag_hn.asp
https://www.w3schools.com/tags/tag_span.asp
https://www.w3schools.com/tags/tag_hr.asp
Pendefinisian warna dengan hexadesimal
Warna dapat didefinisikan dengan hexadesinal. Penjelasannya dapat dilihat disumber
Sumber : https://www.w3schools.com/cssref/css_colors.asp
Setting visibility
Contoh cara mensetting visibility:
h2.a {
visibility: visible;
}
h2.b {
visibility: hidden;
}
sumber : https://www.w3schools.com/cssref/pr_class_visibility.asp
Class Display
untuk menghasilkan background yang terpisah dengan background keseluruhan maka digunakan display : inline
sumber : https://www.w3schools.com/cssref/pr_class_display.asp
Tag meta @media
Contoh menggunakan <meta @media>:
@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}
sumber : https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Sumber :
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://www.w3schools.com/cssref/pr_class_display.asp
Menambahkan background pada CSS
Contoh menggunakan background-image:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
sumber : https://www.w3schools.com/cssref/pr_background-image.asp
Kode HTML untuk memberikan penomoran
soal berikutnya :
cara menggunakan <ol>, <ul>, <li>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Hasil program
sumber : https://www.w3schools.com/tags/tag_ol.asp
Kode program untuk hyperlink
Kode program untuk membuat tab baru pada hyperlink, dengan atribut target diisi dengan _blank
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>
Atribut target:
Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was

clicked (this is default)
_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window
framename Opens the linked document in the named iframe
sumber : https://www.w3schools.com/tags/att_a_target.asp
Gambar yang memuat hyperlink, bookmark, sumber gambar
Soal image source:
karena folder image masih berada satu folder dengan file html maka cara memanggil nya adalah
“images/shirts1.png”
Soal boomark:
a. Contoh gambar yang memuat hyperlink
<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>
<a> tidak bisa berada didalam <img>, namun sebaliknya
b. Contoh bookmark :
Membuat atribut id yang merupakan bagian dari boomark
<h2 id="C4">Chapter 4</h2>
Kode program link, untuk menuju id dalam satu halaman
<a href="#C4">Jump to Chapter 4</a>
Kode program link, untuk menuju id pada halaman yang berbeda
<a href="html_demo.html#C4">Jump to Chapter 4</a>
c. Kode program ../images digunakan untuk memanggil alamat yang berada 1 level diatas folder .html
Sumber :
https://www.w3schools.com/tags/tag_img.asp
https://www.w3schools.com/html/html_filepaths.asp
https://www.w3schools.com/html/html_links_bookmarks.asp
Tag aside
<aside> digunakan untuk meletakkan bagian didalam konten tertentu, contoh:
sumber : https://www.w3schools.com/tags/tag_aside.asp
Judul tabel, Navigasi, Article, Section
a. Untuk memberi judul tabel digunakan <caption>

b. Untuk menampung hyperlink digunakan <nav>
c. Untuk mengisi article menggunakan <article>
d. Untuk membuat bagian menggunakan <section>
Sumber :
https://www.w3schools.com/tags/tag_caption.asp
https://www.w3schools.com/tags/tag_nav.asp
https://www.w3schools.com/html/html5_semantic_elements.asp
Form HTML, PUT, POST
Pada form HTML hanya terdapat get untuk menampilkan data dan untuk insert atau update data digunakan POST
https://www.w3schools.com/tags/att_form_method.asp
Fieldset & Textarea
Contoh penggunaan Fieldset & Textarea:
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
</fieldset>
<textarea id="w3review" name="w3review" rows="4" cols="50">

At w3schools.com you will learn how to make a website. They offer free tutorials in
all web development technologies.
</textarea>
Sumber :
https://www.w3schools.com/tags/tag_fieldset.asp
https://www.w3schools.com/tags/tag_textarea.asp
Tag br
<br> digunakan untuk membuat baris baru yang tidak memiliki selisih baris dengan bagian diatasnya
Sumber : https://www.w3schools.com/tags/tag_br.asp
Tag figure
Contoh <figure>:
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
Sumber : https://www.w3schools.com/tags/tag_figure.asp
Analisis paragraph
Paragraph kedua yaitu “Get ‘em while they last” , mempunyai tag <p> dengan css warna teks “gray”
CSS yang digunakan HANYA pada tag parapraph<p> sehingga menggunakan p.highlight
heading <h1> tidak ada style yg spesifik sehingga masih didalam tag <body> yang style nya warna font “maroon”
Paragraph pertama berisi “Welcome to our online store!” tidak memiliki style spesifik, karena masih dalam tag
<body> maka style mengikuti tag <body>, yaitu warna font “maroon”
Untuk paragraph kedua berisi “Check out whats is on sale!”, memiliki style class=”sale”, sehingga warna font
adalah “slateblue”
a. Teks “Shirts on Sale” akan keluar di judul tab webpage

b. Teks “See our closeouts on winter shirts” akan keluar di halaman web page
c. Teks “These are 30% off” tidak keluar karena di beri tag comment
CSS & Override nya
a. Cara membuat komen pada CSS adalah : /* komentar */

b. inline akan meng override external css
c. Setiap browser terkadang memiliki karekteristik style yang berbeda
Tata urutan penulisan dokumen HTML
Sudah sesuai pada gambar
sumber : https://www.w3schools.com/tags/tag_doctype.asp
Tag Input dengan type email
Contoh <input> dengan atribut email
<input type="email" id="email" name="email">

Sumber : https://www.w3schools.com/tags/att_input_type_email.asp
Alamat absolute & relative
alamat absolute adalah alamat yang sudah lengkap, tidak berubah menurut nama server
alamat relative adalah alamat yang alamatnya menyesuaikan nama server
Tabel
Untuk karena pada kode program baris judul tidak memuat keterangan kolom pertama, dan hanya memuat
keterangan kolom kedua maka dibutuhkan colspan=”2”
Sumber : https://www.w3schools.com/html/html_tables.asp
Semantic Element
Susunan semantic Element
Contoh program semantic:
<section>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008.
Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in
2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</section>
Sumber : https://www.w3schools.com/html/html5_semantic_elements.asp
Drop down List
Contoh drop down list dan textarea
<select name="cars" id="cars">

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<textarea id="w3review" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free
tutorials in all web development technologies.
</textarea>
Sumber :
https://www.w3schools.com/tags/tag_select.asp
https://www.w3schools.com/tags/tag_textarea.asp
Ukuran heading
Urutan heading terbesar hingga terkecil adalah : <h1>...<h6>
Sumber : https://www.w3schools.com/html/html_headings.asp
Tag details
Contoh penggunaan <details>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</details>
Sumber : https://www.w3schools.com/tags/tag_details.asp
Viewport
Contoh penulisan viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sumber : https://www.w3schools.com/css/css_rwd_viewport.asp
Title pada tab browser
Contoh penulisan titel pada tab browser:
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Sumber : https://www.w3schools.com/tags/tag_title.asp
Meta google notranslate
Tata cara penulisan untuk membuat halaman tidak bisa dialih bahasakan seperti gambar diatas
Sumber : https://developers.google.com/search/docs/advanced/crawling/special-
tags?hl=en&visit_id=637483733764914502-2404845501&rd=1
Meta encoding dengan charset
Tata cara penulisan encoding seperti pada gambar
Sumber : https://www.w3schools.com/tags/tag_meta.asp
Tag img (Penanganan gambar)
Tata cara penulisan <img> sesuai pada gambar
Sumber : https://www.w3schools.com/html/html_images.asp
Sumber :
https://www.w3schools.com/tags/tag_img.asp
https://www.w3schools.com/tags/ref_standardattributes.asp
https://www.w3schools.com/tags/att_global_title.asp
Tag track (Menampilkan subtitle)
Ketika ingin menampilkan subtitle, dapat dilihat pada gambar
https://developer.mozilla.org/en-
US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
CSS Float Property
Sumber :
https://www.w3schools.com/css/css_float.asp
https://www.w3schools.com/css/css_positioning.asp
Overflow , Float, width Property & analisis CSS

Sumber : https://www.w3schools.com/css/css_overflow.asp
Margin, Padding, Border, Style, Width, Color Property
a. Pading : jarak antara border dan bagian didalam border

b. Margin : Jarak antara border dan bagian luar border
Sumber:
https://www.w3schools.com/css/css_margin.asp
https://www.w3schools.com/css/css_padding.asp
Sumber :
https://www.w3schools.com/css/css_border_width.asp
https://www.w3schools.com/css/css_border_color.asp
Relative & Absolute Measurement
pt absolute karena ukurannya pasti yaitu 1/72 inches
em ukurannya relative terhadap ukuran font elemen
px ukurannya relative terhadap device
Sumber : https://www.w3.org/Style/Examples/007/units.en.html

HTML &amp; Css Modul

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

HTML &amp; Css Modul

Diunggah oleh

Hak Cipta:

Format Tersedia

TEST 1

Macam-macam styling sheet

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

a. CSS element Selector : menggunakan elemen HTML berdasarkan namanya

Dapat juga membuat style hanya untuk elemen HTML tertentu

d. Pseudo-classes: mendefinisikan kondisi spesial dari elemen

/* mouse over link */

Macam-macam atribut elemen

Soal Font color, Background, Font-style

Cara memasukkan CSS (Style Sheet)

Memberi komentar pada CSS

Tentang Style Sheet

height Sets the height of an element

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

width Sets the width of an element

CSS tag <a>(hyperlink), font-style & font-weight

a. Cara penulisan style hyperlink, font-style & font-weight:

Setting warna, align, size font

Cara mensetting warna font dengan : color: blue;

menggunakan class selector agar dapat digunakan di tag manapun

repeat-x The background image is repeated only horizontally

repeat-y The background image is repeated only vertically

space The background-image is repeated as much as possible without

round The background-image is repeated and squished or stretched to fill the

Pemahaman override style sheet

<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

<section><p>Paragraph 3 in the div.</p></section>

<p>Paragraph 4 in the div.</p>

<p>Paragraph 5. Not in a div.</p>

<p>Paragraph 6. Not in a div.</p>

</html> elemen <p> child dari elemen <div>

Hasil programnya sebagai berikut:

a. <img> digunakan untuk menampilkan gambar

Vector-based graphic <svg>

contoh menggunakan <video>:

<video width="320" height="240" controls>

Menampilkan kontrol audio

untuk mengaktifkan kontrol bisa menggunakan:

untuk menampilkan nama tab dengan menggunakan <title>

Komentar dalam HTML

Pemberian komentar seperti pada contoh :

Simbol dalam HTML

untuk membuat logo copyright yaitu dengan : &copy

Cara penulisan <meta>, dapat dilihat sebagai berikut :

Contoh penulisan <link>:

<span> berguna untuk memberi style pada kumpulan teks tertentu

<hr> berguna untuk memberi garis pada halaman web

Warna dapat didefinisikan dengan hexadesinal. Penjelasannya dapat dilihat disumber

Contoh cara mensetting visibility:

Tag meta @media

Contoh menggunakan <meta @media>:

@media only screen and (max-width: 600px) {

Menambahkan background pada CSS

Contoh menggunakan background-image:

Kode HTML untuk memberikan penomoran

cara menggunakan <ol>, <ul>, <li>

HTML & Css Modul

HTML & Css Modul