Review HTML,CSS dan C#

sumber : https://glints.com/ dan https://yukcoding.id/

HTML

HTML : hyperText Markup Language

HTML (HyperText Markup Language) adalah blok bangunan paling dasar dari Web. Ini mendefinisikan arti dan struktur konten web. Teknologi lain selain HTML umumnya digunakan untuk menggambarkan tampilan/presentasi halaman web (CSS) atau fungsionalitas/perilaku (JavaScript).

"Hypertext" mengacu pada tautan yang menghubungkan halaman web satu sama lain, baik dalam satu situs web atau antar situs web. Tautan adalah aspek mendasar dari Web. Dengan mengunggah konten ke Internet dan menautkannya ke halaman yang dibuat oleh orang lain, Anda menjadi peserta aktif di World Wide Web.

Contents

css
apa itu CSS
A.fungsi
B.konsep layout halaman web
C.jenis-jenis layout halaman WEB
3.static
D.Contoh penulisan script code CSS
1. 2.inline CSS
2. 3.External CSS

Cara kerja HTML

File HTML diakhiri dengan ekstensi .html atau .htm Ekstensi file ini bisa dilihat dengan menggunakan web browser apa pun seperti google chrome,safari atau mozila firefox.browser tersebut membaca file html dan merender kotennya sehingga user internet bisa melihat dokumennya sendiri-sendiri

masing-masing setiap halaman web terdiri atas serangkaian tags (bisa juga di sebut elements )yang tersusun untuk membentuk sebuah halaman website. tag tersebut yang menyusun konten hingga menjadi bagian,paragraf,heading dan block konten

Sebagian besar elemen bahasa markup ini memiliki tag pembuka dan penetup yang menggunakan syntax <tag></tag>.

berikut contoh susunan atau sttruktur HTML:

<div>

  <h1>The Main Heading</h1> 

  <h2>A catchy subheading</h2>

  <p>Paragraph one</p> 

  <img src="/" alt="Image"> 

  <p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>

</div>

Element teratas dan terbawah adalah division ssederhana (<div></div>) yang bisa digunakan untuk markup bagian konten yang lebih besar
Susunan di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2>), paragraf (<p></p>) dan gambar (<img></img>)
paragaraf kedua meliputi sebuah link menggunakan (<a></a>) dengan atribut href yang terdiri atas URL tujuan.
tag gambar memiliki dua atribut. src untuk path gambar dan alt untuk deskirpsi gambar.

Tag Block-Level

tiga tag block-level yang harus dimiliki oleh setial dokumen HTML adalah <html>,<head> dan <body>

1. tag <html></html> adalah elemen level tertinggi yang menyertakan setiap HTMl.

2. tag <head></head> untuk menyimpan informasi meta,seperti judul dan charset halaman

3 tag <body></body> melampirkan semua konten yang muncul pada suatu halaman.

<html>

  <head>

    <!-- META INFORMATION -->  

  </head>

  <body>

    <!-- PAGE CONTENT -->

  </body>

</html>

Heading memiliki 6 heading,jenis heading bervariasi mulai dari <h1></h1> sampai <h6></h6> untuk paragraf dibuka dan ditutup dengan <p></p>
dvision merupakan bagian konten yang lebih besar dan biasanya terdiri atas paragraf,gambar dan element lainnya. untuk membuat markup dengan menggunakan tag <div></div>.
bisa menggunakan tag <ol></ol> untuk list beturutan dan <ul></ul> untuk list yang tidak berturutan. Masing - msaing list item harus dibuka dan ditutup dengan tag <li></li>. sebagai contoh :

<ul>

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>

Apa itu Tag,Element,dan,Atribut

A.apa itu Tag

1.Tag wajib

ada beberapa tag wajib ada di HTML tag ini harus ditulis jika tidak kode HTML akan error

berikut Tag wajib ada di HTML

<!DOCTYPE html> — untuk deklarasi type dokumen;
<html> — tag utama dalam HTML;
<head> — untuk bagian kepala dari dokumen;
<title> — untuk judul web;
<body> — untuk bagian body dari dokumen.

2.gunakan huruf kecil

hindari menggunakan huruf besar dalam menulis tag,sebaiknya menggunakan huruf kecil

huruf kecil lebih gampang diketik,juga akan terlihar lebih bersih dan rapi

khusus tag ' <!DOCTYPE html>.'ditulis huruf besar.sebenarnya bisa juga huruf kecil dan akan valid

3.Pastika menutup Tag dengan benar

tag HTML nantinya akan ditulis bertumpuk-tumpuk,di dalam tag ada tag lagi,sering salah dalam menutup tag yang bertumpuk,akibatnya kode HTML akan tidak valid

B.Apa itu Element

element adalah sebuah komponen yang menyusun dokumen HTML element disebut juga dengan node kerena merupakan salah satu jenis node yang menysusun dokumen HTMl .dalam diagram HTML

sumber : petanikode.com

pada diagram terserut terdapat tiga macam note yaitu : node elemen, node, atribut, dan node teks

elemen dibetuk dengan tag pembuka isi tag dan tag penutup,dan kadang ditambahkan beberapa atribut.

contoh:

sumber : petanikode.com

pada contoh di atas. terdapat satu elemen '<p>' dengan atribut 'align="center"` dan memiliki isi berupa teks yaiut 'Hello World!'.

Elemen tidak slalu berisi teks kadang juga berisi elemen lain biasanya disebut juga dengan nested element atau elemen dalam elemen

contoh dalam bentuk kotak persegi

sumber : petanikode.com

C.Apa ittu Atribut

atribut adalah kata khusus tang berada di dalam tag pembuka atribut disebut sebagai modifier yang akan menentukan perilaku dari elemen

sumber : petanikode.com

atribut dapat di tambahkan pada semua elemen manapun,elemen yang mewajibkan menggunakan atribut seperti elemen '<a>' , '<img>' , '<vidio>' , dll

Jenis- jenis atribut HTMl

tiap tiap elemen memiliki atribut khusus hanya bisa digunakan elemen tersebut,atribut bersifat global bisa ditambahkan pada ssemua elemen

1.Atribut Global

Atribut global adalah atribut bisa ditambahkan ke semua elemen HTML

Nama Atribut	Deskripsi atau fungsi
`accesskey`	Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen
`class`	Menentukan class CSS yang akan digunakan
`contenteditable`	Menentukan isi elemen bisa diedit atau tidak
`data-*`	Digunakan untuk menyimpan data
`dir`	Menentukan arah teks dari elemen (kiri ke kanan atau sebaliknya)
`draggable`	Menentukan apakah elemen bisa di drag atau tidak
`hidden`	untuk menyembunyikan elemen
`id`	Menentukan id unik untuk elemen
`lang`	Menentukan bahasa yang digunakan untuk isi elemen
`spellcheck`	Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak
`style`	Menentukan inline CSS untuk elemen
`tabindex`	Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan)
`title`	Menentukan informasi tambahan tentang elemen
`translate`	Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak

2. Atribut Khusus

atribut hanya dipakai pada elemen tertentu saja

contoh:

Nama atribut	Bisa dipakai di tag
`src`	`<audio>`, `<embed>`, `<iframe>`, `<img>`, dll
`href`	`<a>`, `<link>`
`action`	`<form>`
`autoplay`	`<audio>`, `<video>`

css

apa itu CSS

CSS adalah singkatan dari cascading style sheets yaitu bahasa yang digunakan untuk menentukan tampilan dan format halama.webiste.Dengan CSS bisa mengatur jenis font,warna,tulisa,dan latar belakang halaman

Css di gunakan bersama dengan bahasa markup,seperti HTML dan XML untuk membangun sebuah website yang menarik.

A.fungsi

1.Mempercepat loading halamn web

2.Memudahkan Pengeloaan kode

3.Menawarkan lebih banyak variasi tampilan

4.Membuat website tampil rapi di semua ukuran layar

B.konsep layout halaman web

layout,bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar.Sama seperti tipografi,terdapat sangat banyak elemen-elemen pada layoud

Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:

sumber : bertzzie.com

C.jenis-jenis layout halaman WEB

1.fluid

layout jenis satu ini memiliki kemanpuan untuk bisa mebuat lebar layout sesuai dengan resulosi browser yang digunakan oleh pengguna.kerena lebar layout fluid menggunakan satuan persen,sehingga bisa mengikuti resolusi browser.

2.responsive

ayout ini memiliki kemampuan untuk berganti layout pada resulosi tertentu,yang mana kemampuan tersebut berkat kehadiran sintax media queries di css3

3.static

layout ini bisa diterapkan pada sebuah website biasanya akan memiliki ukuran yang tetap di semua resulosi browser.yang mana layout ini memiliki jenis satuannya pixel (PX)

4.responsive fluid

jenis satu ini merupakan layout gabungan dari respnsive dengan fluid sehingga layar website akan mampu menyusaikan resulosi dan bisa berganti layout pada resulosi tertentu

5.paralax scrolling

layout satu ini menggunakan beberapa layar,dimana setiap layar tersebut memiliki kecepatan perpindahan yang berbeda ketika di scroll

6.horizontal scrolling

layout ini merupakan layout yang memiliki tampilan content web yang di tata ke samping sehingga,pengunjung web yang ingin mencari informasi bisa melihat konten dengan menggunakan scroll horizontal

D.Contoh penulisan script code CSS

contoh penulisan script code css

E.metode stylesheet

Ada tga menulis CSS di HTMl

1.internal CSS –> ditulis di dalam tag ' <style>'

2.Inline CSS –> ditulis di atribut elemen HTML

3.External CSS –> ditulis di file CSS terpisah dengan HTMl

1.Internal CSS

Internal CSS adalah code CSS yang ditulis di dalam tag '<style>'Internal CSS juga dikenal dengan sebutan Embeded CSS

Contoh :

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <!-- penulisan internal css dalam tag head -->
  <style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
    i { 
      font-family: sans;
      color: orange;
    }
  </style>
</head>

<body>
  <!-- penulisan internal css dalam tag body -->
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
  <h2>Ini judul artikel</h2>
  <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

2.inline CSS

Inline CSS adalah code CSS ditulis langsung pada atribut 'style'di elemen HTML

kode CSS langsung tanpa menggunakan kurung kurwal'{......}'kemudian properti tetap di pisah dengan titik koma

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Inline CSS</title>
</head>

<body>

  <h2 style="color:red;font-family:sans">Ini judul artikel</h2>
  <p style="color:maroon">Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

3.External CSS

External CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.external CSS ditulis didalam file khusus yang berekstensi '.css'

contoh :

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

untuk menggunakan CSS ini.kita harus menghubungkan CSS dengan HTML

ada dua cara yang bisa kita lakukan :

1.menggunakan tag '<link>'

2.menggunakan '@import'

Contoh :

cara 1 : menggunakan tag '<link>'

cara 2 : menggunaka '@import'

<style type="text/css">
@import "style-ku.css";
</style>

jika kita menggunakan cara 1 maka kode lengkap HTMLnya akan menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
    <h2>Ini judul artikel</h2>
    <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

F.Macam-Macam property CSS

h1 {
    font-weight: 400;
    text-transform: uppercase;
    font-family: poppins;
    text-decoration: underline;
    color: grey;
}
img {
    background-image: url('https://i.postimg.cc/YS2nRBLX/BIG-BLUR-DAY-3.png');
    width: 500px;
    border-radius: 15px;
    border: 5px solid;
}
/*Contoh Properti Pada tag h1 dan img*/

C#

Apa itu C#

C# atau C-sharp adalah bahasa pemograman berorientasi objek yang disediakan oleh mocrosof yang berjalan di .Net Framework

1.Struktur Dasar program C#

1. Bagian deklarasi pustaka

2. Bagian class

3. Bagian Fungsi dan Methis

Contoh :

// 1. Deklarasi pustaka
using System;

// 2. Bagian Class
class ProgramHello
{
    // 3. Bagian Fungsi
	static void Main(String[] args)
	{
		Console.WriteLine("Hello World!");
	}
}

penjelasan

1. Bagian Deklarasi Pustaka

adalah bagian paling atas dari program C# pada bagian dapat menulis pustaka (library) yang dibutuhkan dalam program

pustaka berisi sekumpulan fungsi method,class,objek,konstanta,dan variable yang bisa digunakan ulang di dalam program

contoh menggunakan pustakan 'system'

using System;

pustaka ini dibutuhkan untuk menggunakan class 'console' dan method 'WriteLine()'

2.bagian class

bahasa pemograman yang menggunakan paradigma OOP ( Object Oriented Programming) atau pemograman berorientasikan objek

setiap membuat pogram C# harus membungkus fungsi dan variable di dalam 'class'

"class adalah sebuah rangcangan atau blue frint dari objek"

contoh :

using System;

class ProgramHello
{
	static void Main(String[] args)
	{
		Console.WriteLine("Hello World!");
	}
}

berarti nama program di atas adalah 'ProgramHello'

3. Bagian Fungsi

pada bagian ini bisa menuliskan fungsi - fungsi dari program.

Fungsi yang harus ada di dalam setiap program adalah fungsi 'main()'

kalu tidak ada fungsi ini program tidak akan bisa dijalankan. kerna fungsi 'main()' merupakan fungsi utama yang akan dieksekusi pertama kali.

using System;

class ProgramHello
{
	static void Main(String[] args)
	{
        // kode program di tulis di sini
		Console.WriteLine("Hello World!");
	}
}

2. penulisan statement dan ekspresi

penulisan statement dan ekspresi dalam C# harus diakhiri dengan titik koma (';')

kalau tidak ada maka nanti akan error

Contoh :

using System;

class ProgramHello
{
	static void Main(String[] args)
	{
        // stetmen dan ekspresi bisa ditulis di sini
		Console.WriteLine("Hello World!");
		Console.WriteLine("Hello Indonesia!");
		Console.WriteLine("Hello Lombok!");
		Console.WriteLine("Saya balajar C#!");
	}
}

3 Penulisan Blok kode

blok kode didalam C# dibungkus menggunakan kurung kueawal '{.....}'.

Contoh :

if(password == "petanikode")
{
    // ini blok kode IF
    Console.WriteLine("Password Benar!");
    Console.WriteLine("Selamat Datang");
}

Biasanya blok kode digunakan untuk membungkus lebih dari sati statement. jika statement hanya ada satu baris maka tidah usah bungkus dengan tanda kurawal.

Contoh :

if(password == "petanikode") 
    Console.WriteLine("Selamat datang");

4. Penulisan Komentar

adalah teks yang tidak akan dieksekusi Biasanya digunakan untuk menuliskan keterangan dan menon -aktifitas sebuah kode

Komentar dalam C# ditulis dengan garis miring ganda dan garis miring bintang.

Contohnya :

// ini komentar

// ini juga komentar

/*
    Komentar yang lebih dari
    satu baris, biasnaya
    ditulis menggunakan garis miring
    dan bintang seperti ini
*/

5 Gaya case yang digunakan C#

Bahasa pemograman C# menggunakan pascal case dan camel case.

untuk penulisan nama Class dan Fungsi atau method. selalu diawali dengan huruf kapital

Contoh :

// penulisan nama class
class ProgramCoba
{
    // penulisan nama fungsi atau method
    void NamaFungsi()
    {
        Console.WriteLine("Lakukan sesuatu");
    }
}

Apabila nama fungsi dan class teridri dari dua suku kata maka ditulis bergabung seperti di atas

7. Reserved Keywords

Reserved Keywords adalah kata kunci yang tidak boleh digunakan sebagai nama variabel

Pada C# terdapat beberapa Reserved Keywords

abstract 	as 	base 	bool
break 	byte 	case 	catch
char 	checked 	class 	const
continue 	decimal 	default 	delegate
do 	double 	else 	enum
event 	explicit 	extern 	false
finally 	fixed 	float 	for
foreach 	goto 	if 	implicit
in 	int 	interface 	internal
is 	lock 	long 	namespace
new 	null 	object 	operator
out 	override 	params 	private
protected 	public 	readonly 	ref
return 	sbyte 	sealed 	short
sizeof 	stackalloc 	static 	string
struct 	switch 	this 	throw
true 	try 	typeof 	uint
ulong 	unchecked 	unsafe 	ushort
using 	using static 	virtual 	void
volatile 	while

review HTML,CSS dan C#

css

apa itu CSS

A.fungsi

B.konsep layout halaman web

C.jenis-jenis layout halaman WEB

1.fluid

2.responsive

3.static

4.responsive fluid

5.paralax scrolling

6.horizontal scrolling

D.Contoh penulisan script code CSS

1.Internal CSS

2.inline CSS

3.External CSS

C#

Posting Komentar

Berkolaborasi Dalam Tim Menggunakan GIT

Github dan Gitlab

Tanpa judul

CRUD Laravel 10 CREATE,READ,UPDATE AND DELETE

Syaddad