Gå til innhold
Vil du være med på bakrommet?

Å bygge et nettsted med HTML, CSS og Javascript

Zenobia

Av Zenobia
i Data, spill og teknologi

 Del

Anbefalte innlegg

Zenobia A-Kjendis

Zenobia

Skrevet
  • Forfatter
Skrevet
proghodet skrev (4 minutter siden):

Ja, akkurat det kan du løse med JavaScript. Du kan sette på target="_blank" som default på anchor-tag'ene dine, og så kan du sjekke hva skjermstørrelsen er. Hvis den f.eks er under 768px, så fjerner du target-attributtet:

if (window.innerWidth < 768) {

  let links = document.querySelectorAll('a')

  links.forEach(link => {

    link.removeAttribute('target')

  })

}

Imponert! :kul:

 

Lenke til kommentar
Del på andre sider

Fortsetter under...

Annonsørinnhold
Freshe sneakers: Dette er skoene som gjelder nå
Freshe sneakers: Dette er skoene som gjelder nå
Annonsørinnhold
Treningsnyheter som booster motivasjonen
Treningsnyheter som booster motivasjonen
Annonse Tights.no
SLÅ TIL: Opptil 70 % på treningstøy nå
SLÅ TIL: Opptil 70 % på treningstøy nå
Zenobia A-Kjendis

Zenobia

Skrevet
  • Forfatter
Skrevet
AnonymBruker skrev (På 19.5.2022 den 11.48):

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/

Hei igjen, ab89f. Da fikk jeg bruk for denne lenken. Jeg kan melde at jeg nå har opprettet en konto på InfinityFree. Det blir å lage alt fra bunnen av.

Skal bare finne ut hvordan jeg oppretter den index.html-fila ...

Tja, @proghodet Da ser du utviklingen :fnise:  Skal lese videre om CSS på w3schools også. Og se hva jeg klarer å praktisere.

 

  • Liker 1
Lenke til kommentar
Del på andre sider
Zenobia A-Kjendis

Zenobia

Skrevet
  • Forfatter
Skrevet
proghodet skrev (24 minutter siden):

Ikke for å tute i egen trompet, men

https://progging.no/leksjoner/html/nybegynner/kom-i-gang/

Flott!! Så bare åpningssiden. Leser videre nå ...

Får jeg til å kombinere dette med en .css også? Jeg tenkte ellers å kombinere HTML og CSS på codepen. Men så var det det med hvor jeg legger inn hva i headeren??

Jeg leser om CSS nå, og MANGE lys har gått opp for meg.

Jeg har greid å lage min første nettside på infinity free sin løsning, men siden den er http og ikke https, valgte jeg å slette den igjen. Pro-tilbudet har automatisk SSL-greier; gratis-tilbudet betyr at jeg må klikke på noen SSL-greier – gratis det også – men, nå er hodet CSS-skrudd, så jeg venter til over helgen.

Mer kommer :hallo:

Lenke til kommentar
Del på andre sider

Annonse

proghodet Ivrig skribent

proghodet

Skrevet
Skrevet
5 hours ago, Zenobia said:

Får jeg til å kombinere dette med en .css også?

Naturligvis! Du må ha en link-tag i head'en:

<head>

  ...

  <link rel="stylesheet" href="./style.css">

</head>

  • Nyttig 1
Lenke til kommentar
Del på andre sider
AnonymBruker Anonym bruker

AnonymBruker

Skrevet
Skrevet
14 hours ago, Zenobia said:

Leker meg med notisblokk og nettleser :ler:

Oisann, klokka er jo ... eh litt over halv tre. Skal ikkje sova bort sumarnatta, men hodet ...
 

Kom til bilder. Starter igjen i morgen ettermiddag!

:natti:

I stedet for å ta alt fra begynnelsen av, kunne man kanskje lage en mal som man kan bruke som mønster for andre HTML-sider - det gjorde i alle fall jeg; her er et enkelt mønster for en side i gamle HTML4:

Quote 

<!DOCTYPE "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no">
  <title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="">
<link rel="stylesheet" type="text/css" href="" />

<script src="" type="text/javascript"></script>

</head>

<body background="" background-attachment="fixed" link="" vlink="" alink="">

</body>

</html>

Ellers har jeg tatt en titt på HTML-koden i Wordpress-siden din, og der er det etter min mening svært mye unødvendig som man kan klare seg uten; det enkleste hadde muligens vært å bruke et verktøy som Inspector i Firefox, se hvordan koden er for de enkelte elementene som vises på siden din, og inkludere det i body i mønsteret jeg har beskrevet ovenfor, med korrekte lenker .til elementene

Må dessverre løpe nå; ha en fortsatt fin ettermiddag/kvald.

- Brian smil.gif.45fa3f1698eef436c072a65cfd081302.gif

Anonymkode: 84dd2...89f

  • Liker 1
Lenke til kommentar
Del på andre sider
proghodet Ivrig skribent

proghodet

Skrevet
Skrevet
56 minutter siden, Optimo said:

Tut tut!

Fin side! Jeg prøver å lære meg Javascript for tiden, og er litt oppgitt over alle engelskspråklige tutorials der ute. Det du har skrevet virker veldig bra, jeg skal bruke litt tid på det. :) 

Oj, takk! Jeg er kjempehappy hvis det kan være til nytte for noen! 😄

  • Liker 1
Lenke til kommentar
Del på andre sider
proghodet Ivrig skribent

proghodet

Skrevet
Skrevet (endret)
3 hours ago, AnonymBruker said:

der er det etter min mening svært mye unødvendig som man kan klare seg uten

Litt av utfordringen med wordpress.org er at man ikke har tilgang på malfilene, man jobber bare direkte i et wysiwyg-felt.

Ikke dumt å ha en mal! En HTML5-variant kan se noe sånt ut:

Quote

<html lang="nb">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Min Nettside</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- Masse HTML her -->
</body>
</html>

Jeg hoppet litt bukk over en del meta-tags, men det er jo litt etter behov. Noen av dem brukes heller ikke lenger, slik som keywords

Endret av proghodet
  • Nyttig 1
Lenke til kommentar
Del på andre sider
Zenobia A-Kjendis

Zenobia

Skrevet
  • Forfatter
Skrevet

Jeg har vært ganske frustrert fordi .css-fila ikke så ut til å kommunisere med html-dokumentene mine.

Feil nr. 1: Jeg kalte den styles.css istedenfor style.css :bond:

Feil nr. 2: Jeg glemte et anførselstegn foran foran href-referansen. :raven:

Det var mange flere også. Prøvde jo å skrive koden selv, istedenfor å klippe og lime, for å få tak på syntaksen. Det har sine frustrasjonsomkostninger.

ENDELIG fant jeg de siste feilene.

Nå har jeg begynt å snuse på Javascript ... (fordi det var et tips i w3schools-opplegget.) Men fortsetter med proggingen en stund, også. Ting henger mere sammen nå!

Tips til @proghodet: Da jeg ble presentert for src, ble jeg veldig nysgjerrig på hva bokstavene stod for. Enkelt: source. Hvis du vil være snill, kan du innlemme det i teksten din. Det var jo selvsagt panneklaskende innlysende da jeg fant forklaringen, men ikke før.

Lenke til kommentar
Del på andre sider

Annonse

proghodet Ivrig skribent

proghodet

Skrevet
Skrevet
10 minutter siden, Zenobia said:

Jeg har vært ganske frustrert fordi .css-fila ikke så ut til å kommunisere med html-dokumentene mine.

Feil nr. 1: Jeg kalte den styles.css istedenfor style.css :bond:

Feil nr. 2: Jeg glemte et anførselstegn foran foran href-referansen. :raven:

Dette er veldig vanlige feil i starten. 🤭

Quote

Det var mange flere også. Prøvde jo å skrive koden selv, istedenfor å klippe og lime, for å få tak på syntaksen. Det har sine frustrasjonsomkostninger.

Det er sånn man lærer best, men kjenner godt igjen frustrasjonen når ting ikke funker!
 

Quote

Tips til @proghodet: Da jeg ble presentert for src, ble jeg veldig nysgjerrig på hva bokstavene stod for. Enkelt: source. Hvis du vil være snill, kan du innlemme det i teksten din. Det var jo selvsagt panneklaskende innlysende da jeg fant forklaringen, men ikke før.

Mange takk for tipset! Har fikset nu :)

  • Liker 1
Lenke til kommentar
Del på andre sider
Zenobia A-Kjendis

Zenobia

Skrevet
  • Forfatter
Skrevet
AnonymBruker skrev (6 timer siden):

I stedet for å ta alt fra begynnelsen av, kunne man kanskje lage en mal som man kan bruke som mønster for andre HTML-sider

Siden jeg er igang med å lære HTML, vil jeg gjerne forstå hva jeg gjør. Derfor vil jeg unngå å kopiere kode. Nå veksler jeg mellom w3school-opplegget, progging.no og notisblokk/nettleser.

proghodet skrev (3 timer siden):

Ikke dumt å ha en mal! En HTML5-variant kan se noe sånt ut:

Det kan hende jeg må krype til korset etter hvert, men foreløpig vil jeg 'gjøre selv' :fnise:  Denne tråden inneholder etter hvert mange verdifulle kodesnutter, og det tas vare på. Jeg vil forholde meg til HTML5, siden jeg allikevel er ny i faget.

De derre meta-verdiene skjønte jeg ingenting lite av, bortsett fra den med UTF-8.

Jeg tar det litt etter litt. Spise en elefant, osv.

Spørsmål: Hvorfor funker denne css-en på codepen, men ikke når jeg limer den inn i mitt .css?? Har det noe med en scss forprosessor å gjøre?

 background: linear-gradient(to bottom,
    #1f2527,
    darken(#1f2527, 15%)
  );

Lenke til kommentar
Del på andre sider
proghodet Ivrig skribent

proghodet

Skrevet
Skrevet
17 minutter siden, Zenobia said:

Spørsmål: Hvorfor funker denne css-en på codepen, men ikke når jeg limer den inn i mitt .css?? Har det noe med en scss forprosessor å gjøre?

 background: linear-gradient(to bottom,
    #1f2527,
    darken(#1f2527, 15%)
  );

Yes, darken() er en scss-funksjon.

Kan anbefale dette verktøyet for å lage gradients som du kan copy-paste inn i css'en din: https://cssgradient.io/

  • Nyttig 1
Lenke til kommentar
Del på andre sider

Prisjakt

Prisjakt
Annonse

[1] Category widget

Zenobia A-Kjendis

Zenobia

Skrevet
  • Forfatter
Skrevet
proghodet skrev (23 minutter siden):

Yes, darken() er en scss-funksjon.

Kan anbefale dette verktøyet for å lage gradients som du kan copy-paste inn i css'en din: https://cssgradient.io/

Artig! Prøvde det. Hvordan får jeg scss på mitt nettsted?

 

Lenke til kommentar
Del på andre sider
proghodet Ivrig skribent

proghodet

Skrevet
Skrevet
5 hours ago, Zenobia said:

Artig! Prøvde det. Hvordan får jeg scss på mitt nettsted?

Anbefaler å vente med denslags. Det er veldig nyttig, men kompliserer ting.

Kort fortalt:

Du må installere Node.js og NPM, og deretter installere programmer via kommandolinja.

Når alt er installert må du kjøre et program i kommandolinja som følger med på filene dine mens du skriver SCSS, og gjør det om til CSS som nettleseren din forstår.

Hvis du insisterer kan du følge prosessen her: https://youtube.com/watch?v=o4cECvhrBo8&t=654

  • Nyttig 1
Lenke til kommentar
Del på andre sider
AnonymBruker Anonym bruker

AnonymBruker

Skrevet
Skrevet
On 5/18/2022 at 11:49 PM, AnonymBruker said:

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 ...?

Oi. Greit å promotere alternativ programvare, og selv en løgn eller uvitenhet fra tid til annen er grei.

Men dette er ikke OK. Å påstå at obksur programvare har høyere sikkerhet kun fordi det er mindre brukt, er helt bak mål.

På jobb koder jeg nå et nytt innloggingssystem ifm. et program. Med andre ord, ingen har brukt det før. Er det dermed sikkert? Overhodet ikke!! Dette er tullete tankegang, og ikke reellt.

WPs kode har ligget ute for alle å finkjemme i lang tid, og det er det tusenvis av sikkerhetsfolk, kodere og andre som har studert opp og ned. Dette medfører at veldig mange ("alle"?) sårbarheter er avdekket og rettet for lenge siden. Slik effekt får ikke et repo som er klonet 100 ganger.

Videre må jeg bare kommentere dette med å hause opp flat-fil-lagring. Det er en grunn til at vi benytter SQL og andre databaser; hovedsakelig effektivitet. Flate filer er vesentlig tregere, og selvsagt ikke en fordel. Backup av SQL gjøres med ett knappetrykk i WP, ev. kan det svært enkelt gjøres med sqldump for den som liker å gjøre det litt mer "avansert".

Å benytte en sær løsning hvor de som koder ikke engang har tatt høyde for de annonserte endringene i siste, stabile PHP-utgave, er et dårlig råd. Og jo, nevnte feilmeldinger er et svært dårlig tegn. Hvis utviklerversjon av noe benytter deprecated funksjonalitet, så er den eller de som utvikler ikke oppdaterte.

Anonymkode: a3010...d24

  • Liker 1
Lenke til kommentar
Del på andre sider
AnonymBruker Anonym bruker

AnonymBruker

Skrevet
Skrevet
41 minutter siden, AnonymBruker said:

Oi. Greit å promotere alternativ programvare, og selv en løgn eller uvitenhet fra tid til annen er grei.

Men dette er ikke OK. Å påstå at obksur programvare har høyere sikkerhet kun fordi det er mindre brukt, er helt bak mål.

På jobb koder jeg nå et nytt innloggingssystem ifm. et program. Med andre ord, ingen har brukt det før. Er det dermed sikkert? Overhodet ikke!! Dette er tullete tankegang, og ikke reellt.

WPs kode har ligget ute for alle å finkjemme i lang tid, og det er det tusenvis av sikkerhetsfolk, kodere og andre som har studert opp og ned. Dette medfører at veldig mange ("alle"?) sårbarheter er avdekket og rettet for lenge siden. Slik effekt får ikke et repo som er klonet 100 ganger.

Videre må jeg bare kommentere dette med å hause opp flat-fil-lagring. Det er en grunn til at vi benytter SQL og andre databaser; hovedsakelig effektivitet. Flate filer er vesentlig tregere, og selvsagt ikke en fordel. Backup av SQL gjøres med ett knappetrykk i WP, ev. kan det svært enkelt gjøres med sqldump for den som liker å gjøre det litt mer "avansert".

Å benytte en sær løsning hvor de som koder ikke engang har tatt høyde for de annonserte endringene i siste, stabile PHP-utgave, er et dårlig råd. Og jo, nevnte feilmeldinger er et svært dårlig tegn. Hvis utviklerversjon av noe benytter deprecated funksjonalitet, så er den eller de som utvikler ikke oppdaterte.

Anonymkode: a3010...d24

Beklager, men å påstå at Flatpress er "obskur programvare", blir omtrent like meningsløst som å påstå at Gimp er "obskurt" i forhold til Photoshop, eller at Linux er det i forhold til Windows.

Ja, det at Windows blir mer brukt, gjør dette faktisk til en langt større sikkerhetstrussel enn diverse mindre Linux-distroer, rett og slett fordi målgruppen ved et angrep er langt større.

For hvis SQL skulle være så sikkert at "alle" sårbarheter er avdekket og rettet for lenge siden, ifølge det du skriver, så hvorfor i all verden må man være oppmerksom på SQL injection, og aldri kan føle seg trygg i forhold til nye sårbarheter?

Are SQL Injections Still a Thing?

https://www.code-intelligence.com/blog/are-sql-injections-still-a-thing

Quote

Regarding the opening questions: Yes, SQL injections are still one of the most exploited security vulnerabilities and, therefore, still a thing.

exploits_of_a_mom.png

WordPress SQL injection – SQL Attack Prevention GUIDE:

https://secure.wphackedhelp.com/blog/wordpress-sql-injection-hack/

Dessuten - når Deutsche Telekom eller Strato tydeligvis ikke har noe imot Flatpress, så kan man kanskje spørre dem hvorfor de er så uvitende at de bruker noe så "obskurt" ...?

For å sitere https://www.flatpress.org/page/2/:

Quote

Since then, the FlatPress journey continues with fresh power. And even after 15 years, you might not have unvealed every FlatPress secret: Did you know that the FlatPress engine is the blogging widget in the heavily used web site building kits of Deutsche Telekom and the huge German web hoster Strato?

Og hvorfor skrev et anerkjent IT-nettsted som computerwoche.de om Flatpress som et CMS-alternativ på lik linje med Joomla allerede i 2011?

Freie CMS-Software im Überblick: Datenbank? Muss nicht sein: Flatpress

https://www.computerwoche.de/a/freie-cms-software-im-ueberblick,2370259,6

Så, med all respekt, men det finnes en stor verden utenfor det etablerte programvareuniverset, og det er faktisk fullt mulig å bruke bedre alternativer enn Windows eller WordPress uten at dette går ut over sikkerheten; det er lenge siden man så på Microsoft som noe som var synonymt med trygghet.

Ha en riktig fin dag videre.

tux-1.png.4901f58aa07d16cf9349bf0d0f569134.png

Hilsen en som har brukt Linux i 14 år og Flatpress i snart 10. Uten å ha hatt problemer med dette.

Anonymkode: 84dd2...89f

Lenke til kommentar
Del på andre sider

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
 Del
Gå til emneliste
×
×
  • Opprett ny...