Seringkali saat membuat situs web, itu bisa membuat kewalahan. Saya akan menunjukkan kepada Anda cara membuat situs web dari awal dalam artikel ini…
Sekedar catatan…
Artikel ini lebih tentang memandu Anda melalui proses pembuatan situs web, daripada sisi teknisnya. Jika Anda datang ke sini karena ingin mempelajari cara membuat kode situs web, lihat Cara mempelajari pengembangan web, atau seri saya tentang mempelajari HTML
Produk akhir
Inilah produk akhir dari situs yang akan saya bangun hari ini. Lihatlah itu, dan ingatlah saat kita melalui tutorial
Maaf, browser Anda tidak mendukung video tersemat
Ini akan menjadi situs fiksi tentang Boberick si llama [terkadang saya mendapatkan ide yang paling aneh…]
1. Rencanakan tata letak Anda
Langkah pertama dari setiap situs web adalah selalu mengetahui apa yang Anda inginkan di dalamnya dan [samar-samar] tampilan yang Anda inginkan. Jadi, langkah pertama adalah membuat sketsa kasar - baik di atas kertas atau di komputer, tergantung mana yang menurut Anda lebih mudah
Ingat, itu tidak harus terlihat bagus. Ini milikku
Seperti yang Anda lihat, ini sangat kasar. Garis-garisnya tidak lurus dan tidak ada yang rata, tetapi saya masih bisa melihat bagaimana tampilan situs dan bagian apa yang perlu saya miliki
Dalam tata letak ini, saya memiliki header [bilah navigasi], tiga bagian, dan footer
2. Siapkan 'kode boilerplate'
Sekarang saatnya untuk mendapatkan kode dasar yang Anda miliki di awal situs web apa pun [ini biasa disebut boilerplate]
Lakukan ini dengan
- Membuat folder baru di komputer Anda untuk situs web
- Buat file
index.htmldanstyle.csskosong baru di dalam - Tambahkan 'kode boilerplate' dasar ke file
index.htmlAnda
Boberick the llama
Just testing this works!
Terakhir, buka index.html_ Anda di browser web untuk memeriksa semuanya berfungsi
Artikel ini akan lebih banyak menjelaskan proses pembuatan situs web, jadi saya tidak akan menjelaskan kode yang sebenarnya secara detail - tetapi Anda masih dapat mengikutinya jika mau
Jika demikian, ikuti langkah-langkah di atas untuk memulai
3. Buat elemen dalam tata letak Anda
Sekarang saatnya membuat elemen tata letak/bagian yang Anda rencanakan di langkah 1
Cara terbaik untuk melakukannya adalah dengan menggunakan elemen semantik.
Boberick the llama
Boberick the llama
Boberick the llama
Boberick the llama
Ini HTMLnya
Boberick the llama
Perhatikan bahwa kami memberikan
Boberick the llama
Boberick the llama
Jika Anda memuat ulang halaman, Anda akan melihat tidak ada apa-apa di sana - ini karena kami hanya membuat bagian halaman, bukan hal sebenarnya di dalamnya
4. Isi konten HTML
Setelah Anda memiliki bagian halaman, saatnya untuk mengisinya. Jika Anda tahu konten apa yang akan Anda gunakan, masukkan itu. Jika tidak, masukkan beberapa teks tiruan dan ganti dengan konten yang sebenarnya nanti
Ini HTML setelah mengisi beberapa konten
Boberick the llama
Home
About
Contact
Hi, I'm Boberick the llama.
About me
I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.
Achievements
Bachelor of photogenic posing, 2010
Llamaness certification from the Llama Institute, 2014
I coded a website, 2017
Contact me
You can find me on:
Twitter
Reddit
Instagram
Or, you can send me an email.
© Copyright Boberick The Llama, 2017
Jika Anda memuat ulang halaman, Anda akan melihat bahwa kami sekarang memiliki beberapa konten
5. Tambahkan beberapa CSS tata letak dasar
Setelah kita selesai dengan HTML kita, saatnya beralih ke CSS. Bagian pertama dan terpenting yang harus difokuskan terlebih dahulu adalah membuatnya terlihat seperti tata letak kita - lalu kita bisa fokus pada detailnya
Artinya, kita perlu berfokus pada properti seperti
Boberick the llama
Boberick the llama
Boberick the llama
Boberick the llama
Boberick the llama
Home
About
Contact
Hi, I'm Boberick the llama.
About me
I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.
Achievements
Bachelor of photogenic posing, 2010
Llamaness certification from the Llama Institute, 2014
I coded a website, 2017
Contact me
You can find me on:
Twitter
Reddit
Instagram
Or, you can send me an email.
© Copyright Boberick The Llama, 2017
Boberick the llama
Home
About
Contact
Hi, I'm Boberick the llama.
About me
I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.
Achievements
Bachelor of photogenic posing, 2010
Llamaness certification from the Llama Institute, 2014
I coded a website, 2017
Contact me
You can find me on:
Twitter
Reddit
Instagram
Or, you can send me an email.
© Copyright Boberick The Llama, 2017
Inilah CSS yang akan kita tambahkan ke style.css kita
body {
margin: 0;
margin-top: 50px;
}
header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
background-color: #eee;
}
header * {
display: inline;
height: 50px;
}
header ul {
padding: 0;
}
header li {
margin-left: 20px;
}
section {
height: 100vh;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#hero .profile-img {
width: 300px;
}
footer {
text-align: center;
padding: 50px;
}
Di sini, kami hanya menambahkan gaya untuk membuat tata letak keseluruhan kami terlihat serupa - bukan konten individual. Kami memastikan bahwa bagian disetel ke , membuat tajuk memiliki , memposisikan item di tajuk, dan banyak lagi. Kami juga menggunakan flexbox untuk memusatkan konten di bagian kami
Inilah hasilnya
Maaf, browser Anda tidak mendukung video tersemat
6. Tambahkan gaya yang lebih spesifik
Setelah kerangka dasar situs selesai, kita dapat menambahkan gaya yang lebih spesifik
Sekarang kita bisa membuat website kita terlihat bagus
Inilah CSS kami
body {
margin: 0;
margin-top: 50px;
font-family: sans-serif; /* Add this line */
}
header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
background-color: #eee;
}
header * {
display: inline;
height: 50px;
}
header ul {
padding: 0;
}
header li {
margin-left: 20px;
}
section {
height: 100vh;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#hero .profile-img {
width: 300px;
border-radius: 50%; /* Add this line */
}
footer {
text-align: center;
padding: 50px;
}
/* Add everything below here */
#hero h1 {
font-size: 3em;
}
section h2 {
font-size: 2.5em;
}
section h3 {
font-size: 1.5em;
}
header a {
text-decoration: none;
color: black;
}
Seperti yang Anda lihat, kami telah membuat judul lebih besar, membulatkan gambar kami [menggunakan
Boberick the llama
Home
About
Contact
Hi, I'm Boberick the llama.
About me
I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.
Achievements
Bachelor of photogenic posing, 2010
Llamaness certification from the Llama Institute, 2014
I coded a website, 2017
Contact me
You can find me on:
Twitter
Reddit
Instagram
Or, you can send me an email.
© Copyright Boberick The Llama, 2017
Inilah hasilnya
Maaf, browser Anda tidak mendukung video tersemat
7. Tambahkan warna dan latar belakang
Yay, kita sedang di kandang sekarang. Saatnya menambahkan sentuhan akhir ke situs web kami - warna dan latar belakang
Inilah yang akan membuat situs kita terlihat sangat mengagumkan
Ini CSSnya
body {
margin: 0;
margin-top: 50px;
font-family: sans-serif;
}
header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
background-color: #eee;
}
header * {
display: inline;
height: 50px;
}
header ul {
padding: 0;
}
header li {
margin-left: 20px;
}
section {
height: 100vh;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-size: cover; /* Add this line */
background-position: center center; /* Add this line */
background-repeat: no-repeat; /* Add this line */
background-attachment: fixed; /* Add this line */
}
#hero .profile-img {
width: 300px;
border-radius: 50%;
}
footer {
text-align: center;
padding: 50px;
}
#hero h1 {
font-size: 3em;
}
section h2 {
font-size: 2.5em;
}
section h3 {
font-size: 1.5em;
}
header a {
text-decoration: none;
color: black;
}
/* Add everything below here */
#hero {
background-image: linear-gradient[rgba[255,255,255,0.75],rgba[255,255,255,0.75]], url['//codetheweb.blog/assets/img/posts/steps-to-creating-a-website/field.jpg'];
}
#about {
background-image: linear-gradient[rgba[255,255,255,0.75],rgba[255,255,255,0.75]], url['//codetheweb.blog/assets/img/posts/steps-to-creating-a-website/beach.jpg'];
}
#contact {
background-image: linear-gradient[rgba[255,255,255,0.75],rgba[255,255,255,0.75]], url['//codetheweb.blog/assets/img/posts/steps-to-creating-a-website/canyon.jpg'];
}
Seperti yang Anda lihat, kami telah menambahkan beberapa gaya latar belakang umum ke elemen
Boberick the llama
Home
About
Contact
Hi, I'm Boberick the llama.
About me
I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.
Achievements
Bachelor of photogenic posing, 2010
Llamaness certification from the Llama Institute, 2014
I coded a website, 2017
Contact me
You can find me on:
Twitter
Reddit
Instagram
Or, you can send me an email.
© Copyright Boberick The Llama, 2017
Boberick the llama
Home
About
Contact
Hi, I'm Boberick the llama.
About me
I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.
Achievements
Bachelor of photogenic posing, 2010
Llamaness certification from the Llama Institute, 2014
I coded a website, 2017
Contact me
You can find me on:
Twitter
Reddit
Instagram
Or, you can send me an email.
© Copyright Boberick The Llama, 2017
Alasan
Boberick the llama
Home
About
Contact
Hi, I'm Boberick the llama.
About me
I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.
Achievements
Bachelor of photogenic posing, 2010
Llamaness certification from the Llama Institute, 2014
I coded a website, 2017
Contact me
You can find me on:
Twitter
Reddit
Instagram
Or, you can send me an email.
© Copyright Boberick The Llama, 2017
Boberick the llama
Home
About
Contact
Hi, I'm Boberick the llama.
About me
I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.
Achievements
Bachelor of photogenic posing, 2010
Llamaness certification from the Llama Institute, 2014
I coded a website, 2017
Contact me
You can find me on:
Twitter
Reddit
Instagram
Or, you can send me an email.
© Copyright Boberick The Llama, 2017
8. Merayakan. 🎉
Merayu. Anda akhirnya menyelesaikan situs web Anda. Sekarang, pamerkan ke teman, keluarga, dan seluruh internet 😉
Bacaan lebih lanjut
Jika Anda ingin tahu lebih banyak tentang bagian tertentu dari apa yang saya tunjukkan hari ini, lihat
- Cara membuat gambar pahlawan satu halaman penuh
- Cara menata bilah navigasi menggunakan CSS
Kesimpulan
Jadi, saya harap Anda menikmati artikel ini dan semoga Anda belajar sesuatu selama ini
Aku melakukan sesuatu yang sedikit berbeda dari biasanya hari ini, jadi. Ingat, artikel ini bukan tentang saya yang menunjukkan kepada Anda bagian teknis yang sebenarnya dalam membuat situs web, tetapi lebih banyak tentang memandu Anda melalui proses pemikiran dalam membuat situs web
Jika Anda menyukai artikel ini, jadilah manusia yang luar biasa dan atau daftar ke buletin, saya akan memberi Anda taco gratis 🌮 [tidak juga 😜 ]
Selamat bersenang-senang, teruskan coding, dan sampai jumpa lagi, di mana’ saya akan berbicara tentang cara mengatur gaya bilah navigasi [header] menggunakan CSS - memandu Anda melalui bilah navigasi yang kami buat hari ini, tetapi lebih detail. Sampai jumpa
Artikel ini disarankan oleh Alisa Dubik-Wilson - terima kasih. Jika Anda juga ingin menyarankan artikel, Anda dapat menghubungi saya atau memberi tahu saya di
Bagaimana cara membuat halaman web menggunakan kode sumber HTML dan CSS?
Rencanakan tata letak Anda. Langkah pertama dari setiap situs web adalah selalu mengetahui apa yang Anda inginkan di dalamnya dan [samar-samar] tampilan yang Anda inginkan. .Siapkan 'kode boilerplate'. .Buat elemen dalam tata letak Anda. .Isi konten HTML. .Tambahkan beberapa CSS tata letak dasar. .Tambahkan gaya yang lebih spesifik. .Tambahkan warna dan latar belakang. .MerayakanBagaimana cara membuat halaman web menggunakan HTML dengan kode sumber?
Ikuti langkah-langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad atau TextEdit. .Langkah 1. Buka Notepad [PC] Windows 8 atau yang lebih baru. .Langkah 1. Buka TextEdit [Mac] Buka Finder > Applications > TextEdit. .Langkah 2. Tulis Beberapa HTML. .Langkah 3. Simpan Halaman HTML. .Langkah 4. Lihat Halaman HTML di Browser AndaApakah desainer web menulis HTML dan CSS?
Ada juga perbedaan mencolok dalam keseluruhan tanggung jawab antara desainer web dan developer. Sementara desainer web mungkin mengetahui cara membuat kode HTML dan CSS dan memiliki beberapa tanggung jawab pengkodean, mereka umumnya akan menyerahkan tugas ini kepada developer .