HTML & CSS | Part 1
Published: 2020-06-26 14:29:00





# Intro HTML dan CSS | the role of web developers

> Tulisan ini diambil dari youtube 
> https://youtu.be/WZN-bxnuF2I

Web Telah ada lebih dari 20 tahun sebagai bagian dari media komunikasi dan komersial. Dari mulai ekspasin awal, kemunduran pada saat krisis moneter, inovasi yang mendorong perkembangan teknologi. web akan selalu tetap ada seiring dengan berkembangnya masyarakat digital. Teknologi digital terus berkembang termasuk juga web, bukan hanya berkembang tetapi web yang pada awalnya hanya ada pada perangkat PC, mulai merambah ke media lain seperti smartphone, tablet, tv dan lain-lain. membuka peluang yang luas bagi mereka yang menguasainya. 

Apapun motovasinya, dalam mempelajari pengembangan web yang selalu muncul adalah "Dari mana saya mulai mempelajarinya ?",  

#### HTML & CSS

Jika membicarakan tentang pengembangan web hal pertama yang tidak bisa kita lewatkan adalah HTML dan jika kita menggunakan HTML maka tidak akan lepas dari CSS. 

Pada seri ini kita akan membahas tentang HTML dan CSS. Kita akan memulainya dari pengenalan HTML lalu kita akan membahas tentang CSS. setelah itu kita akan mencoba membuat design web dengan menggunakan kedua teknologi tersebut.

#### Pembagian tugas pengembangan web

- **Front-End**, Bertanggung jawab untuk mempresentasikan sebuah halaman web
  - Umumnya adalah HTML, CSS dan Javascript, tetapi masih banyak juga yang lainya, misalnya framework front-end Angular, React, dll
- **Back-End**, Bertanggung jawab untuk mengolah data yang diperlukan oleh sebuah halaman web
  - PHP, Python, Ruby, DBMS(MySQL, PostgreSQL, dll), dan masih banyak lagi yang lainya

#### Apa itu HTML

- HTML merupakan singkatan dari **Hyper Text Markup Language** 
- HTML adalah **bahasa markup untuk menampilkan konten web** 
- Konten dari HTML bisa berupa **tulisan, link, suara, gambar ataupun video**
- Untuk berkomunikasi antara web server dengan web browser kita, HTML menggunakan standar **HTTP** yaitu **Hyper Text Transfer Protocol**, dilakukan dengan **HTTP Requests** dan **HTTP Responses**

#### Bagaimana Menulis dokumen HTML

Pada dasarnya HTML adalah sebuat document  dalam bentuk file yang diakhiri (extensions) .html,  document ini berisikan tag-tag html, seperti contoh di bawah ini :

``` html
<tag attribute="value" ... > content </tag>
```

contoh halaman web complite

```html
<!DOCTYPE HTML>
<html lang="id">
<head>
 	<meta charset="utf-8" />
 	<title>Contoh HTML</title>
</head>
 <body>
	hello
</body>
</html>
```

- ```<!DOCTYPE HTML>``` Tag khusus ini digunakan untuk memberi tahu browser bahwa jenis dokumen adalah HTML5. 

- ```<html lang="en"> </html>```  mendeklarasikan  pembuka dan penutup documen html, artinya semua kode diantara kedua tag html ini akan didefenisikan sebagai kode html. lang="en" adalah atribut dari tag html yang mendefenisikan bahwa web ini menggunakan bahasa ingris. Tag <html> kadang  disebut juga sebagai root element

- ```<head> </head>``` : Tag ini menentukan bagian khusus dari halaman web yang disebut head atau header. untuk contoh sekarang head in hanya berisi meta dan title

- ``` <meta charset=“UTF-8”> ``` meta tag digunakan untuk memberikan iniformasi tambahan ke browser, pada contoh ini, kita inign memberi tahu browser bahwa kita ingin menggunakan character UTF-8

- ``` <title> </title>``` digunakan untuk mendeklarasikan title dari halama

- ```<body> </body>```  Kontainer untuk menempatkan konten utama dari halaman wen

- ```<h1> </h1>``` dan ```<p></p>``` ,  h1 artinya heading level , p artinya  paragraf

  

```html
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <!-- myFirst.html -->
    <title>Web Pertama</title>
</head>

<body>
    <h1>web page!</h1>
    <p>	
        ini adaalah halaman web pertama yang saya buat,
        Keren !
    </p>
</body>

</html>
```

> - semua tag html menggunakan huruf kecil kecuali tag ```<!DOCTYPE HTML>``` 
> - dalam satu halaman semua html boleh berulang kecuali tag  ```<html>, <title> dan <body> ```
> - tag html yang berpasangan adalah kontainer, yang dapat berisi tag atau kontainer lainya.