HTML, CSS en JS samenvoegen - Softwareontwikkeling

donderdag 21 mei 2015 17:08

Acties:

0 Henk 'm!

MK_

Sneller dan het licht :)

Topicstarter

Hallo

Voor een werkstuk van school (vak aardrijkskunde) moeten we een eindwerkstuk maken over satellieten, en dit op een originele manier inleveren. Nu kwam ik dus met het idee om een site te maken, en heb dit dus ook gedaan. Voor de geïnteresseerde:
http://www.codecademy.com/MK1998NL/codebits/OBOPIi
Niet echt iets bijzonders, en de lay-out werkt alleen fatsoenlijk op 1080p

Maar goed, daar gaat het niet om

Nu, mijn vraag. De site moet in inleveren. Hiervoor was ik van plan alles in één .txt bestand te zetten, en dan de extensie veranderen naar .html. Ik weet dat dit kan met HTML en CSS, maar kan dit ook met JavaScript erbij? 3 losse files inleveren is ook niet echt geweldig... Ik heb het zelf geprobeerd met de <style> en <script> tags in de <head>, maar het lukt me niet

Of is er misschien een andere manier?

Verder commentaar is ook gewenst indien iets je echt niet aanstaat

Alvast bedankt!

12x SunPower X21-350-BLK @ Solar Edge SE3680H (4200Wp) | Dell Inspiron 15 7559 | OnePlus 9 Pro Stellar Black 12/256GB | Xbox Series X | LPG powered

donderdag 21 mei 2015 17:12

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

"Het lukt me niet" is ook zo lekker duidelijk.

Hoe heb je het op die manier in de head gezet?

Los daarvan: waarom zou je het doen? Waarom is het een probleem om drie losse files in te leveren?

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

donderdag 21 mei 2015 17:12

Acties:

0 Henk 'm!

phpn3rd

Dit kan gewoon door de inhoud van de JavaScript files in <script type="text/javascript">...</script> in de head te plaatsen. En als je dat al geprobeerd hebt: Wat was de melding die je kreeg? Wat werkte niet?

donderdag 21 mei 2015 17:12

Acties:

0 Henk 'm!

RedHat

Omdat je code niet klopt.

<html>
<head>
<script type="text/css"> Je CSS </script>
<script type="text/javascript"> Je Javascriptzooi </script>

Wat jij doet (Als ik het goed zie) is dit:

HTML:

1 2	<script> </script> Hier je zooi

[ Voor 64% gewijzigd door RedHat op 21-05-2015 17:14 ]

donderdag 21 mei 2015 17:12

Acties:

0 Henk 'm!

Verwijderd

Satalieten -> satellieten

Ik heb het zelf geprobeerd met de <style> en <script> tags in de <head>

Dat moet in principe gewoon kunnen. Maar met afbeeldingen kan dat niet, dus je zit hoe dan ook aan meerdere files vast..

donderdag 21 mei 2015 17:13

Acties:

0 Henk 'm!

spone

Verwijderd schreef op donderdag 21 mei 2015 @ 17:12:
Satalieten -> satellieten

[...]

Dat moet in principe gewoon kunnen. Maar met afbeeldingen kan dat niet, dus je zit hoe dan ook aan meerdere files vast..

Inline base64-encoded plaatjes kunnen prima in de html hoor.

i5-14600K | 32GB DDR5-6000 | RTX 5070 - MacBook Pro M1 Pro 14" 16/512

donderdag 21 mei 2015 17:14

Acties:

0 Henk 'm!

phpn3rd

Verwijderd schreef op donderdag 21 mei 2015 @ 17:12:
Satalieten -> satellieten

[...]

Dat moet in principe gewoon kunnen. Maar met afbeeldingen kan dat niet, dus je zit hoe dan ook aan meerdere files vast..

Afbeeldingen kunnen ook, mits ze niet te groot zijn, als base64 images geplaatst worden

donderdag 21 mei 2015 17:14

Acties:

0 Henk 'm!

Diablow

Waarom niet gewoon zippen samen met een readme.txt voor als een leek het uitpakt?

donderdag 21 mei 2015 17:15

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

Kan de webpagina niet zonder Javascript dan? De YouTubes 'include' je middels iframe (zoals de embed code op YouTube vaak ook doet!) en dan is er volgens mij geen Javascript meer nodig hoor?

EDIT:
Even naar de complete code gekeken, kon het net niet zo gauw vinden (zal wel verkeerd gekeken hebben), de Javascript is blijkbaar voor bepaalde animaties.

Als je die code tussen <script type="text/javascript"> en </script> zet, moet het goed werken. Waar je dat dan neerzet, maakt niet zo gek veel uit. Ik zou het echter onderaan in de code doen, dan laadt de site net even ietsjes sneller.

[ Voor 54% gewijzigd door CH4OS op 21-05-2015 17:18 ]

donderdag 21 mei 2015 17:16

Acties:

0 Henk 'm!

Verwijderd

Of gewoon een html file sturen en alle afbeeldingen / JS / CSS van een webserver laten komen. Er even vanuit gaan dat iedereen wel een internetverbinding heeft...

donderdag 21 mei 2015 17:30

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Maak een textfile met de volgende inhoud:

code:

1	http://www.codecademy.com/MK1998NL/codebits/OBOPIi

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 mei 2015 17:34

Acties:

0 Henk 'm!

MK_

Sneller dan het licht :)

Topicstarter

Bedankt voor alle reacties!

De JavaScript dient voor het menu aan de linkerkant.

Als ik het .html bestand open, dan opent hij het exact zoals ik het erin heb gezet. Je ziet dus de code.

Na bovenstaande heb ik het volgende geprobeerd:

code:

<!DOCTYPE html>
<html>
  <head>
  <title>Astra 2G & Meteor M-N2</title>
<script type="text/css">
*Alles uit de CSS*
</script>
<script type="text/javascript">
*Alles uit de JS*
</script>
</head>
<body>
*Alles uit de body*
</body>
</html>

Werkt helaas niet, krijg nogsteeds hetzelfde resultaat

3 files worden moeilijk, mevrouw is vrij a-technisch

Link sturen kan, maar dat ziet er weer minder professioneel uit

Als het me niet lukt wat dat wel de laatste optie ja

12x SunPower X21-350-BLK @ Solar Edge SE3680H (4200Wp) | Dell Inspiron 15 7559 | OnePlus 9 Pro Stellar Black 12/256GB | Xbox Series X | LPG powered

donderdag 21 mei 2015 17:39

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

CSS is geen script, CSS is een style.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

donderdag 21 mei 2015 17:45

Acties:

0 Henk 'm!

MK_

Sneller dan het licht :)

Topicstarter

Dat had ik gekopieerd van RedHat

Maar als ik het verander naar style i.p.v script, dan verandert het nog steeds niks.

12x SunPower X21-350-BLK @ Solar Edge SE3680H (4200Wp) | Dell Inspiron 15 7559 | OnePlus 9 Pro Stellar Black 12/256GB | Xbox Series X | LPG powered

donderdag 21 mei 2015 17:58

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

En je probleem is dat je, in je browser, de HTML-broncode ziet als je die .html-file opent?

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

donderdag 21 mei 2015 18:04

Acties:

0 Henk 'm!

MK_

Sneller dan het licht :)

Topicstarter

Yup, en geprobeerd op zowel Chrome, Safari en Firefox

Afbeeldingslocatie: http://static.tweakers.net/ext/f/AMZDPs4JnlbC0OT4Q4pLBCLj/medium.png

12x SunPower X21-350-BLK @ Solar Edge SE3680H (4200Wp) | Dell Inspiron 15 7559 | OnePlus 9 Pro Stellar Black 12/256GB | Xbox Series X | LPG powered

donderdag 21 mei 2015 21:34

Acties:

0 Henk 'm!

MK_

Sneller dan het licht :)

Topicstarter

Ik heb alles nu op CodeCademy werkend in mekaar zitten:
http://www.codecademy.com/MK1998NL/codebits/TVEhuS
Trouwens als verschillende manieren geprobeerd, zo werkt hij het best in my opinion

Nu, als ik deze site wil opslaan, en open via welke browser wat dan ook, blijf ik de broncodes zien. Is dit dan fout vanuit de NotePad op de Mac? Want als een vriend van me het doet via een Windows PC (de HTML en CSS) dan lukt het bij hem wel, en ik kan dat bestand op de Mac gewoon openen. Doe ik echter exact hetzelfde op de Mac, dan doet hij het niet

12x SunPower X21-350-BLK @ Solar Edge SE3680H (4200Wp) | Dell Inspiron 15 7559 | OnePlus 9 Pro Stellar Black 12/256GB | Xbox Series X | LPG powered

vrijdag 22 mei 2015 08:26

Acties:

0 Henk 'm!

Diablow

Het kan zijn dat het een soort beveiliging is op de mac, wat je mogelijk uit kan zetten, weet weinig van mac's af. Ik weet wel dat in bijvoorbeeld firefox links naar lokale afbeeldingen/bestanden vanuit een lokale html file some niet werken.

vrijdag 22 mei 2015 13:20

Acties:

0 Henk 'm!

bartbh

Je hebt het niet toevallig in een wysiwyg-editor geplaatst?

Als je je bestand opent in een van de browser en je bekijkt de bron (view source) zie je dan ook de juiste html of juist < etc?

zaterdag 23 mei 2015 18:07

Acties:

0 Henk 'm!

kaassouffle

Medewerker v/d Maand

Tekst editor op de Mac gebruikt zeker ? Die slaat inderdaad niet goed op. Zijn wel oplossingen voor maar ik gebruik zelf meestal gratis Mac programma's 'Textwrangler' of 'Textmate', die doen geen gekke dingen met tekst (zoals opmaak behouden of html verkeerd opslaan).

[ Voor 8% gewijzigd door kaassouffle op 24-05-2015 11:33 ]

zaterdag 23 mei 2015 18:21

Acties: