UNIT -3

1.What is a anchor tag in HTML?

An anchor is a piece of text which marks the beginning and/or the end of a
hypertext link. The text between the opening tag and the closing tag is either the
start or destination (or both) of a link.
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue,
 A visited link is underlined and purple,
 An active link is underlined and red.

Example

2.Linking images in Html

Images can improve the design and the appearance of a web
page.
HTML Images Syntax
  The HTML <img> tag is used to embed an image in a
web page.
 Images are not technically inserted into a web page;
images are linked to web pages. The <img> tag creates a
holding space for the referenced image.
 The <img> tag is empty, it contains attributes only, and
does not have a closing tag.
 The <img> tag has two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets
the image from a web server and inserts it into the page. Therefore, make
sure that the image actually stays in the same spot in relation to the web
page, otherwise your visitors will get a broken link icon. The broken link icon
and the alt text are shown if the browser cannot find the image.
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user
for some reason cannot view it (because of slow connection, an error in the
src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

If a browser cannot find an image, it will display the value of

the alt attribute:

How to add video in Html

The HTML <video> element is used to show a video on a web page.

3.The HTML <video> Element

To show a video in HTML, use the <video> element:
How it Works
The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and

width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the

browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in

browsers that do not support the <video> element.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

4.HTML <input type="file"> (DOCUMENT)

Definition and Usage

The <input type="file"> defines a file-select field and a "Browse" button for
file uploads.

To define a file-select field that allows multiple files to be selected, add

the multiple attribute.
5.HTML Table Tag(TABLE)
Definition and Usage
The <table> tag defines an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>,

and <td> elements.

The <tr> element defines a table row, the <th> element defines a table
header, and the <td> element defines a table cell.

6.What is Web Design?

Web design refers to the design of websites that are displayed on the internet. It usually
refers to the user experience aspects of website development rather than software
development.
 UNIT – 4
1.HTML layout?
An HTML layout is a blueprint used to arrange web pages in a
well-defined manner. It is easy to navigate, simple to
understand and uses HTML tags to customize web design
elements. Crucial for any website, an HTML layout that uses
the correct format will easily improve a website's appearance

HTML has several semantic elements that define the different parts of a web
page:

 <header> - Defines a header for a document or a section

 <nav> - Defines a set of navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent, self-contained content
 <aside> - Defines content aside from the content (like a sidebar)
 <footer> - Defines a footer for a document or a section
 <details> - Defines additional details that the user can open and close
on demand
 <summary> - Defines a heading for the <details> element

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each
technique has its pros and cons:

 CSS framework
 CSS float property
  CSS flexbox
 CSS grid

CSS Frameworks
If you want to create your layout fast, you can use a CSS framework,
like W3.CSS or Bootstrap.

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is
easy to learn - you just need to remember how the float and clear properties
work. Disadvantages: Floating elements are tied to the document flow,
which may harm the flexibility. Learn more about float in our CSS Float and
Clear chapter.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when
the page layout must accommodate different screen sizes and
different display devices.
CSS Grid Layout
The CSS Grid Layout Module offers a grid-based layout
system, with rows and columns, making it easier to design
web pages without having to use floats and positioning.

2. Form in html

A webform, web form or HTML form on a web page allows a

user to enter data that is sent to a server for processing. Forms
can resemble paper or database forms because web users fill
out the forms using checkboxes, radio buttons, or text fields.

An HTML form is used to collect user input. The user input is

most often sent to a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:

The <form> element is a container for different types of input elements, such

as: text fields, checkboxes, radio buttons, submit buttons, etc.

3. Tabs in Html
Tabs are perfect for single page web applications, or for web pages capable
of displaying different subjects:
Create Toggleable Tabs

Create buttons to open specific tab content. All <div> elements

with class="tabcontent" are hidden by default (with CSS & JS). When the
user clicks on a button - it will open the tab content that "matches" this
button.
4. User interface design.

User interface design or user interface engineering is the

design of user interfaces for machines and software, such as
computers, home appliances, mobile devices, and other
electronic devices, with the focus on maximizing usability and
the user experience

What is UI design in HTML?

User Interface (UI) Design focuses on anticipating what users might need to do
and ensuring that the interface has elements that are easy to access,
understand, and use to facilitate those actions. UI brings together concepts from
interaction design, visual design, and information architecture.