kode html

Bagaimana Anda membuat halaman menggunakan html dan css?

Memiliki halaman arahan yang baik untuk situs web Anda adalah penting. Ini dapat membantu mengarahkan pelanggan ke situs Anda di mana mereka akan menemukan produk dan layanan Anda dan mudah-mudahan mengambil tindakan

Dalam tutorial berbasis teks ini, saya akan membawa Anda melalui cara membuat halaman arahan untuk saluran TV tinju dengan HTML biasa, CSS, dan JavaScript

Nama saluran TV fiktif kami adalah JabTV, dan tujuan pembuatan halaman arahan adalah untuk mengumpulkan email

Di akhir tutorial ini, Anda akan dapat membuatnya

menu hamburger responsif
pengalih tema gelap dan terang
galeri gambar lightbox
tombol gulir ke atas
dan yang terpenting, halaman web yang responsif

Itu tidak berakhir dengan manfaat itu. Saya percaya bahwa sebagai pemula, Anda juga dapat menaikkan level CSS Anda setelah menyelesaikan tutorial ini

Untuk mengikuti saya, ambil file awal dari repo GitHub ini
Lihat demo langsungnya juga agar Anda dapat memahami apa yang sedang kami bangun

Daftar isi

Struktur Folder Proyek

Struktur folder mengikuti konvensi yang digunakan oleh banyak pengembang front end

File HTML dan readme serta tangkapan layar untuk readme ada di root. File CSS, file JavaScript, ikon, dan gambar masuk ke subfolder masing-masing di dalam folder aset

JabTV👊

Ini adalah kombinasi dari kata "Jab" dan "TV", dengan emoji pukulan

Item menu nav adalah tautan generik yang ditempatkan di tag daftar tidak berurutan, seperti yang ditampilkan dalam cuplikan di bawah


        
          About
        
        
          Boxing Stars
        
        
          stakeholders
        
        
          Subscribe

Selain itu, kami memerlukan beberapa bilah untuk menu seluler. Bilah akan disembunyikan di versi desktop dan terlihat di ponsel

Untuk ini, saya akan menggunakan bilah yang dibuat dengan HTML dan CSS mentah, bukan ikon. Bilah akan berupa tag rentang yang ditempatkan di wadah div dengan kelas

.fist {
  color: var[--secondary-color];
}

.jab {
  color: var[--primary-color];
}

.tv {
  color: var[--secondary-color];
}

Menu nav sekarang terlihat seperti ini di browser

JabTV👊

Dengan HTML di atas, inilah yang kita miliki di browser

JabTV👊

Selain menyelaraskan hal-hal dengan Flexbox, saya juga memberi bagian lebar maksimum

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

3 sehingga pengguna tidak perlu melihat jauh ke ujung ekstrim untuk melihat konten bagian – ini bagus untuk pengalaman pengguna

Saya menerapkan margin

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

_4 di atas, otomatis di kiri dan kanan, dan

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

5 di bagian bawah untuk memusatkan semua yang ada di bagian tersebut

Sejauh ini, kami memiliki ini di browser

JabTV👊

Ingat ada 2 tombol di bagian ini, jadi saya memiliki gaya dasar yang ditentukan untuknya


      
        
          JabTV👊

Bagian ini mulai terbentuk

JabTV👊

Untuk dapat memindahkan stan, saya menggunakan properti

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

5 dan menyetelnya ke

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

6, yang kemudian membantu saya menetapkan

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

7 dan

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

8 properti ke stan

Bagian pahlawan kini telah terbentuk sepenuhnya

JabTV👊

Jika Anda bertanya-tanya mengapa tidak ada tag

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

9, itu karena saya berencana untuk memasukkan gambar latar belakang dengan properti CSS

.hamburger {
  display: none;
}

Properti

.hamburger {
  display: none;
}

_0 adalah singkatan dari

```
.hamburger {
  display: none;
}
```
2
```
.hamburger {
  display: none;
}
```
3
```
.hamburger {
  display: none;
}
```
4
```
.hamburger {
  display: none;
}
```
5
```
.hamburger {
  display: none;
}
```
6
```
.hamburger {
  display: none;
}
```
7
```
.hamburger {
  display: none;
}
```
8
dan
```
.hamburger {
  display: none;
}
```
_9

Hanya yang Anda tentukan yang akan diterapkan, sehingga Anda selalu dapat melewati salah satu properti

Selain properti background, saya juga akan menggunakan Flexbox untuk menyelaraskan teks dari HTML agar terlihat bagus pada gambar background

Beginilah cara saya menggunakan properti posisi yang dikombinasikan dengan Flexbox


      
        
          JabTV👊

Dan sejauh ini tampilan bagian tersebut di browser

JabTV👊

Perhatikan bahwa saya menerapkan bayangan teks ke teks karena ditampilkan pada gambar. Anda harus melakukan ini di setiap proyek untuk aksesibilitas yang lebih baik

Bagian Tentang terlihat jauh lebih bagus sekarang

JabTV👊

Agar galeri berfungsi dan menggulir dengan lancar saat melihat gambar, Anda harus menginisialisasinya dengan satu baris JavaScript


      
        
          JabTV👊

Galeri gambar lightbox kami sekarang berfungsi
About

Boxing Stars

stakeholders

Dalam cuplikan kode CSS di atas, saya menargetkan

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

0 dengan kelas

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var[--bold-font];
}

5 dan memberinya tampilan kisi, sehingga kita dapat menggunakan properti CSS lainnya pada elemen di dalam

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

Saya mendefinisikan kolom yang saya butuhkan dengan

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var[--bold-font];
}

_7, yang akan membatasi gambar menjadi 5 kolom

Sejauh ini, inilah tampilan galeri
About

Boxing Stars

stakeholders

About

Boxing Stars

stakeholders

Dengan baris dan kolom kisi yang ditentukan, gambar pertama akan menempati 2 baris pertama secara horizontal, dan 2 kolom pertama secara vertikal

Saya juga akan menargetkan gambar kedua dan menentukan kolom kisi untuknya


        
          About
        
        
          Boxing Stars
        
        
          stakeholders
        
        
          Subscribe

Galeri gambar kami sekarang tertata dengan baik dan berfungsi dengan baik
About

Boxing Stars

stakeholders

Seperti inilah tampilan bagian tersebut
About

Boxing Stars

stakeholders

Pada cuplikan kode di atas, saya menekan bagian tersebut sedikit ke bawah dengan margin-top 2rem. Saya menargetkan kelas

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var[--bold-font];
}

_8 untuk melakukan ini

Hal berikutnya yang saya lakukan adalah menargetkan kelas

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var[--bold-font];
}

_9, dan saya memberinya margin

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

4 di bagian atas dan bawah. Saya juga memusatkannya di kiri dan kanan dengan


      
        
          JabTV👊

Menargetkan kelas

.logo {
  font-size: 2rem;
  font-weight: 500;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 2rem;
}

.nav-link {
  font-weight: var[--bold-font];
}

_9 lagi, saya juga memberikan lebar maksimum 1100px pada bagian tersebut, sehingga spasi dibuat di kiri dan kanan. Ini memastikan bahwa pengguna tidak melihat ke kiri dan ke kanan sebelum melihat sesuatu

Ini membuat segalanya terlihat sedikit lebih baik
About

Boxing Stars

stakeholders

Karena ada 3 gambar dalam

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

Saya mendefinisikan 3 kolom untuk bagian tersebut

sejajarkan semuanya ke tengah secara horizontal dan vertikal dengan


      
        
          JabTV👊

menambahkan ruang


      
        
          JabTV👊

05 di dalam tag

 position: sticky;
  top: 0;
  left: 0;
  z-index: 1;

0 dengan properti


      
        
          JabTV👊

Semuanya sekarang terlihat bagus terlepas dari teksnya

JabTV👊

08 dan


      
        
          JabTV👊

09 dan menyelaraskannya ke tengah, lalu menetapkan warna dan font jika perlu


        
          About
        
        
          Boxing Stars
        
        
          stakeholders
        
        
          Subscribe

Bagian sekarang terlihat cukup baik
About

Boxing Stars

stakeholders

Seperti yang Anda lihat, saya memiliki masukan untuk email dan tombol kirim di dalam formulir
Bagian itu tidak terlihat terlalu buruk di browser

JabTV👊

10 dan


      
        
          JabTV👊

11 ke tengah, dan membuat tombol berlangganan terlihat bagus

Beginilah cara saya menyelaraskan


      
        
          JabTV👊

_10 dan membentuk ke tengah


        
          About
        
        
          Boxing Stars
        
        
          stakeholders
        
        
          Subscribe

Perhatikan saya juga mendorong bagian ke bawah sedikit dengan margin

nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  box-shadow: 2px 3px 2px #f1f1f1;
}

Untuk mendorong formulir menjauh dari


      
        
          JabTV👊

10, saya memberikan margin


      
        
          JabTV👊

15 di bagian atas dan bawah, dan 2


      
        
          JabTV👊

16 di kiri dan kanan

Bentuknya sekarang terlihat jauh lebih baik

JabTV👊

_17 ke area input, jadi saya akan menargetkannya dengan kelas dan menerapkan beberapa gaya

Inilah yang terjadi pada area input dengan CSS di atas

Saya memberi input padding 0. 2rem untuk jarak yang lebih baik
Saya memberikannya [input] batas padat biru 1px
Saya membuat sudut input dibulatkan dengan border-radius 4px
saat fokus, yaitu saat Anda mencoba mengetik input, saya mengubah warna batas menjadi warna sekunder situs web
terakhir, saya menyetel garis besar menjadi tidak ada untuk menghapus garis besar jelek yang muncul saat mengetik di area masukan

Saya membuat tombol berlangganan terlihat lebih baik dengan CSS di bawah ini

Bagian langganan sekarang terlihat sangat keren

JabTV👊

18, itulah entitas karakter untuk © yang selalu Anda lihat di footer situs web

CSS semua dilakukan dalam 6 baris

Saya menerapkan


      
        
          JabTV👊

19 dan


      
        
          JabTV👊

20 ke footer sehingga bagian atasnya dapat berkorelasi dengan navbar

JabTV👊

Saya menggunakan metode


      
        
          JabTV👊

_22 untuk ini karena dilaporkan lebih cepat. Anda dapat menggunakan


      
        
          JabTV👊

_23 juga

Untuk mendapatkan tindakan klik pengguna pada tombol, saya menggunakan fitur penting dari DOM [Document Object Model] yang disebut eventListener

Dalam fungsi


      
        
          JabTV👊

_24, saya membawa metode objek jendela yang disebut


      
        
          JabTV👊

25, yang membantu berpindah ke mana saja di halaman web

Untuk memberi tahu metode scrollTo ke mana harus menggulir, Anda harus menetapkannya sebagai properti atas dan kiri, atau atas dan bawah sesuai kasusnya. Jadi saya menetapkannya di atas dan di kiri 0

Hal terakhir yang saya lakukan adalah menyetel properti perilaku ke string "smooth", sehingga semuanya bernyawa dengan lancar saat tombol diklik

Tombol scroll-to-top kami sekarang bekerja dengan sempurna

JabTV👊

27? Let’s make it white and round to truly look like a ball. We will also position it absolute because its inside the label which has been positioned relative

@import url["//fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap"];

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var[--transition];
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var[--primary-color];
}

a:hover {
  color: var[--secondary-color];
}

Defining width, height, and a border-radius of 50% is how you make anything round in CSS

JabTV👊

28 class by using change event on the checkbox and the


      
        
          JabTV👊

29 method of DOM

@import url["//fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap"];

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var[--transition];
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var[--primary-color];
}

a:hover {
  color: var[--secondary-color];
}

Notice that I selected the checkbox with an id of


      
        
          JabTV👊

30 and assigned it to a


      
        
          JabTV👊

31 variable. Try to always use ids for JavaScript and classes for CSS, so you don’t get confused

Users can nohw toggle light and dark modes on our landing page

JabTV👊

33. This class will be toggled with JavaScript when the user clicks the bars

@import url["//fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap"];

/* CSS Variables */
:root {
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --primary-color: #0652dd;
  --secondary-color: #ea2027;
  --line-height: 1.7rem;
  --transition: 0.4s ease-in;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var[--transition];
}

 body {
  font-family: "Roboto", sans-serf;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var[--primary-color];
}

a:hover {
  color: var[--secondary-color];
}

The nav items have become poorly spaced

JabTV👊

34 class and give them some margins

.fist {
  color: var[--secondary-color];
}

.jab {
  color: var[--primary-color];
}

.tv {
  color: var[--secondary-color];
}

The CSS snippet above gives each nav menu item a margin of 2rem on the top and bottom, and 0 on the left and right, so they look like this

JabTV👊

35]

I wrote a function named


      
        
          JabTV👊

36 to get the classlists of the hamburger menu and unordered list, then used the


      
        
          JabTV👊

29 method to bring in the active class

Our nav menu items are now being toggled back and forth with the bars changing shape as needed

JabTV👊

38 class – which will eventually return the nav menu to its original state

.fist {
  color: var[--secondary-color];
}

.jab {
  color: var[--primary-color];
}

.tv {
  color: var[--secondary-color];
}

Everything now works fine with our mobile menu

If you noticed, other parts of the website are not looking good on mobile devices. There’s even an annoying horizontal scrollbar. This is not 1998 but 2022

Adding the following styles to the media query will fix it

.fist {
  color: var[--secondary-color];
}

.jab {
  color: var[--primary-color];
}

.tv {
  color: var[--secondary-color];
}

With the CSS above, I reduced sizes, changed the direction to column where necessary so the sections stack on top of one another, and made the TV stands aligned properly

Looking at the landing page on smaller phones, we really can do better

To make the landing page responsive on smaller phones, I will integrate few changes on mobile devices of screen width 420px and below

.fist {
  color: var[--secondary-color];
}

.jab {
  color: var[--primary-color];
}

.tv {
  color: var[--secondary-color];
}

We now have a fully responsive landing page

Grab the finished copy of the landing page code from this Github repo

Conclusion

In this detailed tutorial, you have learned how to make a

fully responsive website
dark theme switcher
hamburger menu
lightbox image gallery
scroll-to-top button

These are functionalities you can always integrate into a new or existing project, so feel free to always come back to this article any time you need it

If you find this text-based tutorial helpful, share it by tweeting a thanks or pasting the link on your social media platforms

Thank you for reading

Kolade Chris

Web developer and technical writer focusing on frontend technologies

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Daftar isi

Struktur Folder Proyek

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

JabTV👊

Conclusion

How to create a Web page using HTML and CSS?

How do you create a page in HTML?

Bagaimana cara kerja CSS dan HTML dalam membuat halaman Web?

How do I create my first website with HTML and CSS?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề