HTML Computercode
- <code> Mendefinisikan teks kode komputer
- <kbd> Mendefinisikan teks untuk keyboard
- <samp> Mendefinisikan sampel kode komputer
- <var> Mendefinisikan variabel
- <pre> Mendefinisikan teks terformat
contoh :
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <code> Mendefinisikan teks kode komputer </code> <kbd> Mendefinisikan teks untuk keyboard <kbd> <samp> Mendefinisikan sampel kode komputer <samp> <var> Mendefinisikan variabel <var> <pre> Mendefinisikan teks terformat <pre> <body> </html>
HTML Komentar
Anda dapat menambah komentar atau keterangan jika diperlukan, untuk informasi di sintaks html. HTML komentar ini tidak akan tampil di browser
<!-- Tuliskan komentar disini -->
HTML CSS
Pada pembahasan ini berisi css untuk tipe embedded , tandanya terdapat tag < style > di head, contoh :
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraf</p>
</body>
HTML Link
Link HTML adalah hyperlink. Sebuah hyperlink merupakan elemen, teks, atau gambar yang Anda dapat mengklik, dan melompat ke dokumen lain.
<a href="http:google.com" target="_blank"> KLINK DISINI </a>
href sebagai tempat url dan target = blank , supaya saat diklik tulisan "KLIK DISINI" maka akan membuka tab/halaman baru dibrowser, selain target = _blank adapun yang lainnya yaitu
- _self
- _parent
- _top
HTML Image
Tag untuk menampilkan sebuah gambar baik berupa jpg,png atau lainnya yaitu menggunakan
< img > , tapi img saja belum cukup .. kita dapat menambahkan untuk ukuran tinggi serta lebarnya lalu alternate text sebagai keterangan jika gambar tidak bisa muncul<img src="image.jpg" width="300" height="300" alt="teks alternate" >
HTML Tabel
Untuk tabel tagnya adalah <table> </table>
Dalam tabel terdiri dari baris =tr dan kolom=td, contoh:
<table border="1" style="width:100%"> <tr > <td>Jill> </td> <td>Smith </td> <td>50 </td> </tr> <tr> <td>Eve </td> <td>Jackson </td> <td>94 </td> </tr> </table>
Hasil
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Tabel Heading
<table border="1" style="width:100%"> <tr > <th>First Name> </th> <th>Last Name </th> <th>Point </th> </tr> <tr > <td>Jill> </td> <td>Smith </td> <td>50 </td> </tr> <tr> <td>Eve </td> <td>Jackson </td> <td>94 </td> </tr> </table>
Hasil
| First Name | Last Name | Point |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Table thead tbody
<table border="1" style="width:100%"> <thead> <tr > <th>First Name> </th> <th>Last Name </th> <th>Point </th> </tr> </thead> <tbody> <tr > <td>Jill> </td> <td>Smith </td> <td>50 </td> </tr> <tr> <td>Eve </td> <td>Jackson </td> <td>94 </td> </tr> </tbody> </table>
Hasil
| First Name | Last Name | Point |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Colspan
<table border="1" style="width:100%"> <thead> <tr > <th>First Name> </th> <th>Last Name </th> <th>Point </th> </tr> </thead> <tbody> <tr > <td colspan="3">Hasil colspan, penggabungan 3 kolom menjadi 1 kolom </td> </tr> <tr> <td>Eve </td> <td>Jackson </td> <td>94 </td> </tr> </tbody> </table>
Hasil
| First Name | Last Name | Point |
|---|---|---|
| Hasil colspan, penggabungan 3 kolom menjadi 1 kolom | ||
| Eve | Jackson | 94 |
Rowspan
<table border="1" style="width:100%"> <thead> <tr > <th>First Name> </th> <th>Last Name </th> <th>Point </th> </tr> </thead> <tbody> <tr > <td rowspan="2"> Hasil dari rowspan , penggabungan 2 kolom menjadi 1 baris </td> <td>Smith </td> <td>50 </td> </tr> <tr> <td>Jackson </td> <td>94 </td> </tr> </tbody> </table>
Hasil
| First Name | Last Name | Point |
|---|---|---|
| Hasil dari rowspan , penggabungan 2 kolom menjadi 1 baris | Smith | 50 |
| Jackson | 94 |
Caption
<table border="1" style="width:100%"> <caption>Tampilan caption disini</caption> <thead> <tr > <th>First Name> </th> <th>Last Name </th> <th>Point </th> </tr> </thead> <tbody> <tr > <td>Jill</td> <td>Smith </td> <td>50 </td> </tr> <tr> <td>Eve </td> <td>Jackson </td> <td>94 </td> </tr> </tbody> </table>
Hasil
| First Name | Last Name | Point |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
HTML List
Macam - macam list pada HTML terdiri dari 3 tag antara lain :
- Ordered List
<ol></ol>: list dengan tipe huruf atau angka. tipe pada list ini antara lain : i,a,I,A,1 - Unordered List
<ul></ul>: list dengan tipe simbol, antara lain disc, square, circle - Delete List
<ul></ul>: list tanpa simbol , huruf atau angka
Contoh ordered list type A
<ol type="A"> <li>list 1<li> <li>list 2<li> <li>list 3<li> </ol>
Hasil
- list 1
- list 2
- list 3
Contoh unordered list type disc
<ul type="disc"> <li>list 1<li> <li>list 2<li> <li>list 3<li> </ul>
Hasil
- list 1
- list 2
- list 3
Contoh delete list
<dl> <dd>list 1<dd> <dd>list 2<dd> <dd>list 3<dd> </dl>
Hasil
- list 1
- list 2
- list 3
HTML Block
London
London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta jiwa
Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.
HTML Block Elemen dan Inline Elemen
Kebanyakan elemen HTML didefinisikan sebagai elemen-elemen tingkat blok atau elemen inline.
Elemen tingkat blok biasanya mulai (dan akhir) dengan baris baru, ketika ditampilkan di browser.
Contoh:
< h1 >, < p > , < ul >, < table >
Elemen inline biasanya ditampilkan tanpa jeda baris.
Contoh:
< b >, < td >, < a >, < img >
HTML < div > Elemen
HTML < div > elemen elemen tingkat blok yang dapat digunakan sebagai wadah untuk elemen HTML lainnya.
< div > elemen tidak memiliki arti khusus. Tidak memiliki atribut yang diperlukan, tapi gaya dan kelas yang umum.
Karena merupakan elemen tingkat blok, browser akan menampilkan baris istirahat sebelum dan sesudah itu.
Ketika digunakan bersama-sama dengan CSS, < div > elemen dapat digunakan untuk gaya blok konten.
<div style="background-color:black; color:white; margin:20px; padding:20px;"> <h2>London</h2> <p>London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta jiwa</p> <p>Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.</p> </div>
HTML < span > Elemen
HTML
< span > elemen adalah elemen inline yang dapat digunakan sebagai wadah untuk teks.< span > elemen tidak memiliki arti khusus. Tidak memiliki atribut yang diperlukan, tapi gaya dan kelas yang umum.
Tidak seperti
< div >, yang diformat dengan jeda baris, yang < span > elemen tidak memiliki format otomatis.
Ketika digunakan bersama-sama dengan CSS, yang
< span > elemen dapat digunakan untuk gaya bagian dari teks:<h1>My <span style="color:red">Important</span>Heading</h1>
HTML Classes
Class merupakan salah satu selector CSS. Class juga disimbolkan dengan titik (.) , misalkan di css terdapat .box , maka di HTML dapat dipanggil class="box" .
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta jiwa.</p>
<p>Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.</p>
</div>
</body>
</html>
Hasil
London
London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta jiwa.
Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.
HTML Layout
| header | Mendefinisikan sebuah header untuk dokumen atau bagian section |
| nav | Mendefinisikan sebuah wadah untuk link navigasi |
| section | Mendefinisikan sebuah bagian dalam sebuah dokumen |
| article | Mendefinisikan sebuah artikel mandiri independen |
| aside | Mendefinisikan konten selain dari konten ( seperti sidebar ) |
| footer | Mendefinisikan footer untuk dokumen atau bagian section |
| details | Mendefinisikan rincian tambahan |
| summary | Mendefinisikan judul untuk detail elemen |
Untuk dapat mempraktekkan tag diatas dapat di pelajari pada Bab CSS
HTML Responsive
Responsive disini adalah tampilan website yang menyesuaikan dengan layar monitor, baik itu PC, Tablet maupun SmartPhone. Pada materi ini untuk dapat membuat website bersifat responsif , kita menggunakan framework css bernama Bootstrap.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>NOMOR1 Demo</h1> <p>Resize this responsive page!</p> </div> <div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world</p> </div> </div> </div> </body> </html>
Tidak ada komentar:
Posting Komentar