Pengenalan HTML
• HTML adalah kependekan dari Hyper Text Markup Language. • Yang artinya Bahasa atau tata cara penulisan yang digunakan dalam membuat dokumen web. • HTML secara formal diumumkan tahun 1866 sebagai RFC(Request For Comment) dokumen yang dikirim oleh lembaga internet yang berisi informasi atau usulan yang berhubungan dengan standar internet.
Dokumen HTML adalah sebuah dokumen teks murni yang dapat dibuat dengan text editor web seperti : • Frontpage, • Dreamweaver, • Notepad,
• Wordpad, • Kwrite, • Microsoft Word
Browser Web adalah program yang digunakan untuk menampilkan informasi dari suatu halaman web yang tersimpan dalam komputer, seperti : • Internet Explorer • Mozilla • Opera
• Netscape Navigator • dll…..
Penamaan dokumen html • File disimpan secara default atau secara otomatis akan diberikan sebuah extention atau akhiran • Untuk dokumen html disimpan dengan menggunakan extention : .html atau .htm
Struktur Dasar Dokumen HTML
… teks ... … teks …
Section Head
Section Body
Pengertian--Pengertian: Pengertian • Elemen yang telah diapit oleh tanda < > disebut tag. • Tag dasar :dan <body> • Simbol batasan awal dan akhir atau tanda < > disebut delimiter. • Section Head berfungsi untuk menampilkan informasi judul pada jendela browser atau halaman web. • Section Body berfungsi untuk menampilkan isi/informasi pada halaman web. • Properti adalah perintah tambahan yang dimiliki oleh tag<br />
<br />
Tag atau elemen terdiri dari dua macam yaitu : • Container Tag menandai suatu bagian dari dokumen diawal dan diakhir. diakhir. Contohnya: <body>…</body> <p>…</p> • Stand Alone Tag tidak memerlukan tanda awal dan akhir. akhir. Contohnya: <hr> <img src><br />
<br />
Properti-Properti Tag Dasar Properti<body>: • Alink=“ Alink=“warna” à warna link(aktif) • background= background=“ “nama_file/url” à berupa image • bgcolor= bgcolor=“ “warna” àberupa warna • link= link=“ “warna” à warna link(umum) • text= text=“ “nama warna” àwarna text • vlink= vlink=“ “nama warna” à warna link(sudah dikunjungi)<br />
<br />
Tag utama html adalah tag yang digunakan untuk memanipulasi dokumen html, yaitu: 1.Heading Tag heading adalah tag yang digunakan untuk membuat judul dari isi sebuah dokumen html. Tag heading memiliki 6 buah bilangan terdiri dari 1, 2, 3, 4, 5, dan 6. Masing2 bilangan berfungsi untuk mewakili ukuran terbesar(H1) dan terkecil(h6). Sintaksnya: <hn[properti]>……………..</Hn> ket: n adalah bilangan yang terdiri dari 1 sampai dengan 6. properti adalah kemampuan tambahan yang dimiliki tag heading. Properti à align adalah pengaturan letak heading<br />
<br />
2. Paragraf Sintaks: <p[properti]>…………….</p> ket: propertià align adalah pengaturan letak paragraf(center, left, right, dan justify). 3. Font Tag yang digunakan untuk mengatur bentuk dan tampilan suatu huruf dalam dokumen.Sintaksnya: <font[properti]>…………….</font> properti à face adalah bentuk tulisan dan nama huruf size adalah ukuran huruf color adalah warna huruf<br />
<br />
4. Break line Tag yang digunakan untuk memotong kalimat didalam dokumen html. Sintaksnya: ……kalimat……<br>……….kalimat………….<br> 5. Horizontal line Tag yang digunakan untuk pemisah/garis antar paragraf dalam dokumen html. Sintaksnya: <hr[properti]> ket: properti à align adalah letak garis(center, left, right dan justify) size adalah ukuran ketebalan, defaultnya 2. width adalah lebar garis, satuanya dalam pixels atau persen color adalah warna garis noshade adalah efek bayangan (shading)<br />
<br />
6.<br />
<br />
Marquee Adalah sebuah text berjalan pada dokumen html. Sintaksnya: <marquee[properti]>………isi/text marquee….</marquee> ket: properti à behavior adalah cara atau teknik dari marquee untuk berjalan(scroll, slide, dan alternate. Direction adalah arah teks berjalan(left, right) Height adalah tinggi marquee nilainya dlm presentase/pixels Width adalah lebar marquee nilainya dlm persetase/pixels Continously adalah pengulang teks secara terus menerus, nilainya adalah loop sebanyak n kali. Bgcolor adalah warna background marquee. Style adalah untuk memformat font, paragraf, border, numbering dan position.<br />
<br />
Contoh –Contoh Halaman Web: Buatlah contohcontoh-contoh di bawah ini : coba1.html • coba1.html coba2.html • coba2.html latihan1.htm • latihan1.htm lampu.htm • latihan2.html piramida.html • piramida.html </div>
</div>
<hr />
<h4>Related Documents</h4>
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html-tutorial-68o2nkgkmjop" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/68o2nkgkmjop.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html-tutorial-68o2nkgkmjop" class="text-dark">Html Tutorial</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> May 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 8</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html-tutorial-r6zwl8y92o04" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/r6zwl8y92o04.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html-tutorial-r6zwl8y92o04" class="text-dark">Html Tutorial</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 38</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html-tutorial-v8z1k4wm8ory" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/v8z1k4wm8ory.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html-tutorial-v8z1k4wm8ory" class="text-dark">Html Tutorial</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> October 2019</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 48</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html-tutorial-4vz0qvyd6x38" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/4vz0qvyd6x38.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html-tutorial-4vz0qvyd6x38" class="text-dark">Html Tutorial</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 29</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html-tutorial-09o88n8y99or" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/09o88n8y99or.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html-tutorial-09o88n8y99or" class="text-dark">Html Tutorial</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> June 2020</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 4</small>
<div class="clearfix"></div>
</div>
</div>
</div> <div class="col-lg-2 col-md-4 col-sm-6 col-6">
<div class="card item-doc mb-4">
<a href="https://pdfcoke.com/documents/html-tutorial-wqzmkk1g1xo0" class="d-block"><img class="card-img-top" src="https://pdfcoke.com/img/crop/300x300/wqzmkk1g1xo0.jpg" alt=""/></a>
<div class="card-body text-left">
<h5 class="card-title"><a href="https://pdfcoke.com/documents/html-tutorial-wqzmkk1g1xo0" class="text-dark">Html Tutorial</a></h5>
<small class="text-muted float-left"><i class="fas fa-clock"></i> November 2019</small>
<small class="text-muted float-right"><i class="fas fa-eye"></i> 3</small>
<div class="clearfix"></div>
</div>
</div>
</div> </div>
</div>
</div>
</div>
</div>
<footer class="footer pt-5 pb-0 pb-md-5 bg-primary text-white">
<div class="container">
<div class="row">
<div class="col-md-3 mb-3 mb-sm-0">
<h5 class="text-white font-weight-bold mb-4">Our Company</h5>
<ul class="list-unstyled">
<li><i class="fas fa-location-arrow"></i> 3486 Boone Street, Corpus Christi, TX 78476</li>
<li><i class="fas fa-phone"></i> +1361-285-4971</li>
<li><i class="fas fa-envelope"></i> <a href="mailto:info@pdfcoke.com" class="text-white">info@pdfcoke.com</a></li>
</ul>
</div>
<div class="col-md-3 mb-3 mb-sm-0">
<h5 class="text-white font-weight-bold mb-4">Quick Links</h5>
<ul class="list-unstyled">
<li><a href="https://pdfcoke.com/about" class="text-white">About</a></li>
<li><a href="https://pdfcoke.com/contact" class="text-white">Contact</a></li>
<li><a href="https://pdfcoke.com/help" class="text-white">Help / FAQ</a></li>
<li><a href="https://pdfcoke.com/account" class="text-white">Account</a></li>
</ul>
</div>
<div class="col-md-3 mb-3 mb-sm-0">
<h5 class="text-white font-weight-bold mb-4">Legal</h5>
<ul class="list-unstyled">
<li><a href="https://pdfcoke.com/tos" class="text-white">Terms of Service</a></li>
<li><a href="https://pdfcoke.com/privacy-policy" class="text-white">Privacy Policy</a></li>
<li><a href="https://pdfcoke.com/cookie-policy" class="text-white">Cookie Policy</a></li>
<li><a href="https://pdfcoke.com/disclaimer" class="text-white">Disclaimer</a></li>
</ul>
</div>
<div class="col-md-3 mb-3 mb-sm-0">
<h5 class="text-white font-weight-bold mb-4">Follow Us</h5>
<ul class="list-unstyled list-inline list-social">
<li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i
class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i
class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i
class="fab fa-linkedin"></i></a></li>
<li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i
class="fab fa-instagram"></i></a></li>
</ul>
<h5 class="text-white font-weight-bold mb-4">Mobile Apps</h5>
<ul class="list-unstyled ">
<li><a href="#" class="bb-alert" data-msg="IOS app is not available yet! Please try again later!"><img src="https://pdfcoke.com/static/images/app-store-badge.svg" height="45" /></a></li>
<li><a href="#" class="bb-alert" data-msg="ANDROID app is not available yet! Please try again later!"><img style="margin-left: -10px;" src="https://pdfcoke.com/static/images/google-play-badge.png" height="60" /></a></li>
</ul>
</div>
</div>
</div>
</footer>
<div class="footer-copyright border-top pt-4 pb-2 bg-primary text-white">
<div class="container">
<p>Copyright © 2024 PDFCOKE.</p>
</div>
</div>
<script src="https://pdfcoke.com/static/javascripts/jquery.min.js"></script>
<script src="https://pdfcoke.com/static/javascripts/popper.min.js"></script>
<script src="https://pdfcoke.com/static/javascripts/bootstrap.min.js"></script>
<script src="https://pdfcoke.com/static/javascripts/bootbox.all.min.js"></script>
<script src="https://pdfcoke.com/static/javascripts/filepond.js"></script>
<script src="https://pdfcoke.com/static/javascripts/main.js?v=1732302595"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144986120-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-144986120-1');
</script>
</body>
</html>