HTML och JavaScript
HTML
Förberedande material
I länken nedan finns info på svenska, men jag rekommenderar engelska då engelska är väldigt vanligt inom programmering och därmed finns de flesta tutorials och hjälp på engelska.
Kod och programmering
HTML
• HyperText Markup Language
• Filtyp .html (htm för länge sen)
• Själva innehållet/sidorna på en webbplats,
• HTML brukar kallas för ett “märkspråk” och skapar själva innehållet (text, bilder, länkar etcetera) i webbplatser
HTML används för att bygga webbsidor. Man brukar säga att det är ett märkspråk (det engelska uttrycket markup language är det som används) och inte ett programmeringsspråk. Skillnaden är att HTML bara ska sätta en struktur, den utför inga kommandon som ”hitta siffran 7”. Strukturen används för att förstå vad sidan handlar om, så den är superviktig när man jobbar med SEO (Search Engine Optimization).
JavaScript
• Filtyp .js
• Interaktioner på webbplatser, t ex en knapp som visar eller döljer en meny
JavaScript används för att komplettera HTML med interaktioner. JavaScript är ett programmeringsspråk då den utför kommandon. Ett kommando kan t ex vara ”om man klickar där, visa upp det här”. JavaScript utvecklades som ett enkelt komplement till webbutveckling, men numera används JavaScript även i mobilappar och utvecklingen fortsätter att utmana dess användningsområden.
Vad är märk – och scriptspråk?
Populära editorer för att skriva kod är t ex Visual Studio Code, Atom och Sublime text (ej gratis)
Digital platform för att skriva kod
Utvecklarsajter
Certifieringar finns på massa olika ställen, det är bara att sätta igång och få fina batches att dela på LinkedIn
Kursen
HTML
Ett av kunskapsmålen i denna kurs är grundläggande HTML. Den är med i kunskapskontrollen för examination.
- Färdighet 4 – Använda grundläggande HTML – praktiskt prov
Examination
Uppgiften kommer att vara att skriva ett CV i HTML. CV:t ska vara ett framtids-cv, daterad 2033. Ni ska alltså hitta på/gissa/hoppas på hur ert CV ser ut om 10 år. Ni går nu en utbildning till CDD, ha med det i åtanke när ni skriver ert CV.
CV:t kan skrivas hos W3School, men vill man hellre använda något annat går det (det blir dock helt på eget initiativ utan support)
Använd mallen i W3School
- https://www.w3schools.com/howto/howto_website_create_resume.asp
- Demosida
- https://www.w3schools.com/howto/tryw3css_templates_cv.htm
- https://www.w3schools.com/howto/tryit.asp?filename=tryw3css_templates_cv&stacked=h
Ni ska
- Lägga till klickbar länk till hemsida (har du ingen egen, ta valfri URL)
- Funktion att klick vid mail öppnar ”skicka mail”
- Byt ut huvudbild till en på dig själv
- Byt ut ikoner
- Testa få some ikonerna att skicka till rätt plats
- Lägg till en ”Summary”/”Om mig”
- Lägg till förklaringar där du ändrat (<!—och –>.)
Skicka länk till sidan för inlämning.
Betyg
För G – vanligt CV-upplägg i HTML-format
För VG – G krav samt att innehållet ska visa på god förståelse av vad ett arbete med data kan innebära (se t ex kunskapsmålen i denna kurs, hur väver man i dem i roller?). Eftersom det är ett fiktivt cv finns utrymme för kreativitet.
JavaScript
Ett av kunskapsmålen i denna kurs är grundläggande JavaScript. Den är också med i kunskapskontrollen för examination.
Färdighet 3 – Redogöra för grundläggande användning av JavaScript samt dess olika användningsområden.
Inkludera JavaScript i ditt framtids-cv.
System
Grunderna i HTML
Skapa en profil hos W3Schools. Den är användbar för både HTML, JavaScript och övriga kodspråk längre fram i utbildningen. Den har också en del ”gamification”[1] så att man kan se sin egen utveckling.
Gör Quizen för att kontrollera hur det går
HTML är 74 lektioner – 25 timmar
JavaScript är 162 lektioner – 51 timmar
HTML genomgång
Att lära sig att koda tar tid. Man lär sig teori, som man varvar med praktik och när man lär sig mer, kommer man tillbaks till sådant man redan övat på – fast i mera avancerad form.
Vi ska lära oss grunderna i HTML, men fokus på att förstå och modifiera andras kod så att vi kan få till ett CV som passar oss. Detta dokument samlar bara de övergripande delarna, själva lärandet sker i W3Schools (där dokumentationen finns på engelska).
Editor
Vi kommer att använda W3Scools editor för hemsidor (för att det är smidig). Man kan också använda sig av Notepad (eller Notepad++)
W3Schools Spaces – är där ni hittar cv exemplet.
https://www.w3schools.com/spaces/index.php
Roller
Om man vill jobba med webbutveckling måste man bli grymt bra på HTML. Ska man jobba med datautveckling i form av att förstå vilken data som används, kanske felsöka mailutskick som inte genererar den responsdata som tänkt, då behöver man förstå hur HTML är uppbyggt. Det är stor skillnad på att förstå kod och att kunna skriva kod.
Ska man satsa på en roll som CRM utvecklare, kan man behöva HTML, men man behöver kunna andra språk, allt beroende på vad det är för roll och system. Det man får komma ihåg att det aldrig är en nackdel att kunna ett programmeringsspråk.
Kort om HTML
• Filtyp .html (htm för länge sen)
• Själva innehållet/sidorna på en webbplats, Hypertext Markup Language
• HTML brukar kallas för ett “märkspråk” och skapar själva innehållet (text, bilder, länkar etcetera) i webbplatser
Notepad
Man kan skriva kod i Notepad och skapa en html-fil.
Öppna Notepad.
Skriv in din kod, exempelvis
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Spara filen som en htm (html funkade också) fil med namnet index
Öppna sedan sidan i din webbläsare
Element
HTML-kod skrivs med “HTML-element”. HTML-element byggs upp med en starttag < > och sluttag </> med innehåll där emellan.
<h1>min heading</h1>
I exemplet ovan är <h1> start-taggen som säger “här börjar en huvudrubrik” och </h1> är slut-taggen som säger att “här slutar huvudrubriken”. Allt däremellan är själva texten som syns på skärmen.
Vissa element saknar innehåll, som <br> (break).
HTML skrivs oftast i gemener, men det går att skriva med versaler också.
Det finns flera olika typer av element/taggar.
- The <!DOCTYPE html> declaration defines that this document is an HTML5 document
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the HTML page
- The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
- The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- The <h1> element defines a large heading
- The <p> element defines a paragraph
<h1> Huvudrubrik </h1>
<p1> Paragraf </p>
<br> </br> (break har inget innehåll emellan start och slut)
HTML Page Structure
En webbrowser läser och tolkar innehållet i en HTML fil och visar upp innehållet. Det som visas är det som står inom <body>.
<title> är sidans namn och syns i ”fliken”
HTML dokument
HTML dokument startar med document declaration <!DOCTYPE html>, sedan <html> och där emellan <body> och allt innehåll.
Skriv snyggt med radbrytningar och tabbar, annars kommer någon förr eller senare att störa sig på det😊
Kommentera ut kod
Man kan skriva in kod som inte är en del av koden, utan som används för att t ex beskriva vad som ska ske, vad koden är till för osv. Att kommentera sin kod är vanligt inom all programmering och man kan också använda ”utkommentering” för att exkludera att en del av koden körs, utan att behöva radera koden. I HTML används <!—och –>. Allt mellan de taggarna kommenteras bort, oavsett vad det står där.
<!– This is a comment –>
Headings
Det finns 6 st olika headings, från <h1> till <h6>. <h1> är den viktigaste, <6> den minst viktiga.
De kommer i en viss storlek, vill man ändra på den ska man använda style. Använd inte h1 bara för att få något i större stil.
<h1 style=”font-size:60px;”>Heading 1</h1>
Länkar
Länkar i html definieras med taggen <a>. href kallas för ett attribut och ger sidans URL och texten emellan vad som syns på sidan. Gör som vana att använda ”” vid länk, annars kanske det inte fungerar.
Default är att länken öppnas i samma fönster. Det går att ändra med genom att lägga till target attribut.
_self, _blank, _parent,_top är det attribut som kan användas.
<a href=”https://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>
Bilder
Bilder i html definieras med <img> taggen
Radbyten
<hr> och <br> skapar avbrott. Båda används som de är, utan start eller slut, de bara är. De används för att ändra hur en paragraf ser ut. En browser tolkar inte radbyte som radbyte, utan den letar efter taggen <br>.
<hr> är för horisontell (linje)
<br> byter rad.
<pre> är en tagg som som har både start och slut och som kan användas får att behålla spaces och line breaks när du kodar den i html.
Textformatering
För att formatera en text i html används formateringselement. De har också en start- och sluttagg. De placeras mellan ett annat element.
<p>normal text.</p>
<p><b>fet text.</b></p>
Det finns format som <strong>,<i>,<mark>.
Style – attribut
För att få till färger använder man attributet style. Den används tillsammans med CSS (Cascading Style Sheets), som består av ”property:value;”, d.v.s.namn/värde-par. Själva style hamnar i start taggen och beroende på vart den finns, styr den olika delar av koden.
Färger benämns i färg, som t ex tomato, eller orange. Green fungerar också.
Background.color, color, font-family, font-size, text-align är CSS stilar.
CSS är inte en del av denna kurs, men för att förstå HTML måste man förstå vad som är CSS. Annars är det svårt att tolka HTML-koden.
Färger
Man kan använda både namn på färg, som tomato, eller rgb, hex och hsl. Vad som ska användas läggs in i CSS koden efter value. :rgb(255, 99, 71);”>
<h1 style=”background-color:rgb(255, 99, 71);”>här skriver man sin text</h1>
I bilden nedan finns style i css format i head. Det är int skrivet i HTML utan i CSS (notera {} som kallas för svanvingar eller curly brackets).
Det inom <style> och </style> styr hela dokumentet. Skriver man t ex som i det gråa, så blir hela bakgrunden gul
Stylesheet – CSS
Genom att skapa ett stylesheet, d.v.s. en sida med CSS, kan man kalla på den i sin HTML kod.
HTML hänvisar till stylesheeten på en adress, som i sin tur berättar färgerna på bakgrund, h1 och p.
Man kan också använda sig av länk som antingen hänvisar till sajten eller sidan.
<link rel=”stylesheet” href=”/html/styles.css”>
<link rel=”stylesheet” href=”styles.css”>
Båda är ju delar av href=”https://www.w3schools.com/html/styles.css”>
Grunderna i JavaScript
Tutorial
https://www.w3schools.com/js/
Kort om JavaScript
JavaScript används primärt till att lägga till dynamik till sidan, så som ”klicka här och något händer”.
Om man klickar på ”Click me to display Date and Time” får man tillbaks raden under som berättar vad det är för dag och tid.
Det är JavaScriptet som gör att något händer när man klickar. Kommenterar man bort den biten, händer inget när man klickar på rutan (knappen), det är bara en ruta med text.
Bortkommenterat
Script
JavaScript skrivs inom taggarna <script>. Den kan t ex skapa en funktion som sedan används i HTML-koden.
JavaScript använder document.getElementById för att välja del av HTML-koden.
Ändringar i text
Texten ändrar storlek, färg och bakgrundsfärg.
Övning
Plocka isär funktionen light() och förstå vad den gör.
Light innehåller ett värde sw. Light innehåller också en variabel pic. Om sw är lika med 0, då är variabel pic (bilden) bulboff, annars, d.v.s. när sw är lika med 1, är pic bulbon.
Från början är bilden pic_bulboff.
I <p> elementet finns två val som pekar tillbaks till funktionen ”function”. Light On tar light() med värdet 1, d.v.s. funktionen när värdet sw inte är 0.
Noscript
Alla browsar supportar inte JavaScript eller så har användaren stängt av dem. För att ge en bra användarupplevelse kan man lägga in noscript som meddelar att det inte används.
Cookies
[1] https://staunstrup.se/blog/digitalt/vad-ar-gamification/