Download as PPSX, PPTX
Uploaded byMohamed Loey
HTML + CSS Examples
This document outlines the steps to create two basic websites using HTML and CSS. For the first website, it describes creating the HTML structure with a container, header, blog post, and footer sections. It then details writing the HTML code for each section and linking an external CSS stylesheet to style the webpage. Similar steps are followed for the second website, including defining the HTML structure, writing the code, linking the CSS, and styling elements like the container, header, content and footer. The document concludes by thanking the reader.
HTML + CSS Examples
- 1.
- 2. Agenda Part I:Website1 Part II: Website 2
- 3.
- 4. STEP 1: Thesite HTML structure Container Header h1 p Blog-post h2 p em Footer h3 p
- 5. STEP 2: WRITINGTHE HTML Header Code:
- 6. STEP 2: WRITINGTHE HTML Blog-post
- 7. STEP 2: WRITINGTHE HTML Code:
- 8. STEP 2: WRITINGTHE HTML Footer Code:
- 9. STEP 2: WRITINGTHE HTML Container Code:
- 10. STEP 3: HTMLWebpage
- 11. STEP 3: HTMLWebpage Code:
- 12. STEP 4: LinkCSS with HTML Code:
- 13. STEP 5: Addingour style sheet Body: Result: Code:
- 14. STEP 5: Addingour style sheet Container : Result: Code:
- 15. STEP 5: Addingour style sheet Header & Footer : Result: Code:
- 16. STEP 5: Addingour style sheet Footer : Result: Code:
- 17. STEP 5: Addingour style sheet Lead: Result: Code:
- 18. STEP 5: Addingour style sheet Blog-post: Result: Code:
- 19. STEP 5: Addingour style sheet H1,H2,H3: Result: Code:
- 20. STEP 5: Addingour style sheet Blog-post h2,p,em: Result: Code:
- 21. STEP 6: FinalCSS File
- 22. STEP 7: Yourfirst Website with HTML and CSS
- 23.
- 24. STEP 1: Thesite HTML structure Container Header H1 Navigation ul Content-container Content H2 P Footer
- 25. STEP 2: WRITINGTHE HTML Header Code:
- 26. STEP 2: WRITINGTHE HTML Navigation Code:
- 27. STEP 2: WRITINGTHE HTML Content-container Code:
- 28. STEP 2: WRITINGTHE HTML Footer Code:
- 29. STEP 3: HTMLWebpage
- 30. STEP 3: HTMLWebpage Code:
- 31. STEP 4: LinkCSS with HTML Code:
- 32. STEP 5: Addingour style sheet Container: Result: Code:
- 33. STEP 5: Addingour style sheet Header : Result: Code:
- 34. STEP 5: Addingour style sheet Header : Result: Code:
- 35. STEP 5: Addingour style sheet Content: Result: Code:
- 36. STEP 5: Addingour style sheet Footer: Result: Code:
- 37. STEP 6: FinalCSS File
- 38. STEP 7: YourSecond Website with HTML and CSS
- 39.