HTML Diverse tips
Diverse tips
Webfont
Använda andra fonter till sin webbsida.
Här är ett exempel:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>fontdemo</title>
<link href='https://fonts.googleapis.com/css?family=Caesar Dressing' rel='stylesheet'>
<style>
body {
font-family: 'Caesar Dressing';
font-size: 22px;
}
</style>
</head>
<body>
<h1>Caesar Dressing</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p></p>
<p><a href="https://developers.google.com/fonts/docs/getting_started" target="blank">Hur man använder googles api för fonter</a></p>
</body>
</html>
Favicon
Den lilla bilden uppe på fliken till webbsidan som visas tillsammans med webbsidans titel kallas favicon och den kan anpassas. Vi länkar till en speciell bild med link inuti head-delen.
Här är ett exempel:
<link rel='shortcut icon' href='images/favicon.ico' />
</head>
Det vanligaste är bildfiler med ändelsen ico, men idag fungerar även png-filer. Mer info om formatet ico och exempel på program för att skapa ico-filer.
Alltid visa scroller till höger
Om man skapar flera sidor som ska ha samma design men med lite olika innehåll så kan sidorna ibland hoppa till och förflytta sig litegrann. Det är då scrollern till höger som dyker upp respektive försvinner då sidans innehåll är aningen större än skärmen respektive innehållet är aningen mindre än skärmen och får plats. Det kan då var praktiskt att alltid ha en "scrollbar".
Skriv följande i stilmallen:
overflow-y: scroll;
}
Det vanligaste är bildfiler med ändelsen ico, men idag fungerar även png-filer. Mer info om formatet ico och exempel på program för att skapa ico-filer.
Enheter px, em, %, vw, vh
Här länkas till W3C's egna rekommendationer och även lite exempel skapade av w3schools.
Filmer