Å bygge et nettsted med HTML, CSS og Javascript

[Zenobia]

proghodet skrev (På 4.6.2022 den 21.43):

Det kan like gjerne bare være div elementer alt sammen, eller en div på utsida med anker inni.

Dette må jeg huske å spørre om
 

Men nå, bare noterer: (tilsvarende spacecraft-ships a?) Ca 15.22 i video

(.columns) > * { flex: 1; } For lik item-bredde.

justify-content: space-evenly

align-items is looking at each indvidual (item) along the cross-axis.

align-self

Endret 6. juni 2022 av Zenobia

[proghodet]

4 hours ago, Zenobia said:

Dette må jeg huske å spørre om

Ah! I eksemplet mitt brukte jeg ul med li, men prinsippet er det samme med andre HTML-tag'er også:
Div med div'er inni:
<div class="forelder">
  <div>Barn 1</div>
  <div>Barn 2</div>
  <div>Barn 3</div>
</div>

Div med anker inni:
<div class="forelder">
  <a href="#">Barn 1</a>
  <a href="#">Barn 2</a>
  <a href="#">Barn 3</a>
</div>

Alle disse (pluss den med ul / li) vil oppføre seg samme med denne regelen:
.forelder {
  display: flex;
}

Det var bare for å vise at en css-regel ikke nødvendigvis er knyttet mot et spesifikt HTML-element

[Zenobia]

Har sett én Kevin-video om <div> og <span> nå. Div = division. Tenkte det stod for diverse. Da blir det jo litt klarere.

proghodet skrev (22 timer siden):

Div med div'er inni:

Takk for forklaring  men jeg har vært på det nivået at jeg ikke skjønte hva <div> er, annet enn at det er et HTML-element på blokknivå. Er ikke stødig ennå, men det kommer seg. Leser på w3schools nå ... Og skal se et par videoer om CSS etterpå.

proghodet skrev (22 timer siden):

Alle disse ... vil oppføre seg samme med denne regelen:
.forelder {
  display: flex;
}

For eksempel class="forelder" kan settes på alle uåpne blokk-elementer. Og vil lystre CSS .forelder. Men ikke åpne (fordi de ikke har innhold relevant for CSS. Prøver å uttrykke med egne ord.

*svisj off to lese + video*

Underveis: id og class. Når brukes hva.

Lav rang: elementer
Høyere rang: class
Høyest(?): id

CSS vil velge id før class før element.

NÅ ser jeg grid-videoen fra side 14. Henger mere med

Gap heller enn margin i grid.

Kom til 19.19 denne gang. Må praktiseres. Kanskje med noe av teksten på sidene som skal lenkes til.

Sider som jeg ikke har skrevet innhold til ennå

  PAUSE!

Endret 7. juni 2022 av Zenobia

[Zenobia]

Dette var en nyttig lenke jeg fikk for leeeenge siden: https://www.w3.org/TR/html401/struct/global.html#h-7.5.4

Om div og span & mye annet.

[Zenobia]

Har tatt en opprydning på GitHub, og slettet én fil.

I et tekst-dokument lokalt har jeg en beskrivelse av hva hver enkelt fil er.

Jeg skal med tid og stunder slette kontoene her:

Infinity Free
WordPress
W3 spaces

Mulig jeg har registrert meg flere steder Wix? Noe med logo-mekking Velo?

En oversikt over hvilke undersider jeg skal ha, vil være en fordel. Å bestemme seg for hvordan de skal se ut, blir en prosess.

Folk er glad i bilder.

• Jeg har INGEN tegninger av mine fiktive romskip, men jeg har absolutt en formening om hvordan de skal se ut.
  • Tegneprogrammer som kan konstruere basert på inndata ... Finnes sånt?
• Personell: Jeg har absolutt en formening om utseendet til enkelte av karakterene, men ikke alle. Basert på skuespillere. Ønsker ikke noe opphavsrett-trøbbel. Hvis ikke hele presentasjons-siden skal bli en vegg av tekst, må jeg finne på noe lurt. Jeg har sjekket ut AI-ansikter. Mnjaæææi, ikke ... hm ...

Men først må jeg gjøre noe annet.

[Zenobia]

Etter å ha laget en oversikt over hvilke undersider som mangler ... ca. 40. Konser om å få knappene på forsiden klikkbare først, så får videre utbygging av undersider komme etter hvert. I morg Fredag: episodetabell. Liten og lett, skal være  

Jeg har lett litt etter data visualisation, automatic drawing ... ikke noe som ikke koster PÆNG, and lots of it.

Jeg skulle egentlig vente til fredag.

[Zenobia]

Idé: Ta den flotte forsiden som utgangspunkt, og la tabellen flyte oppå. Vi får se om det er mulig ...

*off to GitHub*

• Lager eget stilark; tør ikke rote i styles
• Jeg må lage en ul/li tabell i html
  • Trodde jeg trengte tabell, men holder med liste? Skal ikke sorteres
  • Eller nei, må nok ha tabell; sjekker stilark til romskiptabellen ...
• Litt tidlig med GitHub; fyrer opp vscode og ser hva som skjer lokalt

Endret 10. juni 2022 av Zenobia

[Zenobia]

Jeg har snekret sammen en episodetabell med bildebakgrunn. VScode. Er ikke ferdig, men ganske fornøyd. Legger den på GitHub når lenkene er klare.

Hva som mangler i VScode før episodetabellen legges ut:

• Å lage en fint manus-CSS og teste med tekst.
  • Ser ut til at jeg kan bruke personkortstil med noen .manus?
• Lage episode-html til fire episoder.
• Lenke til lyd (eller vente med det til GitHub? trur eg)
• Å overføre epistil, epitabell og tekst til GitHub

Jeg skal bare teste en annen farve på th ...

så ... skal jeg gi meg for i aften.

 

Endret 11. juni 2022 av Zenobia

[Zenobia]

Jeg vil for mye, og kan for lite   Har mista litt piffen.

  @proghodet Kan vi ha en 'playdate' senere i aften? Eller en annen gang? (Er opptatt mellom kl 18 – 20.30 selv)

Så kan jeg legge ut på github imens ...

Dessuten har jeg syndet. Jeg putter stil i HTML-dokumentet; tenker jeg skal ekstrahere det etterpå.

[proghodet]

5 minutter siden, Zenobia said:

Jeg vil for mye, og kan for lite   Har mista litt piffen.

  @proghodet Kan vi ha en 'playdate' senere i aften? Eller en annen gang? (Er opptatt mellom kl 18 – 20.30 selv)

Så kan jeg legge ut på github imens ...

Dessuten har jeg syndet. Jeg putter stil i HTML-dokumentet; tenker jeg skal ekstrahere det etterpå.

Klart vi kan - er klar fra 21, tipper jeg 🙂

[Zenobia]

proghodet skrev (1 time siden):

Klart vi kan - er klar fra 21, tipper jeg 🙂

Ju-huu!

 

Notater til i aften:

Siden jeg holder på med: tronora.github.io/001 Prolog.html (Jaaaa, det ble stor bokstav der, gitt)

Bildet. Vet ikke hvordan jeg får det til blåskala istedenfor brunskala. Eksempel på hvordan jeg ønsker det skal være: https://galacticalliance440611879.wordpress.com/2022/05/12/prolog/

Derfor har jeg ikke slettet WP-kontoen riktig ennå   fordi de la på enellerannen effekt. CSS kan gjøre mye med bilder: https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_filter

... men jeg fant ikke noe blåfilter. Kan vel kanskje gå for gråfilter. Da ble teksten grå, men ingenting skjedde med bildet. Dessuten vil jeg heller ha det i blå/sort-toner.

Vil at teksten skal begynne midt i bildet med først '001', pil ned, (= '001' fyker opp) og 'Prolog' kommer til midten istedenfor, pil ned, (='Prolog' fyker opp) og overskrift starter fra midten, så teksten. (Ikke hver setning midtstilt, men en midtstilt blokk, ca 40% width) Pil ned flytter teksten som vanlig. På andre enheter bruker man sveip opp.

Engelsk episodetabell
Engelsk prolog (ferdig oversatt)

Slutte med flere .css. Holde meg til ett - to stilark

css word-wrap property. Når jeg har masse tekst.

Lenker i epitabell blir LILLA?!! Hvor har jeg bestemt dette? De skal bli ... kanskje grønne? Eller holde meg i mørkblå.

Nå har jeg lastet opp engelsk prologue.html UTEN noe style. Klart til eksternt stilark.

*pause*

Endret 16. juni 2022 av Zenobia

[Katten.2.0]

39 minutter siden, Zenobia said:

Jeg vil for mye, og kan for lite   Har mista litt piffen.

  @proghodet Kan vi ha en 'playdate' senere i aften? Eller en annen gang? (Er opptatt mellom kl 18 – 20.30 selv)

Så kan jeg legge ut på github imens ...

Dessuten har jeg syndet. Jeg putter stil i HTML-dokumentet; tenker jeg skal ekstrahere det etterpå.

Det er dessverre ikke rart når du prøver å gape over veldig mye på en gang. Det blir overveldende.

Baby steps med klare oppnåelige mål er en fordel.

[Zenobia]

Katten.2.0 skrev (29 minutter siden):

Det er dessverre ikke rart når du prøver å gape over veldig mye på en gang. Det blir overveldende.

Baby steps med klare oppnåelige mål er en fordel.

Takk for engasjementet!

Klart oppnåelig mål jeg jobber mot nå: Å få episodetabell og -manus til å se fint ut

Det vil si å lære litt om hvordan tekst kan bevege seg og skal plassere seg.

 

[Katten.2.0]

6 minutter siden, Zenobia said:

Takk for engasjementet!

Klart oppnåelig mål jeg jobber mot nå: Å få episodetabell og -manus til å se fint ut

Det vil si å lære litt om hvordan tekst kan bevege seg og skal plassere seg.

 

Som igjen består av flere deler. Altså, jeg har et oppnåelig mål innen ett prosjekt for én kunde, som er halvveis i en prosjektperiode på halvannet år. Dette prosjektet kan oppsummeres til ett oppnåelig mål, som igjen består av flere hundre delmål.

Ditt mål er å lære deg html, css og javascript, samtidig som du skal lage en nettside - uten tidligere kunnskap. Det er, etter min mening, et mye mindre oppnåelig mål enn prosjektet jeg har ansvar for. Fordi du gaper over for mye. Html, css og javascript er noe som krever tid og kontinuerlig arbeid for å mestre - hver for seg. Og en oppskrift på å miste gløden og gi opp. Så har du webdesign som i seg selv består av masse aspekter man bør beherske.

[Zenobia]

Takk for innspill,  @Katten.2.0  Skal svare deg litt bedre en annen dag.

- - -

Notater:

div.manus {word-wrap: break-word}

 

[Zenobia]

@proghodet Vi (du ) kan jo begynne med det bildet som er i brun-nyanser, som jeg gjerne vil ha i blått (se WP-lenken)

[proghodet]

4 hours ago, Zenobia said:

men jeg fant ikke noe blåfilter. Kan vel kanskje gå for gråfilter. Da ble teksten grå, men ingenting skjedde med bildet. Dessuten vil jeg heller ha det i blå/sort-toner.

Grunnen til dette er fordi bildet ditt er et background-image, og filter-regelen vil ikke påvirke det, dessverre

Hvis du derimot har bildet som en img-tag, så kan du bruke følgende filter for å få det blått:
filter: hue-rotate(180deg)

Du kan også leke med en regel som heter mix-blend-mode.
Synes bildet fikk en bra effekt om den settes til enten hard-light eller color-dodge, men det finnes andre også
 

Endret 16. juni 2022 av proghodet

[Zenobia]

proghodet skrev (2 minutter siden):

Grunnen til dette er fordi bildet ditt er et background-image, og filter-regelen vil ikke påvirke det, dessverre

Hvis du derimot har bildet som en img-tag, så kan du bruke følgende filter for å få det blått:
filter: hue-rotate(180deg)
 

  Vil teksten fremdeles flyte over bildet da?

Og nå tenkte jeg å være lur og bruke en css-fil jeg har fra før. Men styles (som du lagde til forsiden), er så ... omfattende  

Og jeg er redd for å røre noe der! Men det er vel bare tøys, kanskje? Hvordan bør jeg gjøre det, hvis jeg skal ha stilen inn der?

[proghodet]

4 hours ago, Zenobia said:

(Ikke hver setning midtstilt, men en midtstilt blokk, ca 40% width)

Prøv å sette margin: 0 auto; på div'en som omkranser innholdet

[proghodet]

2 minutter siden, Zenobia said:

  Vil teksten fremdeles flyte over bildet da?

Og nå tenkte jeg å være lur og bruke en css-fil jeg har fra før. Men styles (som du lagde til forsiden), er så ... omfattende  

Og jeg er redd for å røre noe der! Men det er vel bare tøys, kanskje? Hvordan bør jeg gjøre det, hvis jeg skal ha stilen inn der?

Jeg har (fancy words incoming) klonet repoet ditt lokalt (norsk: lastet ned filene dine på min maskin 😂)
Jeg vil ta en liten inspeksjon/ opprydding så jeg ser hva som har skjedd siden sist jeg kikket på det

Hvis jeg finner på noe lurt, så lager jeg en "pull request", det vil si at jeg spør om å få lov å oppdatere kodefilene dine på github. Så kan du se igjennom alle endringene og velge å godta, eller avslå

Men for å svare på det du spør om - vanlig CSS blir veldig mange linjer. Det er dessverre ikke til å unngå, og derfor man gjerne begynner å bruke noe sånt som SCSS etterhvert. Men for et prosjekt som dette blir det litt overkill, og det er mer enn nok å lære CSS først tenker jeg 😊