Generic or Specific? Making sensible software design decisionsBert Jan Schrijver
Ad
HTML seminar .pptx( HTML ) it's about html
2. CONTENTS
What is HTML?
Versions of HTML
How Does HTML Works
Basic HTML Document
Difference between HTML4 and 5
The Most Used HTML Tags
Pros
Cons
References
3. What is HTML?
Telling the browser what to do, and what props to use.
A serises of tags that are integrated into a text document.
Tags are;
surrounded with angle brackets like this
<B> or <I>.
Most tags come in pairs
exceptions: <P>, <br>, <li> tags …
The first tag turns the action on, and the second turns it off.
4. HTML (Hypertext Markup Language)
Common features
Tables
Frame
Form
Image map
Character Set
Meta tags
Images, Hyperlink, etc…
6. How Does HTML Work?
HTML documents are files that end with a
.html or .htm extension. You can view
then using any web browser (such as
Google Chrome, Safari, or Mozilla
Firefox).
The browser reads the HTML file and
renders its content so that internet users
can view it.
7. Basic HTML Document
In its simplest form, following is an example of an HTML document −
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....
</p>
</body>
</html>
8. Difference Between HTML5 & HTML4
HTML5
1. HTML5 uses new structures such
as drag, drop and much more.
2. HTML 5 can contain embedded
video and audio without using
flash player.
3. HTML 5 is capable of handling
inaccurate syntax
4. HTML 5 introduced many new
API’s which facilitate flexibility of
web pages.
5. In HTML 5, new tags and new
features like local storage are
enhanced.
HTML4
1. HTML 4 uses common structures like
headers , footers.
2. HTML 4 cannot embed video or audio
directly and makes use of flash player for
it.
3. HTML 4 cannot handle inaccurate syntax.
4. HTML 4 has traditional API’s which does
not include canvas and content editable
API’s.
5. In HTML 4, local storage is not possible
and tags that can handle only one
dimension are present
9. The Most Used HTML Tags
HTML tags have two main types: block-level and inline tags.
Block-level elements take up the full available space and always
start a new line in the document. Headings and paragraphs are a
great example of block tags.
Inline elements only take up as much space as they need and
don’t start a new line on the page. They usually serve to format
the inner contents of block-level elements. Links and emphasized
strings are good examples of inline tags.
10. Block-Level Tags
The three block level tags every HTML document needs to contain
are <html>, <head>, and <body>.
o The <html></html> tag is the highest level element that encloses
every HTML page.
o The <head></head> tag holds meta information such as the
page’s title and charset.
o Finally, the <body></body> tag encloses all the content that
appears on the page.
11. Inline Tags
Many inline tags are used to format text. For example,
a <strong></strong> tag would render an element in bold,
whereas <em></em> tags would show it in italics.
Hyperlinks are also inline elements that require <a></a> tags
and href attributes to indicate the link’s destination:
<a href="https://example.com/">Click me!</a>
Images are inline elements too. You can add one using <img>
without any closing tag. But you will also need to use
the src attribute to specify the image path, for example:
<img src="/images/example.jpg" alt="Example image">
12. Pros of HTML
A widely used language with a lot of resources
and a huge community behind.
Runs natively in every web browser.
Comes with a flat learning curve.
Open-source and completely free.
Clean and consistent markup.
The official web standards are maintained by the
World Wide Web Consortium (W3C).
Easily integrable with backend languages such
as PHP and Node.js.
13. Cons Of HTML
Mostly used for static web pages. For dynamic
functionality, you may need to use JavaScript or a
backend language such as PHP.
It does not allow the user to implement logic. As a
result, all web pages need to be created separately,
even if they use the same elements, e.g. headers and
footers.
Some browsers adopt new features slowly.
Browser behavior is sometimes hard to predict (e.g.
older browsers don’t always render newer tags).
