Webbprogrammering. En introduktion till html & CSS

Storlek: px

Starta visningen från sidan:

Download "Webbprogrammering. En introduktion till html & CSS"

Ann Magnusson
för 7 år sedan
Visningar:

1 Webbprogrammering En introduktion till html & CSS

2 Vi ser dem överallt och för många, varje dag Sedan WWW tillkom under tidigt 90-tal har webben idag vuxit till att omfatta många hundratals miljoner sidor

3 Grunden för vad du ser: html Exakt vad du ser och hur det ser ut kan bero på din webb-läsare men i grunden skall alla sidor se likadana ut oavsett läsare Det som styr heter html

4 Först: några definitioner WWW -- World Wide Web http -- hypertext Transport Protocol, https -- hypertext Transfer Protocol Secure html -- hypertext Markup Language

5 html sidan: grundelement <html> <head> <title> Webbsida </title> </head> <body> <h1> hello World </h1> <! Kommentar, som inte syns > </body> </html> <> kallas taggar <> start </> slut <html> Inkapslar dokumentet (webbsidan) <head> Rubriken <BODY> Själva webbsidan

7 BODY Element <BODY attributnamn="attributvärde"> Används inte så ofta längre (numera används CSS) background= Sunset.jpg (can be tiled) bgcolor=color text=color link=color (unvisited links) vlink=color (visited links) alink=color (when selected)

9 headings <h1...> text </h1> -- Störst <h2...> text </h2> <h3...> text </h3> <h4...> text </h4> <h5...> text </h5> <h6...> text </h6> -- Minst ALIGN="position" --left (default), center or right

10 headings <html> <head> <title>headings</title> </head> <body> Samples of the six heading types: <h1>level-1 (h1)</h1> <h2 align="center">level-2 (h2)</h2> <h3><u>level-3 (h3)</u></h3> <h4 align="right">level-4 (h4)</h4> <h5>level-5 (h5)</h5> <h6>level-6 (h6)</h6> </body> </html>

11 headings

12 <body> <p> <p> Paragraph <p> definierar en paragraf och texten hänger samman i ett stycke Flera <p> taggar skapar inte radbrytning Använd <br /> för radbrytningar Första paragrafen: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis diam dolor, facilisis convallis felis. Etiam augue velit, sagittis vitae euismod eu, egestas vel risus. Pellentesque aliquet quam tincidunt metus imperdiet ultrices. Praesent eleifend... </p> <p> Andra Paragrafen: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived... </p> <p> Tredje paragrafen</p> </body>

14 <div> <div> definierar en avdelning eller ett avsnitt i ett HTML-dokument. <div> taggen används ofta för att gruppen blockelement för att formatera dem med olika stilar.

15 <body> <h3>detta är rubrik h3</h3> <p> Detta är en paragraf. </p> <div style="color: #00FF00; border:1px solid #FF00FF; width: 150px; position: relative; top: 80px; left: 434px;"> <h3>detta är rubrik h3</h3> <p> Detta är en paragraf. </p> </div> </body>

16 Specialtecken Tecken Skriv < < > > & & " " Blanksteg

17 Färger Värden för BGCOLOR och COLOR Använd fördefinierade (red, blue, green ) Alla färger kan anges med sitt hexadecimala värde: RRGGBB FF0000 röd grå mörkgrön FFFF00 gul Alla är dock inte webbsäkra, dvs färgen återges korrekt i alla läsare

18 Fonter <FONT COLOR="red" SIZE="2" FACE="Times Roman"> This is the text of line one </FONT> <FONT COLOR="green" SIZE="4" FACE="Arial"> Line two contains this text </FONT> <FONT COLOR="blue" SIZE="6" FACE="Courier" The third line has this additional text </FONT> <FONT> är numera förlegat då man i stället styr via CSS.

19 Numrerade listor <OL TYPE="1"> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE="I" > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE="i"> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL> </OL>

20 Onumrerade listor <UL TYPE="disc"> <LI> One </LI> <LI> Two </LI> <UL TYPE="circle"> <LI> Three </LI> <LI> Four </LI> <UL TYPE="square"> <LI> Five </LI> <LI> Six </LI> </UL> </UL> </UL>

En mängd olika teckentyper <h1>physical Character Styles</h1> <B>Bold</B><br> <I>Italic</I><br> <TT>Teletype (Monospaced)</TT><br> <U>Underlined</U><br> Subscripts: f<sub>0</sub> + f<sub>1</sub><br>

21 En mängd olika teckentyper <h1>physical Character Styles</h1> <B>Bold</B><br> <I>Italic</I><br> <TT>Teletype (Monospaced)</TT><br> <U>Underlined</U><br> Subscripts: f<sub>0</sub> + f<sub>1</sub><br> Superscripts: x<sup>2</sup> + y<sup>2</sup><br> <SMALL>Smaller</SMALL><br> <BIG>Bigger</BIG><br> <STRIKE>Strike Through</STRIKE><br> <B><I>Bold Italic</I></B><br> <BIG><TT>Big Monospaced</TT></BIG><br> <SMALL><I>Small Italic</I></SMALL><br> <FONT COLOR="GRAY">Gray</FONT><br> <DEL>Delete</DEL><br> <INS>Insert</INS><br>

Logiska teckenpresentationer <h1>logical Character Styles</h1> <EM>Emphasized</EM><br> <STRONG>Strongly Emphasized</STRONG><br> <CODE>Code</CODE><br> <SAMP>Sample Output</SAMP><br> <KBD>Keyboard

22 Logiska teckenpresentationer <h1>logical Character Styles</h1> <EM>Emphasized</EM><br> <STRONG>Strongly Emphasized</STRONG><br> <CODE>Code</CODE><br> <SAMP>Sample Output</SAMP><br> <KBD>Keyboard Text</KBD><br> <DFN>Definition</DFN><br> <VAR>Variable</VAR><br> <CITE>Citation</CITE><br> <EM><CODE>Emphasized Code</CODE></EM><br> <FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><br> <ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRON

23 Länkar Absolut URL: <a href=" </a> Relativ URL: <a href="sida2.html"> Nästa sida</a>

Länkar <BODY> <h3>welcome to <A href="http://www.cs.virginia.

24 Länkar <BODY> <h3>welcome to <A href=" <STRONG>Computer Science</STRONG></A> at the <A href=" of Virginia.</A> </h3> </BODY>

25 Bilder (images) SRC behövs, visar var bilden lagras width, height anges i pixlar eller i procent av skärmen/ramens storlek width ="357" height ="50%" Bilder kan även få ta det utrymme som finns

26 Bilder Align=position Image/Text Placement Left Right Top Bottom Middle Image on left edge; text flows to right of image Image on right edge; text flows to left Image is left; words align with top of image Image is left; words align with bottom of image Words align with middle of image

27 Images <body> <img src="chrysanthemum.jpg" align="left" width="150" height="150" alt="dolphin jump!"> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> Söt liten blomma till vänster<br> You can see text wrap around it<br> </body>

28 ALIGN="left"

29 ALIGN="right"

30 Cascading Style Sheets A powerful way to specify styles and formatting across all documents in a web site Style sheets can be specified inline or as a separate document helps to keep a common look and feel

31 CSS General form: selector {property: value} or selector {property1: value1; property2: value2;... propertyn: valuen }

32 CSS h1 {text-align: center; color: blue; font: Arial, Times New Roman} P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}

33 Blommogram (utan CSS) <html> <head> <title>bild</title> </head> <body> <h1> Dagens blommogram</h1> <h2> DAGENS ROOS</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and<strong> scrambled</strong> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </body> </html>

34 Fizzics1 From: Core Web Programming, Marty hall and Larry brown, 2002

35 Blommogram(med CSS) <style type="text/css"> body { background: URL(Chrysanthemum.jpg); } h1 { text-align: center; font-family: Blackout; } h2 { font-family: Berlin Sans FB; } STRONG { text-decoration: underline; } p { font-family: Berlin Sans FB; font-size:18px; } </style>

36 Fizzics2 (with style sheet) From: Core Web Programming, Marty hall and Larry brown, 2002

37 Extern CSS <link rel="stylesheet" type="text/css" href= " style.css" />

38 Länktips

Relevanta dokument

Grafisk micromanual. Grafiska riktlinjer gällande kontorsmaterial

Grafisk micromanual. Grafiska riktlinjer gällande kontorsmaterial Grafisk micromanual Grafiska riktlinjer gällande kontorsmaterial Grafiska riktlinjer Allt och alla har en identitet. Vi har det som människor, som företag och även många produkter har starka identiteter.