HTML+CSS - sidan 2


HTML+CSS Sidan 2	HTML 1 Sidan 1 Vad kommer du att lära dig? Vad är HTML? Utrustning och förkunskaper. Börja skriva HTML. Ditt material / innehållet. Viktigt att uppdatera sidan. , 2 Sidan 2 Radbrytning, Nytt stycke, Mellanslag. Storlek på rubriker. Egenskaper för en tagg. ASCII kod., 3 Sidan 3 Bakgrundsfärg. Viktigt att komma ihåg. Textfärg. Bakgrundsbild. Skapa en mall. , 4 Sidan 4 Centrering och högerjustering. Justering av text kant. Påverka en hel grupp element. Indrag vänster- och högermarginal. Fet och kursiv text. -------------------------------------- Sidan 4-1 Horisontell avgränsare. Skapa utrymme med PRE Understruken eller genomstruken text. Teletype, Nedsänkt, Upphöjd text. Öka textstorlek. Skriva baklänges Skriva kommentarer i koden. , 5 Sidan 5 Ändra textstorlek. Ändra textfärg. Använda olika teckensnitt. -------------------------- Sidan 5-1 Skapa Listor , 6 Sidan 6 Infoga bilder/grafik. Viktiga egenskaper. Styra bild och text. Antal bilder i sidan. Bild riktning Sidan 6-1 Viktigt att ange bild storlek. , 7 Sidan 7 Om olika sorts länkar Sidan 7 till 7-8 , 8 Sidan 8 Vad är tabeller? Grunder för att skapa tabeller. ------------------------------- Sidan 8-1 Visa ram och linjer i en tabell. , 9 Sidan 9 Justera tabeller. Egenskaper för tabeller. , 10 Sidan 10 Egenskaper för celler. --------------------------------------- Sidan 10-1 Skapa rubriker för och i tabeller. Skapa en cell som sträcker över flera kolumner. Skapa en cell som sträcker över flera rader. Skapa en cell som sträcker över flera kolumner och rader , 11 Sidan 11 Skapa en tabell i en annan tabell. , 12 Sidan 12 Skapa en tabell inifrån och ut. , 13 Sidan 13 Planera dina tabeller. Infoga befintligt material i en tabell. Skapa tabellen runt befintlig material. , 14 Sidan 14 Bakgrunds bild i tabeller. --------------------------- Sidan 14-1 Bakgrunds bild i en cell , 15 Sidan 15 Ramar (Frames). Skapa ramar. , 16 Sidan 16 Ramar i ramar. Länkning i ramar. Skapa för webbläsare som inte klarar ramar. För och emot ramar. --------------------------------------- Sidan 16-1 Inline Ramar Sidan 16-2 Justera inline ramar. , HTML + CSS 1 Skriva kod HTML 4.01 Rubriker Nytt stycke - P tagg. Radbrytning - BR tagg. Infoga mellanslag. Introduktion till CSS Skriva kommentarer i CSS Ändra teckensnitt med CSS Ändra teckenstorlek med CSS Ändra teckenstil med CSS. , 3 Ändra teckentyngd med CSS Ändra teckenavstånd med CSS Ändra teckenfärg med CSS Ändra bakgrundsfärg med CSS , CSS 1 Sidan 1 Vad är CSS? Vad kan du göra med CSS? Förkunskaper. Olika sätt att skriva CSS. Påverka enksilda rader , 2 CSS kod för en dokument. Lite mer kod för text , 3Sidan 3 Text egenskaper Sidan 3-1 Font egenskaper , 4Bakgrunds bild. , 5 Länka till en extern CSS dokument Skriva ett CSS dokument , 6Sidan 6 Marginaler , 7ID CLASS , 8 Placera bilder / text Använda Z-INDEX , 9 Sidan 9 Skapa kanter runt element. , 10 Bakgrundsfärg i tabeller , 11 Bakgrundsbild i tabeller , 12 Bakgrundsbild i celler

1 < > 3

På denna sida : 2 :	På sidan 3:	AC Adapter laddare + USB Data & laddnings kabel för iPad / iPhone + laddare för bil - White + Deep Blue Pris: $7.50 EUR 6.25 c.a. 53 ~55 Kr. Fri frakt ~ 2 till 3 veckor.
Introduktion till CSS	Ändra teckentyngd med CSS
Skriva kommentarer i CSS	Ändra teckenavstånd med CSS
Ändra teckensnitt med CSS	Ändra teckenfärg med CSS
Ändra teckenstorlek med CSS	Ändra bakgrundsfärg med CSS
Ändra teckenstil med CSS	Ändra teckentyngd med CSS

Introduktion till CSS. Läs mer om CSS här.

CSS är ett sätt att separera innehåll och struktur i en HTML / XHTML dokument. Man skapar två text dokument. På det ena infogas innehåll som delas upp i olika element med hjälp av P och DIV etc. Den sparas som en vanlig HTML dokument.

I det andra dokument skrivs regler för formattering av innehåll i ett språk som heter CSS och man har en länk mellan dessa två dokument. HTML dokument är huvuddokument och den hämtar andra filer som behövs och en av dessa är CSS dokument.

När man öppnar HTML dokument i webbläsare den går igenom innehållet och för varje tagg som inträffas undersöks om det finns ett beskrvning i CSS dokument om hur det element ska formatteras. Om det finns utförs det annars fortsätter webbläsare att visa innehållet som skrivet.

Man kan ha en eller flera HTML dokument kopplat till samma CSS dokument och alla följer CSS instruktioner. Vill man ändra t.ex. typsnitt man ändrar bara i CSS dokument och den slår igenom i alla dokument. CSS dokument fungerar som en mall.

Vi ska nu skapa en HTML dokument och samtidigt en tillhörande CSS dokument steg för steg. Det finns andra sätt där man skriver CSS kod dirket i HTML dokument men dessa ska vi titta på sist.

Containertyp blockelement och inlineelement. - När man formattera text i HTML och XHTML används två typer av containrar. Blockelement är en container för en hel stycke medan inlineelement används inne i ett blockelement. T.ex. H1 och P är blockelement medan B, för fetstil, är ett inlineelement.

Skriva kommentarer.

Det är alltid klokt att lägga in kommentarer i koden antigen det är HTML eller CSS. Efter en längre tid det kan vara svårt att veta var de olika kod bitar finns eller vad de gör.

I HTML man börjar en kommentar med  och allt som står mellan dessa tecken ignoreras av webbläsaren. T.ex.

I CSS börja en kommentar med /* och avslutas med */ t.ex. /* Nästa stycke - ändra teckensnitt med CSS */

Ändra teckensnitt. Läs mer här.

Vi använder egenskap FONT-FAMILY för att ange vilken teckensnitt ska användas.

För att spara på utrymme skriver jag bara inledning för DOCTYPE Skriv hela kod när du skriver på riktigt.

Vi har två dokument nedan. Till vänster ett HTML dokument och till höger ett CSS dokument. Länk som föbinder dessa två finns i den HTML dokument och ska skrivas i HEAD container. Se raden i fett stil till vänster. Notera href = CSS filnmn.

HTML kod - filnamn = htmltestcss-1.htm

CSS kod - filnamn = testcss1.css

<!DOCTYPE HTML PUBLIC-------------------->
<html>
<head>
<link href="testcss1.css" rel =stylesheet type="text/css">
<title>
HTML test sidan 1
</title>
</head>
<body>
<h1>Vilda djur i Afrika.</h1>
<p>Det finns få ställe där man ser så många vilda djur.</p>
<p>Många turister vill se Lejon, elefanter och noshörning.<br>
Fast det finns så mycket mer.<br>
Zebror, giraffer, antiloper och ofantligt mer.</p>
</body>
</html>

body {
font-family: impact;
}

Titta på denna bild.

Vill du läsa mer om CSS kod se meny för CSS

Se HTML kod här eller där. Se CSS kod här eller där. Se webbsidan här eller där. och utan CSS här. XHTML.

Förklaring om länk radens olika delar

link		Vi använder LINK element för att länka till CSS dokument .
href="testcss1.css"		Referens till CSS filen och var den finns. Ange sökväg om nödvändigt.
rel=stylesheet		Definierar relation mellan HTML fil och CSS fil.
type="text/css"		Information till webbläsare om media typ vilket i detta fall är CSS dokument.

I CSS dokument vi skriver den instruktion / instruktioner som ska påverkas. För att börja med vi skriver bara en intruktion vilket är BODY och det som finns i BODY tagg ska formatteras av CSS. Läs lite mer om CSS kod / regel nedan.

body {		Skriv BODY ( i små bokstäver ) följt av {
font-family: impact;		FONT-FAMILY = typsnitt familj. Typsnitt i BODY ska ändras till typsnitt IMPACT
}		Stäng koden med }

Vad som händer är att webbläsare för order att typsnitt som används i BODY ska ersättas av IMPACT från typsnitt familj.

Det var allt. Vi sparar CSS dokument som testcss1.css och HTML dokument som htmltestcss-1.html

Det är klart du kan välja egna namn för dina dokument men glöm inte att ange rätt CSS filnamn i länken. Öppna HTML dokument i webbläsare för att testa att typsnitt har ändrats.

Något som är mycket viktigt är att om man har CSS dokument i ett annat mapp att man anger sökväg i länken så att HTML dokument hittar till CSS dokument. Vill du läsa om hur man skriver sökväg titta här.

Vad händer om det finns en dator som inte har IMPACT typsnitt? I ett sådant fall används standardtypsnitt. Man kan ge en lista av olika typsnitt om man vill använda ett lite annorlunda typsnitt. Se nedan.

font-family: impact, helvetica, sans-serif;

Vi skiljer varje värde med komma och det är den sista som avslutas med semikolon. Datorn går igenom listan och använder den första som finns i datorn annars används standardtypsnitt.

Undvik riktigt udda och exotiska typsnitt som du har laddat ner. Använd sådan endast för att skriva ut dokument.. Dina besökare måste ha samma typsnitt om de ska kunna se dina sidor i det typsnitt. Läs mer om typsnitt ( FONT ) på sidan CSS 3-1

När man öppnar HTML sidan i webbläsare undersöker webbläsare om det finns formatterings kod i CSS dokument för de taggar som har använts i HTML dokument.. BODY tagg finns i CSS dokument och typsnitt ändras från standard till IMPACT tills vi avslutar med </body>

Låt oss nu ändra teckenstorlek i HTML dokumentet genom att ange en CSS regel i CSS dokument.

Ändra teckenstorlek. Läs mer här.

Vi använder egenskap FONT-SIZE för att ange vilken storlek bokstäver ska ha.

Mått enheter som vi använder är PIXLAR , PROCENT , EM och MM

Pixlar ( px )		1 px = höjden av en bildpunkt på skärmen. Undvik mindre värde än 10 px.
Procent ( % )		Beror på standardstorleken på text. T.ex. 200% gör att bokstäverna blir dubbelt so stor.
EM		Lik procent men värdet 1em motsvarar 100% eller 2em = 200%. 0.5em = 50%
MM		Står för millimeter och man anger hur stor bokstäver ska vara som t.ex. 3mm eller10mm

För att kunna hålla de olika exempel isär jag måste skriva ett nytt CSS filen som döps till testcss2.css detta eftersom jag lägger till nytt kod i CSS filen och på samma sätt HTML filnamn har ändrats till htmltestcss-2.htm p.g.av filen har ändrats när jag anropar ett nytt CSS fil. Du behöver inte göra detta men bara ändra i din CSS fil allt eftersom.

HTML kod - filnamn = htmltestcss-2.htm

CSS kod - filnamn = testcss2.css

<!DOCTYPE HTML PUBLIC-------------------->
<html>
<head>
<link href="testcss2.css" rel =stylesheet type="text/css">
<title>
HTML test sidan 1
</title>
</head>
<body>
<h1>Vilda djur i Afrika.</h1>
<p>Det finns få ställe där man ser så många vilda djur.</p>
<p>Många turister vill se Lejon, elefanter och noshörning.<br>
Fast det finns så mycket mer.<br>
Zebror, giraffer, antiloper och ofantligt mer.</p>
</body>
</html>

body {
font-family: impact;
}

/* Notera kommentarer nedan */

h1 {
font-size: 70px; /* 70px skrivs som ett ord */
}

p {
font-size: 4mm; /* 4mm skrivs som ett ord */
}

Se HTML kod här eller där. Se CSS kod här eller där. Se webbsidan här eller där. och utan CSS här. XHTML.

I den första CSS fil, testcss1.css jag angav att all text inom BODY ska ändras till typsnitt IMPACT och nu har jag utökat med formattering av H1 och P där textstorlek för all text i H1 container ska vara 70px och all text i P container ska ha 4 mm storlek och filen har döpts till testcss2.css

Du kan testa med de övriga måttenheter och se vilken är mest lämpad för ditt ändamål. Du har mest kontroll med PX.

Ändra teckenstil. Läs mer här.

Med egenskap FONT-STYLE vi ska ange teckenstil. Det finns tre olika stiler.

Normal Normal eller standard teckenstil.

Italic Texten lutar eller blir kursiverad.

Oblique Texten lutar till höger. Tekniskt sätt det är inte det samma som Italic men på det flesta skärmar de ser identiskt.

Obs! Jag har ändrat 70px till 100px och 4mm till 6mm i CSS filen. Bara för att få lite ändring i webbsidan.

HTML kod - filnamn = htmltestcss-3.htm

CSS kod - filnamn = testcss3.css

<!DOCTYPE HTML PUBLIC-------------------->
<html>
<head>
<link href="testcss3.css" rel =stylesheet type="text/css">
<title>
HTML test sidan 1
</title>
</head>
<body>
<h1>Vilda djur i Afrika.</h1>
<p>Det finns få ställe där man ser så många vilda djur.</p>
<p>Många turister vill se Lejon, elefanter och noshörning.<br>
Fast det finns så mycket mer.<br>
Zebror, giraffer, antiloper och ofantligt mer.</p>
</body>
</html>

body {
font-family: impact;
}

/* Notera kommentarer nedan */

h1 {

font-size: 100px; /* 100px skrivs som ett ord */
font-style: italic;
}

p {
font-size: 6mm; /* 6mm skrivs som ett ord */
font-style: oblique;
}

Se HTML kod här eller där. Se CSS kod här eller där. Se webbsidan här eller där. och utan CSS här. XHTML.

CSS kod, ovan till höger, visar hur man kan ändra flera egenskaper för samma instruktion i samma CSS regel. Ttitta på denna bild.

CSS koden har utökats så att allt text i H1 container är nu storlek 100px och har stilen ITALIC. Dessutom all text i P container har fått storlek 6mm och stilen är OBLIQUE.

På nästan sidan

Ändra teckentyngd med CSS
Ändra teckenavstånd med CSS
Ändra teckenfärg med CSS
Ändra bakgrundsfärg med CSS
Ändra teckentyngd med CSS

1 < > 3

Hemsidan

HTML Menyn

CSS Menyn

Flash Menyn

Taggar

Färgkoder

Olika tips

Olika länkar

Lexikon
1 2 3 4

Alt Gr

ASCI

BMP

Browser

Bugs

Default

Desktop

Doctype

Domain

Filer / Fil

GIF

Hexadecimal

HTML/HTM

Hårddisken/HD

IBM

IE 6.0

Internet

Ikon

InternetExplorer

JPEG / JPG

Kod

Källkod

Layout

Länkar

Mapp

Modem

Ordbehandling

Operativsystem

Pixel

PNG

Sajt

SGML

Servrar

Säkra färger

Tag

Textformat

Tolka

URL

Upplösning

Webbläsare

Webbsajt

Webbserver

Windows 95

Word

WWW


HTML+CSS - 2 46 Kb	Hemsidan HTML CSS Flash Webbdesign Färgkoder Sidan 1 Sidan 1 Vad kommer du att lära dig? Vad är HTML? Utrustning och förkunskaper. Börja skriva HTML. Ditt material / innehållet. Viktigt att uppdatera sidan. , 2 Sidan 2 Radbrytning, Nytt stycke, Mellanslag. Storlek på rubriker. Egenskaper för en tagg. ASCII kod. , 3 Sidan 3 Bakgrundsfärg. Viktigt att komma ihåg. Textfärg. Bakgrundsbild. Skapa en mall. , 4 Sidan 4 Centrering och högerjustering. Justering av text kant. Påverka en hel grupp element. Indrag vänster- och högermarginal. Fet och kursiv text. -------------------------------------- Sidan 4-1 Horisontell avgränsare. Skapa utrymme med PRE Understruken eller genomstruken text. Teletype, Nedsänkt, Upphöjd text. Öka textstorlek. Skriva baklänges Skriva kommentarer i koden. , 5 Sidan 5 Ändra textstorlek. Ändra textfärg. Använda olika teckensnitt. -------------------------- Sidan 5-1 Skapa Listor , 6 Sidan 6 Infoga bilder/grafik. Viktiga egenskaper. Styra bild och text. Antal bilder i sidan. Bild riktning Sidan 6-1 Viktigt att ange bild storlek. , 7 Sidan 7 Om olika sorts länkar Sidan 7 till 7-8 , 8 Sidan 8 Vad är tabeller? Grunder för att skapa tabeller. ------------------------------- Sidan 8-1 Visa ram och linjer i en tabell. , 9 Sidan 9 Justera tabeller. Egenskaper för tabeller. , 10 Sidan 10 Egenskaper för celler. --------------------------------------- Sidan 10-1 Skapa rubriker för och i tabeller. Skapa en cell som sträcker över flera kolumner. Skapa en cell som sträcker över flera rader. Skapa en cell som sträcker över flera kolumner och rader , 11 Sidan 11 Skapa en tabell i en annan tabell. , 12 Sidan 12 Skapa en tabell inifrån och ut. , 13 Sidan 13 Planera dina tabeller. Infoga befintligt material i en tabell. Skapa tabellen runt befintlig material. , 14 Sidan 14 Bakgrunds bild i tabeller. --------------------------- Sidan 14-1 Bakgrunds bild i en cell , 15 Sidan 15 Ramar (Frames). Skapa ramar. , 16 Sidan 16 Ramar i ramar. Länkning i ramar. Skapa för webbläsare som inte klarar ramar. För och emot ramar. --------------------------------------- Sidan 16-1 Inline Ramar Sidan 16-2 Justera inline ramar. ,

Hos Passagen konsumentguider hittar du en bra samling av olika låneföretag som erbjuder billiga lån via internet
. Oavsett ifall du vill låna 500 kronor eller mer så hittar du ett erbjudande som kan passa bra.