Å bygge et nettsted med HTML, CSS og Javascript

[Zenobia]

Redigert HI:

Jeg har skjønt at det ikke er en blogg jeg trenger, men et nettsted.
Jeg har begynt å lære om HTML, CSS og javascript, til mine formål. (uthevet 16. juni)

Oppdatert 8. juni 2022:

I tillegg til teksten over: Jeg camperer nå på GitHub. https://tronora.github.io

Nettstedet er under konstruksjon, og jeg er mottagelig for hjeeeeelp(!), konstruktiv kritikk og ønsker.

- - -

Også gammel HI

Nå søker jeg gratis nettplass https med færrest mulig begrensninger og størst mulig brukervennlighet. Jeg opererer nå på w3spaces (latterlige begrensninger) og infinityfree (http). Jeg har registrert meg på github, uten at jeg skjønte så mye av det. Codepen skjønner jeg litt mere av. Etter hvert.

 

- - -

Gammel HI:

Jeg har brukt miniblogg.no sine tjenester, men savner flere funksjoner.

Å starte i WordPress føles som å gå fra barnehagen til universitetet.

Konkret spørsmål: Jeg lager en haug med kategorier, men får ikke vist dem i noen slags meny

Ønsker å sortere innleggene mine.

Jeg ønsker også kun å ha en åpningsside som folk kan klikke seg videre fra (derav kategorier ...) Nå kommer overskrifter til innleggene mine etter hverandre nedover, enda jeg har spesifisert at jeg bare skal ha ETT innlegg pr. side.

Er det noen som bruker WordPress her? Som orker å hjelpe meg? Har bare laget testinnlegg for å bli kjent foreløpig. Kun publisert privat.

Er det et annet, gratis blogg-univers du heller vil anbefale? Som tilbyr:

1 hovedside

Kategorier (der man kan trykke seg videre og velge innlegg)

Det må kunne håndtere bilder. Ellers tror jeg dette er det jeg trenger.

Endret 21. juni 2022 av Zenobia
Endret overskrift

[Zenobia]

Jeg har kommet litt videre. Tror at jeg har greid å lage en hovedside. Kategorier i listevisning, derimot ...

• Bilde 0K
• Bakgrunn 0K
• Skriftfarve 0K

Trodde alle testinnleggene mine var borte, før jeg skjønte forskjellen på side og innlegg.

Nå redigerer jeg malen for individuelle innlegg

 

Pause.

 

[Zenobia]

Tror jeg holder meg på WordPress. Nå kom endelig kategorier opp

Det er litt hit & miss, og jeg skjønner ikke alltid hva jeg gjør riktig, meeeen ... det går seg til.

 

 

[Rosa Dartle]

Får du til? Det er denne litt spesielle menyen med undermenyer ja, som gjør det litt tricky i starten  Men godt verktøy egentlig, med mange muligheter 😊

[Zenobia]

Rosa Dartle skrev (3 timer siden):

Får du til? Det er denne litt spesielle menyen med undermenyer ja, som gjør det litt tricky i starten  Men godt verktøy egentlig, med mange muligheter 😊

Tok meg en liten pause, men skal igang igjen nå. Har begynt å tegne for hånd, for å ha en slags kladd – en oppfatning av hvilken layout jeg vil ha på undersidene.

Holder på å tilpasse maler til mitt bruk.

[Zenobia]

Det går sakte, men sikkert fremover. Snust litt på CSS og fant ut at jeg venter med det.

Hjemmesiden er på langt nær ferdig, men tester om jeg kan lenke til den nå:

Integra

Jeg kan lenke knappene til andre sider, også eksterne. Men kan jeg få knappene til å vise et tekstfelt lenger ned på siden? Og at dette tekstfeltet har forskjellig innhold, ut fra hvilken knapp som blir trykket på?

@Rosa Dartle 

 

(Blir litt opptatt frem til kl 19.30)

[Rosa Dartle]

Zenobia skrev (6 timer siden):

Det går sakte, men sikkert fremover. Snust litt på CSS og fant ut at jeg venter med det.

Hjemmesiden er på langt nær ferdig, men tester om jeg kan lenke til den nå:

Integra

Jeg kan lenke knappene til andre sider, også eksterne. Men kan jeg få knappene til å vise et tekstfelt lenger ned på siden? Og at dette tekstfeltet har forskjellig innhold, ut fra hvilken knapp som blir trykket på?

@Rosa Dartle 

 

(Blir litt opptatt frem til kl 19.30)

Hvilke knapper tenker du da på? Post gjerne bilder av det du gjør 😄 Jeg har holdt på med hjemmeside i Wordpress i noen år, men gjør ting på autopilot, tenker ikke helt over hva jeg gjør 😊

Kommer ikke inn på siden din, står at den «kommer snart». Har du trykket på «publiser»?

[AnonymBruker]

Før man for alvor kaster seg ut i WordPress, vil jeg anbefale å ta en kikk på Flatpress, som jeg selv har brukt i mange år:

https://www.flatpress.org

Quote

• Independent, standard-compliant blog software
• Works on files, no database
• Easy to setup, easy to backup
• Powerful plugin system with widget support
• Easy to customize with themes, powered by Smarty
• Comments function with spam protection
• Free software under GNU GPLv2

Det at Flatpress ikke har database, men lagrer alt som tekstfiler, gjør dette svært oversiktlig og enkelt å tilpasse, og backup går som en drøm - et alternativ som er verdt å sjekke ut.

Anonymkode: 84dd2...89f

[proghodet]

Nå vet jeg ikke hvordan du redigerer ting i WP, så det er mulig jeg er helt på bærtur her
 

On 5/15/2022 at 4:07 PM, Zenobia said:

Jeg kan lenke knappene til andre sider, også eksterne. Men kan jeg få knappene til å vise et tekstfelt lenger ned på siden? Og at dette tekstfeltet har forskjellig innhold, ut fra hvilken knapp som blir trykket på?

Hvis du tenker på en enkel intern link, så må tekstfeltet ha et id-attributt:

<h2 id="scroll-hit">Min tittel</h2>

Så setter du den id'en som href-verdi i en anchor-tag:

<a href="#scroll-hit">Klikk her for å scrolle til Min tittel</a>

Merk at ID'er linkes til ved å ha en hashtag foran.

Hvis du vil ha flere knapper som endrer innholdet på ett og samme tekstfelt må du ty til JavaScript. Da kunne f.eks HTML sett slik ut:

<button id="first-button">Se innhold 1</button> <button id="second-button">Se innhold 2</button> <div>   <p id="first-content" style="display: none;"> Lorem ipsum dolor sit amet consectetur. </p>   <p id="second-content" style="display: none;"> Veritatis nostrum maxime numquam non. </p> </div>

Med tilhørende javascript:

document.addEventListener('click', ev => {   if (ev.target.id === 'first-button') {     document.querySelector('#first-content').style.display = "block";     document.querySelector('#second-content').style.display = "none";   }   if (ev.target.id === 'second-button') {     document.querySelector('#second-content').style.display = "block";     document.querySelector('#first-content').style.display = "none";   } })

Du kan se hvordan det funker her: https://codepen.io/jarnalyrkar/pen/ExQZBGv

Hvis ikke det MÅ være samme block som skifter innhold kan du vurdere en trekkspillmeny - da trenger du heller ikke noe JavaScript:

<details>   <summary>Section title 1</summary>   <p>Innhold</p> </details> <details>   <summary>Section title 2</summary>   <p>Innhold 2</p> </details>

Håper dette var nogenlunde svar på det du lurte på!

[Zenobia]

Rosa Dartle skrev (På 15.5.2022 den 23.07):

Hvilke knapper tenker du da på? Post gjerne bilder av det du gjør 😄 Jeg har holdt på med hjemmeside i Wordpress i noen år, men gjør ting på autopilot, tenker ikke helt over hva jeg gjør 😊

Kommer ikke inn på siden din, står at den «kommer snart». Har du trykket på «publiser»?

  Jeg trodde jo det, men ser at jeg kommer til samme side som deg når jeg er utlogget.

Jeg får vel ta mot til meg og 'lansere nettsiden', selv om den på langt nær er ferdig.

- - -

Til ab..89f: Takk for tipset! Jeg sjekket ut Flatpress. Jeg må laste ned noe, og det er skummelt Pluss at meldingen i 'Current development status' ikke innga tillit. Jeg aner ikke hva "FlatPress throws ugly errors when run under the current PHP version 8.1. This is because it uses functions PHP 8.1 marks as deprecated. In order to keep running correctly, FlatPress needs to be reworked." betyr. For de som har mer kunnskap om koding, er det sikkert ganske greit. Jeg trenger noe trygt og konservativt.

- - -

Kjære @proghodet Tusen takk for utfyllende svar og kode. WordPress tillater ikke javascript, så vidt jeg har kunnet lese meg frem til. Dessuten er det (inntil videre ) gresk for meg, dessverre.

 

Kanskje dette kunne vært noe ... Er dette CSS? Jeg skal gå inn på siden nå, og se om jeg forstår hvor jeg skal putte koden.

Hvis du tenker på en enkel intern link, så må tekstfeltet ha et id-attributt:

<h2 id="scroll-hit">Min tittel</h2>

Så setter du den id'en som href-verdi i en anchor-tag:

<a href="#scroll-hit">Klikk her for å scrolle til Min tittel</a>

Merk at ID'er linkes til ved å ha en hashtag foran.

 

[Zenobia]

Sånn står det under 'Avansert':

Lenke-rel

HTML-anker

Oppgi et ord eller to — uten mellomrom — for å lage en unik nettadresse bare for denne overskriften, kalt et “anker.” Så kan du lenke direkte til denne seksjonen på siden.Lær mer om ankere(åpnes i en ny fane)

 

Ekstra CSS-klasse(r)

Adskill flere klasser med mellomrom.

 

Er det her jeg kan lage en enkel intern link?

Jeg skal lære mer om ankere nå ...

- - -

Jupp, nå skjønner jeg mer om ankere. Som en intern URL. Men det var ikke dette jeg var ute etter. Da vil teksten være synlig hele tiden. Jeg ønsker meg en tekst som kommer frem når jeg trykker på knappen. Det er ikke krise at den besøkende blir sendt til en annen side, så foreløpig får jeg løse det sånn.

Jeg var inne på den codepen-siden @proghodet, og skjønte ingenting   Turte ikke trykke på noe.

En trekkspillmeny er muligens løsningen! Skal lete i WordPress ... 

Det er blokk-redigering. Jeg vet ikke om noe annet.

- - -

Ju-huu! Det er trekkspillmeny jeg leter etter! (Her er hjelpesiden:Collapsible content)
Det er avansert HTML.

Collapsible Content (accordion effect)

Setting up an accordion element requires the script tag, which isn’t allowed at WordPress.com. Instead, the <details> element can be used, though note that it currently isn’t supported on the Edge browser.

Here’s an example of how to use the <details> element:

1 2 3 4 5 6 7 8

<details>   <summary>What can you use WordPress.com for?</summary>     <ul>      <li>To blog!</li>      <li>To showcase my professional work.</li>      <li>To create an online presence for my business.</li>    </ul> </details>

The ul and li tags are not required for accordion styles to work. In this example, they are used to create a list within the accordion.

And here’s what the above will look like:

What can you use WordPress.com for?

Men hvor skriver jeg denne koden da???  

*studerer videre*

- - -

0K, fant ut hvor (under avansert). Jepp, rediger som HTML. Det kom masse kode da jeg trykket på den, gitt. Lukket siden uten å lagre. Alt har gått bra, men nå tar jeg kvelden. HTML har jeg aldri gjort. Har sett vis koder i WordPerfect.

Ny dag i mårå!

Endret 18. mai 2022 av Zenobia

[AnonymBruker]

35 minutter siden, Zenobia said:

- - -

Til ab..89f: Takk for tipset! Jeg sjekket ut Flatpress. Jeg må laste ned noe, og det er skummelt Pluss at meldingen i 'Current development status' ikke innga tillit. Jeg aner ikke hva "FlatPress throws ugly errors when run under the current PHP version 8.1. This is because it uses functions PHP 8.1 marks as deprecated. In order to keep running correctly, FlatPress needs to be reworked." betyr. For de som har mer kunnskap om koding, er det sikkert ganske greit. Jeg trenger noe trygt og konservativt.

- - -

Flott at du sjekket ut tipset mitt, og jeg kan berolige deg med at Flatpress ikke er en glupsk vampyr som spiser opp brukerne sine til middag; har brukt Flatpress siden 2012/13, og jeg er fremdeles i live.

Grunnen til at man må laste ned noe, er at man først laster ned hele intallasjonen til sin egen lokale maskin og pakker den ut, for å så laste den opp på egen server. Dersom man ønsker å leie server hos andre, kan dette koste litt, men man kan også få det gratis; mulighetene er mange. Poenget er at når man har tilgang til serveren der hele bloggen er, har man full kontroll, kan laste ned alt som sikkerhetskopi når som helst, eller endre hva man vil; for min del har jeg for eksempel oversatt bloggen min til norsk; grunnen til at det ikke er noen bilder der, men bare tekst, er gjort med vilje for at ei jente jeg kjenner som ikke kan se, skal kunne få nøyaktig den samme informasjonen som vi som har synet i orden - på vanlige sider finner man mye som er helt utilgjengelig for mennesker med nedsatt syn. Men dette er bare mitt eget valg uten sammenheng med Flatpress for øvrig.

Så over til den andre tingen du spurte om - innrømmer at dette lyder illevarslende, men løsningen på mysteriet er enkelt nok; kort fortalt kjører Flatpress på noe som heter PHP (programvaren som ligger på serveren og behandler koden i Flatpress), og versjonen av PHP som støttes nå, er mellom 5.6 og 8.0. Dette virker utmerket; selv kjører serveren der jeg har siden min hos Domeneshop PHP 7.4.

Meldingen du leste, handler derfor bare om en utviklerversjon av Flatpress som man jobber med for nyere versjoner av PHP, og denne 8.1-versjonen tolker tydeligvis enkelte funksjoner i Flatpress som utgåtte, slik at disse må tilpasses etter hvert. Men dette har ingen sammenheng med dagens situasjon; dagens utgave av Flatpress virker uten problemer.

Dette er riktignok et mindre prosjekt enn det mer kjente WordPress, men nettopp fordi det er mindre, er det også mindre utsatt for slemme hackere som leter etter sikkerhetshull i programvaren og utnytter dem, noe som skjer med større aktører.

Dessuten er prosjektet preget av idealisme uten fokus på lommeboken, noe jeg som Linux-bruker setter stor pris på - opprinnelig ble Flatpress startet i Italia i 2006, men etter en årrekke ble PHP oppgradert til en versjon som ikke lenger støttet Flatpress, og ettersom de opprinnelige initiativtakerne hadde andre ting å tenke på, så det ut som om Flatpress skulle avgå ved døden. Da kom en hyggelig tysker ved navn Arvid inn i bildet i 2018, og tok på seg videreføringen av prosjektet, som idag lever i beste velgående - etter 16 års utvikling og bruk, håper jeg at dette kvalifiserer til betegnelsen "trygt", for det er det definitivt.

Ellers fungerer Flatpress som andre blogger med utgangspunkt i vanlig HTML; alt som kan gjøres i Wordpress, kan også gjøres i Flatpress; den store fordelen er at man slipper å måtte rote med SQL og databaser, samt at man er mindre utsatt for hacking. Forstår deg godt hvis du kanskje føler deg litt usikker på ukjente ting, men å lære data handler om å prøve seg frem, og jeg da jeg i sin tid ville starte opp en blogg, vurderte jeg flere alternativer, forsøkte Flatpress - og siden har jeg ikke snudd meg tilbake; enkelt, sikkert og fleksibelt - hva mer kan man ønske seg ...?

Så lykke til videre med bloggen, og skulle du en dag få lyst til å prøve deg på Flatpress, er det bare å se hvordan dette virker; som tidligere nevnt har jeg brukt Flatpress i snart ti år, og jeg lever fortsatt.

Anonymkode: 84dd2...89f

[Zenobia]

AnonymBruker skrev (5 minutter siden):

Flott at du sjekket ut tipset mitt, og jeg kan berolige deg med at Flatpress ikke er en glupsk vampyr som spiser opp brukerne sine til middag; har brukt Flatpress siden 2012/13, og jeg er fremdeles i live.

  Så litt på bloggen din – pent   Jeg skylder deg et svar i tangent-tråden, men jeg venter til jeg kan gi deg et ordentlig et. Døgnet har et begrenset antall timer, og nå er det manus- og bloggfokus. Takk for at du gir et utfyllende og beroligende svar om Flatpress. Kan godt hende jeg ser nærmere på dette senere, da WordPress absolutt ikke tilbyr sorterbare tabeller. Med en armada av romskip å holde orden på for lesere/lyttere, er det en begrensning jeg ikke liker. Hvis Flatpress kan tilby en løsning på dette, hadde det i aller høyeste grad vært interessant.

Men! Jeg liker ikke det med nedlasting/opplasting. Jeg eier ingen egen server eller eget domene, og jeg fant ikke noen gratisversjon av nettsted på Flatpress. Tar jeg feil? WordPress tilbyr meg en gratisversjon (dog uten tilpasset URL).

Du nevner Linux. Akkja. Alt man ønsker å finne tid til ...

Jeg skal lese om HTML nå.

[proghodet]

11 hours ago, Zenobia said:

Jeg var inne på den codepen-siden @proghodet, og skjønte ingenting   Turte ikke trykke på noe.

Bare for å gjøre det enda verre hadde jeg klart å lagre feil versjon.. Den riktige ligger der nå, med knapper hvor det står "trykk her", som skal gjøre det mer åpenbart 😅 Men det er jo uansett ikke relevant siden script-tag'en blir fjernet

Men nå har jeg forstått hvilken plattform du bruker! Jeg trodde du hadde en wordpress-site hostet på egen server, men du benytter wordpress.com sin gratisløsning Den har en del begrensninger ja, så da må man ty til HTML og CSS-løsninger, og selvfølgelig det de allerede tilbyr av ferdige løsninger (blokkredigering). Jeg har lite erfaring med wordpress.com, og lager stort sett maler helt fra bunn.

Vet ikke om du har sjekket sida på mobil, men knappene i bunn legger seg vertikalt:


Og dermed ønsker jeg deg velkommen til det vi kaller "responsivt design"! 🥳 Altså at ting skal helst se fint ut på alle flater (mobil, tablet, desktop, 70 tommer'n i stua..)

Jeg vet en måte du kan løse det på men siden wordpress.com er litt begrensende, så vet jeg ikke om det funker? Vi prøver: Finn Appearance i navigasjonen til venstre inni wordpress, og velg Customize. Velg CSS, og legg inn følgende snutt:

.wp-block-buttons {   display: flex;   flex-wrap: wrap; }

Så kan du gjøre nettleservinduet mindre og se om det ser bedre ut.

Apropos antall timer i døgnet, så er utvikling av nettsider et vepsebol 🤓

Endret 19. mai 2022 av proghodet

[AnonymBruker]

11 hours ago, Zenobia said:

  Så litt på bloggen din – pent   Jeg skylder deg et svar i tangent-tråden, men jeg venter til jeg kan gi deg et ordentlig et. Døgnet har et begrenset antall timer, og nå er det manus- og bloggfokus. Takk for at du gir et utfyllende og beroligende svar om Flatpress. Kan godt hende jeg ser nærmere på dette senere, da WordPress absolutt ikke tilbyr sorterbare tabeller. Med en armada av romskip å holde orden på for lesere/lyttere, er det en begrensning jeg ikke liker. Hvis Flatpress kan tilby en løsning på dette, hadde det i aller høyeste grad vært interessant.

Men! Jeg liker ikke det med nedlasting/opplasting. Jeg eier ingen egen server eller eget domene, og jeg fant ikke noen gratisversjon av nettsted på Flatpress. Tar jeg feil? WordPress tilbyr meg en gratisversjon (dog uten tilpasset URL).

Du nevner Linux. Akkja. Alt man ønsker å finne tid til ...

Jeg skal lese om HTML nå.

Ingen grunn til hastverk, og jeg har full forståelse for at døgnet bare har 24 timer - et antall som burde økt betraktelig for oss som bruker Linux.

Har ikke testet om Flatpress støtter sortering av tabeller, men oppsettet har en plugin ved navn jquery, og det virker som om dette enkelt kan gjøres ved å endre litt kode; her er et eksempel fra https://legacy-documentation.concrete5.org/tutorials/sort-an-html-table-using-jquery/

jQuery to Sort the Table

The jQuery to do the sort is attached to the click event for the button.

<script type="text/javascript">
$(document).ready(function(){

  $('#sort_now').click(function(ev){

    // a simple compare function, used by the sort below
    var compare_rows = function (a,b){
      var a_val = $(a).text().toLowerCase();
      var b_val = $(b).text().toLowerCase();
      if (a_val>b_val){
        return 1;
      }
      if (a_val<b_val){
        return -1;
      }
      return 0;
    };

    // the actual sort
    $('#sortable_table .sortable_row').sort(compare_rows).appendTo('#sortable_table');

  });
});
</script>

The important line is towards the bottom of the code. This gets all the applicable rows as an array of jQuery objects, applies the regular javascript sort to them, then appends the sorted array of rows back to the table they came from. In the process, the appendTo method actually moves the rows from where they were originally, so we are left with a sorted table.

Inside the sort, compare_rows is a sort function similar to that used by sorting in most programming languages. Its job is to compare a and b, returning 1,0,-1 depending on which is greater. Here just the lowercase text for the name is used. But it could just as easily take the value of a form element, or use multiple values from a row to give greater discretion.

http://www.concrete5.org/files/3313/2068/5415/sort_rows2.png

- - - - -

Nei, Flatpress tilbyr ingen webhosting på siden sin slik Wordpress gjør det, men det er enkelt å finne gratis webhosting andre steder; her er en tilfeldig oversikt: https://themeisle.com/blog/best-free-website-hosting/

Den store fordelen ved å ha tilgang til serveren der man har filene, er at man har full kontroll og kan endre kode etc. slik man ønsker; denne fleksibiliteten har man ikke har når man er på en ferdig oppsatt side.

Ellers kan et annet alternativ være å ha et eget domene og betale for dette; selv betaler jeg litt over kr.400 i året for hosting hos Domeneshop, der jeg har 5 GB lagring for websiden(e) min(e), utmerket service om man skulle ha noe å spørre om, e-postkontoer frie for reklame som er langt mer praktiske å bruke enn Hotmail, Gmail etc. som samler inn informasjon om brukerne, et ubegrenset antall e-postadresser (har derfor e-post som post[at]dracula.no), og domenefornyelse koster litt over kr.100 årlig - en beskjeden utgift sammenlignet med friheten og nytteverdien dette gir, så dette er noe som absolutt anbefales å vurdere hvis man ønsker å satse litt mer seriøst.

Uansett lykke til videre; er kreativiteten stor nok, er det bare fantasien som setter grensene ...!

1 hour ago, proghodet said:

Bare for å gjøre det enda verre hadde jeg klart å lagre feil versjon.. Den riktige ligger der nå, med knapper hvor det står "trykk her", som skal gjøre det mer åpenbart 😅 Men det er jo uansett ikke relevant siden script-tag'en blir fjernet

Men nå har jeg forstått hvilken plattform du bruker! Jeg trodde du hadde en wordpress-site hostet på egen server, men du benytter wordpress.com sin gratisløsning Den har en del begrensninger ja, så da må man ty til HTML og CSS-løsninger, og selvfølgelig det de allerede tilbyr av ferdige løsninger (blokkredigering). Jeg har lite erfaring med wordpress.com, og lager stort sett maler helt fra bunn.

Vet ikke om du har sjekket sida på mobil, men knappene i bunn legger seg vertikalt:


Og dermed ønsker jeg deg velkommen til det vi kaller "responsivt design"! 🥳 Altså at ting skal helst se fint ut på alle flater (mobil, tablet, desktop, 70 tommer'n i stua..)

Jeg vet en måte du kan løse det på men siden wordpress.com er litt begrensende, så vet jeg ikke om det funker? Vi prøver: Finn Appearance i navigasjonen til venstre inni wordpress, og velg Customize. Velg CSS, og legg inn følgende snutt:

.wp-block-buttons {   display: flex;   flex-wrap: wrap; }

Så kan du gjøre nettleservinduet mindre og se om det ser bedre ut.

Apropos antall timer i døgnet, så er utvikling av nettsider et vepsebol 🤓

Ja, slik det er nå, flytter bokstavene seg i forhold til skjermstørrelsen; slik ser det ut hos meg med større skrift:

Anonymkode: 84dd2...89f

[AnonymBruker]

6 minutter siden, AnonymBruker said:

Ingen grunn til hastverk, og jeg har full forståelse for at døgnet bare har 24 timer - et antall som burde økt betraktelig for oss som bruker Linux.

Har ikke testet om Flatpress støtter sortering av tabeller, men oppsettet har en plugin ved navn jquery, og det virker som om dette enkelt kan gjøres ved å endre litt kode; her er et eksempel fra https://legacy-documentation.concrete5.org/tutorials/sort-an-html-table-using-jquery/

jQuery to Sort the Table

The jQuery to do the sort is attached to the click event for the button.

<script type="text/javascript">
$(document).ready(function(){

  $('#sort_now').click(function(ev){

    // a simple compare function, used by the sort below
    var compare_rows = function (a,b){
      var a_val = $(a).text().toLowerCase();
      var b_val = $(b).text().toLowerCase();
      if (a_val>b_val){
        return 1;
      }
      if (a_val<b_val){
        return -1;
      }
      return 0;
    };

    // the actual sort
    $('#sortable_table .sortable_row').sort(compare_rows).appendTo('#sortable_table');

  });
});
</script>

The important line is towards the bottom of the code. This gets all the applicable rows as an array of jQuery objects, applies the regular javascript sort to them, then appends the sorted array of rows back to the table they came from. In the process, the appendTo method actually moves the rows from where they were originally, so we are left with a sorted table.

Inside the sort, compare_rows is a sort function similar to that used by sorting in most programming languages. Its job is to compare a and b, returning 1,0,-1 depending on which is greater. Here just the lowercase text for the name is used. But it could just as easily take the value of a form element, or use multiple values from a row to give greater discretion.

http://www.concrete5.org/files/3313/2068/5415/sort_rows2.png

- - - - -

Nei, Flatpress tilbyr ingen webhosting på siden sin slik Wordpress gjør det, men det er enkelt å finne gratis webhosting andre steder; her er en tilfeldig oversikt: https://themeisle.com/blog/best-free-website-hosting/

Den store fordelen ved å ha tilgang til serveren der man har filene, er at man har full kontroll og kan endre kode etc. slik man ønsker; denne fleksibiliteten har man ikke har når man er på en ferdig oppsatt side.

Ellers kan et annet alternativ være å ha et eget domene og betale for dette; selv betaler jeg litt over kr.400 i året for hosting hos Domeneshop, der jeg har 5 GB lagring for websiden(e) min(e), utmerket service om man skulle ha noe å spørre om, e-postkontoer frie for reklame som er langt mer praktiske å bruke enn Hotmail, Gmail etc. som samler inn informasjon om brukerne, et ubegrenset antall e-postadresser (har derfor e-post som post[at]dracula.no), og domenefornyelse koster litt over kr.100 årlig - en beskjeden utgift sammenlignet med friheten og nytteverdien dette gir, så dette er noe som absolutt anbefales å vurdere hvis man ønsker å satse litt mer seriøst.

Uansett lykke til videre; er kreativiteten stor nok, er det bare fantasien som setter grensene ...!

Ja, slik det er nå, flytter bokstavene seg i forhold til skjermstørrelsen; slik ser det ut hos meg med større skrift:

Anonymkode: 84dd2...89f

Her er for øvrig en annen kode for sortering av lister uten jquery fra https://www.w3schools.com/howto/howto_js_sort_table.asp, så det burde ikke være så vanskelig å få implementert dette i websiden:

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // Check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // If so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Anonymkode: 84dd2...89f

[proghodet]

1 hour ago, AnonymBruker said:

Her er for øvrig en annen kode for sortering av lister uten jquery fra https://www.w3schools.com/howto/howto_js_sort_table.asp, så det burde ikke være så vanskelig å få implementert dette i websiden:

Anonymkode: 84dd2...89f

På wordpress.com fjerner de alt av script-tag'er som blir lagt inn. For å få inn javascript må TS isåfall kjøpe serverplass og full pakke

Quote

For Security reasons, WordPress.com won’t allow adding embed code. This restriction put in place for malicious code which can disrupt any services.

https://wordpress.com/forums/topic/adding-javascript-to-posts-on-wordpress-com/

 

Endret 19. mai 2022 av proghodet

[AnonymBruker]

1 hour ago, proghodet said:

På wordpress.com fjerner de alt av script-tag'er som blir lagt inn. For å få inn javascript må TS isåfall kjøpe serverplass og full pakke

 

Takk for informasjonen.

Da er dette i mine øyne en god grunn til å ta i bruk egen server; når man først bruker tid og krefter på å lage en webside, må det føles en smule meningsløst å måtte forholde seg til regler som dette.

Anonymkode: 84dd2...89f

[proghodet]

1 minutt siden, AnonymBruker said:

Takk for informasjonen.

Da er dette i mine øyne en god grunn til å ta i bruk egen server; når man først bruker tid og krefter på å lage en webside, må det føles en smule meningsløst å måtte forholde seg til regler som dette.

Anonymkode: 84dd2...89f

Som utvikler er jeg selvsagt enig, men det er ikke alltid man har tid til å sette seg inn i alt det innebærer 🙂

[Zenobia]

proghodet skrev (11 timer siden):

Bare for å gjøre det enda verre hadde jeg klart å lagre feil versjon.. Den riktige ligger der nå, med knapper hvor det står "trykk her", som skal gjøre det mer åpenbart 😅 Men det er jo uansett ikke relevant siden script-tag'en blir fjernet

Men nå har jeg forstått hvilken plattform du bruker! Jeg trodde du hadde en wordpress-site hostet på egen server, men du benytter wordpress.com sin gratisløsning Den har en del begrensninger ja, så da må man ty til HTML og CSS-løsninger, og selvfølgelig det de allerede tilbyr av ferdige løsninger (blokkredigering). Jeg har lite erfaring med wordpress.com, og lager stort sett maler helt fra bunn.

Vet ikke om du har sjekket sida på mobil, men knappene i bunn legger seg vertikalt:


Og dermed ønsker jeg deg velkommen til det vi kaller "responsivt design"! 🥳 Altså at ting skal helst se fint ut på alle flater (mobil, tablet, desktop, 70 tommer'n i stua..)

Jeg vet en måte du kan løse det på men siden wordpress.com er litt begrensende, så vet jeg ikke om det funker? Vi prøver: Finn Appearance i navigasjonen til venstre inni wordpress, og velg Customize. Velg CSS, og legg inn følgende snutt:

.wp-block-buttons {   display: flex;   flex-wrap: wrap; }

Så kan du gjøre nettleservinduet mindre og se om det ser bedre ut.

Apropos antall timer i døgnet, så er utvikling av nettsider et vepsebol 🤓

1) DA skjønte jeg mere av codepen-greia Nå har jeg trykket på knappene, og det var akkurat sånn jeg mente. Men akk, WordPress tillater visst ikke sånt.

(2) Du nevnte trekkspillmeny tidligere. Det kan være mulig i WordPress, så nå leser jeg om HTML for å skjønne mere.)

3) Jeg trooor jeg har forbedret mobil- og nettbrett-utseendet ved rett og slett å tillate knappene å legge seg under hverandre. Har ikke løst overskriften. Det er mulig jeg ikke la inn CSS-snutten på riktig plass, for det skjedde ikke noe (i blokken). Der du henviste til (under customize/tilpass på norsk), fikk jeg valget Ekstra CSS: Oppgrader nå. Så det er bare tilgjengelig i Pro-versjonen.

EGENTLIG kunne jeg tenke meg å bare skrive at nettstedet bare bør besøkes pr datamaskin. Responsivt design?

Jeg skal lese mere om hvordan overskrifter fungerer i WordPress senere, men nå fortsetter jeg på HTML. Vet allerede hva <a> href er  

Det kommer flere svar ...