Jag bad alla skapa en mappstruktur, som skulle se ut som på bilden nedan:
 |
Ja,
det blev mycket i måndags, kändes det som! Det är mycket nog med att
lära sig koda HTML, framförallt om man aldrig har gjort det! Det som tillkommer är det som man förutsätts kunna, när man börjar denna kurs och det är filhantering, d. v. s. att kunna hantera mappar och filer utan problem! Jag märker att det är fler som har problem med det och mitt förslag är att du som känner att det är svårt det här med mappar och filer; träna på det! Om det behövs får vi ta en extra genomgång av det tillsammans! |
Vi börjar med att enbart använda mappen test.
De första sidorna vi skapar ska vi spara i den mappen.
Likaså om vi sparar bilder, antingen det är bakgrundsbilder eller andra typer
av bilder ex vis foton.
Sedan, när det är dags för övningsuppgifter, som är betygsgrundande, så jobbar du med mappen övn_uppg, där spar du dina hemsidor och i undermappen bilder spar du alla dina bilder. Eventuellt, kommer jag på just nu, skulle det vara bra med en mapp, direkt under mappen webbdesign, som heter verktyg och där skulle du kunna spara alla hjälpmedel, i vårat fall just nu, de tre hemsidorna som visar olika färger med färgkoder.
Så här:
Detta är grundkoden för en sida med en rubrik och litet text:
<HTML><HEAD><TITLE>Hemsidans
titel, syns i namnlisten på webbläsaren</TITLE></HEAD>
<BODY>
<H1>Rolfs snygga sida
med fantastisk design!</H1>
Nu litet vanlig text, ett citat kanske: Den som inte är en smula galen, är
inte så klok som han tror! Turkiskt ordspråk.
</BODY></HTML>
Mellan start av BODY-taggen och slut på BODY-taggen är själva innehållet på hemsidan! Om vi tar kodningen här ovan igen och lägger till det vi gått igenom (Och litet nytt för dig som vill prova!):
<HTML><HEAD><TITLE>Hemsidans
titel, syns i namnlisten på webbläsaren</TITLE></HEAD>
<BODY
BGCOLOR="#BCFEE0"
BACKGROUND="bakgrundsbild.jpg">
<OL>
<LI>Korv
<LI>Ost
<LI>Öl
</OL>
<UL>
<LI>Korv
<LI>Ost
<LI>Öl
</UL>
<B>fet
stil</B> <I>kursiv stil</I>
<P>
<IMG SRC="foto.jpg">
<HR>
<H1>Rolfs snygga sida
med fantastisk design!</H1>
Nu litet vanlig text, ett citat kanske: Den som inte är en smula galen, är
inte så klok som han tror! Turkiskt ordspråk.
</BODY></HTML>
och lila 
har vi gått igenom, det
som är i lila är tillägg till
BODY-taggen, observera att BODY-taggen bara kan skrivas en gång! Attributet BGCOLOR
(backgroundcolor) är bakgrundsfärgen på hemsidan och färgkoden
#BCFEE0
är ljusgrön. 
Attributet BACKGROUND betyder bakgrundsbild och det som är efter likhetstecknet är bakgrundsbildens namn, som i det här fallet ligger i samma mapp som själva hemsidan. Först måste då naturligtvis bakgrundsbilden finnas!
Det
som är skrivet i rött 
är helt nytt för dig som vill prova! Taggen OL
betyder numrerad lista och LI är själva listpunkterna. UL är en
punktlista. (Ordered list och unordered list). Både taggen UL och OL
ska avslutas, men LI behöver inte avslutas! Taggen B gör fet stil, och
taggen I gör kursiv stil. Båda måste avslutas när man inte längre
vill ha fet stil eller kursiv stil!
IMG är taggen för att lägga in en vanlig bild exempelvis ett foto. SRC
är attributet, som måste finnas med. IMG betyder image och SRC
betyder source, d. v. s. bildkälla.
Taggen P ger styckebrytning och en tom rad innan nästa stycke och BR ger radbrytning. P kan avslutas men behöver inte avslutas och BR ska inte avslutas! Taggen HR betyder infoga ett vågrätt streck.