Introduction to HTML 5
•
0 gefällt mir•111 views
A brief introduction to HTML 5: Why do we need it? How does it work? The slide covers: 1) HTML Structure 2) Anatomy of HTML 3) HTML Semantics
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Introduction to HTML 5
Ähnlich wie Introduction to HTML 5 (20)
Mehr von RAHUL SHARMA
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Introduction to HTML 5
- 1. (Hypertext Markup Language 5) I am a 2014 born! Even I am new to this corona pandemic!
- 2. Did you know that every webpage has a structure? Maybe it comprises of small divisions? A div? Another div? 4 more divs?
- 3. Things don’t work the way like we always want! We need to have some common standard for building web pages so that each and every one of us can follow that and grow the internet together! Why do we need a structure at all? Moreover, In order to maintain scalability (being able to grow the web site) and maintainability, we use proper HTML tags defined by World Wide Web Consortium (W3C) and thus divide a particular web page into small scalable components!
- 4. Some facts? > HTML stands for Hypertext Markup Language. > It describes the structure of a web page & also known as the most basic building block of the web. > In other words, it tells the browser how to actually display a particular web page. > The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. > A browser does not display the HTML tags, but uses them to determine how to display the document. Hypertext Markup Language "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <head>, <title>, <body>, <header>, Language?... Duh?
- 5. Anatomy of HTML Can’t believe I’m here! <p> Can’t believe I’m here! </p> How should we tell browsers! Opening tag Closing tag Content
- 6. Behind the scenes! Root element of a webpage Contains meta information about the HTML page Specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) Defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- 7. HTML Semantics (HTML5) - Let’s put some meaning into our code! > Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in web pages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. > Semantic tags are essentially just <div> elements that wrap particular types of content on the page. They are not required but help the browser, assistive devices, and search engines determine what the structural outline of the page actually looks like.
- 8. You know where to find me! webcrat.tech@gmail.com PS. Keep the subject line as: [ Web Dev BootCamp ‘ 20 ] Github @webber2408 LinkedIn @rahul-sharma-25b30b114 Medium @webcrat.tech
- 9. References > Amazon.com > Undraw.co > Icons made by Freepik from www.flaticon.com > MDN (HTML): https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started > MDN (CSS - Important): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks > W3Schools: https://www.w3schools.com/html/ > HTML Semantics: vikingcodeschool.com/html5-and-css3/html5-semantic-tags > WikiPedia: https://en.wikipedia.org/wiki/Semantic_HTML