1. Web development HTML and CSS

2. HTML – Hyper Text Markup Language • HMTL makes it possible to present information in a web browser. (View Source)

3. HTML Tags • HTML is made up of elements that give structure to the website. • Tags are labels you use to mark up the begining and end of an element. <b>Bold Text.</b> • Some exceptions to the rule. <br /> <hr />

4. A Basic HTML Website

5. Creating a very basic site • <html>  <head> <title>My first website</title> </head> <body> <h1> Page Title </h1> <p>Hello World> </p> </body> </html>

6. A Basic HTML Website • Launch Notepad (Windows) or TextEdit (Mac). • Enter the following code in the empty document window: <html> <body> Welcome to my first web page. </body> </html> • Save the file to the desktop as firstpage.html. • Launch a browser (Chrome or Safari). • Choose File > Open. Navigate to the desktop and select firstpage.html, and then click OK/Open.

7. A Basic HTML Website – the Title • Keep the Notepad (or TextEdit) file open. • After the <html> tag add the following line to the code: <head> <title>HTML Basics </title> </head> The code should now look like this: <html> <head> <title>HTML Basics </title> </head> <body> Welcome to my first web page. </body> </html>

8. HTML Syntax <html> <head> <title>HTML Basics </title> </head> <body> Welcome to my first website It is written in HTML </body> </html>

9. HTML Syntax <html> <head> <title>HTML Basics</title> </head> <body> <h1>Welcome to my first website</h1> <p>It is written in HTML.</p> </body> </html>

10. Dreamweaver

11. More HTML Elements • Line break Some text <br /> and some more text in a new line • Drawing a Line <hr /> • Paragraphs Breaking large chunks of text into paragraphs. <p>…</p>

12. More HTML Elements • Unordered List <ul> <li>A list item</li> <li>Another list item</li> </ul> • Ordered List <ol> <li>A list item</li> <li>Another list item</li> </ol> • A list item • Another list item A list item Another list item

13. HTML Attributes • Attributes allow more control over HTML elements • <h2 style="color:#ff0000;">A Heading</h2> • Drawing a Line <hr />

14. HTML Links • A simple link is an element with one attribute <a href="http://www.fake.com/">A link to a fake website</a> • A link can also have a title attribute that will appear on hover. <a href="http://www.html.net/" title="Visit HTML.net and learn HTML">Click Here</a>

15. HTML Image • Images need a source attribute, that is the place where to look to pick out the image <imgsrc="logo.jpg" alt="company logo" /> • An image can also be a link. <a href="http://www.html.net"> <imgsrc="logo.png" /> </a> • 7 • More image attributes. <imgsrc="logo.png" width="141px" height="32px" />

16. HTML Page

17. HTML Page <body> <h1>Welcome to my first website</h1> <p>It is written in HTML</p> <br /> <ul> <li>A list item</li> <li>Another list item</li> </ul> <br /> <ol> <li>A list item</li> <li>Another list item</li> </ol> <hr /> <a href=“www.google.com” >A link to google</a> <a href=“www.google.com” ><imgsrc=“google.jpg” /></a> </body>

18. HTML Tables • Tables are structured elements made out of rows and columns. <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> Table Row Table Data

19. HTML Tables Examples of HTML tables

20. HTML Tables HTML tables can be styled using attributes and CSS.

21. HTML <div> elements • The <div> tag is nothing more than a container for other tags. Most web pages today are built by using <div>’s. • The <div> tag defines a division or a section in an HTML document.

22. ID’s and Classes • ID’s and Classes are ways to identify and describe particular elements. <div id="footer"> <div class="sidebar-box"> • ID’s are unique, classes are not. • They can be used as ‘hooks’ for CSS • ID’s make it possible to have # urls.

23. ID’s and Classes

24. HTML Reference • http://www.w3schools.com/html/

25. CSS – Cascading Style Sheet • CSS is a style language that defines layout of HTML documents.

26. HTML Defaults

27. CSS

28. Including CSS • Embedded CSS: placed within the <head> … </head> tags. <style type="text/css" media=screen> p {color:#ff9900;} </style> • External CSS: separate file linked to the HTML pages <link rel="stylesheet" href="external_style_sheet.css" type="text/css">

29. Including CSS • Inline CSS: included as an HTML attribute. <h1 style=“color: #000”></h1>

30. CSS – Cascading Style Sheet • The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value. • selector { property: value } h1 { color: blue }

31. Specifying Elements • HTLM elements are styled by CSS by ‘hooking’ to the ID’s and Classes html-element-name.class-name { property:value; } html-element-name#id-name { property:value; }

32. CSS Rule Construction

33. CSS Examples – Styling Text • p.description-text { • color: #CCC; • text-transform: uppercase; • text-decoration:underline; • } LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT. DONEC ODIO. QUISQUE VOLUTPAT MATTIS EROS. NULLAM MALESUADA ERAT UT TURPIS.

34. CSS Examples – Styling Fonts • p.description-text { • font-family: ‘Georgia’; • font-size: 14px; • font-weight:bold; • } Loremipsum dolor sit amet, consectetueradipiscingelit. Donecodio. Quisquevolutpatmattiseros. Nullammalesuadaeratutturpis.

35. CSS Examples – Styling Fonts • <head> • <title>HTML Basics</title> • <style> • p#subtitle { • text-decoration: underline; • text-transform: uppercase; • font-family: 'Arial'; • } • p.description-text { • font-size: 14px; • font-weight: bold; • color: #CCC; • } • </style> • </head> • <body> • <h1>Basic CSS</h1> • <p id="subtitle">Cascading Style Sheets</p> • <p class="description-text">CSS is a style language that defines layout of HTML documents.</p> • <p class="description-text">For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things.</p> • </body>

36. CSS Examples – Styling Backgrounds • div.container { • background-color:#FFF; • background-image:url(images/bg.png); • background-repeat:repeat-x; • background-position: 0px 150px; • }

37. CSS Examples – Styling Links • a:link, a:visited { • color:#000; • text-decoration: none; • } • a:hover, a:active { • color: #014b94; • text-decoration:underline; • } www.google.com www.google.com

38. CSS Examples – Box Model • The box model allows us to place a border around elements and space them out.

39. CSS Examples – Border • div.container{ • border-color:#000; • border-style: dashed; • border-width: 5px; • }

40. CSS Examples – Margin and Padding • The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. • The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

41. CSS Examples – Margin and Padding • The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. • The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

42. CSS Examples – Padding and Margin Notation

43. CSS Examples – Positioning

44. CSS Examples – Floating • By default, elements stack under eachother, but they can be made to float horizontally. • img { • float:left; • margin: 5px; • }

45. CSS Rules • Cascade Theory • The last rule to be declared wins • Rule Priority • Inline style • Internal style sheet (in the head section) • External style sheet • Browser defaults

46. CSS Rules • Inheritance Theory • One rule can be affected by others • h1 {color: blue; font-family: Verdana} div h1 {color: red} <h1>I stand alone</h1> <div><h1>I’m in a div tag</h1></div> I stand alone I’m in a div tag • The div h1 still obeyed the font rule of the first declaration.

47. CSS Rules • Descendant Theory • Formatting a target based on its relationship with other element • h1 {color: blue; font-family: Verdana} div h1 {color: red; font-family: Impact} div.product h1 {color: green; font-family: Times} <h1>I stand alone</h1> <div><h1>I’m in a div tag</h1></div> <div class=“product”><h1>I’m in product div</h1></div> I stand alone I’m in a div tag I’m in product div

48. CSS Rules • Specificity Theory • Some rules have more weight than others • h1 {color: blue; font-family: Verdana} div h1 {color: red; font-family: Impact} div.product h1 {color: green; font-family: Times} <div class=“product”> <h1 style=“color:orange>I have inline CSS</h1> </div> I have inline CSS

49. CSS Reference • http://www.w3schools.com/css/ • http://www.w3schools.com/css3/

50. The Goal