HTML <!DOCTYPE> Declaration:
- <!DOCTYPE> declaration is an information to the browser about type of document to expect/to understand the version of HTML used in the document. And this <!DOCTYPE> is not an HTML tag.
- This <!DOCTYPE> declaration is not case sensitive.
- In HTML5, the declaration of <!DOCTYPE> is very simple.
<!DOCTYPE html>
<html>:- This <html></html> element defines the html document and encloses the document completely.
- It acts as a container for all other HTML elements except <!DOCTYPE>.
- A HTML document is separated into two sections inside the <html> tag.
- Head
- Body
<head>:
- This <head></head> element act as a container for metadata and placed between <html> and <body> tag.
- <head> section of HTML document comprises of following elements
- <title>
- <link>
- <meta>
- <script>
- <style>
- <title>: It defines text that is displayed as a title for page in the browser title bar.
<title> HTML5 Course Example </title>
- <link>: An element used to link any external file to the webpage, which includes icons, style sheets,. etc
<link href="images/favicon.ico" rel="icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">- <meta>: It describes the metadata information about the web page which includes details like character set, page description, viewport setting, keywords., etc.
- This metadata information will not be displayed on the page but is used by the browser and search engines.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
| Attributes | Description |
|---|---|
| 1) Charset | Specifies character set used to design the web page. UTF standard UTF-8:English-US |
| 2) Keyword | Specifies the keyword used by SEO to search the webpage and show the page as a search result |
| 3) Description | Defines the summary of the web page which is displayed in the search result |
| 4) Http-equiv | Specifies how the request is handled i.e, to reload or to be static on request. |
- <script>: This element is used to embed client-side and server-side scripts into the web page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
- <style>: This element is used to embed the styles (CSS) that make the presentation of the web page more attractive and interactive.
<body>:
- The body element contains the context such as headings, paragraphs, images, hyperlinks, tables, lists, etc. to be displayed on the webpage.
- This body tag has the following attributes which define the body section.
| Attributes | Description |
|---|---|
| Bg color | Defines a background color for the webpage |
| Background | Sets a background image for the webpage |
| Text | Defines a color for text display in the body section |
| vlinks | Defines a color for the visited links on the webpage |
| alinks | Defines a color for the active links on the webpage |
| margin | Defines the space between text or contents in the webpage with regard to the browser window. |
- HTML5 introduced several new elements for the body section to make it more user-friendly and SEO. Those new elements are
| Elements | Description |
|---|---|
| Aside | Defines some content aside from the content it is placed in. |
| Article | Publishes independent content that is related to the website. |
| Dialog | Specifies an area from where users can interact. |
| Figure | Encapsulate an image along with a caption. |
| figcaption | Defines a caption bound to the image. |
| Header | Specifies the contents to be displayed at the top margin of the web page. |
| Footer | Specifies the contents to be displayed at the bottom margin of the web page. |
| Menu | Organizes the elements according to behavior and defines navigation within the page. |
| Nav | Defines the Navigation area within the menu. |
| Div | It is a container used to represent a large block of code. |
| Span | Defines the inline-block of code. |
- Now, we will see an example with all these elements and attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Course Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
header{
background-color: black;
color: white;
text-align: center;
}
section{
height: 600px;
}
footer{
background-color: black;
color: white;
text-align: center;
}
aside{
border-style: dashed;
width: 200px;
display: block(none)
}
article{
border-style: double;
width: 100px;
}
</style>
</head>
<body>
<header>
<menu>
<nav>
<span>Home</span>
<span>About Us</span>
<span>Contact Us</span>
</nav>
</menu>
</header>
<section>
<dialog open="">
<form>
Course Comments/Feedbacks:
<input type="text">
<button> Submit </button>
</form>
</dialog>
<figure>
<img src="images/html.png" width="100" height="100">
<figcaption>HTML5 Course</figcaption>
</figure>
<aside>
Sidebar/Advertisement Goes Here....
</aside>
<article>
Other Courses (Python, JavaScript)
</article>
</section>
<footer>
<div>©copyrights 2021</div>
<div>Course | HTML5 | CSS | JS | Python </div>
</footer>
</body>
</html>
- In the above example, I have used CSS styling, external scripts just to explain how this style element and script element is used.
No comments:
Post a Comment