HOE OM

Hoe om huis toe

Spyskaarte

Ikoonbalk Kieslys-ikoon Trekklavier Oortjies Vertikale oortjies Oortjieopskrifte Volblad-oortjies Beweeg oortjies Top navigasie Responsiewe Topnav Navbar met ikone Soek Menu Soekbalk Vaste Sidebar Bladsynavigasie Responsiewe Sidebar Volskermnavigasie Off-Canvas Menu Beweeg Sidenav-knoppies Sybalk met ikone Horisontale rolkieslys Vertikale spyskaart Onderste navigasie Responsiewe onderste navigasie Ondergrens Nav Skakels Regsbelynde spyskaartskakels Gesentreerde kieslysskakel Gelyke breedte spyskaart skakels Vaste spyskaart Skuif balk af op Scroll Versteek Navbar op Scroll Krimp Navbar op Scroll Plakkerige navigasiebalk Navbar op Beeld Beweeg aftreklys Klik Dropdowns Cascading Dropdown Aftreklys in Topnav Aftreklys in Sidenav Resp Navbar aftreklys Subnavigasie-kieslys Dropup Mega spyskaart Mobiele spyskaart Gordyn Menu Sybalk saamgevou Ingevoude sypaneel Paginering Broodkrummels Knoppiegroep Vertikale knoppiegroep Sticky Social Bar Pilnavigasie Responsiewe kop

Beelde

Skyfievertoning Skyfievertoninggalery Modale beelde Lig boks Responsiewe beeldrooster Beeldrooster Tab Galery Beeld-oorleg vervaag Beeld-oorlegskyfie Beeld-oorlegzoem Prent-oorlegtitel Beeld-oorleg-ikoon Beeld effekte Swart en Wit Beeld Beeld teks Prentteksblokke Deursigtige beeldteks Volle bladsy Beeld Vorm op Beeld Heldebeeld Vervaag agtergrondprent Verander Bg op Scroll Sy-aan-sy-beelde Afgeronde beelde Avatar beelde Responsiewe beelde Sentreer beelde Duimnaels Rand om beeld Ontmoet die span Klewerige beeld Blaai 'n prent Skud 'n beeld Portefeuljegalery Portefeulje met filter Beeldzoem Beeldvergrootglas Beeldvergelyking-skuifbalk Gunsteling

Knoppies

Waarskuwingsknoppies Omlyn-knoppies Verdeel knoppies Geanimeerde knoppies Vervaag knoppies Knoppie op Beeld Sosiale media-knoppies Lees meer Lees minder Laai knoppies Laai knoppies af Pil Knoppies Kennisgewing-knoppie Ikoon knoppies Volgende/vorige knoppies Meer-knoppie in Nav Blokknoppies Teks knoppies Ronde knoppies Blaai na bo-knoppie

Vorms

Aantekenvorm Registrasievorm Betaalvorm Kontak Vorm Sosiale aanmeldvorm Registreer Vorm Vorm met ikone Nuusbrief Gestapelde vorm Responsiewe vorm Opspringvorm Inlyn vorm Vee invoerveld uit Versteek nommerpyltjies Kopieer teks na knipbord Geanimeerde soektog Soek knoppie Volskermsoektog Invoerveld in Navbar Aantekenvorm in Navbar Pasgemaakte merkblokkie/radio Pasgemaakte kies Wissel skakelaar Merk Merkblokkie Bespeur Caps Lock Snellerknoppie op Enter Wagwoord validering Wissel Wagwoordsigbaarheid Meervoudige Stapvorm Outovoltooi Skakel outovoltooiing af Skakel speltoets af Lêeroplaai-knoppie Leë invoerbekragtiging

Filters

Filter lys Filtertabel Filter elemente Filter aftreklys Sorteer lys Speltabel

Tabelle

Sebra Gestreepte Tafel Sentrumtafels Volle breedte tafel Sy-aan-sy tafels Responsiewe tabelle Vergelykingstabel

Meer

Volskerm video Modale bokse Verwyder Modal Tydlyn Scroll aanwyser Vorderingstawe Vaardigheidsbalk Range Sliders Gereedskapwenke Vertoon Element Hover Advertensies Opvoubaar Kalender HTML sluit in To Do List Laaiers Stergradering Gebruikersgradering Oorleg effek Kontak Chips Kaarte Flip kaart Profielkaart Produk Kaart Waarskuwings Uitroep Notas Etikette Kringe Styl HR Koepon Lys Groep Lys sonder koeëls Responsiewe teks Uitknip teks Gloeiende teks Vaste voetskrif Klewerige element Gelyke Hoogte Clearfix Responsiewe dryf Peuselstafie Volskerm-venster Scroll Tekening Gladde rol Gradiënt Bg Scroll Plakkerige kop Krimp kopskrif op rol Pryse tabel Parallax Aspekverhouding Responsiewe iframes Wissel Hou van / Hou nie van nie Wissel Versteek/Wys Wissel donker modus Wissel teks Wissel Klas Voeg klas by Verwyder klas Aktiewe klas Boom Uitsig Verwyder eiendom Vanlyn opsporing Vind verborge element Herlei webblad Zoom Hover Flip Box Sentreer vertikaal Middelknoppie in DIV Oorgang op Hover Pyltjies Vorms Aflaai skakel Volle hoogte element Blaaier venster Pasgemaakte rolbalk Versteek rolbalk Wys/Forseer rolbalk Toestel kyk Tevrede bewerkbare grens Plekhouer kleur Tekskeuse kleur Bullet Kleur Vertikale lyn Verdelers Animeer ikone Countdown Timer Tikmasjien Binnekort Bladsy Kletsboodskappe Opspringkletsvenster Verdeelde skerm Getuigskrifte Seksie Teller Aanhalings Skyfievertoning Sluitbare lysitems Tipiese toestelbreekpunte Sleepbare HTML-element JS Media Navrae Sintaksis Verligmaker JS Animasies JS Snaar Lengte JS Eksponensiëring JS verstek parameters Kry huidige URL Kry huidige skermgrootte Kry Iframe Elements

Webwerf

Skep 'n gratis webwerf Maak 'n webwerf Maak 'n statiese webwerf Maak 'n webwerf (W3.CSS) Maak 'n webwerf (BS3) Maak 'n webwerf (BS4) Maak 'n webwerf (BS5) Skep en bekyk 'n webwerf Skep 'n skakelboom-webwerf Skep 'n portefeulje Skep 'n CV Maak 'n restaurantwebwerf Maak 'n besigheidswebwerf Maak 'n webboek Sentrum webwerf Kontak Afdeling Oor Bladsy Groot kop Voorbeeld webwerf

Rooster

2 Kolomuitleg 3 Kolomuitleg 4 Kolomuitleg Uitbreidende rooster Lys Grid View Gemengde kolomuitleg Kolomkaarte Zig Zag Uitleg Bloguitleg

Google

Google Charts Google Fonts Google Font-parings Google Stel Analytics op

Omskakelaars

Skakel gewig om Skakel temperatuur om Skakel lengte om Skakel spoed

Blog

Kry 'n ontwikkelaarwerk Word 'n Front-End Dev.

Hoe OM - Maak 'n HTML-boek


Leer hoe om 'n HTML-boek te skep wat op alle toestelle, rekenaar, skootrekenaar, tablet en foon sal werk.


Skep eers 'n basiese HTML-bladsy

HTML is die standaard opmaaktaal vir die skep van webwerwe en CSS is die taal wat die styl van 'n HTML-dokument beskryf.

Ons sal HTML en CSS kombineer om 'n basiese HTML-boek te skep.

Begin eers met 'n HTML-skelet:

Voorbeeld

<!DOCTYPE html>
<html>

<head>
<title>My Book</title>
<meta charset="UTF-8">
</head>

<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>

</html>

Voorbeeld Verduidelik

  • <!DOCTYPE html>Die dokumenttipe is HTML
  • <html> </html>Die begin en die einde van die dokument
  • <head> </head>Die begin en die einde van dokumentinligting
  • <title>Die titel van die boek ("My Boek")
  • <meta charset="UTF-8">Die karakterstel wat gebruik word (UTF-8)
  • <body> </body>Die begin en die einde van die sigbare inhoud
  • <h1> </h1>Die begin en die einde van 'n opskrif
  • <p> </p>Die begin en einde van 'n paragraaf

Die kode hierbo verduidelik is HTML-merkers.

HTML-etikette word gebruik om die inhoud van 'n HTML-dokument te definieer.

Die etikette begin met 'n <(minder-as-teken) en eindig met 'n >(groter-as-teken).

Hierdie manier <p>en </p>word gebruik om die begin en einde van 'n paragraaf te merk.

Let wel: As jy HTML in detail wil bestudeer, lees asseblief ons HTML-tutoriaal .

Om heeltemal korrek te wees, moet daar 'n taalkenmerk by die <html>merker gevoeg word om die taal wat in die boek gebruik word, te definieer:

<html lang="en">

Deur die volgende meta-inligting by te voeg, sal jou boek korrek op alle toestelle, rekenaar, skootrekenaar, tablet en foon vertoon:

<meta name="viewport" content="width=device-width, initial-scale=1">

Voorbeeld

<!DOCTYPE html>
<html lang="en">

<head>
<title>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>

</html>

Skep 'n inhoudsopgawe

<body> </body>Voeg 'n inhoudsopgawe binne die elemente by:

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p>1. Metaphysics</p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>

</body>

Voeg 'n bietjie styl by

Voeg 'n stylblad by jou boek:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Let wel: As jy CSS in detail wil bestudeer, lees asseblief Ons CSS Tutoriaal .



Skep 'n HTML-bladsy vir Hoofstuk 1

Lêer: philosophy_chapter1.htm

<body class="w3-content">
<div class="w3-container">

<h1>1. Metaphysics</h1>

<h3>The nature of reality.</h3>

<p>Metaphysics is the part of philosophy that studies the nature of reality.</p>

<p>When we look around, we can see:</p>
<ul>
<li>Nature</li>
<li>Animals</li>
<li>People</li>
<li>Houses</li>
<li>Cars</li>
<li>and much more</li>
</ul>

<p>Is this Virtual Reality real?</p>

<p>In Metaphysics, the questions is:</p>
<ul>
<li>What is real?</li>
<li>Is what we see real?</li>
<li>Is there more than we see?</li>
<li>Is there more than we sence?</li>
<li>Is there something else?</li>
<li>Is there something more?</li>
<li>Is there another dimension?</li>
</ul>
</div>

</body>

Voeg 'n skakel by hoofstuk 1

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p><a href="philosophy_chapter1.htm">1. Metaphysics</a></p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>

</body>

In die voorbeeld hierbo het ons die eerste hoofstuk van die boek genoem:

" philosophy_chapter1.htm ".

Die naam om te gebruik is aan jou. Miskien moet dit "Metaphysics" genoem word.

In elk geval, gaan voort soos hierbo en skep die ander hoofstukke:

"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"


Voeg 'n skakel by elke hoofstuk

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p>
<a href="philosophy_chapter1.htm">1. Metaphysics</a>
</p>

<p>
<a href="philosophy_chapter2.htm">2. Epistemology</a>
</p>

<p>
<a href="philosophy_chapter3.htm">3. Logics</a>
</p>

<p>
<a href="philosophy_chapter5.htm">4. Ethics</a>
</p>

<p>
<a href="philosophy_chapter4.htm">5. Aesthetics</a>
</p>

</body>