Vecka 2
- baran11366
- 6 nov. 2015
- 2 min läsning
HTML & CSS
Den här veckan lärde vi oss om HTML och CSS.
HTML:förkortning för HyperText Markup Language är ett märkspråk för hypertext. En webbläsare läser av HTML kodningen och utformar webbsidans utseendet där efter.
HTML ger möjlighet att ange ett dokuments struktur (rubriker, styckeindelning), metainformation (språk, författare, plats i en hierarki) och i viss mån hur dokumentet skall visas. HTML tillåter också att man infogar information av andra typer, eventuellt i andra filer, från början framförallt bilder och instruktioner för hur sidan skall visas (CSS). Det revolutionerande var dels bilderna, dels hur lätt det var att länka till andra webbsidor.
HTML kompletteras ofta med CSS. Jag som har en HPdatorn gjorde min kodning i Notepad++ . Sedan sparade jag ner filen som ett html dokument och döpte detta till index.html, vilket man tydligen alltid ska döpa det första html dokumentet till, för att underlätta för läsaren att läsa av.
HTML språket består av taggar och sluttaggar, ex: <tagg> </sluttagg>
http://www.w3schools.com hjälper oss för att hitta HTML koder.
Exempel:
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <a href="lindex.html">Sida två</a> </head> <body>
<h1>Min första hemsidan</h1> <h2>Neda Nahavandi</h2> <p>vi testar verkligen.</p>
</body> </html>
CSS: Cascading Style Sheets är ett språk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg. Tekniken är ett sätt att anpassa dokumentet med hänsyn till datortyp, skärmupplösning,färgdjup och installerade typsnitt.
Vi gick även idag in på W3schools för att prova på lite själva. Där har de väldigt tydliga och enkla övningar.
Det går att kominera HTML och CSS i samma kod men det är inte att rekommendera då det kan bli rörigt. Om man nu väljer att göra det så använder man taggarna:
<style> Här är alla CSS grejer </style>
För att styra alla paragrafer som är taggade <p> i HTML så använder man samma tagg i CSS och skriver } p där information ändras/läggs till för att styra paragrafens utseende.
CSS KOD:
body { background-color: #d0e4fe; }
h1 { color: orange; text-align: center; }
p { font-family: "Times New Roman"; font-size: 20px; } </style> </head> <body>
<h1>My First CSS Example</h1> <p>This is a paragraph.</p>
}
Exempel Kombination av HTML & CSS:
När man skriver HTML och CSS i separata textfiler, måste man döpa CSS filen till .css på slutet och använd inga mellanslag, å, ä eller ö i namnet, Lägga filen i samma mapp som HTML koden och till slut måste man länka HTML konden till CSS filen.
CSS KOD:
body { background-color: #d0e4fe; }
h1 { color: orange; text-align: center; }
p { font-family: "Times New Roman"; font-size: 20px; } </style> </head> <body>
<h1>My First CSS Example</h1> <p>This is a paragraph.</p>
}
Comments