Assalamualikum warahmatullahi wabarakatuh
Jadi di Blog ini saya akan membahas belajar HTML khususnya untuk pemula. Di sini saya juga masih belajar wkwkwk:v
Persiapan :
Sebelum kita mempelajari HTML kita harus membutuhkan aplikasi pendukung dalam mempelajari HTML
WEB BROWSER adalah perangkat utama yang akan kita gunakan untuk menampilkan halaman web yang pada dasarnya terbuat dari HTML. saya yakin di setiap komputer telah terinstall Web Browser bawaan seperti Internet Explorer( windows), Safari(Mac) dan firefox ( linux ubuntu )
Untuk membuat halaman web kita harus memerlukan sebuat TEXT EDITOR . TEXT EDITOR yang akan kita gunakan adalah TEXT EDITOR ringan namun penuh dengan fitur yang sangat membantu dalam proses coding ( Penulis Code ) HTML.
- NOTEPAD ++
Tersedia untuk windows NOTEPAD ++ memiliki beragam fitur yang sangat mendukung proggamer .
Anda dapat mendownload NOTEPAD ++di
http://notepad-plus-plus.org
 |
| Gambar Notepad++ ( STRUKTUR HTML ) |
2. SUBLIME TEXT
TEXT EDITOR yang terbilang masih baru ,penampilan simple enak di pandang .SUBLIME TEXT adalah aplikasi berbayar tapi anda dapat mendownload versi demonya ( meskipun versi demo tidak ada batasan dalam penggunaanya ). jadi sanss aja hehehe
SUBLIME TEXT tersedia untuk sistem Operasi Windows ,linux, Mac download di alamat berikut
http://www.sublimetext.com/2
 |
| Gambar sublime text 2 |
|
|
|
3. VISUAL STUDIO CODE
Saya sangat menyukai aplikasi ini tampilannya yang sederhana, dan sangat mudah , enak juga kalau ngoding disini
kalian langsung pilih open folder dan buat folder baru misalnya di data D dan buat folder baru belajar HTML
buat saja folder ( contohnya belajar html ) seperti gambar yang ada di samping . habis itu klik select folder
keluar seperti gambar yang ada di samping ini . pilih new file
setelah itu ketik saja indek.html . setalah itu ada bisa membuat web
dengan HTML.
Saya saranin kalau ngoding pakai aplikasi ini . kalian kepo" ini saja cara menggunakan dan kelebihan visual studio code bisa buka di link di bawah ini .
https://webdesign.tutsplus.comid/tutorials/visustudiocodemynew-favorite-code-editor--cms-28012
HTML adalah bahasa dasar untuk menampilkan halaman WEB pada web browser.
suatu dokumen HTML juga mempunyai aturan dalam penulisannya . sebelum mejadi dokumen HTML yang benar maka kodenya menjadi seperti berikut :
1.<!DOCTYPE HTML>
2.<HTML>
3. <head>
4. <title> </title>
5. </head >
6. <body>
7. < h1> ini adalah web pertama saya </h1>
8. < /body>
9.</HTML>
Bingung? sansss saya akan jelaskan wokehh :)
<!DOCTYPE HTML>
Adalah Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan disetiap dokumen HTML yang akan anda buat.
<HTML> … </HTML>
Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.
<head> … <head>
Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.
<title> … </title>
Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.
<body> … </body>
Nah, apa yang ingin anda tampilkan pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari badan dokumen HTML.
Atau bisa di sebut isi WEB
1. HTML Headings
 |
https://www.w3schools.com/html/html_basic.asp
|
2. HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
 |
https://www.w3schools.com/html/html_basic.asp
|
3. HTML Images
HTML images are defined with the
<img> tag.
The source file (
src), alternative text (
alt),
width, and
height are provided as attributes:
https://www.w3schools.com/html/html_basic.asp
Deskripsi Atribut
- alt Menentukan teks alternatif untuk gambar, ketika gambar tidak dapat ditampilkan dinonaktifkan Menentukan bahwa elemen input harus dinonaktifkan
- href Menentukan URL (alamat web) untuk tautan
- id Menentukan id unik untuk suatu elemen
- src Menentukan URL (alamat web) untuk suatu gambar
- style Menentukan gaya CSS sebaris untuk suatu elemen
- title Menentukan informasi tambahan tentang suatu elemen (ditampilkan sebagai tip alat)
- Use the
style attribute for styling HTML elements
- Use
background-color for background color
- Use
color for text colors
- Use
font-family for text fonts
- Use
font-size for text sizes
- Use
text-align for text alignment
HTML Text Formatting
| Tag |
Description |
|---|
| <b> |
Defines bold text |
| <em> |
Defines emphasized text |
| <i> |
Defines italic text |
| <small> |
Defines smaller text |
| <strong> |
Defines important text |
| <sub> |
Defines subscripted text |
| <sup> |
Defines superscripted text |
| <ins> |
Defines inserted text |
| <del> |
Defines deleted text |
| <mark> |
Defines marked/highlighted text |
|
|
|
|
|
|
HTML Quotation and Citation Elements
Deskripsi Tag
<abbr> Menentukan singkatan atau akronim
<address> Menentukan informasi kontak untuk penulis / pemilik dokumen
<bdo> Menentukan arah teks
<blockquote> Menentukan bagian yang dikutip dari sumber lain
<cite> Menentukan judul sebuah karya
<q> Menentukan kutipan inline pendek
HTML Comments
Komentar juga bagus untuk debugging HTML, karena Anda dapat mengomentari baris kode HTML, satu per satu, untuk mencari kesalahan:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
kalian bisa belajar di https://www.w3schools.com/html/tryit.asp?filename=tryhtml_comment_out
Background Color
You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World
</h1>
Hello World
Text Color
You can set the color of text:
Hello World
Example
<h1 style="color:Tomato;">Hello
World</h1>
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px
solid Tomato;">Hello
World</h1>
<h1 style="border:2px
solid DodgerBlue;">Hello
World</h1>
<h1 style="border:2px
solid Violet;">Hello
World</h1>
Color Values
Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:
Sama seperti nama warna "Tomat":
Same as color name "Tomato":
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Same as color name "Tomato", but 50% transparent:
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Example
<h1 style="background-color:rgb(255,
99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9,
100%, 64%);">...</h1>
<h1 style="background-color:rgba(255,
99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9,
100%, 64%, 0.5);">...</h1>
RGB Value
Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:
rgb (merah, hijau, biru)
Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna antara 0 dan 255.
Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0.
Untuk menampilkan warna hitam, semua parameter warna harus diatur ke 0, seperti ini: rgb (0, 0, 0).
Untuk menampilkan warna putih, semua parameter warna harus diatur ke 255, seperti ini: rgb (255, 255, 255).
CSS menjelaskan bagaimana elemen-elemen HTML ditampilkan di layar, kertas, atau di media lain.
CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus.
CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
Inline - dengan menggunakan atribut style dalam elemen HTML
Internal - dengan me
Eksternal - dengan menggunakan file CSS eksternal
nggunakan elemen <style> di bagian <head>
Internal CSS
An internal CSS is defined in the <head> section of an HTML page,
within a <style> element:
External CSS
Lembar gaya eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file!
Untuk menggunakan style sheet eksternal, tambahkan tautan ke dalamnya di bagian <head> dari halaman HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Tables
Tabel HTML didefinisikan dengan tag <table>.
Setiap baris tabel ditentukan dengan tag <tr>. Header tabel didefinisikan dengan tag <th>. Secara default, judul tabel tebal dan terpusat. Data tabel / sel didefinisikan dengan tag <td>.
HTML Lists
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
disc Mengatur penanda item daftar ke butir (default)
circle Mengatur penanda item daftar ke lingkaran
square Mengatur penanda item daftar ke kotak
none Item daftar tidak akan ditandai
 |
https://www.w3schools.com/html/html_basic.asp
|
HTML Description Lists
Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
Tag <dl> mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd> menjelaskan setiap istilah:
Sampai di sini dulu ya gaesssssss:) jika kalian ingin belajar HTML lebih lanjut dan akan mempelajari css,php kalian bisa membuka di W3SCHOOL kalian bisa belajar di situ , well semoga ilmu ini bisa bermanfaat bagi kita semua , maaf kalau ada kesalahan/ membosankan:v
di sini saya juga masih belajar jadi belum PRO" banget wakowakaowakao:V
jika kalian khusus nya orang islam merasa kesulitan dalam belajar / pusing mau meletus wkwkwk :v ( seperti saya :v) ingatlah surat ini allah berfirman
فَإِنَّ مَعَ الْعُسْرِ يُسْرًا O إِنَّ مَعَ الْعُسْرِ يُسْرًا
Fainna ma'a al'usri yusran. Inna ma'a al'usri yusran
Artinya:
Karena sesungguhnya sesudah kesulitan itu ada kemudahan, sesungguhnya
sesudah kesulitan itu ada kemudahan. (Q.S. Al-Insyirah ayat 5-6)
dan kata guru saya pak nafilahhh ( alumni STEMBA:) (apasih thikrit ): reality mu lah wkwkwk )
dan sekarang guru saya di SMKN2 semarang
- kalau mau jadi orang sukses belajar lah yang paling sulit dari pada belajar yang paling mudah karena apa dari hal yang susah itu nantinya kita bisa mudah dari belajar hal yang paling mudah
- karena itu seperti hidup kita kalau mau jadi orang sukses harus usaha keras dulu jadi susah dulu kalau sudah ngerasain susah dan kerja keras insyaallah semua itu pasti berbuah hasil . dan jangan lupa sholat, usaha , berdoa, selalu berfikir positif okayyyyyyyyy:)
waalaikum salam warah matullahi wabarakatuh
- Robbis rohlii shodrii, wa yassirlii amrii, wahlul ‘uqdatam mil lisaani yafqohu qoulii’
[Ya Rabbku, lapangkanlah untukku dadaku, dan mudahkanlah untukku
urusanku, dan lepaskanlah kekakuan dari lidahku, supaya mereka mengerti
perkataanku” (QS. Thoha: 25-28)
Baca Selengkapnya : https://rumaysho.com/1425-doa-nabi-musa-minta-dimudahkan-urusan-dan-ucapan.htmlapabila kalian pusing dan bingung atau engga kuat ( kadang saya juga gitu hehehe ) wkwkkwkwk. ingatkah untuk orang islam khususny
