paragraf pertama saya Penjelasan: * Teks antara dan menjelaskan halaman web * Teks antara
dan ditampilkan sebagai sebuah paragraph
Persiapan apa yang butuhkan? * Anda tidak perlu web server * Anda tidak perlu situs web HTML Editing Dalam materi ini menggunakan editor teks biasa (seperti Notepad) untuk mengedit HTML Namun, pengembang web profesional sering lebih memilih editor HTML seperti FrontPage, Dreamweaver dan lain sebagainya. Jangan khawatir jika contoh menggunakan tag Anda belum pelajari. Anda akan belajar tentang HTML dalam bab-bab berikutnya.
Headings HTML Judul HTML didefinisikan dengan tag
. Contoh:
Ini adalah sebuah paragraf
Ini adalah paragraf yang lain
Format HTML Tag HTML menggunakan tag seperti dan untuk memformat output, seperti tebal atau miring teks. Tag HTML ini dinamakan tag format. Lihat bagian bawah halaman ini untuk referensi yang lengkap. Tag <em> <small> <strong> <sub> <sup> <del> <s> <strike> <samp>
Deskripsi Mendefinisikan teks kode komputer Mendefinisikan teks keyboard Mendefinisikan kode komputer sampel
Mendefinisikan teks teletype Mendefinisikan variabel
<pre> <listing> <xmp><br />
<br />
teks terformat Gunakan <pre> sebaliknya Gunakan <pre> sebaliknya Gunakan <pre> sebaliknya<br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 5<br />
<br />
Kutipan, dan Definisi Tag Tag<br />
<br />
Deskripsi<br />
<br />
<abbr rel="nofollow"> <acronym rel="nofollow"><br />
<br />
Mendefinisikan singkatan Mendefinisikan akronim<br />
<br />
<address rel="nofollow"> <bdo> <blockquote> <q> <cite> <dfn><br />
<br />
Mendefinisikan elemen alamat arah teks Mendefinisikan kutipan panjang Mendefinisikan kutipan pendek Mendefinisikan kutipan Mendefinisikan sebuah istilah definisi<br />
<br />
Teks format Contoh ini menunjukkan bagaimana Anda dapat memformat teks dalam dokumen HTML <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html><br />
<br />
HTML Styles HTML Style Attribute Tujuan dari atribut gaya adalah: Untuk menyediakan cara yang umum untuk gaya semua elemen HTML. Styles diperkenalkan dengan HTML 4, sebagai cara yang baru dan lebih suka untuk gaya elemen HTML. Dengan gaya HTML, gaya dapat ditambahkan pada elemen HTML secara langsung dengan menggunakan atribut gaya, atau tidak langsung dalam terpisah style sheet (CSS file). Anda dapat mempelajari segala sesuatu tentang gaya dan CSS pada tutorial CSS kita.<br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 6<br />
<br />
Dalam HTML tutorial kita menggunakan atribut style untuk memperkenalkan Anda ke gaya HTML Contoh Style HTML style = "background-color: yellow" style = "font-size: 10px" style = "font-family: Times" style = "text-align: center" Tag dan Atribut Dalam HTML 4, beberapa tag dan atribut didefinisikan sebagai usang. Berarti bahwa tidak akan didukung dalam versi HTML dan XHTML. Pesannya adalah jelas: Hindari penggunaan tag dan atribut usang. Tag dan atribut ini harus dihindari: Tags <center> <font> and <basefont> <s> and <strike> <u> Attributes align bgcolor color<br />
<br />
Description konten berpusat tengah HTML fonts teks Coret Mendefinisikan teks bergaris Atribut Keterangan penyelarasan teks bgcolor warna latar belakang warna warna teks<br />
<br />
Warna Latar <body style="background-color:yellow"> Atribut gaya mendefinisikan style untuk elemen <body>. <html> <body style="background-color:yellow"> <h2>Look: Colored Background!</h2> </body> </html><br />
<br />
Atribut bgcolor gaya lama <html> <body bgcolor="yellow"> <h2>Look: Colored Background!</h2> <p>For future proof HTML, use HTML styles instead:</p> <p>style="background-color:yellow"</p> </body> </html><br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 7<br />
<br />
Jenis Huruf, Warna dan Ukauran <body style="background-color:yellow"> Atribut gaya mendefinisikan style untuk elemen <p>. <html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:courier new; color:red; font-size:20px;">A paragraph</p> </body> </html> Atribut membuat tag <font> gaya lama <html> <body> <p><font size="2" face="Verdana"> This is a paragraph. </font></p> <p><font size="5" face="Times" color="red"> This is another paragraph. </font></p> </body> </html><br />
<br />
Teks Alignment <h1 style="text-align:center"> Atribut gaya mendefinisikan style untuk elemen <h1>.<br />
<br />
Link HTML Link HTML didefinisikan dengan tag <a>. Contoh: <a href="http://www.ewawan.com" rel="nofollow"> Ini adalah link </ a> Catatan: alamat link disediakan sebagai sebuah atribut.<br />
<br />
Images HTML Gambar HTML didefinisikan dengan tag <img>. Contoh: <img src="ewawan.jpg" width="104" height="142" /><br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 8<br />
<br />
Catatan: Nama dan ukuran gambar disediakan sebagai atribut. Elements HTML Dokumen HTML didefinisikan oleh elemen HTML. Elemen HTML muali dari tag awal sampai akhir tag: TAG AWAL *<br />
<br />
ISI<br />
<br />
<p><br />
<br />
Ini adalah sebuah paragraf </p><br />
<br />
<a href="default.htm" rel="nofollow"> Ini adalah link<br />
<br />
TAG AKHIR * </a><br />
<br />
<br /> * Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup. Sintaks HTML * Sebuah elemen HTML dimulai dengan tag awal / pembuka tag * Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup * Unsur konten adalah segalanya antara awal dan akhir tag * Beberapa elemen HTML memiliki konten kosong * Empty elemen ditutup pada awal tag * Sebagian besar elemen HTML dapat memiliki atribut Contoh Dokumen HTML: <html> <title> Latihan paragraf pertama</title> <body> <p> Ini adalah paragraf pertama </p> </body> </html> *Contoh di atas berisi 3 elemen HTML. Penjelasan : elemen <p>: <p> Ini adalah paragraf pertama </ p> Elemen yang <p> mendefinisikan sebuah paragraf di dokumen HTML Unsur memiliki start tag <p> dan end tag </ p> Konten elemen adalah: Ini adalah ayat pertama . Elemen<body> : <body> <p> Ini adalah paragraf pertama </p> </body><br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 9<br />
<br />
Tabel HTML Tabel didefinisikan dengan tag <table>. Sebuah meja dibagi ke dalam baris (dengan tag <tr>), dan setiap baris data dibagi ke dalam sel (dengan tag <td>). Surat-surat td singkatan dari "data tabel", yang merupakan isi sel data. Sebuah sel data dapat berisi teks, gambar, daftar, paragraf, form, aturan horisontal, meja, dll.<br />
<br />
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Tampilannya dalam browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tabel dan Atribut Jika Anda tidak menentukan atribut border tabel akan ditampilkan tanpa batas. Kadang-kadang hal ini dapat berguna, tetapi sebagian besar waktu, Anda ingin perbatasan untuk menunjukkan. Untuk menampilkan tabel dengan batas-batas, Anda harus menggunakan atribut border: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table><br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 10<br />
<br />
Judul dalam tabel Judul dalam tabel didefinisikan dengan tag <th>. <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table><br />
<br />
Tampilannya dalam browser: Heading<br />
<br />
Another Heading<br />
<br />
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2<br />
<br />
Lists HTML HTML mendukung perintahkan teratur dan daftar. List adalah daftar item. Daftar Item yang ditandai dengan peluru (biasanya lingkaran hitam kecil). Daftar <ul> dimulai dengan tag. Masing item daftar <li> dimulai dengan tag. <ul> <li>Kopi</li> <li>Teh</li> <li>Susu</li> </ul><br />
<br />
Tampilannya dalam browser: Kopi Teh Susu<br />
<br />
Di dalam list item Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll.<br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 11<br />
<br />
List Item Daftar item. Daftar Item yang ditandai dengan angka. Ordered list dimulai dengan tag <ol>. Masing item daftar <li> dimulai dengan<br />
<br />
<ol> <li>Kopi</li> <li>Susu</li> </ol><br />
<br />
Berikut adalah tampilannya dalam browser:<br />
<br />
1. Kopi 2. Susu Di dalam daftar item Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll Daftar Definisi Sebuah daftar definisi bukan daftar item tunggal. Ini adalah daftar item (istilah), dengan deskripsi setiap item (istilah). Sebuah daftar definisi dimulai dengan tag <dl> (daftar definisi).<br />
<br />
Tiap hal diawali dengan sebuah tag <dt> (definisi istilah). Setiap deskripsi dimulai dengan tag <dd> (definisi deskripsi). <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl><br />
<br />
Berikut adalah tampilannya dalam browser:<br />
<br />
Coffee Black hot drink Milk White cold drink<br />
<br />
Di dalam tag <dd> Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll www.ewawan.com<br />
<br />
HTML BASIC - Halaman 12<br />
<br />
HTML Forms dan Input Formulir HTML digunakan untuk memilih berbagai jenis input pengguna. Form Suatu bentuk adalah daerah yang dapat berisi elemen form. Bentuk elemen elemen yang memungkinkan user untuk memasukkan informasi (seperti text field, textarea fields, drop-down, radio button, checkbox, dll) dalam bentuk. Suatu bentuk didefinisikan dengan tag <form>. <form> . input elements . </form> Input Bentuk yang paling umum digunakan <input> tag adalah tag. Jenis input ditentukan dengan atribut jenis. Yang paling umum digunakan masukan jenis dijelaskan di bawah ini. Text Fields Text field yang digunakan ketika Anda menginginkan para pengguna untuk mengetik huruf, angka, dll dalam formulir. <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form><br />
<br />
Tampilannya dalam browser:<br />
<br />
First name: Last name: Perhatikan bahwa bentuk itu sendiri tidak terlihat. Juga mencatat bahwa dalam kebanyakan browser, lebar dari text field adalah 20 karakter secara default.<br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 13<br />
<br />
Radio Buttons Radio Buttons digunakan ketika Anda menginginkan para pengguna untuk memilih salah satu dari sejumlah pilihan. <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form> Tampilannya dalam browser:<br />
<br />
Male Female Catatan bahwa hanya satu pilihan yang dapat dipilih.<br />
<br />
Checkboxes Kotak centang yang digunakan saat Anda ingin pengguna untuk memilih satu atau lebih pilihan dari sejumlah pilihan. <form> Aku punya sepeda: <input type="checkbox" name="vehicle" value=" sepeda " /> <br /> Aku punya mobil: <input type="checkbox" name="vehicle" value="Mobil" /> <br /> Aku punya pesawat terbang: <input type="checkbox" name="vehicle" value="Pesawat Terbang" /> </ form><br />
<br />
Tampilannya dalam browser:<br />
<br />
Aku punya sepeda: Aku punya mobil: Aku punya pesawat terbang:<br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 14<br />
<br />
Form Atribut dan Submit Button Ketika pengguna mengklik pada tombol "Submit", isi formulir dikirim ke server. Bentuk tindakan atribut mendefinisikan nama file untuk mengirim konten ke. File didefinisikan dalam atribut action biasanya melakukan sesuatu dengan input yang diterima. <form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form><br />
<br />
Tampilannya dalam browser:<br />
<br />
Username:<br />
<br />
Submit<br />
<br />
Jika Anda mengetik beberapa karakter dalam kolom teks di atas, dan klik tombol "Submit", browser akan mengirimkan masukan Anda ke halaman yang disebut "html_form_submit.asp". Halaman akan memperlihatkan kepada anda menerima masukan.<br />
<br />
Warna HTML Ditampilkan memadukan warna RED, GREEN, dan BLUE cahaya. Nilai Warna Warna HTML didefinisikan menggunakan hexadecimal (hex) notasi kombinasi Merah, Hijau, dan nilainilai warna Biru (RGB). Nilai terendah yang dapat diberikan kepada salah satu sumber cahaya adalah 0 (hex 00). Nilai tertinggi adalah 255 (hex FF). Nilai hex ditulis sebagai 3 dua digit angka, dimulai dengan tanda #.<br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 15<br />
<br />
Nilai Warna Color<br />
<br />
Color HEX<br />
<br />
Color RGB<br />
<br />
#000000<br />
<br />
rgb(0,0,0)<br />
<br />
#FF0000<br />
<br />
rgb(255,0,0)<br />
<br />
#00FF00<br />
<br />
rgb(0,255,0)<br />
<br />
#0000FF<br />
<br />
rgb(0,0,255)<br />
<br />
#FFFF00<br />
<br />
rgb(255,255,0)<br />
<br />
#00FFFF<br />
<br />
rgb(0,255,255)<br />
<br />
#FF00FF<br />
<br />
rgb(255,0,255)<br />
<br />
#C0C0C0<br />
<br />
rgb(192,192,192)<br />
<br />
#FFFFFF<br />
<br />
rgb(255,255,255)<br />
<br />
16 Juta Warna Berbeda Kombinasi Merah, Hijau dan Biru nilai 0-255 memberikan total lebih dari 16 juta warna yang berbeda untuk bermain dengan (256 x 256 x 256). Monitor modern mampu menampilkan setidaknya 16.384 warna yang berbeda.<br />
<br />
****Selanjutnya Lihat Di Materi Warna-Warna Web****<br />
<br />
www.ewawan.com<br />
<br />
HTML BASIC - Halaman 16<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/html-basic" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "HTML BASIC"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>