Kamis, 07 April 2022

INFORMATIKA MY DREAM HTML.(Salsa Agzania)

1. Apa itu HTML ?

HTML (hypertext Markup language) Adalah bahasa marka standar dokumen yang dirancang untuk ditampilkan di pramban internet. 

HTML sering di sebut atau di katakan bahasa PEMROGRAMAN. Kode HTML tersebut memastikan format text dan gambar. Tanpa HTML, browser tidak tahu bagaimana menampilkan sebuah text sebagai elemen. 


Pengertian HTML Menurut Para Ahli dan Pakar

- Menurut Nugroho (2006c:48) ”HTML adalah bahasa pemfomatan teks untuk dokumen-dokumen pada jaringan komputer yang sering disebut sebagai world wide web”.
menurut Arief (2011:23) “HTML merupakan salah satu format yang digunakan dalam pembuatan dokumen atau aplikasi yang berjalan di halaman web”.

- Menurut Suyanto (2007:83) ”HTML itu adalah bahasa yang digunakan untuk menulis halaman web, biasanya menggunakan extensi .htm, .html atau .shtml”.

HTML berawal dari bahasa SGML (Standard Generalized Markup Language) yang penulisannya disederhanakan. HTML dapat dibaca oleh berbagai macam flatform. HTML juga merupakan bahsa pemrograman yang fleksible dan dapat digabungkan dengan bahasa pemrograman lain seperti PHP, ASP, JSP, JavaScript.

2. Asal Usul atau Sejarah HTML

Sejarah HTML pertama kali dibuat oleh Tim Berners-Lee yang merupakan fisikawan di lembaga penelitian CERN, Swiss. Berners-Lee mempunyai ide atau pemikiran mengenai sistem hypertext berbasis internet. Sekitar tahun 1991, Tim merilis versi HTML pertama yang di dalamnya terdalam sekitar 18 tag.

Selanjutnya, HTML juga mengalami tahap perbaikan (maintain) dan dikembangkan oleh World Wide Web Consortium (W3C). Pada tahun 2014, merupakan waktu dimana HTML mengalami upgrade yang cukup signifikan dan terdapat fitur semantic untuk memudahkan pengembang website dalam menyusun kode dan memberitahukan makna dari konten tersebut, sebagai contoh <article>, <footer>, dan <header>.


3. Kerangka Inti dan Cara Kerja HTML

Berikut ini merupakan beberapa macam kerangka inti yang membentuk struktur bahasa markup mulai tag, elemen, dan atribut.

  • Tag, merupakan perintah atau awalan instruksi yang nantinya akan dibaca pada web browser. Misalnya adalah penggunaan tag <strong>, yang berfungsi untuk memberikan ketebalan pada teks paragraf.
  • Element, merupakan proses keseluruhan kode yang dimulai dari tag pembuka (< >) dan diakhiri dengan tag penutup (</>), sebagai contoh element <p>Ini adalah website saya</p>.
  • Attribute, merupakan informasi atau perintah tambahan yang dimasukkan ke dalam sebuah elemen. Misalnya saja <img class=”gambar” src=”komputer.jpg” alt=”komputer1” />, sehingga atributnya adalah class, src dan alt image.

selanjutnya kita akan mengenal kerangka intinya.

  •  <!DOCTYPE html>

Berfungsi untuk mendeklarasikan kepada komputer bahwa anda menuliskan sebuah perintah di dalam kode HTML.

  • <html></html>

Berfungsi untuk tag yang menandakan proses mulai menuliskan kode program pada dokumen HTML.

  • <head></head>

Tag ini digunakan untuk menambahkan metadata ke dalam dokumen html yang berisi judul, deskripsi, library dan lain sebagainya.

  • <body></body>

Dan yang terakhir, tag body digunakan sebagai tempat untuk menuliskan setiap elemen atau lebih tepatnya disebut juga dengan konten pada HTML itu sendiri

Kesimpulan
  • HTML adalah bahasa markup yang membentuk struktur halaman website agar dapat diproses dan dikenali oleh web browser. 
  • Jenis tag terbagi menjadi dua, yaitu inline tags dan block level dengan kerangka inti yang meliputi struktur elemen head, body, dan footer.
  • Dalam penerapannya, bahasa markup ini termasuk ke dalam komponen penting penyusun sisi front-end atau klien untuk membuat halaman website semaksimal mungkin.

4.  Fungsi HTML 

Secara umum, digunakan untuk membuat dokumen electronic (disebut halaman) yang ditampilkan di Word Wide Web (www) . Setiap halaman Website yang kamu liat di internet di tulis menggunakan satu versi kode HTML atau yang lain. 

  • - Fungsi utama HTML, untuk membuat suatu halaman website yang bisa dibaca dan dipahami dengan lebih mudah.
  • - Menandai teks pada suatu laman.
  • - Sebagai dasar website. 
  • - Menampilkan tabel, gambar, video dan lainnya. 
  • - Menandai elemen dan membuat online form.


5. Kode HTML 

(<>) berarti memasukan judul 

<meta name="description" content=masukan deskripsi "> berarti suatu konten website

<h1></h1> berarti Heading tag merupakan judul 

<img alt="text"> untuk membuat image Alt text

<b>bold text</b> untuk memberikan efek tebal 

<i>italic text</i> berfungsi untuk membuat text miring 


6. Kode warna HTML 

- Maroon #800000 rgb(128, 0, 0)

- Lime #00FF00 rgb(0, 255, 0)

- Salmon #FA8072 rgb(250, 128, 114)

- Navy #000080 rgb(0, 0, 128)

- Purple #800080 rgb(128, 0, 128)

Untuk menginginkan lebih banyak warna lagi kamu dapat mencari https://htmlcolorcodes.com/


7. Cara menggunakan kode warna HTML

Warna dalam HTML harus didefinisikan sebagai kode HEX, yang merupakan kode enam digit yang mewakili jumlah warna merah, hijau, dan biru (RGB), misal:

<font color = “green”> text </font>

Sejumlah browser baru memungkinkan kamu untuk memberi nama warna, seperti yang dicontohkan di atas, tetapi opsi yang kamu punya lebih terbatas.


8. Cara membuat font size 

<font size="1">ini adalah ukuran Font 1</font><br>

<font size="2">ini adalah ukuran Font 2</font><br>

<font size="3">ini adalah ukuran Font 3</font><br>

<font size="4">ini adalah ukuran Font 4</font><br>

<font size="5">ini adalah ukuran Font 5</font><br>

<font size="6">ini adalah ukuran Font 6</font><br>

<font size="7">ini adalah ukuran Font 7</font><br>


9. Cara Buat Halaman Wibesite sederhana 

- Windows – Buka menu “Start” Gambar berjudul Windowsstart.png, tikkan notepad (atau notepad++), kemudian klik “Notepad” atau "Notepad++ or sublime" di bagian atas jendela “Start”.


- Lalu buat seperti dibawah ini 



10. Bagaimana Cara kerja HTML?

Pertama, pilih Start dan cari NotePad lalu buat kode kode HTML Seperti berikut ini 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
  <title>Biodata Diri</title>
</head>
<body>
  <main>
    <h1>Salsa Agzania</h1>
    <h2>Manajemen Informatika</h2>
    <p>STIM Sukma Medan, Jln. Sakti Lubis</p>
    <img src="logo_stimsukma.png" alt="Image stimsukma">
    <p>Paragraph two with a <a href="https://https://stimsukmamedan.ac.id/">klik disini</a></p>
  </main>
</body>
</html>

lalu dokumen HTML simpan, menyimpannya dengan format .html atau .htm. 

Dokumen HTML yang dibuat bisa saja lebih dari satu. Sebab dalam sebuah website, biasanya terdiri dari banyak halaman. Misalnya aja, halaman utama, kontak, blog, dan lainnya. 

Nah, masing-masing dokumen, berisi komponen HTML yang akan menyusun bagian heading, paragraf, isi konten, dan lainnya. 

Setelah itu simpan,  file ini dapat dibuka dengan menggunakan web browser seperti Google Chrome, Safari, atau Mozilla Firefox.

Kemudian, untuk dapat diakses oleh banyak orang, Anda perlu mengonlinekannya terlebih dulu. Anda perlu menyewa layanan web hosting dan mengupload file website Anda di sana.

Jika sudah, selanjutnya browser akan membaca  dan me-render file HTML menjadi tampilan halaman website. Sehingga ketika orang mengakses website, mereka dapat mudah membaca informasi yang ditampilkan.


11. Atribut 

 misalnya, <img src=”gambar.jpg” alt “Bunga Matahari.”>.

Dari contoh di atas, kamu perlu mengetahui juga kalau jumlah atribut dalam sebuah tag bisa lebih dari satu.  Berikut ini jenis atribut khusus beberapa tag:

Atribut Dapat digunakan pada Tag
src <img>, <embed>, <audio>, <iframe>
href<a>, <link> 
action<form>
autoplay<audio>, <video>


sekian.


PERPUSTAKAAN STIM SUKMA MEDAN 


Ini Adalah Perpustakaan Stim Sukma 

PENJELASAN 

MENAMBAHKAN GAMBAR PADA HTML

Sebuah web bakal membutuhkan yang namanya gambar untuk menarik atau mempercantik sebuat web atau juga untuk lebih memperjelas suatu pengertian dengan ditambahkannya gambar. menuliskan kode gambar pada HTML yaitu

Tag HTML <img> digunakan untuk menyematkan gambar di halaman web.

Gambar secara teknis tidak dimasukkan ke dalam halaman web; gambar ditautkan ke halaman web. Tag <img> membuat ruang penyimpanan untuk gambar yang direferensikan.

Tag <img> kosong, hanya berisi atribut, dan tidak memiliki tag penutup.

 

Example

<img src="salsa.jpg" alt="Girl in a hoodie">


MEMBUAT HTML DISEBUAH NOTEPAD

Langkah awal kita membuat judul dari web tersebut dengan HTML:

Example

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Untuk membuat suatu situs web yang berupa halaman kita perlu membuat seperti gambar untuk halaman depan agar situs tersebut terlihat lebih menarik. dengan ukuran height
300 width 1500. 

Example

<img src="img_chania.jpg" alt="Flowers in Chania">

Setelah membuat gambar halaman depan/atas kita bisa memasukan pengertian atau tujuan dari situs web tersebut contoh kita membuat sebuat perpustakaan buku, lalu kita masukkan pengertian perpustakaan dan yang terkaitan dari perpustakaan tersebut. Untuk membuat suatu paragraf kita bisa menggunakan HTML Paragraf:

Example

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

Jika sudah melakukan tahap berikut kita bisa melajutkan untuk menjadikan situs tersebut lebih menarik seperti membuat sebuah halaman yang berisi perpustakaan dengan cara menambahkan gambar buku buku dan nama buku tersebut. agar lebih rapih susanan buku dan nama nama buku tersebut kita bisa menggunakan HTML Table atau bisa lebih lanjut di  W3Schools

Example

A simple HTML table:

<table>
  <tr>
    <th>img src="buku stifin.jpg"width="200"></th>
    <th>img src="buku informatika.jpg"width="200"></th> 
    <th>img src="buku pemasaran.jpg"width="200"></th>
  </tr>
  <tr>
    <td>BUKU STIFIN</td>
    <td>BUKU TEKNIK INFORMATIKA</td> 
    <td>BUKU PEMASARAN</td>
  </tr>
  <tr>
    
  </tr>
</table>


















Tidak ada komentar:

Posting Komentar

MEMBUAT CRUD DENGAN PHP DAN MySQL - Menampilkan Data

 Assalamualaikum wr.wb  Hallo temen-temen, disini saya akan menjelaskan dan memberitahu bagaimana caranya menampilkan atau membuat CRUD deng...