Downloaded 189 times
![Learn HTML & CSS From Scratch Mohd Manzoor Ahmed [MCT] manzoor_trainer manzoorthetrainer.com](https://image.slidesharecdn.com/learnhtmlandcssfromscratch-160409060358/75/Learn-html-and-css-from-scratch-2-2048.jpg)
![Document Structure Below are the mostly used tags to structure the content on the body of the page. <h[1-6]> <div> <span> <p> <pre>](https://image.slidesharecdn.com/learnhtmlandcssfromscratch-160409060358/75/Learn-html-and-css-from-scratch-19-2048.jpg)
Uploaded byMohd Manzoor Ahmed
Learn html and css from scratch
The document is a comprehensive guide that teaches HTML and CSS from scratch, covering topics such as page structure, tags, attributes, links, images, and static vs dynamic pages. It includes practical demonstrations and examples to create web pages, apply styles, and develop static websites. Ultimately, it introduces the fundamentals of web design, emphasizing the importance of CSS in enhancing the visual presentation of web content.
Learn html and css from scratch
- 2. Learn HTML &CSS From Scratch Mohd Manzoor Ahmed [MCT] manzoor_trainer manzoorthetrainer.com
- 3. Get The Complete VideoCourse Here (https://goo.gl/I5eopR)
- 4. What Are WeGoing To Learn? Introduction To HTML Page Structure Tags Comments And Page Information Document Structure Links Images Static Vs Dynamic Pages Forms Introduction To CSS Approaches Of Applying Style CSS Selectors
- 5. Why HTML? Share informationwith the world in the form of different pages linked together.
- 6. Get The Complete VideoCourse Here
- 7. What is HTML? HTMLstands for HyperText Markup Language. It is used to design and develop Web Pages. Simple Browser/Platform Independent Not Case Sensitive A medium for User Interface
- 8. Observation.. Let’s observer areal world any page. Say Google.com
- 9. Page Structure HTML OrWeb Page <!DOCTYPE>
- 10. A Demo.. Let uscreate our first page say MyFirstPage.html. You can use any text editor to create a web page, say notepad. Its extension should be either htm or html(popularly used).
- 11. Introduction To VisualStudio https://www.visualstudio.com/en-us/news/vs2013-community-vs.aspx Any Version
- 12. <div id=”myDiv”> Hello</div> Open Tag Close TagAttribute Key Value Content HTML Element
- 13. Everything Is ATag The HTML instructions are called Tags. Basically tags are classified into two categories. Container Tags :Tags that have starting as well as ending part. e.g.: <TITLE>Title of the Web Page </TITLE> Empty Tags : Tags that do not have the closing part. e.g.: <br> HTML instructions + text to which the instructions apply is an HTML element.
- 14. Attributes A key valuepairs inside the tag which defines the some features of text are called as Attributes. Some important attributes of the BODY tag BGCOLOR = “color” / “#rrggbb” BGPROPERTIES=”FIXED” BACKGROUND = “url of the image” TEXT = “color” / “#rrggbb”
- 15. Get The Complete VideoCourse Here
- 16.
- 17. Comments And PageInformation <!-- Comment Text --> Page information goes into the <head> tag Mostly used page information tags are <meta/> <title> <link/>
- 18.
- 19. Document Structure Below arethe mostly used tags to structure the content on the body of the page. <h[1-6]> <div> <span> <p> <pre>
- 20.
- 21. Text Markup Tags mostlyused to give some different style or look to the text on the body of page. <strong> <em> <code> <del> <sub>
- 22. Get The Complete VideoCourse Here
- 23.
- 24. Lists The tags usedto list items either in bullet style or numbered style <ol> <ul> <li>
- 25.
- 26. Tables <table> <caption> <thead> <tbody> <tfoot> <col> <tr> <th> <td> Most of thepage layouts are based upon tables or to show some tabular data on web pages we some time use tables
- 27.
- 28. Get The Complete VideoCourse Here
- 29. Images To display imageson web page we use image tag i.e., <img>
- 30.
- 31. Links The link tagsare also called as anchor tag <a href=’xxx’></a> The link tags are used to Link one page to another page . To make a section of page as anchor. One section of page to another section(anchor) of page. Link to send email board
- 32.
- 33. Static Vs DynamicPages Static Web Page Same content to any user, anywhere Requires web development expertise to update site Site not as useful for the user Content can get stagnant Dynamic Web Page Content may differ as per the user request and location Much more functional website Much easier to update New content brings people back to the site and helps in the search
- 34. Forms Whenever we wantto interact with end user basically we need a form. Forms can be created with the following form tags <form> <fieldset>(I love it) <legend> <input> <select> <option> <textarea>
- 35.
- 36. Why CSS? As HTMLis mark-up language, I say CSS is a make-up language. Don’t you want your content look good to the end user
- 37. What is CSS? CSSstands for Cascading Style Sheets. CSS describes how your web page should look. For example its layout, color, font, size, etc.,
- 38. Observation.. Let’s observer areal world any page. Say Google.com
- 39. Get The Complete VideoCourse Here
- 40. Three Different Approaches Thereare three different approaches of inserting a style sheet: Inline style Internal style sheet External style sheet
- 41. InLine It is usedto apply style to a single element. Eg: <div id="myDiv" style="color:white; background-color:linen;"> This is my Div. </div> Not recommended to use extensively.
- 42.
- 43. Internal It is usedto apply style to a single page.
- 44. Get The Complete VideoCourse Here
- 45.
- 46. External It is usedto apply style to all page of a web site. External style sheet is a file created using any text editor. It should have .css as extension Every page should refer that file using <link> tag Say my style sheet file name is myStyle.css The link that I should include in head is
- 47.
- 48. div.x { color: red; text-align:center; } Selector Value Decoration Decoration Style For Div Class Style For Div
- 49. CSS Selectors To findan element on the page and map it to the style we use different selectors. Few of them are as follows Element id class grouping
- 50. element Selector Select all<div> elements and apply the style. div { color: red; text-align: center; } <div> The content goes here </div>
- 51.
- 52. Get The Complete VideoCourse Here
- 53. id Selector Select theelement with myDiv as id and apply the style. #myDiv { color: red; text-align: center; } <div id=”myDiv”> The content goes here </div>
- 54.
- 55. class Selector Select theelements with myClass as class and apply the style. .myClass { color: red; text-align: center; } <div class=”myclass”> The content goes here </div> <p class=”myclass”> The content goes here </p>
- 56. element.class Selector Select theall Div elements with myClass as class and apply the style. Div.myClass { color: red; text-align: center; } <div id= “div1” class=”myclass”> The content goes here </div> <div id =”div2” class=”myclass”> The content goes here </div> <p class=”myclass”> The content goes here </p>
- 57.
- 58. grouping Selector div { text-align:center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } div, h2, p { text-align: center; color: red; }
- 59. Get The Complete VideoCourse Here
- 60.
- 61. css Selector Traversing ul#menu{ padding: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: black; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: orange; } <ul id="menu"> <li><a href="/html.htm">HTML</a></li> <li><a href="/css.htm">CSS</a></li> <li><a href="/js.htm">JavaScript</a></li> <li><a href="/php.htm">PHP</a></li> </ul>
- 62.
- 63. Develop A StaticWeb Site Step 1: Create all pages (Home, About us, Our Services and Contact Us) Step 2: Add a list of links to all pages Step 3: Create a style sheet Step 4: Apply style to all pages
- 64.
- 65. Demo.. For developing staticwebsite.
- 66. Hosting Web SiteOn IIS Check For IIS availability on the OS Install IIS On Windows7 Host the website
- 67. Demo.. For hosting websiteon iis.
- 68.
- 69. Get The Complete VideoCourse Here