Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next

Share

Introduction to HTML 5

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Introduction to HTML 5

  1. 1. (Hypertext Markup Language 5) I am a 2014 born! Even I am new to this corona pandemic!
  2. 2. Did you know that every webpage has a structure? Maybe it comprises of small divisions? A div? Another div? 4 more divs?
  3. 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. 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. 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. 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. 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. 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. 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

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

Views

Total views

91

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×