HTML Guide 3.0
Tanken med det här inlägget är att fylla igen luckor som finns i tidigare HTML-guider och snarare förklara det bakomliggande tänket än att visa exakt hur man gör en specifik sak.
Introduktion
Webbläsaren använder sig i princip av 3 komponenter när det gäller att visa information på en hemsida.
* HTML
* CSS
* JavaScript
Jag kommer huvudsakligen att fokusera på de första två, eftersom att det inte är tillåtet att exekvera JavaScript som användare på Emocore.
HyperText Markup Language
HTML är vad som bestämmer, eller snarare berättar för webbläsaren, vilka komponenter som finns på hemsidan. Varenda textbox, länk, och bild (detta går typ att åstadkomma med CSS också), är HTML.
Cascading Stylesheet
CSS är vad som bestämmer de visuella elementens utseende på en hemsida. Att boxarna på emocore är av färgen rad, eller har runda kanter? Det är CSS.
HTML introduktion
En hemsida består generellt av olika "taggar" - eller element. Dessa taggar används för att strukturera och har ofta standard-css-värden som förknippas med dessa. Taggarna eller elementen innehåller ofta mer information än just taggnamnet. Dessa kallas för attribut. Efter att man har öppnat en tagg är det också vanligt att ha information inuti taggen, dvs: <tag>Information</tag>. Den sista delen: </tag> används för att specificera för webbläsaren var den slutar gälla.
Vanliga att använda och som kan vara nödvändiga för Emocore är exempelvis:
<a>: Representerar en länk.
Taggen <a> har en attribut "href", som pekar på en länk.
Såhär skriver man den:
<a href="google.com">http://www.google.com</a>
<div>: Representerar en container
Div brukar inte användas med någon attribut, förutom eventuella style, klasser och/eller id, men dessa ska jag prata om mer senare.
<img>: Representerar en bild
Taggen <img> har en attribut "src", som pekar på en länk till en bild.
Såhär skriver man den:
<img src="https://www.google.se/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png/>
(/> är ett snabbt sätt att stänga taggen, eftersom bilden inte behöver någon mer information).
<style>: Här kan man skriva CSS-kod.
På EC kan man tyvärr bara skriva en "rad" av css-kod per style-tagg, vilket gör att man måste öppna väldigt många av dessa för att faktistk designa hela sin press.
Exempel:
<style>body {background-color: black;}</style>
Här är en lista på alla HTML-taggar som existerar och vad de är till för:
https://www.w3schools.com/tags/default.asp.
Vissa av dessa går inte att använda på EC.
HTML & CSS
För att kunna specificera element i CSS, så kan man referera till dem på olika sätt.
Klasser
För att specificera en klass i HTML, kan man på alla element använda sig av attributen "class". Denna klass blir sedan som en typ av kategori för komponenterna som äger den.
Exempel: <div class="textbox">
För att sedan nå dessa (och ändra bakgrundsfärgen till svart) i css kan man skriva:
.textbox {
background-color: black;
}
ID
För att specificera en ID i HTML kan man på alla element använda sig av attributen "id". Denna ID blir sedan som en typ av mall för den specifika komponenten som har denna ID.
Exempel: <div id="textbox">
För att sedan nå denna (och ändra bakgrundsfärgen till svart) i css kan man skriva:
#textbox {
background-color: black;
}
Med hjälp av klassnamn och ids kan man även stylea befintliga specifika delar av sidan.
För att hitta klassen på komponenten kan man högerklicka "inspektera element" och sedan välja var på sidan man vill ändra något.
Style
Ibland kan det vara smidigt att skriva css-kod till element redan i elementet. Då kan man använda sig av style-attributen. Detta kan göras med alla HTML-element.
Exempel: <div style="background-color: black;">.
Här är en lsta på alla CSS properties och vad de gör:
https://www.w3schools.com/cssref/default.asp.
Vissa av dessa går inte att använda på EC.
Hur gör jag ___?
Googla det. Om det handlar om design, så kan du anta att det är CSS.
Om det handlar om layout, så kan du anta att det är HTML. Men generellt går det att googla med bara "HTML" som kontext, eftersom CSS och HTML går hand i hand.
Om där finns något som ni inte hittar på Google, så fråga i tråden så ska jag (eller någon annan) titta på det. Men försök gärna att googla först.
Tack! :)
Varför är det inte tillåtet att skriva javascript. För xss attack? Man kan väl råda bot på sånt med ?escaping? eller va de nu heter?
Är detta varför det inte går o använda citationstecken btw? Det blir automatiskt frågetecken för mig
Citat från SoSoLately:
Varför är det inte tillåtet att skriva javascript. För xss attack? Man kan väl råda bot på sånt med ?escaping? eller va de nu heter?
Är detta varför det inte går o använda citationstecken btw? Det blir automatiskt frågetecken för mig
Precis. JavaScript kan användas för att till exempel hämta kakor och i kombination med det kan man exempelvis skicka en request till en annan server som registrerar kakorna.
Det är i allmänhet rätt osäkert att tillåta JavaScript av användare på sidor just för att webbläsaren förstår inte skillnaden på det JavaScript som kommer ifrån EC och det JavaScript som kommer från EC skrivet av en användare. Så att det hade inte varit supersvårt att sno kakor från användare vilket i sin tur kan leda till att folk kan logga in på andras konton.
Escaping används för att hindra användare att exekvera JavaScript och är det EC gör genom att filtrera speciella tecken som används av JavaScript.
Du måste vara inloggad för att skriva i forumet