0% menganggap dokumen ini bermanfaat (0 suara)

169 tayangan102 halaman

Latihan HTML Css 1

Dokumen tersebut berisi petunjuk untuk membuat struktur dasar HTML menggunakan tag-tag seperti <head>, <body>, <div>, <ul>, <li>, dan CSS dasar untuk mengatur tata letak dan gaya elemen-elemennya seperti warna latar belakang, tinggi, padding, float.

Diunggah oleh

Haris Usa

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

0% menganggap dokumen ini bermanfaat (0 suara)

169 tayangan102 halaman

Latihan HTML Css 1

Diunggah oleh

Haris Usa

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

Latihan

1. Memulai dengan HTML

Jawaban:

Petunjuk:
2. Judul dan Paragraf

Jawaban:

Petunjuk:
3. Tautan

Sintax Awal:

Jawaban:

Petunjuk:
4. Gambar

Sintax Awal

Jawaban:

Petunjuk:
5. Daftar

Jawaban:

Petunjuk:
6. Warna

Sintax Awal:
Jawaban:

Petunjuk:
7. Ukuran Font dan Jenis Font

Sintax awal:
Jawaban:

Petunjuk:
8. Lebar, tinggi, dan latar belakang

Sintax awal:

Jawaban:
Petunjuk

9. Class
Sintax awal:

Jawaban:
Petunjuk:

10. Struktur HTML

Sintax Awal:
Jawaban:

Petunjuk:

11. Struktur HTML

LINK:

Petunjuk:

12. Layout Dasar

Sintax awal:

Jawaban:
Petunjuk:
13. Struktur Header
Sintax awal:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">

<!-- Tambahkan tag <div> dengan class "header-list" →

</div>

</div>

</div>
</body>
</html>
CSS.

body {
font-family: "Avenir Next";
}

/* Gunakan property list-style untuk menghilangkan bullet dari tag <li> */

.header {
background-color: #f7f2b4;
height: 90px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}

Jawaban:

</div>

</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

/* Gunakan property list-style untuk menghilangkan bullet dari tag <li> */

li {
list-style: none;
}

.header {
background-color: #f7f2b4;
height: 90px;
}

.main {
background-color: #bdf7f1;
height: 600px;
}

.footer {
background-color: #ceccf3;
height: 270px;
}
Petunjuk:

14. Layout Header

Sintax Awal

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-logo">Progate</div>
<div class="header-list">
<ul>
<li>Tentang</li>
<li>Pelajaran</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
<div class="main">

</div>

</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
/* Gantikan property float ke left */

.header {
background-color: #f7f2b4;
height: 90px;
}

Jawaban:

</div>

</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
/* Gantikan property float ke left */
float: left;
}

.header {
background-color: #f7f2b4;
height: 90px;
}

/* Gantikan font-size milik header-logo ke 36px, dan property float ke left */

.header-logo {
font-size: 36px;
float: left;
}

.main {
background-color: #bdf7f1;
height: 600px;
}

.footer {
background-color: #ceccf3;
height: 270px;
}

Petunjuk:
15. Padding

Sintax Awal:

</div>

</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
float: left;
/* Ubahlah padding atas & bawah ke 33px, dan padding kiri & kanan ke 20px */

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
/* Ubahlah padding atas & bawah ke 20px, dan padding kiri & kanan ke 40px */

.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}

Jawaban:

</div>

</div>
</body>
</html>

CSS.

body {
font-family: "Avenir Next";
}

li {
list-style: none;
float: left;
/* Ubahlah padding atas & bawah ke 33px, dan padding kiri & kana ke 20px */
padding: 33px 20px;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
/* Ubahlah padding atas & bawah ke 20px, dan padding kiri & kana ke 40px */
padding: 20px 40px;
}

.main {
background-color: #bdf7f1;
height: 600px;
}

.footer {
background-color: #ceccf3;
height: 270px;
}
Petunjuk:

16. Struktur Footer

Sintax Awal:

</div>

<div class="footer">

</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
/* Pindahkan kedua baris dibawah kesekitar baris 25 */
float: left;
padding: 33px 20px;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
/* Tambahkan CSS tag <li> yang diatas kedalam header-list */

.main {
background-color: #bdf7f1;
height: 600px;
}

.footer {
background-color: #ceccf3;
height: 270px;
}

Jawaban:

</div>

<div class="footer">

<div class="footer-logo">Progate</div>

<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>

</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
/* Pindahkan kedua baris dibawah kesekitar baris 25 */
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

/* Tambahkan CSS tag <li> yang diatas kedalam header-list */

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
background-color: #bdf7f1;
height: 600px;
}

.footer {
background-color: #ceccf3;
height: 270px;
}

Petunjuk:
17. Layout Footer

Sintax Awal:

</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list li {
float: left;
padding: 33px 20px;
}

.main {
background-color: #bdf7f1;
height: 600px;
}

.footer {
/* Gantikan background-color ke #2f5167 */
background-color: #ceccf3;

/* Gantikan color ke #fff */

/* Gantikan height ke 120px */

height: 270px;

/* Gantikan padding untuk semua sisi ke 40px */

/* Gantikan font-size dan property float footer-logo */

/* Gantikan float property footer-list */

/* Tambahkan CSS untuk tag <li> kedalam footer-list */

Jawaban:

</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
background-color: #bdf7f1;
height: 600px;
}

.footer {
/* Gantikan background-color ke #2f5167 */
background-color: #2f5167;

/* Gantikan color ke #fff */

color: #fff;

/* Gantikan height ke 120px */

height: 120px;

/* Gantikan padding untuk semua sisi ke 40px */

padding: 40px;

/* Gantikan font-size dan property float footer-logo */

.footer-logo {
font-size: 32px;
float: left;
}

/* Gantikan float property footer-list */

.footer-list {
float: right;
}

/* Tambahkan CSS untuk tag <li> kedalam footer-list */

.footer-list li {
padding-bottom: 20px;
}

Petunjuk:
18. Layout Bagian Utama
Sintax awal:

<div class="main">

</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS.

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
/* Hapuskan CSS background-color */
background-color: #bdf7f1;
/* Hapuskan CSS height */
height: 600px;
/* Gantikan padding atas & bawah ke 100px, dan padding kiri & kanan ke 80px */
}

/* Gantikan font-size tag <h1> didalam copy-container */

/* Gantikan font-size tag <h2> didalam copy-container */

/* Gantikan color tags <span> didalam copy-container */

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}

Jawaban:

<div class="main">

<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

</div>

</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS.

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
/* Hapuskan CSS background-color */

/* Hapuskan CSS height */

/* Gantikan padding atas & bawah ke 100px, dan padding kiri & kanan ke 80px */
padding: 100px 80px;

/* Gantikan font-size tag <h1> didalam copy-container */

.copy-container h1 {
font-size: 140px;
}

/* Gantikan font-size tag <h2> didalam copy-container */

.copy-container h2 {
font-size: 60px;
}
/* Gantikan color tags <span> didalam copy-container */
.copy-container span {
color: #ff4a4a;
}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}

Petunjuk:
19. Struktur Konten

https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg
https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg

https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg

https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg

Sintax Awal:

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

</div>

</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}
.copy-container span {
color: #ff4a4a;
}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}

Jawaban:

<div class="contents">

<h3>Pelajaran</h3>

<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
<p>Swift</p>
</div>

</div>

</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}
Petunjuk:

20. Batas
Sintax awal:

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

<div class="contents">

<h3>Pelajaran</h3>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
<p>HTML & CSS</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
<p>PHP</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
<p>Ruby</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
<p>Swift</p>
</div>
</div>

</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

/* Gantikan tinggi contents ke 500px */

/* Gantikan property border-bottom milik section-title */

/* Gantikan property float milik contents-item ke left */

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}

Jawaban:

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

<div class="contents">

<h3 class="section-title">Pelajaran</h3>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
<p>HTML & CSS</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
<p>PHP</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
<p>Ruby</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
<p>Swift</p>
</div>
</div>

</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS.

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

/* Gantikan tinggi contents ke 500px */

.contents {
height: 500px;
}

/* Gantikan property border-bottom milik section-title */

.section-title {
border-bottom: 2px solid #dee7ec;
}

/* Gantikan property float milik contents-item ke left */

.contents-item {
float: left;
}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}
Petunjuk:

21. Padding &Margin

Sintax awal:

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

<div class="contents">
<h3 class="section-title">Pelajaran</h3>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
<p>HTML & CSS</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
<p>PHP</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
<p>Ruby</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
<p>Swift</p>
</div>
</div>

</div>
</div>
<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

Css

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}
.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.contents {
height: 500px;
/* Gantikan property margin-top ke 100px */

.section-title {
border-bottom: 2px solid #dee7ec;
/* Gantikan font-size ke 28px */

/* Gantikan property padding-bottom ke 15px */

/* Gantikan property margin-bottom ke 50px */

.contents-item {
float: left;
/* Gantikan margin-right ke 40px */

/* Gantikan font-size dan margin-top tag <p> yang didalam contents-item */

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}

Jawaban:

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

Css

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.contents {
height: 500px;
/* Gantikan property margin-top ke 100px */
margin-top: 100px;
}

.section-title {
border-bottom: 2px solid #dee7ec;
/* Gantikan font-size ke 28px */
font-size: 28px;

/* Gantikan property padding-bottom ke 15px */

padding-bottom: 15px;

/* Gantikan property margin-bottom ke 50px */

margin-bottom: 50px;
}

.contents-item {
float: left;
/* Gantikan margin-right ke 40px */
margin-right: 40px;
}

/* Gantikan font-size dan margin-top tag <p> yang didalam contents-item */

.contents-item p {
font-size: 24px;
margin-top: 30px;
}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}

Petunjuk:
22. Layout Formulir
Sintax Awal:

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>
<div class="contents">
<h3 class="section-title">Pelajaran</h3>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
<p>HTML & CSS</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
<p>PHP</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
<p>Ruby</p>
</div>
<div class="contents-item">
<img src="https://s3-ap-northeast-
1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
<p>Swift</p>
</div>
</div>

<div class="contact-form">

</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS.

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.contents {
height: 500px;
margin-top: 100px;
}

.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}

.contents-item {
float: left;
margin-right: 40px;
}

.contents-item p {
font-size: 24px;
margin-top: 30px;
}

/* Gantikan property padding-top milik contact-form to 100px */

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 20px;
}

Jawaban:

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

<div class="contact-form">

<h3 class="section-title">Hubungi kami</h3>

<p>Email (Wajib Diisi)</p>
<p>Pesan (Wajib Diisi)</p>
<p>*Bidang wajib diisi.</p>
</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

CSS

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.contents {
height: 500px;
margin-top: 100px;
}

.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}

.contents-item {
float: left;
margin-right: 40px;
}

.contents-item p {
font-size: 24px;
margin-top: 30px;
}

/* Gantikan property padding-top milik contact-form to 100px */

.contact-form {
padding-top: 100px;
}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}
23. Layout Formulir (2)
Sintax awal:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-logo">Progate</div>
<div class="header-list">
<ul>
<li>Tentang</li>
<li>Pelajaran</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

<div class="contact-form">
<h3 class="section-title">Hubungi kami</h3>
<p>Email (Wajib Diisi)</p>

<p>Pesan (Wajib Diisi)</p>

<p>*Bidang Wajib Diisi</p>

</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

Css

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.contents {
height: 500px;
margin-top: 100px;
}

.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}

.contents-item {
float: left;
margin-right: 40px;
}

.contents-item p {
font-size: 24px;
margin-top: 30px;
}

.contact-form {
padding-top: 100px;
}

/* Tambahkan CSS untuk tags <input> dan <textarea> */

/* Tambahkan CSS untuk contact-submit */

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}

.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}

Jawaban:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-logo">Progate</div>
<div class="header-list">
<ul>
<li>Tentang</li>
<li>Pelajaran</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>

<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>

<div class="contact-form">
<h3 class="section-title">Hubungi kami</h3>
<p>Email (Wajib Diisi)</p>

<input>

<p>Pesan (Wajib Diisi)</p>

<textarea></textarea>

<p>*Bidang Wajib Diisi</p>

<input class="contact-submit" type="submit" value="Kirim">

</div>
</div>

<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>

Css

body {
font-family: "Avenir Next";
}

li {
list-style: none;
}

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.contents {
height: 500px;
margin-top: 100px;
}

.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}

.contents-item {
float: left;
margin-right: 40px;
}

.contents-item p {
font-size: 24px;
margin-top: 30px;
}

.contact-form {
padding-top: 100px;
}

/* Tambahkan CSS untuk contact-submit */

.contact-submit {
background-color: #dee7ec;
color: #889eab;
}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}

.footer-logo {
float: left;
font-size: 32px;
}
.footer-list {
float: right;
}

.footer-list li {
padding-bottom: 20px;
}
Petunjuk:

Anda mungkin juga menyukai

Panduan Layout Multikolom HTML CSS
Belum ada peringkat
Panduan Layout Multikolom HTML CSS
10 halaman
Modul Pemrograman Dasar - B5 - Isi
Belum ada peringkat
Modul Pemrograman Dasar - B5 - Isi
85 halaman
Tutorial CRUD PHP dan MySQL Siswa Baru
Belum ada peringkat
Tutorial CRUD PHP dan MySQL Siswa Baru
24 halaman
Pembuatan Helikopter Dengan Blender
Belum ada peringkat
Pembuatan Helikopter Dengan Blender
32 halaman
Laporan Aplikasi Hotel Web
0% (1)
Laporan Aplikasi Hotel Web
25 halaman
Tutorial Blender 3D
Belum ada peringkat
Tutorial Blender 3D
73 halaman
Laravel 8 Livewire JS CRUD With Jetstream
Belum ada peringkat
Laravel 8 Livewire JS CRUD With Jetstream
12 halaman
Pemodelan Tumbukan dengan Blender
Belum ada peringkat
Pemodelan Tumbukan dengan Blender
59 halaman
Aplikasi CRUD PHP OOP PDO
Belum ada peringkat
Aplikasi CRUD PHP OOP PDO
9 halaman
Membuat Animasi Bouncing Ball 3D
Belum ada peringkat
Membuat Animasi Bouncing Ball 3D
14 halaman
Uji Kompetensi Aplikasi Inventaris SMK
Belum ada peringkat
Uji Kompetensi Aplikasi Inventaris SMK
5 halaman
Panduan Proyek Ruang Kelas Blender 3D
Belum ada peringkat
Panduan Proyek Ruang Kelas Blender 3D
34 halaman
CODING 01 Level 3 Curriculum
Belum ada peringkat
CODING 01 Level 3 Curriculum
2 halaman
Aplikasi Nilai Siswa SMK Berbasis Web
Belum ada peringkat
Aplikasi Nilai Siswa SMK Berbasis Web
24 halaman
Panduan Instalasi Laravel Lengkap
Belum ada peringkat
Panduan Instalasi Laravel Lengkap
7 halaman
Tutorial Blender untuk Pemula
Belum ada peringkat
Tutorial Blender untuk Pemula
14 halaman
Seri Tutorial Dreamweaver 8 - Membuat Menu Dengan CSS (Free)
100% (4)
Seri Tutorial Dreamweaver 8 - Membuat Menu Dengan CSS (Free)
15 halaman
File CRUD HTML PHP Mysql
Belum ada peringkat
File CRUD HTML PHP Mysql
12 halaman
Aplikasi Web: Panduan HTML dan CSS
Belum ada peringkat
Aplikasi Web: Panduan HTML dan CSS
13 halaman
Panduan Dasar Codeigniter 4 MVC
Belum ada peringkat
Panduan Dasar Codeigniter 4 MVC
46 halaman
CRUD C# dan MySQL: Tutorial Lengkap
Belum ada peringkat
CRUD C# dan MySQL: Tutorial Lengkap
8 halaman
Login Multi User dengan PHP dan MySQL
Belum ada peringkat
Login Multi User dengan PHP dan MySQL
6 halaman
Soal PTS Pemrograman Web Kelas XI RPL
Belum ada peringkat
Soal PTS Pemrograman Web Kelas XI RPL
3 halaman
Laporan Crystal Report di C#
Belum ada peringkat
Laporan Crystal Report di C#
8 halaman
Tutorial Basis Data DDL & DML
Belum ada peringkat
Tutorial Basis Data DDL & DML
25 halaman
Blender: Software 3D Open Source Gratis
Belum ada peringkat
Blender: Software 3D Open Source Gratis
8 halaman
Panduan Login PHP MySQL Multiuser
Belum ada peringkat
Panduan Login PHP MySQL Multiuser
11 halaman
Tutorial Membuat Doraemon Dengan Blender
Belum ada peringkat
Tutorial Membuat Doraemon Dengan Blender
4 halaman
Aplikasi Pacar Sewaan C# dan MySQL
0% (1)
Aplikasi Pacar Sewaan C# dan MySQL
8 halaman
Membuat CRUD Native PHP Dengan Mysqli - Agus Wiji Suhariono
Belum ada peringkat
Membuat CRUD Native PHP Dengan Mysqli - Agus Wiji Suhariono
10 halaman
Tips IES Light Blender untuk Pemula
Belum ada peringkat
Tips IES Light Blender untuk Pemula
10 halaman
Panduan Lengkap PHP Ajax Jquery Libre PDF
Belum ada peringkat
Panduan Lengkap PHP Ajax Jquery Libre PDF
78 halaman
Tutorial Blender: Model 3D Kereta Sederhana
Belum ada peringkat
Tutorial Blender: Model 3D Kereta Sederhana
25 halaman
Pelatihan PCAP Python 2019 untuk Pengajar
Belum ada peringkat
Pelatihan PCAP Python 2019 untuk Pengajar
6 halaman
Pembelajaran Basis Data dan Pemrograman
Belum ada peringkat
Pembelajaran Basis Data dan Pemrograman
5 halaman
Sistem Informasi Akademik C# dan MySQL
Belum ada peringkat
Sistem Informasi Akademik C# dan MySQL
27 halaman
Modul 1 Memahami Konsep Teknologi Web
Belum ada peringkat
Modul 1 Memahami Konsep Teknologi Web
8 halaman
Modul Pemrograman Web III OOP
Belum ada peringkat
Modul Pemrograman Web III OOP
55 halaman
Struktur Dasar HTML untuk Pemrograman Web
Belum ada peringkat
Struktur Dasar HTML untuk Pemrograman Web
6 halaman
Panduan PHP MySQL CRUD Praktikum
Belum ada peringkat
Panduan PHP MySQL CRUD Praktikum
18 halaman
Panduan Manajemen File Windows
Belum ada peringkat
Panduan Manajemen File Windows
6 halaman
Panduan SQL Dasar untuk Manipulasi Tabel
Belum ada peringkat
Panduan SQL Dasar untuk Manipulasi Tabel
19 halaman
Praktikum Store Procedure MySQL
Belum ada peringkat
Praktikum Store Procedure MySQL
6 halaman
CRUD PHP dengan Modal Bootstrap
Belum ada peringkat
CRUD PHP dengan Modal Bootstrap
14 halaman
Buku Tamu Sederhana dengan JSP MySQL
Belum ada peringkat
Buku Tamu Sederhana dengan JSP MySQL
17 halaman
Windu Gata - Bahasa Pemrograman Java GUI
100% (1)
Windu Gata - Bahasa Pemrograman Java GUI
104 halaman
Dasar HTML untuk Pemrograman Web
Belum ada peringkat
Dasar HTML untuk Pemrograman Web
8 halaman
Muk Web
Belum ada peringkat
Muk Web
26 halaman
Membuat Animasi 3D Dan Bisa Bergerak Dengan Blender
100% (1)
Membuat Animasi 3D Dan Bisa Bergerak Dengan Blender
13 halaman
Panduan Instalasi OwnCloud di Windows 10
Belum ada peringkat
Panduan Instalasi OwnCloud di Windows 10
5 halaman
Belajar PHP & MySQL untuk Pemula
Belum ada peringkat
Belajar PHP & MySQL untuk Pemula
98 halaman
Panduan Presentasi Video Produk
Belum ada peringkat
Panduan Presentasi Video Produk
4 halaman
Aplikasi Multimedia Player dengan JMF
Belum ada peringkat
Aplikasi Multimedia Player dengan JMF
9 halaman
Panduan Membuat Layout HTML Dasar
Belum ada peringkat
Panduan Membuat Layout HTML Dasar
5 halaman
Laporan Praktikum Desain Web (A3) - Fahmi KUrniawan - MIFc S2
Belum ada peringkat
Laporan Praktikum Desain Web (A3) - Fahmi KUrniawan - MIFc S2
5 halaman
Desain Web: Layout & Menu
Belum ada peringkat
Desain Web: Layout & Menu
23 halaman
Layoutku-Pakai Modul 9
Belum ada peringkat
Layoutku-Pakai Modul 9
9 halaman
Kerangka Dasar Website dengan HTML
Belum ada peringkat
Kerangka Dasar Website dengan HTML
6 halaman
Tutorial Layout Website dengan HTML CSS
Belum ada peringkat
Tutorial Layout Website dengan HTML CSS
8 halaman
Panduan HTML & CSS Pemula
Belum ada peringkat
Panduan HTML & CSS Pemula
5 halaman

Latihan HTML Css 1

Diunggah oleh

Latihan HTML Css 1

Diunggah oleh

Latihan

1. Memulai dengan HTML

10. Struktur HTML

11. Struktur HTML

12. Layout Dasar

<!-- Tambahkan tag <div> dengan class "header-list" →

/* Gunakan property list-style untuk menghilangkan bullet dari tag <li> */

/* Gunakan property list-style untuk menghilangkan bullet dari tag <li> */

14. Layout Header

/* Gantikan font-size milik header-logo ke 36px, dan property float ke left */

16. Struktur Footer

/* Tambahkan CSS tag <li> yang diatas kedalam header-list */

/* Gantikan color ke #fff */

/* Gantikan height ke 120px */

/* Gantikan padding untuk semua sisi ke 40px */

/* Gantikan font-size dan property float footer-logo */

/* Gantikan float property footer-list */

/* Tambahkan CSS untuk tag <li> kedalam footer-list */

/* Gantikan color ke #fff */

/* Gantikan height ke 120px */

/* Gantikan padding untuk semua sisi ke 40px */

/* Gantikan font-size dan property float footer-logo */

/* Gantikan float property footer-list */

/* Tambahkan CSS untuk tag <li> kedalam footer-list */

/* Gantikan font-size tag <h1> didalam copy-container */

/* Gantikan font-size tag <h2> didalam copy-container */

/* Gantikan color tags <span> didalam copy-container */

/* Hapuskan CSS height */

/* Gantikan font-size tag <h1> didalam copy-container */

/* Gantikan font-size tag <h2> didalam copy-container */

/* Gantikan tinggi contents ke 500px */

/* Gantikan property border-bottom milik section-title */

/* Gantikan property float milik contents-item ke left */

/* Gantikan tinggi contents ke 500px */

/* Gantikan property border-bottom milik section-title */

/* Gantikan property float milik contents-item ke left */

21. Padding &Margin

/* Gantikan property padding-bottom ke 15px */

/* Gantikan property margin-bottom ke 50px */

/* Gantikan font-size dan margin-top tag <p> yang didalam contents-item */

/* Gantikan property padding-bottom ke 15px */

/* Gantikan property margin-bottom ke 50px */

/* Gantikan font-size dan margin-top tag <p> yang didalam contents-item */

/* Gantikan property padding-top milik contact-form to 100px */

/* Gantikan property padding-top milik contact-form to 100px */

<p>Pesan (Wajib Diisi)</p>

<p>*Bidang Wajib Diisi</p>

/* Tambahkan CSS untuk tags <input> dan <textarea> */

/* Tambahkan CSS untuk contact-submit */

<p>Pesan (Wajib Diisi)</p>

<p>*Bidang Wajib Diisi</p>

/* Tambahkan CSS untuk tags <input> dan <textarea> */

/* Tambahkan CSS untuk contact-submit */

Anda mungkin juga menyukai