Web essentials
•Télécharger en tant que PPTX, PDF•
0 j'aime•190 vues
An introduction to web devfundamentals
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (18)
Similaire à Web essentials
Similaire à Web essentials (20)
Plus de Fadwa Gmiden
Dernier
Dernier (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