search

Bisakah saya membuat situs web hanya menggunakan html dan css?

1 years ago
Komentar: 0
Dibaca: 23

Pelajari cara membuat situs web responsif yang berfungsi di semua perangkat, PC, laptop, tablet, dan ponsel

Show

Buat Situs Web dari Awal

Sebuah "Draf Tata Letak"

Sebaiknya buat draf tata letak desain halaman sebelum membuat situs web

Konten Samping

Beberapa teks beberapa teks

Isi utama

Beberapa teks beberapa teks

Beberapa teks beberapa teks

Beberapa teks beberapa teks

Langkah Pertama - Halaman HTML Dasar

HTML adalah bahasa markup standar untuk membuat situs web dan CSS adalah bahasa yang menjelaskan gaya dokumen HTML. Kami akan menggabungkan HTML dan CSS untuk membuat halaman web dasar

Memulai pengembangan web dengan membuat proyek web sederhana dalam Visual Studio Code yang berisi halaman web, file CSS, dan file JavaScript. Pelajari cara menggunakan alat pengembang di browser untuk memeriksa pekerjaan Anda

Catatan

Ini adalah modul proyek terpandu di mana Anda akan menyelesaikan proyek ujung ke ujung dengan mengikuti petunjuk langkah demi langkah

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

Bisakah saya membuat situs web hanya menggunakan html dan css?

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

  1. Membuat folder baru di komputer Anda untuk situs web
  2. Buat file index.html dan style.css kosong baru di dalam
  3. Tambahkan 'kode boilerplate' dasar ke file index.html Anda
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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

Bisakah saya membuat situs web hanya menggunakan html dan css?

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. 

<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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,
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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,
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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

<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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 

<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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

<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></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 me</h2>
                    <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>Achievements</h3>
                    <ul>
                        <li>Bachelor of photogenic posing, 2010</li>
                        <li>Llamaness certification from the Llama Institute, 2014</li>
                        <li>I coded a website, 2017</li>
                    </ul>
                </div>
            </section>
            <section id="contact">
                <div class="section-inner">
                    <h2>Contact me</h2>
                    <p>You can find me on:</p>
                    <ul>
                        <li><a href="https://twitter.com/llama">Twitter</a></li>
                        <li><a href="https://www.reddit.com/user/llama">Reddit</a></li>
                        <li><a href="https://www.instagram.com/llamasporfavor/">Instagram</a></li>
                    </ul>
                    <p>Or, you can <a href="mailto:[email protected]">send me an email</a>.</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

Bisakah saya membuat situs web hanya menggunakan html dan css?

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 

<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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, 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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, 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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, 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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, 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></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 me</h2>
                    <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>Achievements</h3>
                    <ul>
                        <li>Bachelor of photogenic posing, 2010</li>
                        <li>Llamaness certification from the Llama Institute, 2014</li>
                        <li>I coded a website, 2017</li>
                    </ul>
                </div>
            </section>
            <section id="contact">
                <div class="section-inner">
                    <h2>Contact me</h2>
                    <p>You can find me on:</p>
                    <ul>
                        <li><a href="https://twitter.com/llama">Twitter</a></li>
                        <li><a href="https://www.reddit.com/user/llama">Reddit</a></li>
                        <li><a href="https://www.instagram.com/llamasporfavor/">Instagram</a></li>
                    </ul>
                    <p>Or, you can <a href="mailto:[email protected]">send me an email</a>.</p>
                </div>
            </section>
        </main>
        <footer>
            © Copyright Boberick The Llama, 2017
        </footer>
    </body>
</html>
0, dan 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></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 me</h2>
                    <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>Achievements</h3>
                    <ul>
                        <li>Bachelor of photogenic posing, 2010</li>
                        <li>Llamaness certification from the Llama Institute, 2014</li>
                        <li>I coded a website, 2017</li>
                    </ul>
                </div>
            </section>
            <section id="contact">
                <div class="section-inner">
                    <h2>Contact me</h2>
                    <p>You can find me on:</p>
                    <ul>
                        <li><a href="https://twitter.com/llama">Twitter</a></li>
                        <li><a href="https://www.reddit.com/user/llama">Reddit</a></li>
                        <li><a href="https://www.instagram.com/llamasporfavor/">Instagram</a></li>
                    </ul>
                    <p>Or, you can <a href="mailto:[email protected]">send me an email</a>.</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 

<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></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 me</h2>
                    <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>Achievements</h3>
                    <ul>
                        <li>Bachelor of photogenic posing, 2010</li>
                        <li>Llamaness certification from the Llama Institute, 2014</li>
                        <li>I coded a website, 2017</li>
                    </ul>
                </div>
            </section>
            <section id="contact">
                <div class="section-inner">
                    <h2>Contact me</h2>
                    <p>You can find me on:</p>
                    <ul>
                        <li><a href="https://twitter.com/llama">Twitter</a></li>
                        <li><a href="https://www.reddit.com/user/llama">Reddit</a></li>
                        <li><a href="https://www.instagram.com/llamasporfavor/">Instagram</a></li>
                    </ul>
                    <p>Or, you can <a href="mailto:[email protected]">send me an email</a>.</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 

<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></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 me</h2>
                    <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>Achievements</h3>
                    <ul>
                        <li>Bachelor of photogenic posing, 2010</li>
                        <li>Llamaness certification from the Llama Institute, 2014</li>
                        <li>I coded a website, 2017</li>
                    </ul>
                </div>
            </section>
            <section id="contact">
                <div class="section-inner">
                    <h2>Contact me</h2>
                    <p>You can find me on:</p>
                    <ul>
                        <li><a href="https://twitter.com/llama">Twitter</a></li>
                        <li><a href="https://www.reddit.com/user/llama">Reddit</a></li>
                        <li><a href="https://www.instagram.com/llamasporfavor/">Instagram</a></li>
                    </ul>
                    <p>Or, you can <a href="mailto:[email protected]">send me an email</a>.</p>
                </div>
            </section>
        </main>
        <footer>
            © Copyright Boberick The Llama, 2017
        </footer>
    </body>
</html>
4, serta menambahkan 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></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 me</h2>
                    <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>Achievements</h3>
                    <ul>
                        <li>Bachelor of photogenic posing, 2010</li>
                        <li>Llamaness certification from the Llama Institute, 2014</li>
                        <li>I coded a website, 2017</li>
                    </ul>
                </div>
            </section>
            <section id="contact">
                <div class="section-inner">
                    <h2>Contact me</h2>
                    <p>You can find me on:</p>
                    <ul>
                        <li><a href="https://twitter.com/llama">Twitter</a></li>
                        <li><a href="https://www.reddit.com/user/llama">Reddit</a></li>
                        <li><a href="https://www.instagram.com/llamasporfavor/">Instagram</a></li>
                    </ul>
                    <p>Or, you can <a href="mailto:[email protected]">send me an email</a>.</p>
                </div>
            </section>
        </main>
        <footer>
            © Copyright Boberick The Llama, 2017
        </footer>
    </body>
</html>
5 ke setiap bagian satu per satu

Alasan 

<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></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 me</h2>
                    <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>Achievements</h3>
                    <ul>
                        <li>Bachelor of photogenic posing, 2010</li>
                        <li>Llamaness certification from the Llama Institute, 2014</li>
                        <li>I coded a website, 2017</li>
                    </ul>
                </div>
            </section>
            <section id="contact">
                <div class="section-inner">
                    <h2>Contact me</h2>
                    <p>You can find me on:</p>
                    <ul>
                        <li><a href="https://twitter.com/llama">Twitter</a></li>
                        <li><a href="https://www.reddit.com/user/llama">Reddit</a></li>
                        <li><a href="https://www.instagram.com/llamasporfavor/">Instagram</a></li>
                    </ul>
                    <p>Or, you can <a href="mailto:[email protected]">send me an email</a>.</p>
                </div>
            </section>
        </main>
        <footer>
            © Copyright Boberick The Llama, 2017
        </footer>
    </body>
</html>
6 sebelum 
<!DOCTYPE html>
<html>
    <head>
        <title>Boberick the llama</title>
        <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">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></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 me</h2>
                    <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>Achievements</h3>
                    <ul>
                        <li>Bachelor of photogenic posing, 2010</li>
                        <li>Llamaness certification from the Llama Institute, 2014</li>
                        <li>I coded a website, 2017</li>
                    </ul>
                </div>
            </section>
            <section id="contact">
                <div class="section-inner">
                    <h2>Contact me</h2>
                    <p>You can find me on:</p>
                    <ul>
                        <li><a href="https://twitter.com/llama">Twitter</a></li>
                        <li><a href="https://www.reddit.com/user/llama">Reddit</a></li>
                        <li><a href="https://www.instagram.com/llamasporfavor/">Instagram</a></li>
                    </ul>
                    <p>Or, you can <a href="mailto:[email protected]">send me an email</a>.</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

Bisakah saya membuat situs web hanya menggunakan html dan css?

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

  1. Cara membuat gambar pahlawan satu halaman penuh
  2. 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

Bisakah saya membuat situs web hanya dengan HTML?

Ya, Anda dapat membuat situs web hanya dengan pengetahuan HTML . Situs web khusus HTML biasanya memiliki elemen berikut. teks (judul dan paragraf) gambar.

Bagaimana cara membuat halaman web menggunakan 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 saya bisa menghasilkan uang hanya dengan HTML dan CSS?

Bagaimana HTML & CSS Cukup Bagi ANDA Untuk Mulai Menghasilkan Uang di Tahun 2022 .
Buat Situs Web Untuk Bisnis Lokal. .
Pekerja lepas. .
Buat & Jual Templat Situs Web. .
Blogging & Penulisan Teknis. .
Magang & Peran Junior Web Dev. .
Youtube. .
Situs Web Portofolio. .
Melatih

Apakah perlu mengetahui HTML CSS atau JavaScript untuk membuat situs web?

Untuk calon pengembang web, masuk akal untuk memahami dasar-dasar HTML (dan CSS) sebelum mempelajari bahasa pemrograman tujuan umum seperti Python atau JavaScript. Meskipun bahasa pemrograman berguna untuk membuat aplikasi web yang dinamis dan interaktif, itu bukan persyaratan untuk situs web dasar .

kode html

Pos Terkait

Cara menggunakan localhost wordpress
Cara menggunakan localhost wordpress

Apakah bisa excel di hp?
Apakah bisa excel di hp?

Cara menggunakan javascript local file
Cara menggunakan javascript local file

Cara menggunakan PD.MELT pada Python
Cara menggunakan PD.MELT pada Python

Periksa apakah string adalah javascript camelcase
Periksa apakah string adalah javascript camelcase

Jalankan skrip python di google drive
Jalankan skrip python di google drive

Cara menggunakan JSONLIST di JavaScript
Cara menggunakan JSONLIST di JavaScript

Konversi gambar ke grafik python
Konversi gambar ke grafik python

Bagaimana cara print excel full page?
Bagaimana cara print excel full page?

Cara menggunakan javascript insertrule css
Cara menggunakan javascript insertrule css

Periklanan

BERITA TERKINI

Apakah fungsi data cleaning dalam python?
1 years ago . by UndiscoveredDucking
Cara cek kartu kredit bca aktif atau tidak
1 years ago . by MythicalCoverage
Cara menggunakan setcookie not working javascript
1 years ago . by DrabServitude
Cara menggunakan fungsi struktur html
1 years ago . by ParticipatingAdvert
Which MySQL edition used for physical backup?
1 years ago . by HeedlessLikeness
Php imagemagick pdf ke png kualitas tinggi
1 years ago . by QuietRegularity
Cara menggunakan python raise typeerror
1 years ago . by DifficultImmunization
Cara mengisi game di ps 3
1 years ago . by VeterinaryReviewer
Bagaimana Anda memeriksa apakah saya sudah menginstal mysql?
1 years ago . by PriestlyDonkey
Mengapa gambar tidak ditampilkan di html?
1 years ago . by High-qualityWidget

Toplist Popular

#1
Top 7 os elementos da paisagem descritos no texto correspondem a aspectos biogeográficos presentes na 2022
1 years ago
#2
Top 6 a energia nuclear é uma alternativa aos combustíveis fósseis que, se não gerenciada de forma correta 2022
1 years ago
#3
Top 6 a persistência das reivindicações relativas à aplicação desse preceito normativo tem em vista 2022
1 years ago
#4
Top 7 wie viele zigaretten sind ein shisha kopf 2022
2 years ago
#5
Top 7 wie viel kostet eine badewanne voll wasser 2022
2 years ago
#6
Top 8 golf 7 standheizung fernbedienung anlernen 2022
2 years ago
#7
Top 8 sky receiver aufnehmen nicht möglich ohne abo 2022
2 years ago
#8
Top 5 einhell kgsz 300 ug sägeblatt wechseln 2022
2 years ago
#9
Top 7 renault clio 3 abblendlicht wechseln anleitung 2022
2 years ago
#10
Top 8 outlook diese datendatei ist mit einem e-mail-konto verbunden 2022
2 years ago

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeentrdeptjp
Copyright © 2024 membukakan Inc.