Scribd
Upload
3 views10 pages

Questions

The document provides an overview of web technologies, focusing on HTML and its structure, including essential tags and attributes. It explains the roles of the head and body sections in an HTML document, as well as the importance of metadata and best practices for web development. Additionally, it discusses the classification of HTML elements and the usage of comments and division elements for organizing web content.

Uploaded by

24f2005074
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views10 pages

Questions

The document provides an overview of web technologies, focusing on HTML and its structure, including essential tags and attributes. It explains the roles of the head and body sections in an HTML document, as well as the importance of metadata and best practices for web development. Additionally, it discusses the classification of HTML elements and the usage of comments and division elements for organizing web content.

Uploaded by

24f2005074
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Questions/Definitions

What is web? The working of web


Basic Web Technologies
 HTML, CSS
 Scripting Languages
 Web Frameworks

What is world wide web.


what is internet? The working of internet
Client Server Architecture
Web Terminologies
 URL
 HTTP
A set of rules for transferring files on www.
Request- Response based protocol
 MIME
The content of the web page will be rendered as per the HTML tags in which they are enclosed.

Observe the below picture.

The text content "Hello World!" is annotated to the heading, increasing the font-weight when it is
enclosed in the HTML tag <h1>.

Likewise, the look and feel of the web page can be defined and the content can be organized on the
web page with the help of various HTML elements.

Now, let us see the document structure of HTML.

HTML document structure tells the browser how to render the text written in each of the HTML
elements of the web page.

Consider that we need to create a web page, the basic HTML document structure will be as below:

The structure of an HTML document is defined using HTML tags.

Below is the basic structure of a simple HTML document or web page:

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Now, let us understand these basic HTML tags in detail.

The following are some key elements in HTML that form the basic structure of a web page.

<!DOCTYPE html> declaration update the browser about the version of HTML being used. By default,
it points to HTML5, the latest version.

The <html> tag encapsulates the complete web page content. All other tags are 'nested' within the
<HTML> tag.

Any HTML document or web page consists of two main sections the 'head' and the 'body'.

The head section starts with the start tag <head> and ends with the end tag </head>.
The following elements can be provided within the head tag.

Tags Description

<title> Defines the title that should be displayed on the browser tab

Metadata is in-general, data about data.

Provides metadata about the HTML document.

Metadata will not be displayed on the page but will be machine-readable.

<meta> Used to specify page description, author of the document, last modified, etc.
Used by browsers (control how to display content or reload the page), search engines
(keywords), or other web services.

Post HTML5, meta tag also allows web designers to take control over the viewport by
setting the meta viewport tag.

<style> Defines style information for the web page

<link> Defines a link to other documents like CSS

<script> Defines script like JavaScript

The body section is denoted within the start tag <body> and ends with the end tag </body>. This
section contains actual web page content like text, images, etc.

The body section is denoted within the start tag <body> and ends with the end tag </body>. This
section contains actual web page content like text, images, etc.

The following are some key elements in HTML that form the basic structure of a web page.

<!DOCTYPE html> declaration update the browser about the version of HTML being used. By default,
it points to HTML5, the latest version.

The <html> tag encapsulates the complete web page content. All other tags are 'nested' within the
<HTML> tag.

Any HTML document or web page consists of two main sections the 'head' and the 'body'.

The head section starts with the start tag <head> and ends with the end tag </head>.

The following elements can be provided within the head tag.

The following are some key elements in HTML that form the basic structure of a web page.

<!DOCTYPE html> declaration update the browser about the version of HTML being used. By default,
it points to HTML5, the latest version.

The <html> tag encapsulates the complete web page content. All other tags are 'nested' within the
<HTML> tag.
Any HTML document or web page consists of two main sections the 'head' and the 'body'.

The head section starts with the start tag <head> and ends with the end tag </head>.

The following elements can be provided within the head tag.

The content of the title element is not part of the HTML page's content.

The only body element contains the HTML page's content.

There are many versions of HTML out there such as - HTML 2.0, HTML 3.0, HTML 3.2, HTML4.0,
HTML 4.01 and latest is HTML5.0. In each version, some elements and attributes are either added or
depreciated. The appearance of your .html page depends on how the browser renders HTML
elements. And how the browser renders HTML elements depends on how the browser understands
them.

Thus, to ensure that the browser understands all HTML elements specific to a particular version, as a
developer you need to tell the browser what version of HTML you have followed while developing
your web page.

This is done by using <!DOCTYPE> declaration which stands for Document Type. It tells the browser
what version of HTML it should follow for rendering the web page.

In the above code, <!DOCTYPE html> signifies that, the code is written in HTML5.

Best Practice:

Provide a proper DOCTYPE declaration while designing an HTML web page, so that browser can
understand the version and interpret elements of the web page appropriately.

HTML Elements  CONTAINER ELEMENTS AND EMPTY


ELEMENTS
In HTML, an empty element, also called a void element, is a tag that does not have any content or a
closing tag. These elements are self-contained and self-closing, meaning they represent a complete
entity within a single HTML tag. Examples of empty elements
include <br>, <img>, <hr>, <link>, <meta>, and <source>.

Key characteristics of empty elements:

No content: They don't have any text or other elements between their opening and closing tags.

Self-contained: They represent a complete entity within a single tag.

Self-closing: They don't require a separate closing tag.

Purpose of empty elements:

Performing specific actions:

Empty elements can instruct the browser to perform a particular action, such as creating a line break
(<br>), inserting an image (<img>), or adding a horizontal rule (<hr>).

Adding metadata:

They can be used to add metadata to the document, such as the document's description (<meta>) or
the link to an external stylesheet (<link>).

Providing alternative content:

They can be used to provide alternative content for media elements like <audio>

HTML ELEMENTS CAN BE FURTHER CLASSIFIED INTO


Block Element:

A block element begins on a new line occupying the entire width of the parent tag.

Inline Element:

An inline element occupies the necessary space to accommodate the content in the element. Inline
elements can be nested within other inline elements, whereas, block elements cannot be nested
within inline elements.

Some of the examples are illustrated in the picture above

ATTRIBUTES
HTML elements can contain attributes that can be considered as an additional feature to set various
properties and they are optional.

Some of the attributes can be used with any of the HTML elements and there can be referred to as
‘global attributes’. Also, some attributes can be used only with particular elements. Following are
some features of attributes:

All the attributes can contain properties like name and value which can be used by a developer to
assign respective details for that HTML elements.

Attributes are to be set only in the start tag of a container HTML element.

Attributes are case-insensitive, but it is recommended to use lowercase as a best practice.

The best practice is always to quote attribute value even though we will not get any execution errors
if they are not provided in quotes.

Example:

The lang attribute specifies the language of the content of the HTML page.
Best Practices:

Always quote attribute value since it will not perform as expected if the attribute value contains any
special characters.

It is recommended to use double-quotes for the values of the attributes.

Use lowercase letters for attribute names for consistency.

There should not be duplication for the same attribute in an element.

COMMENTS IN HTML
Syntax <!-- This line is commented -->
The head part of the HTML web page contains the additional information otherwise called meta
information for the search engine which will not come as a part of the web page and are provided as
<meta> tags.

There is an attribute named 'description' that summarizes the contents of your page for the benefit
of users and search engines to get to know the content of the web page even without opening it.

Syntax of <meta> tag:

The metadata element is defined within the head element.


The below table discusses some of the attributes and their values related to the <meta> tag.

Attribute Value Description


name application-name Specifies name for the
author metadata
description
generator
keywords
http-equiv content-type Provides an HTTP reader for
default-style information/value of the
refresh content attribute
content Gives the value associated
text with http-equiv or name
attribute

For example,

<!DOCTYPE html>

<html>

<head>

<title>Test page</title>

<meta name="description" content="This is a test web page"/>

<meta charset="utf-8">

</head>

<body>

<p>Kindly check head section for meta tags</p>

</body>

</html>
Best Practices:

The title element can also be considered as part of the metadata.

Any web page should have only one title tag per page.

The title should be unique for each web page in the application.

Start the title tag with the main keyword.

Specify the character encoding of the document.

Use UTF-8 encoding while designing the web page. It is not recommended to use ASCII incompatible
encodings to avoid security risks because browsers that do not support them may interpret insecure
content.

Avoid duplicate descriptions inside metadata and try to include the targeted keywords in the
description, as search engines index your page based on the description.

Use the below http-equiv value to set the HTTP header with content-security-policy by specifying its
values with relevant details. This is to update the browser to load the page required resources such
as images, scripts to be loaded from the trusted origin only. Therefore helps in preventing security
attacks such as cross-site scripting.

Example:

Below line of code in the web app update browser to load page required resources from 2 origins by
specifying values to default-src as:

<meta http-equiv="content-security-policy" content="default-src 'self' http://xyz.com">


self indicates from the current domain to which page belongs to.

Explicitly mentioning the http://xyz.com value in the above example indicates that this domain is the
trusted origin to load the resources.

Use the below meta code line to specify the page content display to be adjusted to the device width
being used to view the content with the initial zoom level as 100%. This is useful to display content
on different kinds of devices such as desktop, laptop, and mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

You can change the zoom level depending on your requirement by specifying values to the initial-
scale attribute as any positive value from 0.0 to 10.0. For example you can consider 0.1 = 10% zoom
and 1.0 = 100% respectively.

Grouping Elements

DIVISION ELEMENT
The division element is used to group various other HTML tags. This element helps us in organizing
the web page into different sections.

If any common rule or style needs to be added to a particular section, the same can be applied to the
corresponding division. The rule or style gets applied to all the contents of the division thereby.

It is defined using <div>…</div> tag.

We can observe that the division element is a block-level element and hence a new line is
automatically added after the division ends.

You might also like