Webbprogrammering En introduktion till html & CSS
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
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
Först: några definitioner WWW -- World Wide Web http -- hypertext Transport Protocol, https -- hypertext Transfer Protocol Secure html -- hypertext Markup Language
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
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)
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
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>
headings
<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>
<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.
<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>
Specialtecken Tecken Skriv < < > > & & " " Blanksteg
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 888888 grå 004400 mörkgrön FFFF00 gul Alla är dock inte webbsäkra, dvs färgen återges korrekt i alla läsare
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.
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>
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> 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 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
Länkar Absolut URL: <a href="http:www.facebook.com">facebook </a> Relativ URL: <a href="sida2.html"> Nästa sida</a>
Länkar <BODY> <h3>welcome to <A href="http://www.cs.virginia.edu"> <STRONG>Computer Science</STRONG></A> at the <A href="www.virginia.edu">university of Virginia.</A> </h3> </BODY>
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
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
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>
ALIGN="left"
ALIGN="right"
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
CSS General form: selector {property: value} or selector {property1: value1; property2: value2;... propertyn: valuen }
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}
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>
Fizzics1 From: Core Web Programming, Marty hall and Larry brown, 2002
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>
Fizzics2 (with style sheet) From: Core Web Programming, Marty hall and Larry brown, 2002
Extern CSS <link rel="stylesheet" type="text/css" href= " style.css" />
Länktips http://w3schools.com/