Å bygge et nettsted med HTML, CSS og Javascript

[Zenobia]

AnonymBruker skrev (9 timer siden):

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

Takk for oversikten over flere gratis nettsteder   Og ellers grundig svar. Som sagt, WordPress tillater ikke javascript, og jeg blir på WordPress-stedet inntil videre. Men jeg merker meg alt som blir skrevet her i tråden. Jeg skal lese videre om HTML.

Er HTML, CSS og Javascript tre språk som uttrykker nogenlunde det samme? Med ulike begrensninger og muligheter?

Kanskje jeg med tiden kan lenke til en ekstern side (på en av gratisnettsidene jeg fikk listet opp) der tabellsortering er tillatt ...

[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 måtte visst 'lansere nettsted' for at allmuen skulle se noe annet enn 'Kommer snart'.

Skulle gjerne postet bilder av hva jeg gjør, men eh ... har det noe med PrintScreen å gjøre? Hvordan gjør jeg det?

 

[Zenobia]

<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform:uppercase;margin-top:2px;margin-right:2px;margin-bottom:2px;margin-left:2px">Den intergalaktiske gravitasjonsalliansen</h2>

Det ovenfor er overskriften i HTML. Kan jeg tilføye/blande inn

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

 

bare bytte ut block-buttons med ... ??

 

h2 er overskrift-nivået. Ellers forstår jeg for lite av koden ennå. Men jeg skal lese om boolean attributes og videre, under 'Getting started with HTML på Mozilla Developer Network sine sider nå

[proghodet]

2 minutter siden, Zenobia said:

<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform:uppercase;margin-top:2px;margin-right:2px;margin-bottom:2px;margin-left:2px">Den intergalaktiske gravitasjonsalliansen</h2>

Det ovenfor er overskriften i HTML. Kan jeg tilføye/blande inn

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

 

bare bytte ut block-buttons med ... ??

 

h2 er overskrift-nivået. Ellers forstår jeg for lite av koden ennå. Men jeg skal lese om boolean attributes og videre, under 'Getting started with HTML på Mozilla Developer Network sine sider nå

Nei, du vil ikke blande det inn der Det vil bare påvirke tittelen. Men hvis finner det elementet som omkranser knappene (<div class="wp-container-1 wp-block-buttons alignfull">), så kan du legge til et style-attributt på den, så det blir slik:

<div class="wp-container-1 wp-block-buttons alignfull" style="display: wrap; flex-wrap: wrap;">

Men vet ikke om du har tilgang til å redigere den..
 

[Zenobia]

proghodet skrev (14 minutter siden):

Nei, du vil ikke blande det inn der Det vil bare påvirke tittelen. Men hvis finner det elementet som omkranser knappene (<div class="wp-container-1 wp-block-buttons alignfull">), så kan du legge til et style-attributt på den, så det blir slik:

<div class="wp-container-1 wp-block-buttons alignfull" style="display: wrap; flex-wrap: wrap;">

Men vet ikke om du har tilgang til å redigere den..
 

Jeg har funnet <div class!

Men da jeg trykket på rediger HTML, fikk jeg først en bråta med kode (alle knappene), og så kom en stygg advarsel med "Denne blokken inneholder uventet eller ugyldig innhold. Forsøk gjenoppretting"   Det funket å gjenopprette, men jeg tror jeg roer HTML-redigeringen til jeg har hodet litt mer over kodevannet

Mente du at jeg bør redigere hver knapp enkeltvis? Hva vil resultatet bli? Mindre skrift? Hvis du ser mobilvisning nå, skal knappene se greie ut, stablet oppå hverandre. 

Men overskriften! Jeg trenger å kunne brekke opp overskriften, for nå er den for stor for mobilen. Det var egentlig spørsmålet nå. Beklager om det ble kommunisert uklart.

Endret 19. mai 2022 av Zenobia

[proghodet]

  

1 hour ago, Zenobia said:

Er HTML, CSS og Javascript tre språk som uttrykker nogenlunde det samme? Med ulike begrensninger og muligheter?

De tre språkene utgjør det som kalles "front-end", altså det brukeren ser / interagerer med

HTML: Forteller nettleseren (og skjermlesere for de som har nedsatte funksjonsevner) hva slags type informasjon vi har på nettsiden. Kort fortalt bruker man åpne- og lukketag'er for de fleste elementer, og alle elementer kan ha attributter for å beskrive mer informasjon. <p></p> for paragraph / avsnitt, <button"></button> for knapp, <table> for tabell osv. Eksempel på attributt kan være på bildetag'en hvor src-attributtet beskrives hvilket bilde som skal vises frem:

<img src="et-eller-annet-bilde.jpeg" class="myImage">

 

CSS: Stilark som forteller nettleseren alt det visuelle. Hva slags farge har titler, hvilken font benyttes, hvordan ser knappene ut, hvordan er layouten satt opp, hva slags tekststørrelse har avsnitt? Man kan også lage animasjoner, hover-effekter og mye mer med css. Man bruker primært klassenavn som blir satt i html'en for å endre på stilene. La oss si at vi ønsker å ha runde kanter på bilde-tag'en fra HTML-eksemplet over. Da blir det i css:

.myImage {   border-radius: 15px; }

Punktumet forteller css at vi peker på alle elementer som har en verdi i klasseattributtet som heter myImage.

JavaScript: Den eneste av disse tre som regnes som et fullverdig programmeringsspråk. Det kan brukes til veldig mye,  noen enkle eksempler kan være "hvis noen trykker på denne knappen, så skjer dette", "hvis noen skriver bokstaver inn i et felt for telefonnummer så vises denne feilmeldingen". Det kan også brukes for å hente inn ny data uten at man må laste inn nettsiden på nytt. La oss si at man har en "legg til i handlekurven"-knapp som vi "lytter" til om blir klikket på:

document.querySelector('.add-to-cart').addEventListener('click', () => {   addToCart(); })

Legg merke til at "querySelector" bruker samme klassenavn som css for å finne det riktige elementet.
Vi vet ikke hva addToCart() gjør, men det er ikke så nøye akkurat nå 😁
 

Endret 19. mai 2022 av proghodet

[proghodet]

5 minutter siden, Zenobia said:

Mente du at jeg bør redigere hver knapp enkeltvis? Hva vil resultatet bli? Mindre skrift? Hvis du ser mobilvisning nå, skal knappene se greie ut, stablet oppå hverandre. 

Det ser greit ut nå ja, så vi lar det ligge - whatever works!

6 minutter siden, Zenobia said:

Men overskriften! Jeg trenger å kunne brekke opp overskriften, for nå er den for stor for mobilen. Det var egentlig spørsmålet nå. Beklager om det ble kommunisert uklart.

På h2'en kan du prøve å legge til dette i style-attributtet, og se om det gir glede eller tårer på mobil:

font-size: clamp(1.7rem, 3vw, 3,5rem) !important;

[Zenobia]

Zenobia skrev (32 minutter siden):

<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform:uppercase;margin-top:2px;margin-right:2px;margin-bottom:2px;margin-left:2px">Den intergalaktiske gravitasjonsalliansen</h2>

Her har jeg markert style-attributtet. Teskje-spørsmål: Hvor skal jeg smette inn linja? Rett etter anførselstegnet? Skal noe av koden slettes? Takk på forhånd

 

proghodet skrev (2 minutter siden):

På h2'en kan du prøve å legge til dette i style-attributtet, og se om det gir glede eller tårer på mobil:

font-size: clamp(1.7rem, 3vw, 3,5rem) !important;

 

[proghodet]

1 minutt siden, Zenobia said:

Her har jeg markert style-attributtet. Teskje-spørsmål: Hvor skal jeg smette inn linja? Rett etter anførselstegnet? Skal noe av koden slettes? Takk på forhånd

Noe sånt:
<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform: uppercase; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; font-size: clamp(1.7rem, 3vw, 3,5rem) !important;">

[Zenobia]

proghodet skrev (3 minutter siden):

Noe sånt:
<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform: uppercase; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; font-size: clamp(1.7rem, 3vw, 3,5rem) !important;">

  Nei, den likte ikke det, gitt, og det ble samme melding som istad. Uventet og ugyldig innhold. Da jeg forsøkte å gjenopprette, ble det bare blankt. Men jeg lagret ikke, lukket og alt det gamle er fremdeles der. Men du skal ha for forsøket.

Og takk for at du skrev om HTML, CSS og Java

[proghodet]

1 minutt siden, Zenobia said:

  Nei, den likte ikke det, gitt, og det ble samme melding som istad. Uventet og ugyldig innhold. Da jeg forsøkte å gjenopprette, ble det bare blankt. Men jeg lagret ikke, lukket og alt det gamle er fremdeles der. Men du skal ha for forsøket.

Ett forsøk til! Jeg så at jeg skreiv feil ... den ene skulle vært punktum, ikke komma!

Her er den fikset: (se om du kan spotte hva som er endret fra den forrige 😅)
<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform: uppercase; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; font-size: clamp(1.7rem, 3vw, 3.5rem) !important;">

[proghodet]

5 minutter siden, Zenobia said:

Og takk for at du skrev om HTML, CSS og JavaScript

Bare hyggelig!
 

java er et eget språk som ikke har noe med javascript å gjøre - utrolig forvirrende, jeg vet!

Endret 19. mai 2022 av proghodet

[Zenobia]

proghodet skrev (3 minutter siden):

Ett forsøk til! Jeg så at jeg skreiv feil ... den ene skulle vært punktum, ikke komma!

Her er den fikset: (se om du kan spotte hva som er endret fra den forrige 😅)
<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform: uppercase; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; font-size: clamp(1.7rem, 3vw, 3.5rem) !important;">

3,5 -> 3.5 Fordi vi bruker komma på norsk ...

Jeg prøver igjen ...

[Zenobia]

Nope, samme feilmelding

[proghodet]

Just now, Zenobia said:

Nope, samme feilmelding

Merkelig. Jeg prøvde det i min nettleser og det funka helt fint. Jaja, wordpress.com er visst et eget beist..
Du har med teksten og </h2>-delen?

[Zenobia]

proghodet skrev (Akkurat nå):

Merkelig. Jeg prøvde det i min nettleser og det funka helt fint. Jaja, wordpress.com er visst et eget beist..
Du har med teksten og </h2>-delen?

Nei, jeg erstattet bare HTML som var der med det du skrev. Hadde nok ikke </h2> til slutt, nei ...

Gjør et nytt forsøk ...

Er det noe kode jeg skal la stå igjen fra den originale?

[Zenobia]

Husk at jeg er en noob (trur eg ...)

[proghodet]

1 minutt siden, Zenobia said:

Husk at jeg er en noob (trur eg ...)

Allright - sender hele greia, med titteltekst og lukketag:
<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform: uppercase; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; font-size: clamp(1.7rem, 3vw, 3.5rem) !important;">
  Den intergalaktiske gravitasjonsalliansen
</h2>

Og så krysser jeg fingrene

[Zenobia]

proghodet skrev (6 minutter siden):

Allright - sender hele greia, med titteltekst og lukketag:
<h2 class="alignfull has-text-align-center has-x-large-font-size" style="text-transform: uppercase; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; font-size: clamp(1.7rem, 3vw, 3.5rem) !important;">
  Den intergalaktiske gravitasjonsalliansen
</h2>

Og så krysser jeg fingrene

WordPress nekter. Den gir meg bare feilmelding, og beskjed om å gjenopprette. Forsøkte flere ganger

Altså, jeg slettet den opprinnelige koden, og limte inn det over. Alt <h ... </h>

Endret 19. mai 2022 av Zenobia

[proghodet]

6 minutter siden, Zenobia said:

WordPress nekter. Den gir meg bare feilmelding, og beskjed om å gjenopprette. Forsøkte flere ganger

Veldig rare greier.. Tror faktisk vi får kaste inn håndkleet på den. Måtte kikket med egne øyne for å finne ut av det, tror jeg 😕

Jaja, hva med denne? 😄 https://codepen.io/jarnalyrkar/pen/jOZmpNp

Endret 19. mai 2022 av proghodet