Home » Programming » CSS » Belajar HTML: Membuat Halaman Web Sederhana Dengan HTML dan CSS
html dasar

Belajar HTML: Membuat Halaman Web Sederhana Dengan HTML dan CSS

Belajar html, di jaman modern ini kita semakin sering berinteraksi dengan internet, kita mungkin biasa mengakses sebuah website entah itu toko online, media social facebook, twitter maupun situs pemutar video seperti youtube.




Nah situs-situs web tersebut dibangun dengan struktur html, tidak percaya? Percayalah ketika anda mencoba menyimpan sebuah halaman dari situs tersebut ekstensinya akan menjadi .html atau .htm, setelah tersimpan anda bisa membukanya menggunakan notepad++ atau html teks editor lainnya seperti sublime text yang memiliki banyak fitur seperti emmet sublime text

Ketika halaman yang tersimpan tadi dibuka dengan text editor maka akan anda dapati kode-kode html pada halaman tadi namun tentu saja kode-kodenya sangat kompleks dan cukup rumit karena terdapat pula javascript, css dan lainnya, nah pada kali ini wowotek akan berbagi tutorial cara membuat halaman web dasar dengan html dan css untuk pemula. Namun sebelum itu kita berkenalan dulu dengan html.

Apa itu HTML?

Dikutip dari Wikipedia Hypertext Markup Language (HTML) adalah sebuah bahasa markah atau pemrograman yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

html dasar

Dalam dunia pemrograman sendiri HTML berfungsi sebagai wadah tag-tag atau artibut dari bahasa pemrograman web lain seperti css, javascript dan lain sebagainya, secara sederhana html ibarat kulit luar pembungkus kode-kode kompleks dari sebuah website.

Berkas dibuat menggunakan perangkat lunak pengolah kata kemudian disimpan dalam format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML. Kemudian perintah-perintah itu di tampung dalam file HTML yang digunakan secara luas untuk menampilkan halaman web.

Baca :  Langkah Cara Instalasi Laravel Framework 5 Menggunakan Composer

Disini wowotek akan membagikan contoh halaman web menggunakan html sederhana untuk pemula yang ingin belajar html

Belajar Dasar HTML: Membuat Halaman Web Dengan HTML dan CSS

 <html>

<head>

<title> HTML Dasar </title>

<style type="text/css">

body{

background-color: #4242f4;

color: #ffffff;

margin: 80px 80px 0px 80px;

}

h2{

text-align: center;

}

hr{

background-color: #fff;

height: 2px;

}

a{

text-decoration: none;

padding: 0px 3px 1px 3px;

border-radius: 2px;

color: #000;

}

a:hover{

text-decoration: none;

padding: 0px 3px 1px 3px;

border-radius: 2px;

background: #fff;

}

</style>

</head>

<body>

<h2> Halaman Web Sederhana Dengan HTML </h2>

<hr>

<b>HURUF TEBAL</b>

<p><i>Huruf Miring</i>

<br><u>Garis Bawah</u> </p>

<b>Daftar:</b></br>

<table width="40%">

<tr align="center">

<td>Nomor Daftar</td>

<td>Keterangan</td>

</tr>

<tr>

<td>1. No Satu</td>

<td>Keterangan Pertama</td>

</tr>

<tr>

<td>2. No Dua</td>

<td>Keterangan Kedua</td>

</tr>

<tr>

<td>3. No Tiga</td>

<td>Keterangan Ketiga</td>

</tr>

</table>

<p>Ini bagian Paragraf, baca lebih lanjut <a href="#Linktujuan">klik disini...</a></p>

</body>

</html>

Berikut hasilnya:

halaman web sederhana dengan html dan css

Penjelasan Tag-tag Atribut HTML

<html> … </html>

HTML adalah tag pembuka sekaligus penutup, untuk membuat halaman web html kalian perlu menuliskan tag ini, nantinya didalam html berisi tag-tag lain seperti title dan juga konten.

<head> … </head>

Head adalah tag setelah <html> yang berfungsi sebagai tempat tag deskripsi, penulisan dan pemanggilan css, javascript maupun tag-tag penting lainnya yang berhubungan dengan isi konten.

<title> … </title>

Peletakannya di dalam tag <head> berfungsi untuk memberikan title/keterangan pada tab browser web.

<style type=”text/css”> … </style>

Letaknya di dalam tag <head>, berfungsi sebagai tempat menulis kode-kode tampilan atau desain dari website, selain menggunakan tag <style> anda juga bisa menggunakan <link rel=”stylesheet” type=”text/css” href=”namastyle.css”>, untuk mempelajari lebih lanjut anda bisa baca belajar css dasar

<body> … <body>

Merupakan tag utama yang berisi konten. section ini menjadi tempat semua tag yang berkaitan dengan konten maupun isinya ditulis. Di dalam tag ini adalah apa yang nantinya akan terlihat oleh pengunjung di browser mereka.

Baca :  Membuat Form Login Dan SignUp Dengan CSS3 Keren

<h2> … </h2>

H1 atau biasa di sebut heading tag ini berfungsi untuk membuat heading, biasanya heading ini berfungsi sebagai judul pada dokumen atau judul artikel.

Heading terdiri dari 6 tingkat yaitu h1-h6 berikut ini tingkatannya:

tag heading

<hr>

Garis mendatar, dalam tag html garis datar ditulliskan dengan tag <hr> yang akan menciptakan garis horizontal, digunakan sebagai pemisah antar bagian Judul dengan konten.

<p>

Tag <p> digunakan untuk membuat Paragraf, Setiap ingin membuat paragraf harus dimulai dengan memberi tag <p> dan diakhiri dengan tag </p> untuk menandai akhir paragraf.

<br>

Line Break atau ganti baris, berfungsi agar teks ditampilkan pada baris yang baru atau berganti baris dalam suatu paragraf, maka digunkan tag <br> sebelum memulai teks.

<b> … </b>

Bold untuk membuat teks atau kalimat menjadi tebal

<i> … </i>

Italic untuk membuat teks atau kalimat menjadi miring.

<u> … </u>

Underline untuk membuat teks atau kalimat bergaris bawah.

<table> … </table>

Untuk membuat tabel pada halaman

<tr> … </tr>

letaknya di dalam tag <table> berfungsi untuk membuat baris pada tabel

<td> … </td>

terletak di dalam tag <tr>, berfungsi untuk membuat kolom pada tabel.

<a> … </a>

Hyerlink atau tautan, tag ini berfungsi untuk membuat link ke halaman lain atau membuat link bertautan di html.

Nah itulah sedikit contoh Halaman Web Sederhana Dengan HTML dan CSS dan juga sedikit penjelasannya, semoga bermanfaat bagi kita semuanya.

Wowotek kira cukup sekian, jika terdapat kesalahan dalam penulisan maupun kesalahan penggunaan tata bahasa yang kurang tepat dan kesalahan lainnya mohon di maafkan.

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *