Download to read offline
HTML.pptx
- 1. HTML 5 Basics ofHTML and Web Designing How Web Pages are Structured
- 2. “Anyone can WriteCode that A Computer can Understand. A Good Programmer writes a Code that HUman Can Understand”
- 3. Tools Evolution Page Requests TableOf Contents DOM Tags Syntax Semantic Tags Accessibility Validation Project
- 4. It is theHEART of any Webpage. All the content you see on a webpage has some HTML action going at its Back End. ABOUT HTML5 <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> Introduction to HTML5
- 5. Evolution of HTML ❑HTML 1.0 was the first version of HTML, used from 1989 to 1994. It was a very limited version and included only 20 elements. ❑ HTML 2.0, Created in 1995, this version was a significant improvement to HTML 1.0 It was able to support the changing of a page background, text color, tables and text boxes etc. It was around this time that W3C (The World Wide Web Consortium) was created. ❑ HTML 3.2 - In January 1997 HTML 3.2 was endorsed by the W3 Consortium. ❑ HTML 4.01 - This version of HTML, created in 1999, included CSS which allowed aspects such as text color, font and backgrounds to be easily altered. They could now be kept in different files. ❑ HTML 5 - HTML 5 is the current version of HTML which is used and we will learn about it further in the presentation.
- 6. The MAGIC ofPage requests This is what Happens when You type a URL in a Web Browser 1. The Browser looks up for the domain in the DNS. 2. The DNS returns the IP Address. 3. The Browser sends an HTTP request to the server located at that address. 4. The server finds the requested files and sends it back as a response. 5. The Browser takes the response and renders the HTML codes as a nice graphical presentation, often repeating steps 3-4 as needed to request images and other supporting files.
- 7. Tools to MakeHTML files Some tools that always come in handy for Web Developers are as follows :- ❑ Codepen.io ❑ Sublime Text ❑ Visual Studio Code ❑ GitHub ❑ Stack Overflow ❑ And finally…… A Web Browser
- 8. Document Object Model(DOM) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects as follows:
- 9. Syntax of HTMLTags Every tag in HTML has a Beginning and an End. Some elements do not have an end tag because they are implied by the following tags. An element can have attributes to refine its meaning. These attributes are specified on the start tag. They consist of a name and a value, separated by an "=" character.
- 10. Semantic Tags A semanticelement clearly describes its meaning to both the browser and the developer. Examples of semantic elements: <form>, <table>, and <article> In HTML there are some semantic elements that can be used to define different parts of a web page: •<article> • <aside> • <details> • <figure> • <footer> • <header> • <main> • <mark> • <nav> • <section> • <summary> • <time>
- 11. Accessibility Always write HTMLcode with accessibility in mind! Provide the user a good way to navigate and interact with your site. Here are some points to keep in mind while making any Web Page :- Search engines use the headings to index the structure and content of your web pages. If a browser cannot find an image, it will display the value of the ”alt” attribute. You should always include the ”lang” attribute inside the <html> tag, to declare the language of the Web page. Always use a clear language, that is easy to understand. Keep sentences as short as possible. Avoid dashes. Instead of writing 1-3, write 1 to 3. Avoid abbreviations. Instead of writing Feb, write February. Avoid slang words. A link text should explain clearly what information the reader will get by clicking on that link.
- 12. Validation Of Code Asyou make a web page, you check it again and again in the web browser and most of the web browsers are configured to look for your errors and remove them but the catch is that not all browsers do this the same way. And the other problem is that you cant rely on the user to use the same browser as yours. So, following are the ways you can validate your code :- Validate by URL Validate by Filename Validate by Direst Input You can validate your code at https://validator.w3.org/
- 13.
- 14. My Final ProjectContinued…
- 15. Let’s have aLook at some CSS Magic If we dive into CSS now, it will take a few days to get all over it. So just to give you a context and eliminate the thinking that we did all of this just for some text appearing on a white background. And the best place to have a look of “CSS Magic” is the site CSS Garden. It is a site which provides you with the HTML file and you have to design a CSS file for it without changing any of it’s HTML and you can submit your work to it for people to have a look.
- 16. Resources Used These areall the main resources I used to create this presentation :- W3Schools - https://www.w3schools.com/html/ The first Course I studied - Introduction to HTML5 – Offered by University of Michigan & Coursera The second Course I studied - HTML, CSS, and Javascript for Web Developers – Offered by Johns Hopkins University & Coursera The CSS Garden - http://www.csszengarden.com/ And many more ………
- 17. CREDITS: This presentationtemplate was created by Slidesgo, incluiding icons by Flaticon, and infographics & images by Freepik. Thanks Created By – Vikas Mittal Roll No – 19ESKEC151 Branch – ECE Section – C All your Questions are Heartily Welcomed