Membuat Tampilan Web Bola.net menggunakan HTML dan CSS
MEMBUAT TAMPILAN WEB BOLA.NET MENGGUNAKAN HTML DAN CSS
.png)
File yang dibutuhkan untuk membuat tampilan ada 2 yaitu :
- index.html
- style.css
1. Buat tampilan awal web bola.net menggunakan menggunakan HTML
syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tampilan Bola.net</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="bolanet.jpg" alt="">
<form action="">
<input type="text" name="Cari" id="" placeholder="Topik berita apa yang anda cari?">
</form>
</header>
<div class="navbar">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">TRENDING</a></li>
<li><a href="">EROPA</a></li>
<li><a href="">DUNIA</a></li>
<li><a href="">INDONESIA</a></li>
<li><a href="">BUNDESLIGA</a></li>
<li><a href="">BOLATAINMENT</a></li>
<li><a href="">JADWAL & SKOR</a></li>
<li><a href="">RAGAM</a></li>
<li><a href="">SPORT</a></li>
</ul>
</div>
<div class="judul">
<h1>Punya 33 Pemain, Persija Jakarta Bisa Bikin<br>2 Tim Menakutkan di BRI Liga 1 2022/2023</h1>
</div>
<div class="gambar">
<img src="persija.jpg" alt="">
</div>
<section>
<div class="isi">
Bola.net - Persija Jakarta mendaftarkan 33 pemain untuk mengarungi persaingan di BRI Liga 1<br>2022/2023. Menariknya, dari nama-nama yang tersedia, Persija bisa membentuk dua tim yang<br>sama-sama menakutkannya bagi tim lawan.
<br>
<br>
Ketika memulai BRI Liga 1 2022/2023 melawan Bali United pada 23 Juli 2022, Persija Jakarta<br>menurunkan pakem 3-4-2-1. Pelatih Persija, Thomas Doll, memainkan Andritany Ardhiyasa sebagai<br>kiper, Ondrej Kudela, Maman Abdurrahman, dan Muhammad Ferarri di lini belakang.
<br>
<br>
Frengky Missa, Tony Sucipto, Resky Fandi, dan Firza Andika di lini tengah. Syahrian Abimanyu dan<br>Hanno Behrens menjadi penopang Michael Krmencik di lini depan.
<br>
<br>
Namun, materi pemain Persija Jakarta itu belum mampu membendung Bali United. Macan<br>Kemayoran kalah 0-1. Tim ibu kota sempat dominan di babak pertama, namun berbalik di paruh<br>kedua. Yuk simak ulasan lengkapnya di bawah ini ya Bolaneters.
</div>
<div class="isi2">
<h1>Komposisi Utama Persija Jakarta</h1>
<br><img src="yusuf.jpg" alt=""><br><br>
<p>
Starting eleven ketika melawan Bali United kemungkinan bukan pakem utama Persija Jakarta.<br>Macan Kemayoran masih belum bisa menurunkan Ryuji Utomo, Hansamu Yama, hingga Abdulla<br>Yusuf Helal.
<br>
<br>
Andai Ryuji, Hansamu Yama, dan Abdulla Yusuf Helal beraksi, susunan Persija diprediksi bakal<br>beda. Nama pertama dan kedua akan menggantikan Maman Abdurrahman serta Muhammad<br>Ferarri.
<br>
<br>
Abdulla Yusuf Helal akan mengisi posisi Tony Sucipto dan berganti peran dengan Syahrian<br>Abimanyu. Penampilan Abdulla Yusuf Helal masih dinantikan. Striker Timnas Bahrain itu tidak<br>bermain ketika Persija melawan Bali United.
<br>
<br>
Thomas Doll mempersiapkan Abdulla Yusuf Helal untuk menghadapi Persis Solo dalam pekan<br>kedua BRI Liga 1 di Stadion Patriot Candrabhaga, Bekasi pada 31 Juli 2022.
</p>
</div>
<div class="isi3">
<h1>Materi Pelapis Persija Jakarta</h1>
<br><img src="valdo.jpg" alt=""><br><br>
<p>
Komposisi pelapis Persija Jakarta 11-12 dengan materi tim utama. Nama-nama seperti Riko<br>Simanjuntak, Hanif Sjahbandi, hingga Osvaldo Haay masih tersedia.
<br>
<br>
Namun, Osvaldo Haay masih mengalami cedera. Winger berusia 23 tahun itu diperkirakan masih<br>akan absen dalam sejumlah laga BRI Liga 1.
<br>
<br>
Pola 3-4-2-1 yang terus dimatangkan Thomas Doll memaksa sejumlah pemain untuk berubah<br>peran. Riko Simanjuntak dan Osvaldo Haay misalnya, yang perlu bertransformasi dari winger<br>menjadi gelandang serang.
<br>
<br>
Persija juga masih mempunyai bek naturalisasi, Otavio Dutra. Namun, namanya nihil dalam daftar<br>skuad Macan Kemayoran di BRI Liga 1.
</p>
</div>
<div class="isi4">
<h1>Prediksi Tim Utama Persija</h1>
<br><img src="andri.jpg" alt=""><br><br>
<p>
Persija Jakarta (3-4-2-1): Andritany Ardhiyasa; Ondrej Kudela, Ryuji Utomo, Hansamu Yama;<br>Frengky Missa, Resky Fandi, Syahrian Abimanyu, Firza Andika; Abdulla Yusuf Helal, Hanno<br>Behrens; Michael Krmencik.
<br>
<br>
Jika semua pemain dalam kondisi bugar, maka Persija bakal punya starting XI yang sangat<br>menakutkan. Apalagi para pemain asing Persija punya kualitas yang sudah tidak perlu diragukan<br>lagi.
</p>
</div>
<div class="isi5">
<h1>Prediksi Tim Pelapis Persija</h1><br>
<p>
Persija Jakarta (3-4-2-1): Cahya Supriadi: Otavio Dutra, Maman Abdurrahman, Muhammad Ferarri;<br>Rio Fahmi, Hanif Sjahbandi, Tony Sucipto, Rezaldi Hehanussa; Riko Simanjuntak, Osvaldo Haay;<br>Taufik Hidayat.
<br>
<br>
Walau judulnya adalah tim 'pelapis', Persija tetap dihuni banyak pemain bintang. Bahkan semua<br>pemain pernah atau merupakan penggawa Timnas Indonesia, baik senior maupun kelompok umur.<br>Jadi, Persija tetap akan menjadi tim yang mewah walau tanpa pemain asing.
</p>
</div>
</section>
</body>
</html>
2. Kemudian buat CSS nya
syntax :
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
header{
display: flex;
justify-content: space-between;
margin-left: 304px;
margin-right: 364px;
margin-bottom: 20px;
}
header img{
width: 20%;
margin-top: 12px;
}
header form input{
height: 30px;
width: 300px;
margin-top: 18px;
padding: 5px;
}
.navbar{
background-color: green;
width: fit-content;
margin:auto;
}
.navbar ul {
display: flex;
justify-content: center;
}
.navbar ul li{
margin: 20px;
list-style: none;
}
.navbar ul li a{
text-decoration: none;
color: white;
}
.judul h1{
margin: 20px;
margin-left: 115px;
}
.gambar {
margin-left: 115px;
}
section .isi {
margin-top: 20px;
margin-left: 115px;
text-align: justify;
}
section .isi2 {
margin-top: 50px;
margin-left: 115px;
text-align: justify;
}
section .isi3 {
margin-top: 50px;
margin-left: 115px;
text-align: justify;
}
section .isi4 {
margin-top: 50px;
margin-left: 115px;
text-align: justify;
}
section .isi5 {
margin-top: 50px;
margin-left: 115px;
text-align: justify;
margin-bottom: 70px;
}
Hasil :
.png)
.png)
Komentar
Posting Komentar