Scribd
Upload
10 views

HTML (2)

Uploaded by

rajeshpushp21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

HTML (2)

Uploaded by

rajeshpushp21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

HTML is the standard markup language for creating Web pages.

Benefits of html
User-friendly
Very lightweight
Easy to learn
Easy to integrate with all browsers

The <!DOCTYPE html> declaration defines the version of HTML


document, in this case it is 5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page.
The <body> element defines the document's body, and is a container for
all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.

Tags:

● Tags are keywords used to create and define HTML content.

Elements:

● An HTML element consists of:


○ An opening tag.
○ Content (optional, depending on the tag type).
○ A closing tag (for most tags).

Attributes:

● Attributes provide additional information about an element.

Commonly Used Attributes:

● id: Assigns a unique identifier to an element.


● class: Assigns one or more class names for styling or scripting.
● src: Specifies the source of an image or script.
● href: Specifies the URL of a link.
● alt: Provides alternative text for an image.

Structure Tags
● <!DOCTYPE>: Declares the document type and version of HTML
(e.g., HTML5).
● <html>: Represents the root of an HTML document; the container
for all content.
● <head>: Contains metadata, links to stylesheets, and scripts (not
visible to users).
● <body>: Represents the main content visible to the user.

Text Formatting Tags

● <b>: Makes the enclosed text bold.


● <small>: Makes the text one size smaller than the document’s base
font size.
● <p>: Defines a paragraph.
● <span>: Used for inline grouping and styling small parts of content.
It is occupied only essential space

Heading Tags

● <h1> to <h6>: Define headings, <h1> being the largest and <h6> the
smallest.

Link and Media Tags

● <a>: Defines a hyperlink. The href attribute specifies the URL.


● <img>: Embeds an image. Requires attributes like src (source) and
alt (alternative text).

List Tags

● <li>: Defines an item in a list. Used inside <ul> (unordered) or


<ol> (ordered) lists.
Form Tags

● <form>: Defines an HTML form for user input.


● <input>: Defines input fields like text boxes, radio buttons, etc.
● <label>: Provides labels for input fields.
● <select>: Creates a dropdown menu.
● <option>: Specifies the options in a dropdown list.

Section and Layout Tags

● <div>: Defines a division or section in the document for block-level


grouping.
● <br>: Inserts a single line break.
● <hr>: Represents a horizontal rule or thematic break.

Interactive Tags

● <button>: Creates a clickable button.

Style and Script Tags

● <style>: Contains CSS rules for the document.


● <script>: Embeds JavaScript code for interactivity.

Metadata and External Links

● <link>: Links external resources like stylesheets.


● <meta>: Provides metadata such as character encoding, author, and
viewport settings.

Each of these tags has specific roles and can be combined to create
robust and interactive web pages. Let me know if you'd like examples for
any tag!
4o

Table and Related Tags

● <table>: Creates a table to organize data in rows and columns.


● <tr>: Defines a table row. Used inside <table>.
● <td>: Defines a table data cell (content cell) within a row.
● <th>: Defines a header cell within a row, usually bold and centered
by default.
● <thead>: Groups the header content of a table.
● <tbody>: Groups the main body content of a table. Used alongside
<thead> and <tfoot>.
● <tfoot>: Groups the footer content of a table, often for summaries
or totals.

Example:

html
Copy code
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">End of Table</td>
</tr>
</tfoot>
</table>

Input and Form Related Tags

● <textarea>: Provides a multi-line input field, useful for comments


or reviews.

Example:

html
Copy code
<textarea rows="5" cols="30" placeholder="Enter your feedback
here"></textarea>

Document and Metadata Tags

● <title>: Specifies the title of the HTML document, displayed in the


browser tab.

Example:

html
Copy code
<title>My Web Page</title>

Text Formatting Tags

● <u>: Underlines the enclosed text.

Example:

html
Copy code
<u>This text is underlined</u>

List Tags

● <ul>: Defines an unordered list of items, often styled with bullet


points.

Example:

html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
What Are Selectors?
A selector in CSS is a part of the CSS ruleset, that is basically used to
select the
element you want to style. CSS selectors select HTML elements according
to
their id, class, type, attribute, etc.
Types of Selectors
There are various types of selectors in CSS. They are:
1. CSS Element / tag Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

Follow this order SICTU


S - inline style 1000
I - Id selector 100
C - Class selector 10
T - Type/Tag selector 1
U - Universal selector 0

Universal Selector (*)


● Selects all elements on the page.
● Syntax: *

Example:

css
Copy code
* {
margin: 0;
padding: 0;
}

2. Type Selector (Element Selector)

● Selects all elements of a specific type (e.g., p, h1, div).


● Syntax: element

Example:

css
Copy code
p {
color: blue;
}

3. Class Selector

● Selects all elements with a specific class.


● Syntax: .classname

Example:

css
Copy code
.box {
border: 1px solid black;
}
4. ID Selector

● Selects a specific element with a unique ID.


● Syntax: #idname

Example:

css
Copy code
#header {
background-color: lightgray;
}

5. Group Selector

● Applies the same styles to multiple selectors.


● Syntax: selector1, selector2, selector3

Example:

css
Copy code
h1, h2, p {
font-family: Arial, sans-serif;
}

6. Descendant Selector

● Selects elements nested inside another element.


● Syntax: ancestor descendant

Example:

css
Copy code
div p {
color: green;
}

7. Child Selector

● Selects direct children of an element.


● Syntax: parent > child

Example:

css
Copy code
ul > li {
list-style-type: square;
}

8. Adjacent Sibling Selector

● Selects the first sibling element immediately following another


element.
● Syntax: element1 + element2

Example:

css
Copy code
h1 + p {
font-size: 14px;
}

9. General Sibling Selector

● Selects all sibling elements that follow a specified element.


● Syntax: element1 ~ element2

Example:

css
Copy code
h1 ~ p {
color: gray;
}

Examples:

● :hover: Applies styles when the user hovers over an element.

css
Copy code
a:hover {
color: red;
}

12. Pseudo-element Selector

● Targets specific parts of an element.


● Syntax: selector::pseudo-element

Examples:

● ::before: Inserts content before an element.


● ::after: Inserts content after an element.

Example:

css
Copy code
p::before {
content: "Note: ";
font-weight: bold;
}

13. Combinator Selectors


● Combine selectors based on relationships between elements:
○ Descendant ( ): div p
○ Child (>): div > p
○ Adjacent sibling (+): h1 + p
○ General sibling (~): h1 ~ p

Margin: Space between this box and other elements.

Padding: Space between the text and the border inside the box.

CSS Flex Flexbox is a CSS technique used to arrange items in


either a row or a column. It is a one-dimensional layout model,
meaning it focuses on aligning items along a single axis (either
horizontally or vertically)."

● display: flex;: Enables Flexbox on the container.


● flex-direction: Defines the main axis direction (row,
column).
● justify-content: Aligns items along the main axis.
● align-items: Aligns items along the cross axis.

For Flex Items:

● align-self: Aligns a single item along the cross axis.

CSS Grid Layout is a powerful, two-dimensional layout system


used for designing web pages. It allows you to control the
layout of items in rows and columns simultaneously.
Property Description

display: grid; Activates the grid layout on the container.

grid-template-columns Defines the number and size of columns in the grid.

grid-template-rows Defines the number and size of rows in the grid.

gap Defines the space between rows and columns.

align-items Aligns grid items vertically within their cells.

justify-items Aligns grid items horizontally within their cells.

grid-row Specifies which row(s) an item should span.

grid-column Specifies which column(s) an item should span.

HTML Interview Questions

1. What is the difference between HTML and XHTML?


○ HTML is a markup language used for creating web
pages, while XHTML is a stricter version of HTML,
adhering to XML syntax rules. XHTML requires all
tags to be properly closed and is case-sensitive.
2. What is the purpose of the <!DOCTYPE> declaration in
HTML?
○ It specifies the document type and version of HTML
being used (e.g., HTML5). It helps the browser
render the page correctly by ensuring it follows the
specified HTML standard.
3. What are semantic HTML tags? Can you give examples?
○ Semantic tags convey meaning about the content
they wrap (e.g., <article>, <header>, <footer>,
<section>, <nav>). These tags improve accessibility,
SEO, and code readability.
4. What is the difference between <div> and <span>?
○ <div> is a block-level element used for grouping
content, while <span> is an inline element used for
styling small parts of content without affecting the
layout.
5. What are alt attributes in images, and why are they
important?
○ The alt attribute provides alternative text for an
image if it fails to load. It's important for
accessibility, as it helps screen readers describe
images to users with visual impairments.
6. What are the different types of lists in HTML?
○ Unordered List (<ul>): Displays a list of items with
bullet points.
○ Ordered List (<ol>): Displays a list of items with
numbers.
○ Definition List (<dl>): Defines terms and their
descriptions.
7. What is the purpose of the <meta> tag in HTML?
○ The <meta> tag provides metadata about the HTML
document, such as the character set, author,
viewport settings, or keywords for search engines.
8. What is the difference between the <link> and <a> tags?
○ <link> is used to link external resources like
stylesheets to the HTML document, while <a> is used
to create hyperlinks that point to another resource or
URL.
9. What is the difference between id and class attributes in
HTML?
○ id is used to uniquely identify an element in the
document (unique within the page), while class is
used to group multiple elements together for styling
or scripting.
10. Explain the form tag in HTML and list some form
elements.
○ The <form> tag is used to collect user input.
Common form elements include <input>,
<textarea>, <button>, <select>, and <label>.

CSS Interview Questions

1. What is the difference between inline, block, and


inline-block elements in CSS?
○ inline: Does not create a new line and only takes
up as much width as necessary.
○ block: Creates a new line and takes up the full width
available.
○ inline-block: Behaves like an inline element but
retains block-level styling properties like width and
height.

2. What are the different types of CSS selectors?


○ Universal selector (*): Selects all elements.
○ Type selector (e.g., div, p): Selects all elements of a
specific type.
○ Class selector (.classname): Selects all elements
with the specified class.
○ ID selector (#idname): Selects an element with a
specific id.
○ Attribute selector ([type="text"]): Selects elements
based on their attribute values.
○ Pseudo-class selector (:hover, :focus): Selects
elements in a specific state.
3. What is the difference between padding and margin?
○ Padding is the space inside an element, between the
content and the border.
○ Margin is the space outside an element, between the
element and its surrounding elements.

4. What is the display property in CSS and what values


can it have?
○ The display property defines how an element is
displayed. Common values include:
■ block: Elements take up the full width of their
parent container.
■ inline: Elements take up only as much width
as necessary.
■ inline-block: Combines characteristics of both
inline and block.
■ flex: Activates Flexbox on the container.
■ grid: Activates Grid layout on the container.
■ none: Hides the element.
5. What are position values in CSS and how do they
work?
○ static (default): Normal flow, no special positioning.
○ relative: Positioned relative to its normal position.
○ absolute: Positioned relative to the nearest
positioned ancestor.
○ fixed: Positioned relative to the viewport (remains
fixed when scrolling).
○ sticky: Positioned based on the user's scroll position
(combines relative and fixed).
6. What are media queries in CSS?
○ Media queries are used to apply different styles for
different screen sizes or devices. They are essential
for creating responsive web designs.
css
Copy code
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

7.
8. What is the float property in CSS and what is it
used for?
○ The float property is used to make an element float
to the left or right within its container, allowing other
content to wrap around it. It is often used for images
or text wrapping.
9. What is Flexbox, and how does it differ from CSS
Grid?
○ Flexbox is a one-dimensional layout system that
aligns items in a row or column.
○ CSS Grid is a two-dimensional layout system that
controls both rows and columns, offering more
complex layout capabilities.

display: none: the element is completely hidden and not


clickable.
23. What is the difference between “display: none” and “visibility:
hidden”, when used as attributes to the HTML element.
When we use the attribute “visibility: hidden” for an HTML element then that element
will be hidden from the webpage but still takes up space. Whereas, if we use the
“display: none” attribute for an HTML element then the element will be hidden, and
also it w
Inline Block

Inline elements just take up the Block elements start on a new line and
space that is absolutely necessary consume the full width of the page
for the content and does not start available.
from a new line. Example:- <div>, <p>, <header>, <footer>,
Example:- <span>, <a>, <strong>, <h1>...<h6>, <form>, <table>, <canvas>,
<img>, <button>, <em>, <select>, <video>, <blockquote>, <pre>, <ul>, <ol>,
<abbr>, <label>, <sub>, <cite>, <figcaption>, <figure>, <hr>, <article>,
<abbr>, <script>, <label>, <i>, <section>, etc.
<input>, <output>, <q>, etc.
Metadata in HTML

Metadata is information that provides details about other data. In the context of
HTML,

You might also like