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.html dan style.css kosong baru di dalam - Tambahkan 'kode boilerplate' dasar ke file
index.html Anda
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<h1>Just testing this works!h1>
body>
html>
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.
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
0,
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
1,
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
2, dan
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
3
Ini HTMLnya
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
_
Perhatikan bahwa kami memberikan
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
_2s
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
5s, sehingga kami dapat merujuknya nanti
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
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
ul>
nav>
header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<h1>Hi, I'm Boberick the llama.h1>
div>
section>
<section id="about">
<div class="section-inner">
<h2>About meh2>
<p>I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.p>
<h3>Achievementsh3>
<ul>
<li>Bachelor of photogenic posing, 2010li>
<li>Llamaness certification from the Llama Institute, 2014li>
<li>I coded a website, 2017li>
ul>
div>
section>
<section id="contact">
<div class="section-inner">
<h2>Contact meh2>
<p>You can find me on:p>
<ul>
<li><a href="https://twitter.com/llama">Twittera>li>
<li><a href="https://www.reddit.com/user/llama">Reddita>li>
<li><a href="https://www.instagram.com/llamasporfavor/">Instagrama>li>
ul>
<p>Or, you can <a href="mailto:[email protected]">send me an emaila>.p>
div>
section>
main>
<footer>
© Copyright Boberick The Llama, 2017
footer>
body>
html>
_
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
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
6,
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
7,
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
8,
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
header>
<main>
<section id="hero">
section>
<section id="about">
section>
<section id="contact">
section>
main>
<footer>
footer>
body>
html>
9,
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
ul>
nav>
header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<h1>Hi, I'm Boberick the llama.h1>
div>
section>
<section id="about">
<div class="section-inner">
<h2>About meh2>
<p>I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.p>
<h3>Achievementsh3>
<ul>
<li>Bachelor of photogenic posing, 2010li>
<li>Llamaness certification from the Llama Institute, 2014li>
<li>I coded a website, 2017li>
ul>
div>
section>
<section id="contact">
<div class="section-inner">
<h2>Contact meh2>
<p>You can find me on:p>
<ul>
<li><a href="https://twitter.com/llama">Twittera>li>
<li><a href="https://www.reddit.com/user/llama">Reddita>li>
<li><a href="https://www.instagram.com/llamasporfavor/">Instagrama>li>
ul>
<p>Or, you can <a href="mailto:[email protected]">send me an emaila>.p>
div>
section>
main>
<footer>
© Copyright Boberick The Llama, 2017
footer>
body>
html>
0, dan
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
ul>
nav>
header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<h1>Hi, I'm Boberick the llama.h1>
div>
section>
<section id="about">
<div class="section-inner">
<h2>About meh2>
<p>I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.p>
<h3>Achievementsh3>
<ul>
<li>Bachelor of photogenic posing, 2010li>
<li>Llamaness certification from the Llama Institute, 2014li>
<li>I coded a website, 2017li>
ul>
div>
section>
<section id="contact">
<div class="section-inner">
<h2>Contact meh2>
<p>You can find me on:p>
<ul>
<li><a href="https://twitter.com/llama">Twittera>li>
<li><a href="https://www.reddit.com/user/llama">Reddita>li>
<li><a href="https://www.instagram.com/llamasporfavor/">Instagrama>li>
ul>
<p>Or, you can <a href="mailto:[email protected]">send me an emaila>.p>
div>
section>
main>
<footer>
© Copyright Boberick The Llama, 2017
footer>
body>
html>
1. Selain itu, kami perlu memastikan gambar memiliki ukuran yang tepat sehingga tidak merusak halaman
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
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
ul>
nav>
header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<h1>Hi, I'm Boberick the llama.h1>
div>
section>
<section id="about">
<div class="section-inner">
<h2>About meh2>
<p>I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.p>
<h3>Achievementsh3>
<ul>
<li>Bachelor of photogenic posing, 2010li>
<li>Llamaness certification from the Llama Institute, 2014li>
<li>I coded a website, 2017li>
ul>
div>
section>
<section id="contact">
<div class="section-inner">
<h2>Contact meh2>
<p>You can find me on:p>
<ul>
<li><a href="https://twitter.com/llama">Twittera>li>
<li><a href="https://www.reddit.com/user/llama">Reddita>li>
<li><a href="https://www.instagram.com/llamasporfavor/">Instagrama>li>
ul>
<p>Or, you can <a href="mailto:[email protected]">send me an emaila>.p>
div>
section>
main>
<footer>
© Copyright Boberick The Llama, 2017
footer>
body>
html>
3), dan mengubah font. Kami juga telah menghapus beberapa gaya default dari link header
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('https://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('https://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('https://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
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
ul>
nav>
header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<h1>Hi, I'm Boberick the llama.h1>
div>
section>
<section id="about">
<div class="section-inner">
<h2>About meh2>
<p>I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.p>
<h3>Achievementsh3>
<ul>
<li>Bachelor of photogenic posing, 2010li>
<li>Llamaness certification from the Llama Institute, 2014li>
<li>I coded a website, 2017li>
ul>
div>
section>
<section id="contact">
<div class="section-inner">
<h2>Contact meh2>
<p>You can find me on:p>
<ul>
<li><a href="https://twitter.com/llama">Twittera>li>
<li><a href="https://www.reddit.com/user/llama">Reddita>li>
<li><a href="https://www.instagram.com/llamasporfavor/">Instagrama>li>
ul>
<p>Or, you can <a href="mailto:[email protected]">send me an emaila>.p>
div>
section>
main>
<footer>
© Copyright Boberick The Llama, 2017
footer>
body>
html>
4, serta menambahkan
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
ul>
nav>
header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<h1>Hi, I'm Boberick the llama.h1>
div>
section>
<section id="about">
<div class="section-inner">
<h2>About meh2>
<p>I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.p>
<h3>Achievementsh3>
<ul>
<li>Bachelor of photogenic posing, 2010li>
<li>Llamaness certification from the Llama Institute, 2014li>
<li>I coded a website, 2017li>
ul>
div>
section>
<section id="contact">
<div class="section-inner">
<h2>Contact meh2>
<p>You can find me on:p>
<ul>
<li><a href="https://twitter.com/llama">Twittera>li>
<li><a href="https://www.reddit.com/user/llama">Reddita>li>
<li><a href="https://www.instagram.com/llamasporfavor/">Instagrama>li>
ul>
<p>Or, you can <a href="mailto:[email protected]">send me an emaila>.p>
div>
section>
main>
<footer>
© Copyright Boberick The Llama, 2017
footer>
body>
html>
5 ke setiap bagian satu per satu
Alasan
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
ul>
nav>
header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<h1>Hi, I'm Boberick the llama.h1>
div>
section>
<section id="about">
<div class="section-inner">
<h2>About meh2>
<p>I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.p>
<h3>Achievementsh3>
<ul>
<li>Bachelor of photogenic posing, 2010li>
<li>Llamaness certification from the Llama Institute, 2014li>
<li>I coded a website, 2017li>
ul>
div>
section>
<section id="contact">
<div class="section-inner">
<h2>Contact meh2>
<p>You can find me on:p>
<ul>
<li><a href="https://twitter.com/llama">Twittera>li>
<li><a href="https://www.reddit.com/user/llama">Reddita>li>
<li><a href="https://www.instagram.com/llamasporfavor/">Instagrama>li>
ul>
<p>Or, you can <a href="mailto:[email protected]">send me an emaila>.p>
div>
section>
main>
<footer>
© Copyright Boberick The Llama, 2017
footer>
body>
html>
6 sebelum
<html>
<head>
<title>Boberick the llamatitle>
<link rel="stylesheet" href="style.css">
head>
<body>
<header>
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Homea>li>
<li><a href="#about">Abouta>li>
<li><a href="#contact">Contacta>li>
ul>
nav>
header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/llama.jpg" class="profile-img">
<h1>Hi, I'm Boberick the llama.h1>
div>
section>
<section id="about">
<div class="section-inner">
<h2>About meh2>
<p>I'm a really awesome llama. Every day I wake up, munch on some grass, do some coding and then go back to sleep.p>
<h3>Achievementsh3>
<ul>
<li>Bachelor of photogenic posing, 2010li>
<li>Llamaness certification from the Llama Institute, 2014li>
<li>I coded a website, 2017li>
ul>
div>
section>
<section id="contact">
<div class="section-inner">
<h2>Contact meh2>
<p>You can find me on:p>
<ul>
<li><a href="https://twitter.com/llama">Twittera>li>
<li><a href="https://www.reddit.com/user/llama">Reddita>li>
<li><a href="https://www.instagram.com/llamasporfavor/">Instagrama>li>
ul>
<p>Or, you can <a href="mailto:[email protected]">send me an emaila>.p>
div>
section>
main>
<footer>
© Copyright Boberick The Llama, 2017
footer>
body>
html>
7 adalah karena jika tidak, teks akan sulit dibaca - jadi kami menambahkan overlay putih semi-transparan di atasnya. Saya menulis lebih banyak tentang itu di artikel saya di
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. .
Merayakan
Bagaimana 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 Anda
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 .
