digital resources
301x Filetype PDF File size 2.26 MB Source: pdf.helion.pl
Filetype PDF | Posted on 01 Feb 2023 | 3 years ago
IDZ DO
IDZ DO
PRZYK£ADOWY ROZDZIA£
PRZYK£ADOWY ROZDZIA£ Head First HTML with CSS
SPIS TREœCI
SPIS TREœCI & XHTML. Edycja polska
KATALOG KSI¥¯EK
KATALOG KSI¥¯EK Autorzy: Eric Freeman, Elisabeth Freeman
KATALOG ONLINE T³umaczenie: Piotr Rajca
KATALOG ONLINE ISBN: 83-246-0427-8
ZAMÓW DRUKOWANY KATALOG Tytu³ orygina³u: Head First HTML with CSS & XHTML
ZAMÓW DRUKOWANY KATALOG Format: 200×234, stron: 684
TWÓJKOSZYK
TWÓJKOSZYK Poznaj w niekonwencjonalny sposób zasady tworzenia stron WWW
DODAJ DO KOSZYKA • Wykorzystaj najnowsze standardy jêzyka HTML
DODAJ DO KOSZYKA • Zastosuj style do zdefiniowania wygl¹du strony
• Opracuj formularze i mechanizmy nawigacyjne
CENNIK I INFORMACJE Jêzyk HTML stale ewoluuje. Od momentu swojego powstania przeszed³ d³ug¹ drogê.
CENNIK I INFORMACJE Pocz¹tkowo by³ to zestaw kilku znaczników s³u¿¹cych do formatowania tekstów
ZAMÓWINFORMACJE naukowych, publikowanych w sieci bêd¹cej zal¹¿kiem internetu. Obecnie technologia ta
ZAMÓWINFORMACJE pozwala na niemal dowolne uk³adanie elementów tekstowych i graficznych na stronach
ONOWOœCIACH
ONOWOœCIACH WWW wyœwietlanych w przegl¹darkach internetowych. Wspó³czesny HTML to nie tylko
ZAMÓWCENNIK znaczniki, ale tak¿e style — uniwersalne rozwi¹zanie umo¿liwiaj¹ce kontrolowanie
ZAMÓWCENNIK wygl¹du strony. Zbudowanie nowoczesnej i szybko ³aduj¹cej siê witryny WWW
wymaga opanowania tych elementów. Przera¿a Ciê to? Widzisz ju¿ w myœlach setki linii
CZYTELNIA przyk³adowego kodu, dziesi¹tki definicji i diagramów? Niepotrzebnie.
CZYTELNIA
Dziêki ksi¹¿ce „Head First HTML with CSS & XHTML. Edycja polska” poznasz
FRAGMENTY KSI¥¯EK ONLINE
FRAGMENTY KSI¥¯EK ONLINE najnowsze standardy tworzenia witryn WWW w sposób gwarantuj¹cy szybkie
i bezstresowe przyswojenie wiedzy. Jej autorzy, wykorzystuj¹c najnowsze osi¹gniêcia
teorii uczenia, przedstawiaj¹ wszystkie zagadnienia niezbêdne do rozpoczêcia
projektowania i tworzenia serwisów WWW z wykorzystaniem jêzyka HTML oraz
kaskadowych arkuszy stylów CSS. Poznasz znaczniki HTML, zasady umieszczania
na stronach WWW elementów graficznych oraz sposoby formatowania tekstów za
pomoc¹ stylów. Jednak, co najwa¿niejsze, nauczysz siê stosowaæ tê wiedzê w praktyce.
• Struktura dokumentu HTML
• Znaczniki formatuj¹ce
• £¹cza do innych stron WWW
• Wstawianie elementów graficznych
Wydawnictwo Helion • Zgodnoœæ ze standardami
ul. Koœciuszki 1c • Formatowanie za pomoc¹ stylów CSS
44-100 Gliwice • Tworzenie formularzy
tel. 032 230 98 63 Przekonaj siê, ¿e nawet przy poznawaniu skomplikowanych technologii mo¿na siê
e-mail: helion@helion.pl œwietnie bawiæ.
Spis treści (skrócony)
Wprowadzenie 21
1 Język Sieci. Poznajemy HTML 33
2 Poznajemy „HT” z nazwy języka HTML. Dokładniejsze poznanie hipertekstu 73
3 Konstrukcja stron WWW. Elementy konstrukcyjne 107
4 Wycieczka do Webowic. Nawiązujemy połączenie 153
5 Poznajemy media. Umieszczanie obrazów na stronach WWW 193
6 Poważny HTML. Standardy, zgodność z nimi i cały ten kram 249
7 Dodanie „X” do HTML. Zaczynamy stosować XHTML 291
8 Delikatna stylizacja. Poznajemy CSS 311
9 Poszerzamy swoje słownictwo. Style czcionek i kolorów 365
10 Bliskie kontakty z elementami. Model blokowy 407
11 Zaawansowane sposoby konstruowania stron WWW. Elementy div i span 449
12 Rozmieszczanie elementów. Układ i pozycjonowanie 507
13 Mania tabel. Tabele i listy 567
14 W stronę interaktywności. Formularze XHTML 607
Dodatek. Dziesięć najważniejszych zagadnień (których nie opisaliśmy) 655
Spis treści (na serio)
Wprowadzenie
Twój mózg koncentruje się na kodzie HTML i CSS. Podczas gdy Ty starasz się czegoś nauczyć,
Twój mózg robi Ci przysługę i dba o to, abyś przez przypadek nie zapamiętał zdobywanych informacji. Twój
mózg myśli sobie: „Lepiej zostawić trochę miejsca na bardziej istotne informacje, na przykład: jakich zwierząt
unikać albo czy jeżdżenie na snowboardzie nago jest dobrym pomysłem”. A zatem, w jaki sposób możesz
oszukać swój mózg i przekonać go, że Twoje życie zależy od znajomości HTML-a i CSS?
Dla kogo jest ta książka? 22
Wiemy, co sobie myśli Twój mózg 23
Metapoznanie 25
Zmuś swój mózg do posłuszeństwa 27
Zespół recenzentów 30
Podziękowania 31
5
Spis treści
Poznajemy HTML
Język Sieci
Jedyną przeszkodą na drodze do zaznaczenia Twojej obecności w Sieci jest
konieczność poznania nowego żargonu: HTML-a (to skrót od słów: HyperText Markup
1 Language — język znaczników hipertekstu). A zatem przygotuj się na kilka lekcji nowego języka.
Po przeczytaniu tego rozdziału nie tylko będziesz rozróżniać niektóre proste elementy HTML,
lecz także nabędziesz odpowiedniego stylu. W końcu, po przeczytaniu całej książki, będziesz
posługiwać się tym językiem w taki sposób, jakbyś całe życie spędził w Webowicach.
WWW zabiła radio 34
Co robi serwer? 35
Oto co piszesz (kod HTML)… 36
Co tworzy przeglądarka 37
Twoja długa przerwa w kafeterii Świat Kaw 41
Bez stresu, ale kiedy
skończysz, naszą stronę Tworzenie strony kafeterii 43
będą odwiedzać tysiące osób.
Dlatego nie tylko musi ona Tworzenie plików HTML (Widnows) 44
być poprawna, lecz także W międzyczasie w kafeterii Świat Kaw 47
koniecznie musi świetnie
wyglądać! Otwieranie strony w przeglądarce 49
Testowanie strony WWW 50
Znaczniki bez tajemnic 55
Poznajemy element style 59
Nadawanie stylu stronie kafeterii 60
Kto co robi? 62
Pogawędki przy kominku 64
Kluczowe zagadnienia 66
Rozwiązania ćwiczeń 69
.h
n t
o m
al l«
k »s ”
li
ę p
rzebuj
t
o
My Playlist
P
Kickn Tunes
ce
ylist <p>BT - Satellite: ni
My Pla
e>
tl
</ti downbeat tune.
<head> </p>
y>
<bod
<h1>Kickn Tunes <p>
>
</h1 ...
te: nice
- Satelli
>BT
<p
.
ne
eat tu
downb
</p>
<p>
...
<html>
<head>
<title>
y Playlist
M
Kickn Tunes
ce
BT - Satellite: ni
downbeat tune.
...
ylist
My Pla
le>
</tit
>
<head
<body>
<h1>Kickn Tunes
1>
</h
t tune.
ce downbea
ellite: ni
<p>BT - Sat
</p>
<p>
...
Znalazłem go, trzymaj”
Serwer WWW
6
Dokładniejsze poznanie hipertekstu
Poznajemy „HT” z nazwy języka HTML
Czy ktoś powiedział hipertekst”? A co to takiego? Ech… to jedynie podstawa całej
WWW. W rozdziale 1. przyjrzeliśmy się nieco językowi HTML i przekonaliśmy się, że jest to język
2 wykorzystujący znaczniki („ML” z nazwy HTML) do opisywania struktury stron WWW.
Teraz zajmiemy się możliwościami związanymi z pierwszą częścią nazwy „HTML” — „HT”,
czyli hipertekstem, który pozwoli nam uwolnić się od ograniczeń jednej strony i tworzyć
połączenia z innymi stronami WWW. Jednocześnie poznamy nowy, bardzo potężny element
— <a> — i dowiemy się, że bycie „względnym” jest całkiem fajne. A zatem zapnij pasy
— właśnie zaczynamy poznawać hipertekst.
Salon Head First — nowy i poprawiony 74
Tworzenie nowej strony salonu 76
Co zrobiliśmy? 78
Co robi przeglądarka? 79
Atrybuty 83
Problemy techniczne 88
Planowanie ścieżek 90
Poprawianie błędnych adresów obrazów… 96
Rozwiązania ćwiczeń 102
7
</pre>
</div>
<!---------------------- iklan 3333333 mobile ------------->
<!---------------------- end iklan 3333333 mobile ------------->
</div>
<div class="col-xl-4 col-lg-4">
<div class="slippa-box-style-2">
<div style="word-break: break-all; padding:15px;background-color:#f0f0f0;border-color: #e9ebec; border-style: solid;border-width: 0.01em;">
<div style="max-width:98%;line-height:15px;">
<b>The words contained in this file might help you see if this file matches what you are looking for:</b>
<br>
<br>...Idz do przyk adowy rozdzia head first html with css spis tre ci xhtml edycja polska katalog ksi ek autorzy eric freeman elisabeth online t umaczenie piotr rajca isbn zamow drukowany tytu orygina u format stron twojkoszyk poznaj w niekonwencjonalny sposob zasady tworzenia www dodaj koszyka wykorzystaj najnowsze standardy jezyka zastosuj style zdefiniowania wygl du strony opracuj formularze i mechanizmy nawigacyjne cennik informacje jezyk stale ewoluuje od momentu swojego powstania przeszed d ug droge pocz tkowo by to zestaw kilku znacznikow s cych formatowania tekstow zamowinformacje naukowych publikowanych sieci bed cej zal kiem internetu obecnie technologia ta pozwala na niemal dowolne uk adanie elementow tekstowych graficznych stronach onowo ciach wy wietlanych przegl darkach internetowych wspo czesny nie tylko zamowcennik znaczniki ale tak e uniwersalne rozwi zanie umo liwiaj ce kontrolowanie zbudowanie nowoczesnej szybko aduj sie witryny wymaga opanowania tych przera a cie widzisz ...
</div>
</div>
</div>
<!--------------------------------------------------------------------------- jika mobile tampilkan ini -------------------------------------------->
<!--------------------------------------------------------------------------- jika mobile tampilkan ini ------------------------------------>
</div>
</div>
<div class="margin-top-10"></div>
<div class="row">
<div class="col-xl-8 col-lg-8">
<div class="slippa-box-style-2">
<!--- <i>Haven't found the file you're looking for? You can try <a href="https://jagomart.net/upload-item-req"><b>sending a request file</b></a></i> --->
<div class="margin-top-10"></div>
<!-- link affiliasi dan share link | Sidebar Widget -->
<div class="sidebar-widget">
<h3>Share</h3>
<!-- Copy URL -->
<div class="copy-url" style="line-height:14px;">
<div class="copy-url" id="copy-url" style="background-color:#dddddd;border:0.5px solid #cccccc;font-size:12px;">
<span id="b">https://contohsurat.jagomart.net/item/184493/hfhtcs-2</span>
</div>
<button class="copy-url-button ripple-effect" data-clipboard-target="#copy-url" title="copy" data-tippy-placement="top">
<span id="c" onclick="copyDivToClipboard()" style="padding:2px"><i class="icon-material-outline-file-copy"></i>
<font size="1"><span id="kopi">COPY</span></font>
</span>
</button>
</div>
<div class="share-buttons margin-top-15">
<div class="share-buttons-trigger">
<i class="icon-feather-share-2"></i>
</div>
<div class="share-buttons-content">
<h5>Share to social media</h5>
<ul class="share-buttons-icons">
<li><a href="https://www.facebook.com/sharer/sharer.php?u=https://contohsurat.jagomart.net/item/184493/hfhtcs-2" data-button-color="#3b5998" title="Facebook" data-tippy-placement="top"><i class="icon-brand-facebook-f"></i></a></li>
<li><a href="https://twitter.com/intent/tweet?text=https://contohsurat.jagomart.net/item/184493/hfhtcs-2" data-button-color="#1da1f2" title="Twitter" data-tippy-placement="top"><i class="icon-brand-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- end | link affiliasi dan share link | Sidebar Widget -->
<!--- menu tab komentar dan review --->
<!-----
<div class="">
<div class="col-lg-8">
<ul class="nav">
<li class="nav-item" id="myTab2" role="tablist">
<a class="btn btn-outline-secondary btn-sm active" id="slippa-tab-1-tab" data-toggle="tab" href="#comment" role="tab" aria-controls="slippa-tab-1" aria-selected="true">
Comment
</a>
</li>
<li> </li>
<li class="nav-item">
<a class="btn btn-outline-secondary btn-sm" id="slippa-tab-2-tab" data-toggle="tab" href="#review" role="tab" aria-controls="slippa-tab-2" aria-selected="false">
Review
</a>
</li>
</ul>
</div>
</div>
---->
<!--- <a href="#buyRegister" class="" data-toggle="modal" id="buy-button"><strong>Comment</strong></a> ---->
<!--- end | menu tab komentar dan review --->
<!--- bagian field tampilan komentar dan review --->
<div class="margin-top-10"></div>
<div class="">
<div class="slippa-box-style-2 margin-bottom-30 content-right-offset" style="background-color:#fafbfd;">
<div class="product-details-tab-area">
<div class="row">
<div class="col-12">
<div class="tab-content" id="myTabContent">
<!--- tab komentar ---->
<div class="tab-pane fade-in-bottom show active" id="comment" role="tabpanel" aria-labelledby="comment-tab">
<!----
<p class="text-center">no comments yet
<br>
<small>Please <a href="#buyRegister" class="" data-toggle="modal" id="buy-button">Login</a> to post a comment.</small>
</p>
---->
</div>
<!--- end | tab komentar ---->
<!--- tab review ---->
<div class="tab-pane fade-in-bottom" id="review" role="tabpanel" aria-labelledby="review-tab">
<div class="card">
<div class="card-body">
<p class="text-center">
<small>no reviews yet</small>
<small>
<br>
Please <a href="#buyRegister" class="" data-toggle="modal" id="buy-button">Login</a> to review.
</small>
</p>
</div>
</div>
</div>
<!--- end | tab review ---->
</div>
</div>
</div>
</div>
</div><!-- /.slippa-box-style-2 -->
</div>
<!--- end | bagian field tampilan komentar dan review --->
</div>
</div>
<div class="col-xl-4 col-lg-4">
<!-- item terkait 2 | Sidebar Widget -->
<div class="margin-top-10"></div>
<div class="sidebar-widget">
<div class="seller-box">
<div class="col-xs-6">
<!-- detail item dan author | Sidebar Widget -->
<div class="sidebar-widget">
<div class="seller-box margin-bottom-10">
<div style="background-color:#ffffff;">
<div class="" style="border:1px solid #e2e2e2; padding:10px;background-color:#f0f0f0;line-height:12px;font-size:16px">
<small>Category: <span><a href="#"><!--- </a> / ---> <a href="https://contohsurat.jagomart.net/subcategory/uncategorized">Uncategorized</a> / <a href="https://contohsurat.jagomart.net/childcat/uncategorized">Uncategorized</a></span>
<br>Posted on: <span>01 Feb 2023 | 3 years ago</span>
<!----
<br>Update:</span>
--->
<br>Tag:
<span><a href="#">download pdf</a>,</span>
<span><a href="#">hfhtcs</a>,</span>
<br>Filetype: PDF
<br>File size: 2.26 MB
<br>Views: 301x
<br>Link recommended: <a href="https://filekonstruksi.com" tittle="filekonstruksi.com" target="blank">filekonstruksi.com<a/></small>
<div class="text-center">
<p class="f-size-16 text-200">
</div>
</p>
</div>
</div>
</div><!-- /.slippa-box-style-3 -->
</div><!-- /.seller-box -->
</div>
<!-- end | detail item | Sidebar Widget -->
</div>
</div>
</div>
<!-- end | item terkait 2 | Sidebar Widget -->
</div>
</div>
</div>
<!-- Spacer -->
<div class="margin-top-15"></div>
<!-------------- end | halaman item ------------------------------------------------->
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Beri Rating</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="https://contohsurat.jagomart.net/subnit-review/184493/hfhtcs-2" onsubmit="document.getElementById('formsubmitbutton4').style.display = 'none';document.getElementById('buttonreplacement4').style.display = '';">
<input type="hidden" name="_token" value="ce0a19788b029b0cad3a196cc51770c0">
<div class="form-group">
1. Jelek <input type="radio" id="jelek" name="r_value" value="1" required>
2. Cukup <input type="radio" name="r_value" value="2" required>
3. Baik <input type="radio" name="r_value" value="3" required>
4. Sangat Baik <input type="radio" name="r_value" value="4" required>
5. Excelent <input type="radio" name="r_value" value="5" required>
</div>
<div class="form-group">
<textarea id="my-textarea" class="form-control" name="r_cmt" rows="3" placeholder="Komentar review"></textarea>
</div>
<div id="formsubmitbutton4">
<button type="submit" name="submit" class="btn btn-info btn-block">Kirim</button>
</div>
<div id="buttonreplacement4" style="display:none;">
<img src="https://contohsurat.jagomart.net/assets/default/img/preload.gif" alt="loading...">
</div>
</form>
</div>
<!----
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
</div>
---->
</div>
</div>
</div>
<script src="https://contohsurat.jagomart.net/assets/default/js/lozad.min.js"></script>
<script type="text/javascript">
var observer = lozad('.lozad', {
threshold: 0.1,
enableAutoReload: true,
load: function(el) {
el.src = el.getAttribute("data-src");
el.onload = function() {
toastr["success"](el.localName.toUpperCase() + " " + el.getAttribute("data-index") + " lazy loaded.")
}
}
})
observer.observe()
</script>
<script type="text/javascript">
function populatePre(url){
var xhr = new XMLHttpRequest();
xhr.onload = function ()
{
document.getElementById('contentsd').innerHTML = this.responseText;
DoubleScroll(document.getElementById('contentsd'));
};
xhr.open('GET', url);
xhr.send();
}
$(document).ready(function(){
DoubleScroll(document.getElementById('contentsd'));
});
function DoubleScroll(element) {
var scrollbar= document.createElement('div');
scrollbar.appendChild(document.createElement('div'));
scrollbar.style.overflow= 'auto';
scrollbar.style.overflowY= 'hidden';
scrollbar.firstChild.style.width= element.scrollWidth+'px';
scrollbar.firstChild.style.paddingTop= '1px';
scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
var running = false;
scrollbar.onscroll= function() {
if(running) {
running = false;
return;
}
running = true;
element.scrollLeft= scrollbar.scrollLeft;
};
element.onscroll= function() {
if(running) {
running = false;
return;
}
running = true;
scrollbar.scrollLeft= element.scrollLeft;
};
element.parentNode.insertBefore(scrollbar, element);
}
</script>
<script>
function copyDivToClipboard() {
var range = document.createRange();
range.selectNode(document.getElementById("b"));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
document.getElementById("kopi").innerHTML = "<i>copied</i>";
}
</script>
<div class="modal fade" id="buyLogin" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="">
<b class="popup-title">Login</b>
<br>
<form id="demo-form" method="post" action="https://contohsurat.jagomart.net/auth/grant_access" onSubmit="ButtonClicked();">
<input type="hidden" name="_token" value="ce0a19788b029b0cad3a196cc51770c0">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="company-name">Username/Email</label>
<input type="text" id="username5" name="username" autocomplete="autocomplete_off_hack_xfr4!k" placeholder="Username" class="form-control" required>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="email">Password</label>
<input type="password" id="password5" name="password" autocomplete="off" placeholder="password" class="form-control" required>
<input type="hidden" name="urlnow" value="/item/184493/hfhtcs-2">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="formsubmitbutton">
<div class="pLace-order" style="float:left">
<button type="submit" id="btn" name="do_login" class="btn btn-success" data-sitekey="" data-callback='onSubmit' >LOGIN <span class="primary"></span></button>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="buttonreplacement" style="display:none;">
<div class="pLace-order">
<img src="https://contohsurat.jagomart.net/assets/default/img/preload.gif" alt="loading..."> harap tunggu...
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<br>
<p align="right"><a href="https://contohsurat.jagomart.net/auth/reset_pass" class="primary">Forgot password?</a></p>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div align="right"><a href="#buyRegister" data-dismiss="modal" class="btn btn-sm btn-info" data-toggle="modal" id="buy-button">Don't have an account? Register</a></div>
<button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">X</button>
</div>
</div>
</div>
</div><div class="modal fade" id="buyRegister" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="">
<b class="popup-title">Create Account</b> | need to login to continue
<br>
<form action="https://contohsurat.jagomart.net/auth/registration" method="post" autocomplete="off" id="demo-form" onSubmit="ButtonClicked2();">
<input type="hidden" name="_token" value="ce0a19788b029b0cad3a196cc51770c0">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<!---<label class="control-label" for="company-name">Name</label>--->
<input type="text" id="Firstname" name="firstname" class="form-control" autocomplete="off" placeholder="Name" required>
</div>
</div>
<input type="hidden" id="lastname" name="lastname">
<!---
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="email">Nomor HP</label>
<input type="number" id="username" name="username" class="form-control" autocomplete="off" placeholder="Nomor HP | 08..." required>
</div>
</div>
---->
<input type="hidden" id="username" name="username" class="form-control" autocomplete="off" value="01779188154" required>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<!---<label class="control-label" for="email">Email</label>--->
<input type="text" id="email" name="email" class="form-control" autocomplete="off" placeholder="Email" required>
</div>
</div>
<!----
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<input type="text" id="hp" name="hp" class="form-control" autocomplete="off" placeholder="Nomor HP" required>
</div>
</div>
---->
<input type="hidden" id="hp" name="hp" value="08123456789" autocomplete="off">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<!---<label class="control-label" for="email">Password (8 characters)</label>--->
<input type="password" id="password" name="password" class="form-control" autocomplete="off" placeholder="Password 8 characters" required>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<!---<label class="control-label" for="email">Repeat Password</label>--->
<input type="password" id="con_pass" name="con_pass" class="form-control" autocomplete="off" placeholder="Repeat Password" required>
<input type="hidden" name="urlnow" value="/item/184493/hfhtcs-2">
</div>
</div>
<input type="hidden" name="country" value="Indonesia">
<input type="hidden" name="region" value="Jakarta Raya">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="formsubmitbutton2">
<small><i>*By registering, I agree <a href="https://contohsurat.jagomart.net/pages/syarat-dan-ketentuan" target="_blank">Terms and conditions</a></i></small>
<div style="float:left">
<button type="submit" id="btn" name="do_reg" class="btn btn-success" data-sitekey="" data-callback='onSubmit' ><span class="primary">CREATE ACCOUNT</span></button>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="buttonreplacement2" style="display:none;">
<img src="https://contohsurat.jagomart.net/assets/default/img/preload.gif" alt="loading..."> please wait...
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div align="left"><a href="#buyLogin" data-dismiss="modal" class="btn btn-sm btn-primary" data-toggle="modal" id="buy-button">Already have an account? Login</a></div>
<button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function ButtonClicked()
{
document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
</script>
<script type="text/javascript">
function ButtonClicked2()
{
document.getElementById("formsubmitbutton2").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement2").style.display = ""; // to display
return true;
}
var FirstLoading2 = true;
function RestoreSubmitButton2()
{
if( FirstLoading2 )
{
FirstLoading2 = false;
return;
}
document.getElementById("formsubmitbutton2").style.display = ""; // to display
document.getElementById("buttonreplacement2").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton2;
</script>
<!-- footer -->
<div id="footer">
<!-- Footer Top Section -->
<div class="footer-top-section">
</div>
<!-- Footer Top Section / End -->
<!-- Footer Middle Section -->
<div class="footer-middle-section" style="padding-top:20px">
<div class="container">
<div class="row">
<!-- Links -->
<div class="col-xl-4 col-lg-4 col-md-6">
<div class="footer-links">
<img class="lozad" data-src="https://contohsurat.jagomart.net/static/website/site-logo/logo.png" alt="contoh surat" title="contoh surat"/> ©2026
<ul>
<li> </li>
<li><i class="fa fa-comment" aria-hidden="true"></i> Download Gratis File Referensi Contoh Surat</li>
<!--<li><i class="fa fa-fax" aria-hidden="true"></i> produk</li>
<li><i class="fa fa-fax" aria-hidden="true"></i> produk</li>
<li><i class="fa fa-users" aria-hidden="true"></i> user terdaftar</li>-->
</ul>
</div>
</div>
<!-- Links -->
<div class="col-xl-4 col-lg-4 col-md-6">
<div class="footer-links">
<h3>Help</h3>
<ul>
<li><a href="https://contohsurat.jagomart.net/pages/privacy-policy">Privacy Policy</a></li>
<li><a href="https://contohsurat.jagomart.net/pages/syarat-dan-ketentuan">Syarat & Ketentuan</a></li>
<li><a href="https://contohsurat.jagomart.net/pages/tentang-kami">Tentang Kami</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Middle Section / End -->
<div class="footer-bottom-section">
<div class="container">
<div class="row">
<!----
<div class="col-xl-12">
© 2026<strong><a href="https://contohsurat.jagomart.net/" target="_blank"> </a></strong>
</div>
--->
</div>
</div>
</div>
</div>
<!-- Footer / End -->
<!-- Footer Area End Here -->
<div class="modal fade login" id="loginModal">
<div class="modal-dialog login animated">
<div class="modal-content modal-dialog-centered">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login Area</h4>
</div>
<div class="modal-body">
<div class="box">
<div class="content">
<div class="social" style="width:100%; margin:auto">
<a id="google_login" class="circle google" href="">
<i class="fa fa-google-plus fa-fw"></i>
</a>
<a id="facebook_login" class="circle facebook" href="">
<i class="fa fa-facebook fa-fw"></i>
</a>
</div>
<div class="division">
<div class="line l"></div>
<span>Authentication</span>
<div class="line r"></div>
</div>
<div id="sign_info"></div>
<div class="form loginBox">
<form action="#" method="POST" id="user-login">
<input type="hidden" name="_token" value="ce0a19788b029b0cad3a196cc51770c0">
<input class="form-control" type="text" name="username" placeholder="UserName" required>
<input class="form-control" type="password" name="password" id="password" placeholder="Password" required>
<button class="btn-default btn-login" id="signin-btn" type="submit" value="Login">Login</button>
</form>
</div>
</div>
</div>
<div class="box">
<div class="content registerBox" style="display:none;">
<div class="form">
<form method="POST" id="reg_user" data-remote="true" action="https://contohsurat.jagomart.net/registration" accept-charset="UTF-8">
<input type="hidden" name="_token" value="ce0a19788b029b0cad3a196cc51770c0">
<div class="row">
<div class="col-xs-6">
<input type="text" id="first-name" name="firstname" class="form-control"placeholder="FirstName" required>
</div>
<div class="col-xs-6">
<input type="text" id="last-name" name="lastname" class="form-control"placeholder="Lastname" required>
</div>
<div class="col-xs-12">
<input type="text" id="user-name" name="username" class="form-control"placeholder="Username" required>
</div>
<div class="col-xs-12">
<input type="text" id="last-name" name="email" class="form-control"placeholder="Email" required>
</div>
<div class="col-xs-6">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" required>
</div>
<div class="col-xs-6">
<input type="password" id="con_pass" name="con_pass" class="form-control" placeholder="Confirm Password" required>
</div>
<div class="col-xs-12">
</div>
</div>
<input class="btn btn-default btn-register" id="reg_btn" type="submit" value="Create account" name="commit" >
</form>
</div>
</div>
<div class="form passBox" style="display:none;">
<form action="#" method="POST" id="reset-pass">
<input type="hidden" name="_token" value="ce0a19788b029b0cad3a196cc51770c0">
<input class="form-control" type="text" name="pass_user" placeholder="UserName" required>
<input class="form-control" type="text" name="pass_email" id="email" placeholder="email" required>
<button class="btn-default btn-login" id="findpass" type="submit" value="Login">Reset Password</button>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<div class="forgot login-footer">
<span>Looking to
<a href="javascript: showRegisterForm();">create an account</a>
?</span>
<span>Or <a href="javascript: showPassForm();">Recover Password</a></span>
</div>
<div class="forgot register-footer" style="display:none">
<span>Already have an account?</span>
<a href="javascript: showLoginForm();">Login</a>
</div>
</div>
</div>
</div>
</div>
<!-- Main Body Area End Here -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="">
<div>
<div style="display:none">
<div id="qr"></div>
<div id="image"><img class="lozad" data-src="https://contohsurat.jagomart.net/assets/default/img/example.png" width="171"></div>
</div>
<div class="group" style="background:#ffffff;padding:10px;">
<center>
<div id="combine"></div>
</center>
</div>
<!---
<br><br>
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Tutup</button>
--->
<!---
<script src="https://contohsurat.jagomart.net/assets/default/js/qrcode.js"></script>
<script src="https://contohsurat.jagomart.net/assets/default/js/qart.js"></script>
<script src="https://contohsurat.jagomart.net/assets/default/vendor/js/jquery-3.5.1.min.js"></script>
<script>
function modalqr()
{
var value = ' <small>()</small>';
var filter = 'color';
var imagePath = 'https://contohsurat.jagomart.net/assets/default/img/example.png';
var version = 10;
var imageSize = 75 + (version * 12) - 24;
var bg = "#fff";
var size = "350";
var fillType = 'scale_to_fit';
var self = this;
function makeQR() {
// console.log('Current version:', version)
qrcode.qrcode.stringToBytes = qrcode.qrcode.stringToBytesFuncs['UTF-8']
var qr = qrcode.qrcode(version, 'H');
qr.addData(value);
try {
qr.make();
} catch (err) {
console.log('Version is low:', version)
console.log('Error:', err)
}
document.getElementById('qr').innerHTML = qr.createImgTag(3);
}
function makeQArt() {
new QArt({
value: value,
imagePath: imagePath,
filter: filter,
version: version,
background: bg,
size: size,
fillType: fillType
}).make(document.getElementById('combine'));
}
makeQR();
makeQArt();
};
</script>
------->
</div>
<!----
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary btn-sm">Download</button>
</div>
---->
</div>
</div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="">
<div>
<div class="group" style="padding:10px;">
<center>
</center>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://contohsurat.jagomart.net/assets/default/vendor/iconfonts/mdi/css/materialdesignicons.min.css" media="all" />
<!--------------------------1/Data Passing Jquery------------------------------------------------------------------>
<script type="text/javascript">var rTL = true;</script>
<!------------------------------------------------------------------------------------------------------------------>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://contohsurat.jagomart.net/assets/default/css/zoom.css" media="all" />
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/jquery-migrate-3.0.0.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/mmenu.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/popper/popper.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/tippy.all.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/simplebar.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/jquery.validate.js"></script>
<script src="https://contohsurat.jagomart.net/assets/default/vendor/js/bootstrap.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/bootstrap-notify.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/snackbar.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/clipboard/clipboard.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/counterup.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/js/magnific-popup.min.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/vendor/iconfonts/font-awesome/js/cff349f370.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/js/zoom.js"></script>
<!---------------------------------DATA TABLES -------------------------------------------------------------------------------->
<!--- <script src="https://contohsurat.jagomart.net/assets/default/vendor/js/datatable/js/pdfmake.min.js"></script> --->
<!------------------------------------------------------------------------------------------------------------------------------>
<script defer src="https://contohsurat.jagomart.net/assets/default/js/plugins.js"></script>
<script defer src="https://contohsurat.jagomart.net/assets/default/js/common.js?v=3.1"></script>
<!--- <script defer src="https://contohsurat.jagomart.net/assets/default/js/custom.js?v=3.1"></script> --->
<!-----------------------------------------Data Passing Jquery------------------------------------------------------------------>
<script type="text/javascript"> var baseUrl = 'https://contohsurat.jagomart.net/'; </script>
<script type="text/javascript"> var basemethod = '<?php echo $this->router->fetch_class(); ?>'; </script>
<script type="text/javascript"> var baseclass = '<?php echo $this->router->fetch_method(); ?>'; </script>
<script type="text/javascript"> var currentUrl = ''; </script>
<script type="text/javascript"> var userID = ''; </script>
<script type="text/javascript"> var referrer = ''; </script>
<script type="text/javascript"> var language = 'en'; </script>
<script type="text/javascript"> var currency_code = 'Rp.'; </script>
<script type="text/javascript"> var demoMode = 'false'; </script>
<!------------------------------------------------------------------------------------------------------------------------------>
<script defer src="https://contohsurat.jagomart.net/assets/default/js/lozad.min.js"></script>
<script type="text/javascript">
var observer = lozad('.lozad', {
threshold: 0.1,
enableAutoReload: true,
load: function(el) {
el.src = el.getAttribute("data-src");
el.onload = function() {
toastr["success"](el.localName.toUpperCase() + " " + el.getAttribute("data-index") + " lazy loaded.")
}
}
})
observer.observe()
</script>
<!----
<link rel="stylesheet" href="https://contohsurat.jagomart.net/assets/default/css/jquery-confirm.min.css">
<script defer src="https://contohsurat.jagomart.net/assets/default/js/jquery-confirm.js"></script>
<script>
$(document).ready(function()
{
var alertjquery = $("#alertjquery").val();
if(alertjquery!='')
{
$.alert({
title: 'Gagal',
content: alertjquery,
buttons: {
Oke: {
btnClass: 'btn-danger'
}
}
});
}
});
</script>
---->
<script>
$('#myModal').on('shown.bs.modal', function ()
{
$('#myInput').trigger('focus')
})
</script>
<script>
$(document).ready(function () {
$("#btnsrch1").click(function ()
{
$(this).hide();
$("#waitttAmazingLover1").css("display", "block");
});
});
</script>
<script>
$(document).ready(function () {
$("#btnsrch2").click(function ()
{
$(this).hide();
$("#waitttAmazingLover2").css("display", "block");
});
});
</script>
<script>
$(document).ready(function () {
$("#btnsrch3").click(function ()
{
$(this).hide();
$("#waitttAmazingLover3").css("display", "block");
});
});
</script>
<script>
$(document).ready(function () {
$("#btnsrch4").click(function ()
{
$(this).hide();
$("#waitttAmazingLover4").css("display", "block");
});
});
</script>
<script>
$(document).ready(function () {
$("#btnsrch10").click(function ()
{
$(this).hide();
$("#waitttAmazingLover10").css("display", "block");
});
});
</script>
<script>
$(document).ready(function () {
$("#btnsrch11").click(function ()
{
$(this).hide();
$("#waitttAmazingLover11").css("display", "block");
});
});
</script>
<script>
$(document).ready(function () {
$("#btnsrch15").click(function ()
{
$(this).hide();
$("#waitttAmazingLover15").css("display", "block");
});
});
</script>
<script>
$(document).ready(function () {
$("#btnsrch16").click(function ()
{
$(this).hide();
$("#waitttAmazingLover16").css("display", "block");
});
});
</script>
<script type="">
$(document).ready(function(){
if(!$('#iklan_dua').is(':visible'))
{
$("#iklan_tiga").css("display", "block");
}
else
{
$("#iklan_tiga").hide();
}
});
</script>
<!---Custom javascript Files -->
<!--------------------------------------javascript ---------------------------------------->
<!---<script type="text/javascript" src="<?= base_url()?>custom/script"></script>---->
<!------------------------------------------------------------------------------------->
<!---Custom javascript Files -->
<input type="hidden" id="alertjquery" value="" />
<!----
var applicationId = RoboTemplatesWebViewApp.getApplicationId();
var versionCode = RoboTemplatesWebViewApp.getVersionCode();
var versionName = RoboTemplatesWebViewApp.getVersionName();
var deviceAPILevel = RoboTemplatesWebViewApp.getDeviceAPILevel();
var deviceUniqueId = RoboTemplatesWebViewApp.getDeviceUniqueId();
var fcmRegistrationToken = RoboTemplatesWebViewApp.getFcmRegistrationToken();
var oneSignalUserId = RoboTemplatesWebViewApp.getOneSignalUserId();
RoboTemplatesWebViewApp.showToast(message);
RoboTemplatesWebViewApp.showSnackbar(message);
RoboTemplatesWebViewApp.showSnackbarWithButton(message, button);
RoboTemplatesWebViewApp.showDialog(title, message);
RoboTemplatesWebViewApp.openBrowser(url);
RoboTemplatesWebViewApp.openStore();
RoboTemplatesWebViewApp.share(subject, text);
RoboTemplatesWebViewApp.closeApp();
RoboTemplatesWebViewApp.sendOneSignalTag(key, value);
RoboTemplatesWebViewApp.showInterstitialAd();
---->
</body>
</html>