Web essentials
•Download as PPTX, PDF•
0 likes•190 views
The document provides an introduction to web fundamentals including different types of websites, how the web works, building a basic website structure, and styling pages. It discusses static vs dynamic websites, how requests and responses work on the internet, the basic structure of an HTML page including header, main content, and footer sections. It also covers adding structure in the body using common tags, and styling pages using internal and external CSS including defining colors, fonts, and responsiveness. The document concludes with suggestions for creating a first web project by understanding file organization, asking questions, choosing a project, and working together.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (18)
Similar to Web essentials
Similar to Web essentials (20)
More from Fadwa Gmiden
Recently uploaded
Recently uploaded (20)
Web essentials
- 2. Objective 1st Step 2nd Step 3rd Step 4th Step 5th Step We stand here Types of Websites How does it really works First web page First web project? Structure and Styling
- 3. What are websites types?
- 4. Dynamic vs Static Static websites Our webs ite HTML5 File CSS File JS File Dynamic websites Our webs ite HTM L5 File HTM L5 File JS File PHP File SQL File
- 5. How does web work?
- 6. Application Server & Web Server Internet HTTP Requests Web Response Protocol Requests
- 7. Our First Web Page
- 8. Web Page Structure Header Main Content Footer
- 9. Web Page Structure <!DOCTYPE html> <head> <title>Page Title</title> </head> <body> [...] yada yada yada [...] </body> </html>
- 10. Web Page Structure in depth <!DOCTYPE html> <head> <title>Page Title</title> <meta ...> <link rel="stylesheet" type="text/css" href=""> <link rel="icon" href="my/path/to/favicon.ico" type="image/x-icon" /> <script type="text/javascript"></script> </head> <body> <header> <nav></nav> </header> <section> <article></article> … <!-->This is a comment<--> </section> <aside></aside> <footer></footer> </body> </html>
- 13. Head Structure in depth <head> <title>Page Title</title> <meta ...> <link rel="stylesheet" type="text/css" href=""> <link rel="icon" href="my/path/to/favicon.ico" type="image/x-icon" /> <script type="text/javascript"></script> </head>
- 14. Body Structure in depth Body Structure: <body> <header> <nav></nav> </header> <section> <article></article> ... </section> <aside></aside> <footer></footer> </body> Important tags inside of Body: <h1></h1> Header tag from 1 . . <h6></h6> To 6 <p></p> Paragraph tag <ul></ul> (<ol></ol>) List tag <a></a> Link tag <img> Image tag <table></table> Table tag <video></video> Video tag <audio></audio> Audio tag <br/> Break-line <hr> Horizontal line <div></div> new block
- 15. What is styling?
- 16. Styling web pages CSS: Cascading Style Sheet body{ background-color: #015582; color: white; line-height:1.45 } img{ width:100%; height:400px; }
- 17. Styling in depth 3 ways to add styles to the code: ➔ Inside the Style tag <style type="text/css"> body{ background-color: #015582; color: white; line-height:1.45 } img{ width:100%; height:400px; } </style> ➔ Inside a tag using style attribute <p style = "color:red;"></p> ➔ In an external file <link rel="stylesheet" type="text/css" href="path/to/file.css">
- 18. Styling in depth Why use CSS: ➔ Defining areas ➔ Defining Colors ➔ Creating transitions ➔ Fonts ➔ ... ➔ Responsiveness ➔ Usability
- 20. Creating our first web project Understanding folder hierarchy Ask Questions Pick a project Present your work Work together