4. It is the HEART 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 of Page 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 Make HTML 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 HTML Tags
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 semantic element 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 HTML code 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
As you 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/
15. Let’s have a Look 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 are all 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 presentation template 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
