HTML kodning
- Lee-Ann Friis
- Apr 22, 2019
- 2 min read
Ved brug af html kodning, via programmet ATOM, skulle vi opbygge en hjemmeside. Her indgik der nogle forskellige trin, hvilke forklares på nemprogrammering.dk på følgende link: https://www.nemprogrammering.dk/Tutorials/HTML/oversigt_html.php
De forskellige kommandoer, hvilke indgik i kodningen, vil der blive fortalt om undervejs.
De første steps omhandlede opsætningen af programmet, hvori opsætningen af de hhv. forskellige mapper og dokumenter blev vist. Efterfølgende kunne man begynde, at opsætte den egentlige hjemmeside, via koderne:
Følgende er koderne bag det simple layout af hjemmesiden. Herunder indgår der bl.a. den egentlige klargørelse af hvilket kodningsprogram vi tager brug af (html i start og bund). Vi kan også kode den egentlige titel og den tekst der skal stå på hjemmesiden, som er vist via navnene title og body (programmet er engelsk, så den egentlige kode skal dermed også stå på dette internationale sprog).
Derudover er der to koder (dem der starter med "meta"), som angiver den egentlige deskription af hjemmesiden, når den popper op i din søgemaskine osv.
Endvidere er det vigtigt, at inkludere tekst, billeder, links og overskrifter i hjemmesidens indhold:
Følgende er koden for den egentlige hjemmeside, hvorfra vi bl.a. har angivet et link til en anden hjemmesiden, end den vi befinder os på og er i gang med at lave. Denne hjemmeside har følgende kode:
... hvor følgende billede er angivet som "mig.jpg" (dette er også hjemmesiden, som efterfølgende bliver opsat via den viste kode):
Som man kan se, er denne hjemmeside forholdsvis simpel og viser ikke meget mere end et billede og en deskription i linket for hjemmesiden (angivet i søgefeltet: "LeeAnnFriis"; dette er titlen på hjemmesiden, fordi det ikke er den egentlige hjemmeside, men en kopi med ændringer).
Vi kan nu vise hjemmesiden, med et link og en rigtig deskription, som:
Efterfølgende kan man så ændre på stilen, layoutet og indsætte billeder, tabeller eller andet. Hvis man evt. koder indsætningen af et billede, ville det se ud som følgende på hjemmesiden:
Hvor kodningen ville se ud som følgende:
Man kan dermed se, at vi klargører hvor bredt og højt billedet skal være på hjemmesiden. Derudover kan man også kode forskellige lister:
Her er det selvfølgelig vigtigt, at lægge mærke til opdelingen af de to lister, hvori vi har åbnings- og luknings krokodilletegn. Den ene ting der dog separerer de to forskellige lister, er hvorvidt de skal skrives med prikker (<ul>) eller tal (<ol>).
Derudover kan man også kode hhv. forskellige "spørgeskemaer" til hjemmesiden, som anvist her:
Hvor kodningen ville se ud som følgende:
Her er opdelingen meget klar, ift. hvilke felter der skal udfyldes: navn, hjemmeside, vælg farver og kode. Alle felterne er desuden interaktive, idet brugeren enten skal kunne skrive i felterne (navn, hjemmeside og kode) eller krydse bokse af (mand, kvinde, hund, kat eller slange).
Comments