Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS

bySetyo Wibowo ID - 0

 


Pada artikel kali ini, kita akan membuat tampilan layout dalam sebuah website.






Dalam situs, web sering menampilkan konten dalam banyak kolom (seperti majalah atau koran).


Tiap kolomnya biasanya berisi informasi yang berbeda-beda.


Nah, dalam website HTML5 menawarkan elemen semantik baru yang mendefinisikan berbagai bagian halaman web:




  1. <header> – Menentukan header untuk dokumen atau bagian

  2. <nav> – Menentukan wadah untuk tautan navigasi

  3. <section> – Menentukan bagian dalam dokumen

  4. <article> – Menentukan artikel

  5. <aside> – Menentukan konten selain konten (seperti bilah sisi)

  6. <footer> – Menentukan footer untuk dokumen atau bagian

  7. <details> – Menentukan detail tambahan

  8. <summary> – Menentukan heading untuk elemen


BANTUAN CSS


CSS adalah singkatan dari Cascading Style Sheets.


CSS menjelaskan tentang bagaimana elemen-elemen HTML ditampilkan di layar, sheet, atau di media lain.


CSS dapat mengontrol tata letak beberapa halaman web sekaligus.


CSS dapat ditambahkan ke elemen HTML dalam 3 cara, yaitu:




  • Inline – dengan menggunakan atribut style dalam elemen HTML.

  • Internal – dengan menggunakan elemen.

  • Eksternal – dengan menggunakan file CSS eksternal, alias terpisah dari file HTML


Untuk postingan kali ini, kita akan menggunakan yang Inline.


Berikut ini adalah kodenya:













1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115



<!DOCTYPE html>

<html lang="en">

<head>

    <title>Template CSS</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        * {

            box-sizing: border-box;

        }


        body {

            font-family: Arial, Helvetica, sans-serif;

        }


        /* Style the header */

        header {

            background-color: green;

            padding: 30px;

            text-align: center;

            font-size: 35px;

            color: white;

        }


        /* Create two columns/boxes that floats next to each other */

        nav {

            float: left;

            width: 20%;

            height: 300px;

            /* only for demonstration, should be removed */

            background: black;

            padding: 20px;

        }


        /* Style the list inside the menu */

        nav ul {

            list-style-type: none;

            padding: 0;

        }


        nav a

        {

            color: white;

        }


        article {

            float: left;

            padding: 20px;

            width: 80%;

            background-color: #f1f1f1;

            height: 300px;

            /* only for demonstration, should be removed */

        }


        /* Clear floats after the columns */

        section:after {

            content: "";

            display: table;

            clear: both;

        }


        /* Style the footer */

        footer {

            background-color: green;

            padding: 10px;

            text-align: center;

            color: white;

        }


        /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

        @media (max-width: 600px) {


            nav,

            article {

                width: 100%;

                height: auto;

            }

        }

    </style>

</head>


<body>


    <header>

        <h2>Webhozz Training</h2>

    </header>


    <section>

        <nav>

            <ul>

                <li><a href="#">Kelas Website</a></li>

                <li><a href="#">Kelas Android</a></li>

                <li><a href="#">Kelas Digital Marketing</a></li>

            </ul>

        </nav>


        <article>

            <h1>Kelas Website</h1>

            <p>

                Materi yang akan kamu pelajari pada Kursus Webmaster ini adalah Web Design, Web Programming, dan WordPress. Pada Web Design, kamu akan belajar membuat Desain Website dari dasar dengan HTML CSS dan jQuery.

            </p>

            <p>

                Pada Web Programming kamu akan membuat login sistem, insert, update, delete dan view data, serta membuat Administrator Page untuk Websitemu. Serta WordPress dimana kamu akan mempelajari CMS untuk membuat Website yang paling banyak dipakai di dunia.

            </p>

        </article>

    </section>


    <footer>

        <p>©2019 WebHozz | PT WebHozz Media </p>

    </footer>


</body>


</html>




Dan seperti inilah tampilan di browser.





Nah, pada script kode di atas terdapat tag <style></style>.
Di dalamnya lagi ada format penulisan kode css dengan bentuk seperti ini :













1

2

3

4


nama_selector

{

    nama_properti : value;

}




Keterangan:




  • nama_selector => jenis tag HTML seperti body, heading, paragraf, image, dan masih banyak tag HTML lainnya.

  • nama_properti => perintah yang digunakan untuk mengatur tata letak atau tampilan pada tag HTML.

  • value => nilai atau isi dari perintah dari nama_properti yang digunakan.


Untuk format penulisannya bisa dilihat lagi pada tag kumpulan kode secara lengkap di atas tadi.


Demikianlah, artikel kali ini. Semoga bermanfaat ya.

Post a Comment (0)

Lebih baru Lebih lama