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

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 )

TEXT EDITOR

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

code.visualstudio.com

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

APA ITU HTML ?

HTML adalah bahasa dasar untuk menampilkan halaman WEB pada web browser.

STRUKTUR file HTML

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

MENGENAL ATRIBUT HTML

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

<p>This is a paragraph.</p>

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

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

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).

Example

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

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

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.html

قَالَ رَبِّ اشْرَحْ لِي صَدْرِي وَيَسِّرْ لِي أَمْرِي وَاحْلُلْ عُقْدَةً مِنْ لِسَانِي يَفْقَهُوا قَوْلِي

Baca Selengkapnya : https://rumaysho.com/1425-doa-nabi-musa-minta-dimudahkan-urusan-dan-ucapan.html

Halaman

Sabtu, 26 Januari 2019

BELAJAR HTML

Assalamualikum warahmatullahi wabarakatuh

Jadi di Blog ini saya akan membahas belajar HTML khususnya untuk pemula. Di sini saya juga masih belajar wkwkwk:v

1. HTML Headings

https://www.w3schools.com/html/html_basic.asp

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

https://www.w3schools.com/html/html_basic.asp

Deskripsi Atribut

HTML Text Formatting

HTML Quotation and Citation Elements

HTML Comments

Example

Background Color

Text Color

Hello World

Example

Border Color

Hello World

Hello World

Hello World

Example

Color Values

Example

RGB Value

Example

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

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>

https://www.w3schools.com/html/html_basic.asp

HTML Description Lists

jika kalian khusus nya orang islam merasa kesulitan dalam belajar / pusing mau meletus wkwkwk :v ( seperti saya :v) ingatlah surat ini allah berfirman

فَإِنَّ مَعَ الْعُسْرِ يُسْرًا O إِنَّ مَعَ الْعُسْرِ يُسْرًا

Tidak ada komentar:

Posting Komentar

HTML paragraphs are defined with the `<p>` tag:

An internal CSS is defined in the `<head>` section of an HTML page, within a `<style>` element:

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>