Download to read offline
![Web Page Structure
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<body>
[...] yada yada yada [...]
</body>
</html>](https://image.slidesharecdn.com/webessentials-160304070039/75/Web-essentials-9-2048.jpg)
Uploaded byFadwa Gmiden
Web essentials
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
Similar to Web essentials
Web essentials
- 1.
- 2. Objective 1st Step 2nd Step 3rd Step 4th Step 5th Step We stand here Typesof Websites How does it really works First web page First web project? Structure and Styling
- 3. What are websitestypes?
- 4. Dynamic vs Static Staticwebsites 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 webwork?
- 6. Application Server &Web Server Internet HTTP Requests Web Response Protocol Requests
- 7. Our First WebPage
- 8. Web Page Structure Header MainContent Footer
- 9. Web Page Structure <!DOCTYPEhtml> <head> <title>Page Title</title> </head> <body> [...] yada yada yada [...] </body> </html>
- 10. Web Page Structurein 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>
- 11.
- 12.
- 13. Head Structure indepth <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 indepth 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.
- 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 3ways 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 Whyuse CSS: ➔ Defining areas ➔ Defining Colors ➔ Creating transitions ➔ Fonts ➔ ... ➔ Responsiveness ➔ Usability
- 19.
- 20. Creating our firstweb project Understanding folder hierarchy Ask Questions Pick a project Present your work Work together
- 21.