1 / 29

کلاس عملی درس مهندسی نرم افزار

به نام خدا . کلاس عملی درس مهندسی نرم افزار. جلسه ی پنجم. برنامه ی امروز . چند منبع خوب. مقدمات HTML و CSS. نمونه ی عملی . جلسه ی گذشته . جلسه ی گذشته . برنامه ی امروز . چند منبع خوب. مقدمات HTML و CSS. نمونه ی عملی. جلسه ی گذشته . . HTML Basics. HTML Basic Document.

shawna
Download Presentation

کلاس عملی درس مهندسی نرم افزار

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. به نام خدا کلاس عملی درس مهندسی نرم افزار جلسه ی پنجم

  2. برنامه ی امروز چند منبع خوب مقدمات HTML و CSS نمونه ی عملی جلسه ی گذشته

  3. جلسه ی گذشته

  4. برنامه ی امروز چند منبع خوب مقدمات HTML و CSS نمونه ی عملی جلسه ی گذشته 

  5. HTML Basics

  6. HTML Basic Document <html> <head> <title>Title of document goes here</title> </head> <body> Visible text goes here...</body> </html>

  7. Heading Elements: <h1>Largest Heading</h1> <h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5> <h6>Smallest Heading</h6>

  8. Text Elements <p>This is a paragraph</p><br/><hr/> <em>This text is emphasized</em><strong>This text is strong</strong><code>This is some computer code</code> <b>This text is bold</b><i>This text is italic</i>

  9. Links <a href="http://www.example.com/">Link-text goes here</a> <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a> <a href="mailto:webmaster@example.com">Send e-mail</a> <a name="tips">Tips Section</a><a href="#tips">Jump to the Tips Section</a>

  10. Layout <div></div> <span></span>

  11. Lists • Unordered list <ul>  <li>Item</li>  <li>Item</li></ul> • Ordered list <ol>  <li>First item</li>  <li>Second item</li></ol>

  12. Tables <table border="1">  <tr>    <th>Tableheader</th>    <th>Tableheader</th>  </tr>  <tr>    <td>sometext</td>    <td>sometext</td>  </tr></table>

  13. Forms <form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50" /> <input type="password" /> <input type="checkbox" checked="checked" /> <input type="radio" checked="checked" /> <input type="submit" value="Send" /> <input type="reset" /> <input type="hidden" /> <select> <option>Apples</option> <option selected="selected">Bananas</option> <option>Cherries</option> </select> <textarea name="comment" rows="60" cols="20"></textarea></form>

  14. CSS Basics

  15. Syntax selector { property: value } body {  background: #eeeeee;  font-family: “Trebuchet MS”, Verdana, Arial, serif;} h1, h2, h3, h4, h5, h6 {  color: #009900;  font-family: Georgia, sans-serif;} /* This is a comment */

  16. Classes and IDs

  17. Block vs. Inline display Block: Takes up the full width available, with a new line before and after (display:block;) Inline: Takes up only as much width as it needs, and does not force new lines (display:inline;)

  18. The box model

  19. Position Static: Static positioning is by default the way an element will appear in the normal flow of your (X)HTML file.  Relative: Positioning an element relatively places the element in the normal flow of your (X)HTML file and then offsets it by some amount using the properties left, right, top and bottom. 

  20. Position Absolute: Positioning an element absolutely, removes the element from the normal flow of your (X)HTML file, and positions it to the top left of its nearest parent element that has a position declared other than static. If no parent element with a position other than static exists then it will be positioned from the top left of the browser window. Fixed: Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements.

  21. برای توضیح بیشتر در مورد positionبه مقاله زیر مراجعه کنید: http://www.alistapart.com/articles/css-positioning-101

  22. برنامه ی امروز چند منبع خوب مقدمات HTML و CSS  نمونه ی عملی جلسه ی گذشته 

  23. نمونه ی عملی این آقا رو که یادتون هست؟ مدیر عامل Smart Taxi

  24. برنامه ی امروز چند منبع خوب مقدمات HTML و CSS  نمونه ی عملی جلسه ی گذشته  

  25. چند وب سایت وب سایت www.cssbasics.com وب سایت www.css-tricks.com وب سایت www.webdesignerswall.com وب سایت www.alistapart.com وب سایت www.smashingmagazine.com

  26. چند ابزار http://colorschemedesigner.com/ http://www.cssbuttongenerator.com/ http://www.colorzilla.com/gradient-editor/ http://www.jotform.com/ Firebug

  27. چند کتاب کتاب Head First HTML with CSS and XHTML کتاب Head First Web Design کتاب Handcrafted CSS: More Bulletproof Web Design

  28. برنامه ی امروز چند منبع خوب مقدمات HTML و CSS   نمونه ی عملی جلسه ی گذشته  

  29. تا جلسه ی آینده ... Opportunity is missed by most people because it's dressed in overalls and looks like work. Thomas Edison

More Related