Ĉi tio estas maŝine tradukita teksto kiu povas enhavi erarojn!
HTML-retejo estas nur simpla tekstdosiero (kun dosieretendo .html) kiun legas retumilo, anstataŭ teksteditoro. HTML estas markolingvo, kio signifas ke la enhavo devas esti markita, kio notatas (t.e. markata) per komencaj kaj finaj HTML-etikedoj.
Ĉiuj retejoj, kiujn vi vizitas, uzas HTML
Reta esplorilo estas nur la ilo, kiu legas HTML-kodon. Se vi dekstre klakas kaj inspektas aŭ elektas “Montri fontkodon”, vi povas legi la krudan HTML. Ĉion, kion vi iam ajn vidis sur retejoj, do fakte povas rekrei en HTML.
OBS: Ret-programistoj ne nur skribas HTML-kodon la tutan tagon por desegni retejojn. Ekzistas programaro aŭ servoj, kiuj estas pli “drag’n’drop” kiel ekzemple Wordpress, aŭ programaj kadroj, kiuj povas malŝarĝi multon de la laboro por vi. Tamen, estas grave kompreni kiel HTML funkcias por povi atingi la rezultojn, kiujn oni deziras.
HTML-Etikedaj Sintakso
HTML-etikedoj sekvas sintakson por kaj malfermaj kaj fermaj etikedoj, kiuj noticias per malpli ol, aŭ pli ol signoj (ankaŭ konataj kiel krokodilbuŝoj). < kaj >. Kio distingas ferman etikedon estas ke ĝi enhavas deklinacian strekon (</ kaj >).
Fermantaj etikedoj
Kelkaj etikedoj ne bezonas fermantan etikedon, sed ne vundas fermi ilin. Ekzemplo estas la etikedo por bildo aŭ liniaĵo.
Hva er en API?
En API (Application Programming Interface) er et grensesnitt som lar to applikasjoner snakke sammen. Tenk på det som en restaurant: Du (en applikasjon) sitter ved et bord og bestiller mat (sender en forespørsel) til kelneren (API-et). Kelneren går til kjøkkenet (serveren) og henter maten til deg.
Hvorfor bruke APIer?
- Gjenbruk av funksjonalitet: APIer lar deg bruke funksjonalitet fra andre applikasjoner uten å måtte skrive koden selv.
- Integrasjon: APIer gjør det mulig å integrere forskjellige applikasjoner og systemer.
- Innovasjon: APIer åpner for nye muligheter og innovasjon ved å kombinere funksjonalitet fra forskjellige kilder.
Kial estas API?
API (Application Programming Interface) estas interfaco kiu permesas al du aplikoj komuniki. Pensu pri ĝi kiel restoracio: Vi (aplikaĵo) sidas ĉe tablo kaj mendas manĝaĵon (sendas peton) al la kelnero (la API). La kelnero iras al la kuirejo (la servilo) kaj alportas la manĝaĵon al vi.
Kial uzi API-ojn?
- Reuzo de funkcieco: API-oj permesas al vi uzi funkciecon de aliaj aplikoj sen devi skribi la kodon mem.
- Integrado: API-oj ebligas la integradon de diversaj aplikoj kaj sistemoj.
- Novigado: API-oj malfermas novajn eblecojn kaj novigadon per la kombino de funkcieco de diversaj fontoj.
<tag>Mi estas ene de etikedeto "tag"</tag>
<annentag><tag>Mi estas ene de etikedeto "tag", ene de etikedeto "annentag".</tag></annentag>
Mi ne estas en iu speciala etikedeto (ne faru tion)
Multaj etikedoj por elekti
Ekzistas multaj etikedoj por elekti - aŭdace, ni ne bezonas koni tiel multajn por krei belan retejon. Jen listo de la etikedoj, kiujn ni bezonas en ĉi tiu tasko:
| Etikedo | Priskribo |
|---|---|
<!DOCTYPE html> | ATENTU, ĉi tiu etikedo staras nur sur la unua linio kaj ne havas finon. Markas, ke la dokumento estas HTML-dokumento (shebang), kiu diras al la navigilo, kiun lingvon ĝi legas. |
<html> | Definas la komencojn de HTML-dokumento |
<head> | Definas areon de kapo, kie la “cerbo” de la retejo estas stokita |
<body> | Definas areon de korpo, kie ni lokigas elementojn, kiuj estos videblaj sur la retejo |
<h1>, <h2> -> <h6> | Titoloj (Titolo 1, Titolo 2…) |
<p> | Paragrafaj (tekstaj blokoj) |
<b> | Grasa teksto |
<i> | Kursiva teksto |
<br> | Nova linio kun teksto (ne havas finan etikedon) |
Lurer du på hvordan du kan …?
Serĉu en la reto tiam!
Serĉante html how to image|add video|cool button aperas multe! Foje povas esti malfacile trovi bonajn ekzemplojn, sed W3Schools ofte havas bonajn ekzemplojn kiujn oni povas testi.
HTML-a fundamento
Ĉiuj HTML-dokumentoj devas havi la saman strukturon - kelkaj navigiloj aŭtomate provas korekti mankojn, sed ne estas certeco ke la retejo funkcios sen ĝi.
<!DOCTYPE html>
<html>
<head>
<!-- Enhavoj kiuj ne estas videblaj iras ĉi tie -->
</head>
<body>
<!-- Enhavoj kiuj estas videblaj iras ĉi tie -->
</body>
</html>
Linjeskift
Se vi kreas alineon kun linioŝanĝoj en HTML, tiam la rezulto ne transiros plurajn liniojn:
<p>
Linje 1
<!-- Dette er en kommentar på norsk --> <!-- Ĉi tio estas komento en la norvega -->
Linje 2
</p>
fariĝas
Linje 1 Linje 2
Liniaĵoj devas manuale markiĝi per la etikedo <br>. Eble oni povas difini novan alineon (paragrafroj havas distancon inter si, ofte pli grandan distancon ol simpla liniaĵŝanĝo) kiel ĉi tie:
<p>
Linje 1
<br>Linje2
</p>
<!-- Same kiel -->
<p>Linje 1<br>Linje 2</p>
<!-- Alternativo (iĝos pli granda distanco kaj teknike estas erara) -->
<p>Linje 1</p>
<p>Linje 2</p>
Tasko 1.1: Testu ĝin
Nun estas via vico provi. Kreu dosieron kun la nomo oppgave1-1.html kaj malfermu ĝin en via preferata disvolva medio, kiel ekzemple Visual Studio Code.
OBS: Husk mappe
La tasko devas esti en dosierujo, kiu sekvas bonan nomkonvencion. Vi prefere devas liveri dosierujon, ne individuajn dosierojn. Ne forgesu inkludi vian nomon en la dosierujonomo.
Kreiu retejon kun la jenaj komponantoj, kaj enmetu ilin je la ĝusta loko kiel en la ekzemplo supre:
<h2>En overskrift til paragraf 1</h2>
<p>Tio estas <i>paragrafo 2</i><p>
<h2>En overskrift til paragraf 2</h2>
<h1>Hello World</h1>
<!-- Hei verden! --> <!-- Saluton mondo! -->
<p><b>Paragraf</b> 1</p>
Emmets - ŝlosilaj vojoj en VSCode (Pli Alta Nivelo)
NOTU. Ĉi tio estos pli alta nivelo.
VSCode, kaj multaj aliaj redaktiloj, havas kelkajn emmets (ŝlosilaj vojoj) kiuj permesas al vi generi kodon pli rapide. Se vi skribas ! kaj premas enteron en malplena HTML-dokumento, la fundamento estos generita por vi.
Tasko 1.2: Testu liniaĵojn
Prenu la jenan HTML-kodon kaj gluu ĝin en novan dosieron tasko1-2.html, kaj enmetu la ĝustan liniaĵon tiel ke ĝi kongruu kun la HTML-kodo:
Notu: Ne forgesu
<!DOCTYPE html>,<html>,<head>kaj<body>!
<h2>Ja vi elsker dette lander</h2>
<p>
Ja vi elsker dette landet
Som det stiger frem
Furet værbitt over vannet
Med de tusen hjem
Elsker Elsker det og tenker
På vår far og mor
Og den saganatt som senker
Drømmer på vår jord
<!-- Jes ni amas ĉi tiun landon -->
<!-- Kiel ĝi leviĝas -->
<!-- Rugita veterumita super la akvo -->
<!-- Kun la mil hejmoj -->
<!-- Amas Amas ĝin kaj pensas -->
<!-- Pri nia patro kaj patrino -->
<!-- Kaj la sago-nokto kiu malleviĝas -->
<!-- Revojn sur nia tero -->
Dette landet harald berget
Med sin kjemperad
Dette landet håkon verget
Medens øyvind kvad
Olav på det land har malet
Korset med sitt blod
Fra dets høye sverre talte
Roma midt imot
</p>