Rakshat bhati
•Télécharger en tant que PPTX, PDF•
0 j'aime•109 vues
The document discusses the three main layers of front-end web development: structure with HTML, style with CSS, and behavior with JavaScript. It provides an overview of HTML, describing it as the basic language used to write web pages and its tags which provide structure and meaning to content. CSS is described as controlling how HTML elements are displayed and allowing the styling of multiple pages at once. JavaScript is outlined as a scripting language that can add dynamic functionality and logic to HTML pages, such as form validation, tabs, and image menus. The document demonstrates how these three layers work together to build a complete web page.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Rakshat bhati
Similaire à Rakshat bhati (20)
Dernier
Dernier (20)
Rakshat bhati
- 3. Three layers of web design: Structure HTMLmarkup Style CSS Behavior JavaScript
- 4. What is HTML HTML=HyperTextMarkup Language Amarkuplanguagedesignedfor thecreationofwebpages and otherinformation viewablein abrowser Thebasiclanguage usedto writewebpages. Fileextension:.html,.htm
- 5. Html Tags A Tag is: Non-hierarchical keywords or term assigned to a piece of information Tag Usually goes with pair: an open tag (<b> and an end tag (</b>) <> - Opening Tag </> - Closing Tag
- 6. Html Syntax Theelementcontentis everythingbetweenthestart andtheendtag(<p>HELLO </P>) SomeHTMLelementshave emptycontent (<br/> MostHTMLelementscanhave attributes Itsnotcasesensitive-<p> meansthesameas<p>
- 7. Do you imagine how this page would look like without HTML?
- 8. Looks ugly… Doesn’t it?
- 9. No HTML? Without any markup to give your page content structure, the browser renders unformatted and un styled text.
- 10. HTML tags give structure and meaning to your content.
- 11. The Basic Tags <html> <head> <title>MyFirstwebPage</title> </head> <body> <h1>Helloeveryone</h1> </body> </html>
- 12. Lets add HTML tags to our page... How will it look now?
- 13. Looks better… But still not good…
- 14. HTML Once page content is marked up with HTML tags, the browser applies default styles to the tags. So now page is readable and have a clear hierarchy.
- 15. But what should we do to make the page look nice? The answer is use CSS!
- 16. Cascading Style Sheet • CSS stands for Cascading Style Sheets. • CSS describes how HTML elements are to be displayed on screen, paper, or in other media. • CSS saves a lot of work. It can control the layout of multiple web pages all at once.the browser
- 17. CSS Rules • color: red;p { } • font-style: italic; border: 1px dotted blue;#title { } • font-weight: bold; background: yellow;.title { }
- 18. Some things you can change with CSS colors font font size backgrounds • spacing • sizes • borders • positions (layout)
- 19. Some things you can’t change with CSS content markup
- 20. So now it’s time for styling!!! Let’s add some CSS rules to our example page.
- 21. How will it look now???
- 22. Looks perfect!
- 23. Text+ HTML + CSS = Web Page
- 24. JavaScript Now it’s time for actions!
- 25. JavaScript • JavaScript is a Scripting Language • A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. • JavaScript inserted into HTML pages, can be executed by all modern web browsers.
- 26. JavaScript ≠ Java JavaScript is NOT a Java It is NOT a light version of Java It was NOT based on Java It does NOT matter if you know Java
- 27. Why we use JavaScript • Toadddynamicfunctionto yourHTML • JavaScriptdoesthingsthatHTMLcan’t–likelogic. • YoucanchangeHTMLonthe fly. • JavaScriptcanvalidatethedatatheuserenters intothe form,beforeitissenttoyourWeb Application.
- 28. What we can do with JavaScript? Image Zoom Image Menu Shutter Menu Tabs form Validation
- 29. much much more… What we can do with JavaScript
- 30. JavaScript At the beginning JavaScript was designed to manipulate web pages. And it does that very well! But nowadays its usage is much much wider: you can use it outside of web pages and the browser
- 31. Thank You