1 / 62

Web development

Web development. HTML and CSS. HTML – Hyper Text Markup Language. HMTL makes it possible to present information in a web browser. (View Source). HTML Tags. HTML is made up of elements that give structure to the website.

monzon
Download Presentation

Web development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related