Scribd
Upload
14 views37 pages

Unit - II.docx

The document provides an overview of HTML tables and CSS layout, detailing the structure of tables using tags like <table>, <tr>, <th>, and <td>, along with examples of styling tables using CSS properties. It also covers pseudo-classes in CSS for styling elements based on their state, and explains the use of <thead>, <tbody>, and <tfoot> for organizing table content. Additionally, it discusses cell spanning with the colspan attribute and the importance of web accessibility.

Uploaded by

sarfraz ahamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views37 pages

Unit - II.docx

The document provides an overview of HTML tables and CSS layout, detailing the structure of tables using tags like <table>, <tr>, <th>, and <td>, along with examples of styling tables using CSS properties. It also covers pseudo-classes in CSS for styling elements based on their state, and explains the use of <thead>, <tbody>, and <tfoot> for organizing table content. Additionally, it discusses cell spanning with the colspan attribute and the importance of web accessibility.

Uploaded by

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

Unit II

HTML Tables and CSS Layout:

Table Elements

An HTML table is created using the <table> tag. Inside this tag, you use

●​ <tr> to define table rows,

●​ <th> for table headers, and

●​ <td> for table data cells

Example
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
In this example:
●​ <table>: This tag starts the table. Everything between the opening <table> and closing
</table> tags makes up the table.
●​ <tr>: Stands for “table row”. Each <tr> tag defines a row in the table.
●​ <th>: Stands for “table header”. It’s used for the headers of the columns. In this case,
“Firstname“, “Lastname“, and “Age” are headers. Text in <th> tags is usually bold and
centered by default.
●​ <td>: Stands for “table data”. This tag is used for actual data cells under each column. For
instance, “Priya” is the data under the “Firstname” header, “Sharma” under the
“Lastname“, and “24” under the “Age“.
●​ The first <tr> has three <th> elements, setting up the column titles.
●​ The subsequent <tr> tags each contain three <td> elements, representing the data for each
person listed in the table.
When this HTML code is rendered in a web browser, it will display a table with four rows
(one header row plus three data rows) and three columns (Firstname, Lastname, Age), showing
the names and ages of Priya, Arun, and Sam.
Output:

Definition and Usage: The table-layout property defines format used to lay out table cells, rows,
and columns.
table.a {​
table-layout: auto;​
width: 180px;​
}​
table.b {​
table-layout: fixed;​
width: 180px;​
}

Syntax
/* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: reert;
table-layout: revert-layer;
table-layout: unset;
Property Value:

HTML
<table>
<tr>
<td>Ed</td>
<td>Wood</td>
</tr>
<tr>
<td>Albert</td>
<td>Schweitzer</td>
</tr>
<tr>
<td>Jane</td>
<td>Fonda</td>
</tr>
<tr>
<td>William</td>
<td>Shakespeare</td>
</tr>
</table>

CSS
table {
table-layout: fixed;
width: 120px;
border: 1px solid red;
}

td {
border: 1px solid blue;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Result

Formatting a Data Table:


Styling HTML Tables
Styling an HTML table can significantly improve its appearance and readability. You can
use CSS (Cascading Style Sheets) to add styles such as borders, background colors, text
alignments, and much more. Here are some basic styles to make your table look neater and more
professional:
1. Adding a Border to an HTML Table
A border is set using the CSS border property. If you do not specify a border for the
table, it will be displayed without borders.
Syntax
table, th, td {​
border: 1px solid black;​
}
Example: Addition of the border to the HTML Table.
Output:

HTML Table with border


Adding Cell Padding in an HTML Table
Cell padding specifies the space between the cell content and its borders. If we do not
specify padding, the table cells will be displayed without padding.

Syntax

th, td {​
padding: 20px;​
}

Example: Addition of Table cell padding in HTML.

Output:

Adding Left Align Headings in an HTML Table


By default, the table headings are bold and centered. To left-align the table headings, we
must use the CSS text-align property.

Syntax

th {​
text-align: left;​
}

Example: Explains the text-align property where the text is aligned to the left.

Output:

text-align Property
Adding Border Spacing in an HTML Table

Border spacing specifies the space between the cells. To set the border-spacing for a
table, we must use the CSS border-spacing property.

Syntax

table {​
border-spacing: 5px;​
}

Example: Explains the border space property to make the space between the Table cells.

Output:

Border Spacing Property

Adding a Caption in an HTML Table

To add a caption to a table, we must use the “caption” tag.

Syntax

<table style="width:100%">​
<caption>DETAILS</caption>

Example: HTML Table caption by specifying the CSS properties for setting its width.

Output:

Adding the caption using the tag


CSS Pseudo Class Selectors:

A pseudo-class is used to define a special state of an element.


For example, it can be used to:
●​ Style an element when a user moves the mouse over it
●​ Style visited and unvisited links differently
●​ Style an element when it gets focus
●​ Style valid/invalid/required/optional form elements
A CSS pseudo-class is a keyword added to a selector that lets you style a specific state of the
selected element(s). For example, the pseudo-class :hover can be used to select a button when a
user's pointer hovers over the button and this selected button can then be styled.

CSS Copy to Clipboard

/* Any button over which the user's pointer is hovering */

​ button:hover {

​ color: blue;

​ }

A pseudo-class consists of a colon (:) followed by the pseudo-class name (e.g., :hover). A
functional pseudo-class also contains a pair of parentheses to define the arguments (e.g., :dir()).
The element that a pseudo-class is attached to is defined as an anchor element (e.g., button in
case button:hover).

Pseudo-classes let you apply a style to an element not only in relation to the content of
the document tree, but also in relation to external factors like the history of the navigator
(:visited, for example), the status of its content (like :checked on certain form elements), or the
position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

A pseudo-class is a keyword added to a CSS selector, prefixed by a colon (:), to define a


specific state or condition of an element. It is used to style elements like a hovered button, the
first child of a container, or checked input fields.

Syntax

selector:pseudo-class {​
​ /* styles */​
}
Element Display state pseudo-classes
These pseudo-classes enable the selection of elements based on their display states.
:fullscreen
Matches an element that is currently in fullscreen mode.
:picture-in-picture
Matches an element that is currently in picture-in-picture mode.
Input pseudo-classes
These pseudo-classes relate to form elements, and enable selecting elements based on
HTML attributes and the state that the field is in before and after interaction.
:autofill
Matches when an <input> has been autofilled by the browser.
:enabled
Represents a user interface element that is in an enabled state.
:disabled
Represents a user interface element that is in a disabled state.
:read-only
Represents any element that cannot be changed by the user.
:read-write
Represents any element that is user-editable.
:default
Matches one or more UI elements that are the default among a set of elements.
:checked
Matches when elements such as checkboxes and radio buttons are toggled on.

:blank
Matches a user-input element which is empty, containing an empty string or other null
input.
:valid
Matches an element with valid contents. For example, an input element with the type
'email' that contains a validly formed email address or an empty value if the control is not
required.
:invalid
Matches an element with invalid contents. For example, an input element with type
'email' with a name entered.
:in-range
Applies to elements with range limitations. For example, a slider control when the
selected value is in the allowed range.
:out-of-range
Applies to elements with range limitations. For example, a slider control when the
selected value is outside the allowed range.
:required
Matches when a form element is required.
:optional
Matches when a form element is optional.
:user-valid
Represents an element with correct input, but only when the user has interacted with it.
:user-invalid
Represents an element with incorrect input, but only when the user has interacted with it.
Linguistic pseudo-classes
These pseudo-classes reflect the document language and enable the selection of elements
based on language or script direction.
:dir()
The directionality pseudo-class selects an element based on its directionality as
determined by the document language.
:lang()
Select an element based on its content language.

Location pseudo-classes
These pseudo-classes relate to links, and to targeted elements within the current
document.
:any-link
Matches an element if the element would match either :link or :visited.
:link
Matches links that have not yet been visited.
:visited
Matches links that have been visited.
:local-link
Matches links whose absolute URL is the same as the target URL. For example, anchor
links to the same page.
:target
Matches the element which is the target of the document URL.
:scope
Represents elements that are a reference point for selectors to match against.
Resource state pseudo-classes
These pseudo-classes apply to media that is capable of being in a state where it would be
described as playing, such as a video.
:playing
Represents a media element that is capable of playing when that element is playing.
:paused
Represents a media element that is capable of playing when that element is paused.
Time-dimensional pseudo-classes
:current
Represents the element or ancestor of the element that is being displayed.
:past
Represents an element that occurs entirely before the :current element.
:future
Represents an element that occurs entirely after the :current element.
Tree-structural pseudo-classes
These pseudo-classes relate to the location of an element within the document tree.

:root
Represents an element that is the root of the document. In HTML this is usually
the <html> element.
:empty
Represents an element with no children other than white-space characters.
:nth-child
Uses An+B notation to select elements from a list of sibling elements.
:nth-last-child
Uses An+B notation to select elements from a list of sibling elements, counting
backwards from the end of the list.
:first-child
Matches an element that is the first of its siblings.
:last-child
Matches an element that is the last of its siblings.
:only-child
Matches an element that has no siblings. For example, a list item with no other list items
in that list.
Functional pseudo-classes
These pseudo-classes accept a selector list or forgiving selector list as a parameter.
:is()
The matches-any pseudo-class matches any element that matches any of the selectors in
the list provided. The list is forgiving.
:not()
The negation, or matches-none, pseudo-class represents any element that is not
represented by its argument.
:where()
The specificity-adjustment pseudo-class matches any element that matches any of the
selectors in the list provided without adding any specificity weight. The list is forgiving.
:has()
The relational pseudo-class represents an element if any of the relative selectors match
when anchored against the attached element.

Syntax
CSSCopy to Clipboard
selector:pseudo-class {
property: value;
}
Like regular classes, you can chain together as many pseudo-classes as you want in a
selector.
thead and tbody elements
●​ The <thead> tag is used to group header content in an HTML table.
●​ The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to
specify each part of a table (header, body, footer).
●​ Browsers can use these elements to enable scrolling of the table body independently of
the header and footer. Also, when printing a large table that spans multiple pages, these
elements can enable the table header and footer to be printed at the top and bottom of
each page.
Note: The <thead> element must have one or more <tr> tags inside.
●​ The <thead> tag must be used in the following context: As a child of a <table> element,
after any <caption> and <colgroup> elements, and before any <tbody>, <tfoot>,
and <tr> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by
default. However, you can use CSS to style these elements (see example below)!
The <thead> HTML element encapsulates a set of table rows (<tr> elements), indicating
that they comprise the head of a table with information about the table's columns. This is usually
in the form of column headers (<th> elements).

In HTML
In CSS
thead,
tfoot {
background-color: #2c5e77;
color: #fff;
}

tbody {
background-color: #e4f0f5;
}

table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}

caption {
caption-side: bottom;
padding: 10px;
}

th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}

td {
text-align: center;
}

Cell Spanning
●​ Group of cells together to form one large cell is called a spanning cells and the large cell
that is created is called a cell span.
●​ Cell spacing refers to the amount of space that is held between the cells in a table.
●​ Spanning cells is also called Merging Cell.
●​ The colspan attribute in HTML specifies the number of columns a cell should span. It
allows the single table cell to span the width of more than one cell or column. It provides
the same functionality as “Merge Cell” in a spreadsheet program like Excel.
In HTML
Syntax:
<td colspan = "value">table content...</td>
Note: It can be used with <td> and <th> elements in an HTML Table.
The colpan attribute when used with <td> tag determines the number of columns a table cell
should span.
Syntax:
<td colspan = "value"> table content...</td>
// The value specifies the number of columns that the cell fills and it must be integer
Example
</head>
<body>
<center>
<h6>The HTML colspan Attribute</h6>
<table>
<tr>
<th>Name</th>
<th>Expense</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</td>
</tr>
<!-- The last row -->
<tr>
<!-- This td will span two columns, that is a
single column will take up the space of 2 -->
<td colspan="2">Sum: $18</td>
</tr>
</table>
</center>
</body>
</html>
Output:
CSS
Column-Span Property
The column-span property of CSS sets the number of columns an element can span across. Its
value can be none | all | initial | inherit
Syntax:
column-span: none|all|initial|inherit;
Default Value: None
Property Values:
all : It allows to span in all the columns equally.
Syntax:
column-span: all;
Example:
h2 {
column-span: all;
}
Web Accessibility
Web accessibility means that websites, tools, and technologies are designed and
developed so that people with disabilities can use them. More specifically, people can:
●​ perceive, understand, navigate, and interact with the Web
●​ contribute to the Web
It ensures that all users, including those using screen readers or other assistive technologies,
can interact with your content effectively.
HTML Accessibility
Provide the user a good way to navigate and interact with your site. Make your HTML
code as semantic as possible.
Semantic HTML gives context to screen readers, which read the contents of a page out
loud.
With the button example in mind:
●​ buttons have more suitable styling by default
●​ a screen reader identifies it as a button
●​ focusable
●​ clickable
A button is also accessible for people relying on keyboard-only navigation; it can be
clickable with both mouse and keys, and it can be tabbed between (using the tab key on the
keyboard).
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
15 HTML tags for Accessibility
ARIA labels
The aria-label attribute defines a string value that can be used to name an element, as
long as the element's role does not prohibit naming. The first rule of ARIA use is “If you can use
a native HTML element or attribute with the semantics and behavior you require already built in,
instead of re-purposing an element and adding an ARIA role, state or property to make it
accessible. It helps assistive technology attach a label, which is otherwise anonymous, to an
HTML element. You can use it in cases where a text label is not visible on the screen, such as
icons or buttons.
For example:
<button aria-label="Close">X</button>
If there is visible text labeling the element, you should use aria-labelledby instead. This
attribute references another element that provides the label for the current element.
For example:
<span id="logo"> Be Accessible</span>​
<img src="logo.png" alt="" aria-labelledby="logo">
We can also use aria-described by in our HTML. It is an ARIA attribute similar to
aria-labelled by that lists the ids of other elements that provide additional description for an
element.
For example, if you have a text input that requires a specific format, you can use
aria-described by to link it to a hint element that explains how to enter the data correctly. Here’s
a code snippet:
<input type="text" id="phone" aria-describedby="phone-hint"> ​
<span id="phone-hint">Enter your phone number with country code</span>
2. <fieldset> and <legend>
These tags are used to group related form controls together and provide a caption for
them. This helps screen readers and users who navigate with keyboards understand the context
and purpose of each form control. The <fieldset> tag creates a border around the group of form
controls, while the <legend> tag provides a title for them. For example:
<fieldset>​
<legend>Contact preferences</legend>​
<input type="checkbox" id="email" name="email">​
<label for="email">Email me</label><br>​
<input type="checkbox" id="phone" name="phone">​
<label for="phone">Call me</label><br>​
<input type="checkbox" id="text" name="text">​
<label for="text">Text me</label><br>​
</fieldset>
3. <label>
This tag is used to associate a text label with a form control, such as an input field, a
checkbox, or a radio button. This helps screen readers and users who navigate with keyboards
identify what each form control is for. You should use the for attribute to link the label with the
corresponding form control by their id attribute. For example:
<label for="name">Name:</label>​
<input type="text" id="name" name="name">
4. Role Attribute
The role attribute describes the role of an element in programs that can make use of it,
such as screen readers or magnifiers. It helps to provide semantic information about the purpose
of an element, especially when the HTML element does not convey its meaning clearly.
For example:
<a href="#" role="button">Button Link</a>
This tells screen readers that this element is a button, not a link. There are four categories
of roles: abstract roles, widget roles, document structure roles, and landmark roles. You can find
a list of all the roles and their descriptions at MDN.
5. alt attribute with <img>
You should always provide an alternative text (alt attribute) that describes the image
content or function for users who cannot see it. The alt text should be concise and relevant, and
avoid repeating information that is already on the page. For example:
<img src="logo.png" alt="Be Accessible logo">
6. <h1> to <h6>
These tags are used to create headings for your content. They help screen readers and
search engines understand the structure and hierarchy of your page. You should use only one
<h1> tag per page and use lower-level headings in a logical order. For example:
<h1>HTML Accessibility</h1>​
<h2>Semantic HTML</h2>​
<p>Semantic HTML means using correct HTML elements for their correct ​
purpose as much as possible.</p>​
<h3><button> Element</h3>​
<p>The <button> element defines a clickable button that can ​
be used to trigger an action or submit a form.</p>
7. <table>, <th>, <tr>, and <td>
These tags are used to create data tables that display information in rows and columns.
You should use proper markup to indicate table headers (<th>) and table cells (<td>) within table
rows (<tr>). You should also use scope attributes to specify whether a header applies to a row or
a column, and summary attributes to provide an overview of the table content for screen readers.
For example:
<table summary="This table shows monthly sales figures by product category">​
<tr>​
<th scope="col">Category</th>​
<th scope="col">January</th>​
<th scope="col">February</th>​
...​
</tr>​
<tr>​
<th scope="row">Books</th>​
...​
</tr>
8. lang attribute
The lang attribute specifies the language of the page or a part of it. For example:
<html lang="en">
This tells our page that the language is in english.
9. tabindex
The tab index attribute specifies the order of keyboard focus for elements. For example:
<a href="#" tabindex="1">First link</a>
If a user were to tab through our page, the HTML element with tabindex=”1" would be
the first in focus, and tabindex=”2" would be the second in focus. If we use tabindex=”0" then it
follows the natural progression of tabbing in the page. We can use tabindex=”-1" if we want the
element to be skipped over in tabbing.
10. <caption>
The <caption> tag defines a title for a table. The <caption> tag must be
inserted immediately after the opening <table> tag, and it can only be used once per table. An
example for <caption> is:
<table> <caption><strong>Sales report for January 2023</strong> </caption> ​
<tr> <th>Product</th> <th>Sales</th> </tr> ​
<tr> <td>Coffee</td> <td>$5000</td> </tr> ​
<tr> <td>Tea</td> <td>$3000</td> </tr> ​
<tr> <td>Milk</td> <td>$2000</td> </tr> ​
</table>
11. <figure> and <figcaption>
The <figure> tag defines a container for content such as images, diagrams, code snippets
or illustrations. The <figcaption> tag defines a caption for the content inside the <figure>
element. The <figcaption> tag can be placed either before or after the content within the
<figure> tag. The <figcaption> tag is not mandatory to be used with the <figure> tag.
An example for <figure> and <figcaption> is:
<figure> <img src="logo.png" alt="Octobot logo"> ​
<figcaption>The logo of Octobot</figcaption> ​
</figure>
12. <abbr>
The <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”,
“Dr.”, etc. You can use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element. For example:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.​
</p>
This will display “WHO” as an abbreviation with a dotted underline, and show “World Health
Organization” as a tooltip when you hover over it.
13. <button>
Use a native <button> or <input type="button"> whenever possible, as they have built-in
keyboard accessibility for both Enter and Spacebar keys. If you use a different element as a
button, such as a <div> or a <span>, you need to add role="button" and tabindex="0" attributes
to make it focusable and announce it as a button. You also need to add JavaScript event handlers
for both click and keydown events to make your custom button work with mouse and keyboard.
Always provide a clear and descriptive text label for your button, either inside the element or
using the aria-label attribute. Avoid using images or icons as buttons without text labels, as they
may not be understood by screen readers. Here is an example of a native button with an
accessible text label:
<button>Submit</button>
Here is an example of a custom button with ARIA attributes and JavaScript events:
<div role="button" ​
tabindex="0" ​
aria-label="Close" ​
onclick="closeWindow()" ​
onkeydown="handleKey(event)">​
<img src="close-icon.png" alt="">​
</div>​
​
<script>​
function closeWindow() {​
// code to close the window​
}​
function handleKey(event) {​
if (event.keyCode === 13 || event.keyCode === 32) {​
// Enter or Spacebar pressed​
closeWindow();​
}​
}​
</script>
14. <nav>
The <nav> element is used to mark up a section of a page that contains navigation links. It helps
users find and traverse the different pages available on your site. Some tips for using <nav> with
accessibility in mind are:
Use <nav> only for site navigation or intra-page navigation, not for other types of links such as
social media icons or footnotes.
Use an unordered list (<ul>) inside <nav> to group your navigation links logically.
Use aria-labelledby to label your <nav> element if it is not clear from the context what it
contains.
If you have more than one <nav> element on your page, use different labels for each one to
avoid confusion.
Here is an example of using <nav> with accessibility in mind:
<nav aria-labelledby="main-nav">​
<h2 id="main-nav">Main navigation</h2>​
<ul>​
<li><a href="home.html">Home</a></li>​
<li><a href="about.html">About</a></li>​
<li><a href="contact.html">Contact</a></li>​
</ul>​
</nav>
15. <audio> and <video>
The <audio> and <video> tags are HTML elements that embed audio and video content on a
web page. They can be controlled by keyboard or mouse. However, they also need some
additional features to make them accessible for users with disabilities, such as:
Transcripts: These are text versions of the audio or video content that can be read by screen
readers or displayed on the page. They should include all the spoken words and relevant sounds
or music in the media.
Captions: These are synchronized text overlays that appear on the video screen and show what
is being said or heard. They should be accurate, clear, and readable. They can be either open
(always visible) or closed (can be turned on or off).
Description: This is an explanation of the visual information in the video that is not conveyed
by the audio. It can be either integrated in the main audio track (audio description) or provided
as a separate text track (text description). It should describe important actions, scenes,
characters, and context.
The <track> tag is used to provide additional information for audio and video content,
such as captions or descriptions. It has a kind attribute that specifies the type of information
(captions or descriptions), a srclang attribute that specifies the language of the information, and a
label attribute that provides a name for the information.
Here are some code examples of how to use <audio> and <video> tags with accessibility
features:
<audio src="podcast.mp3" controls>​
Your browser does not support the audio element.​
<track src="podcast.vtt" kind="captions" srclang="en" label="English">​
</audio>
<video src="demo.mp4" controls>​
Your browser does not support the video element.​
<track src="demo.vtt" kind="captions" srclang="en" label="English">​
<track src="demo.ad.vtt" kind="descriptions" srclang="en" label="English">​
</video>
CSS Display Properties with Table Values
The CSS display property specifies an element’s display behaviour (the type of
rendering box). It defines how an element is rendered in the layout, determining its positioning
and interaction within the document’s flow and structure.
Syntax
display: value;
The commonly used values for the display property are as follows:
●​ inline: allows an element to behave like an inline-level element
●​ block: allows an element to behave like a block-level element
●​ inline-block: formats the element as inline-level but also allows to set height/width like
block-level element
●​ flex: sets the element as a flex container to have a flexible layout of its child elements
●​ grid: sets the element as a grid container to create complex layouts
●​ none: removes the element from the document leaving no space
Display Property Values

Value Description

inline Used to display an element as an inline element.

block Used to display an element as a block element

contents Used to disappear the container.

flex Used to display an element as a block-level flex container.

grid Display an element as a block-level grid container.

inline-block Display an element as an inline-level block container.

inline-flex Display an element as an inline-level flex container.

inline-grid Display an element as an inline-level grid container.

inline-table It is used to display an inline-level table

list-item It is used to display all the elements in <li> element.

run-in It is used to display an element inline or block level, depending on the context.

table It is used to set the behavior as <table> for all elements.

table-caption It is used to set the behavior as <caption> for all elements.

table-column-group Set the behavior as <column> for all elements.

table-header-group Set the behavior as <header> for all elements.

table-footer-group Set the behavior as <footer> for all elements.

table-row-group It is used to set the behavior as <row> for all elements.

table-cell It is used to set the behavior as <td> for all elements.


Value Description

table-column It is used to set the behavior as <col> for all elements.

table-row To set the behavior as <tr> for all elements.

none Used to remove the element.

initial Used to set the default value.

inherit Used to inherit property from its parents’ elements.

Example
You can set the span from the previous HTML code to block display and it will behave
like a block-level element.
span {
display: block;
background-color: #006100;
}

You can see that the <span> takes up the full width. That's because it has a display
property set to block.
Links and Images
Introduction
An image link is also called an HTML image link. It is used to display images on the
web. You cannot just add an image to a page. This is not readable for the Internet. Therefore you
will have to speak the 'computer language' to translate the image within the web page. This is
also called an image link. An image link is the URL you add to HTML code to make an image
visible on your web page.
Links and images are fundamentally different from those elements in that they deal
with external resources. Links point the user to a different HTML document, and images pull
another resource into the 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
Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL) to the image.
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
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:
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
An Image as a Link
Example Program
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;"></a>
</body>
</html>
CSS Styling Images
Rounded Images
You can use the border-radius property to create rounded images:
Thumbnail Images
Use the border property to create thumbnail images.

A Element:

HTML Tags are building blocks of HTML Page. HTML Elements are components that
are used in HTML Page. HTML Tags usually exist in pairs consisting of a starting and an ending
tag. However, some tags do not have a closing tag. HTML Elements contain a starting tag,
content, and an ending tag.

The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
Example
<!DOCTYPE html>​
<html>​
<body>​
<h1>My First Heading</h1>​
<p>My first paragraph.</p>​
</body>​
</html>
Relative URLs :
A Relative URL is a URL that only includes the path. The path is everything that comes
after the domain, including the directory and slug. Because relative URLs don't include the
entire URL structure, it is assumed that when linking a relative URL, it uses the same protocol,
subdomain and domain as the page it's on.

An example of a relative URL:

/about/team/

<link rel="canonical" href="/about/">

As an example of relative URL resolution, assume we have the base URL

"http://www.acme.com/support/intro.html".

The relative URL in the following markup for a hypertext link:

​ <A href="suppliers.html">Suppliers</A>
Full Form of URL "http://www.acme.com/support/suppliers.html", while the relative URL in the
following markup for an image

​ <IMG src="../icons/logo.gif" alt="logo">

index.html file
●​ Index.html is an HTML file that serves as the home page for a website. It's often the first
file that visitors to a website will see.

●​ Creating an index.html file is a fundamental step in HTML programming and website


development. This file serves as the backbone of a basic HTML webpage.
●​ The index.html file acts as the landing page of a website. It provides the initial structure,
ensuring that users are automatically redirected to this page unless a specific file is
requested. This default file is what web servers look for when serving content to visitors
who haven't specified a particular file.

When learning HTML programming, creating index.html files is a common practice in many
tutorials. Creating an index.html file is either by using VS Code or Text Editor

Steps to create index.html file in VScode

You can use any code editor to create the index.html file, but for this method, we will use Visual
Studio Code (VS Code) since it is widely used. Follow the steps below:

Step 1: Open Visual Studio Code


First of all, open Visual Studio Code, you can see in the image below I have
opened VScode but you can open any code editor of your choice, then go to File>New File to
create a new file:

Figure: Open the VScode.

Step 2: Name the File

Once you have performed the above steps required, you will now see a window that
shows what you want to name the file as, for this you will have to make sure that "Save as
Type" to "All Files" and follow the following naming convention for the file:

index.html

Figure: Name the File.

Step 3: Write Template of HTML

Once you have successfully created the index.html file, you will have to create the
HTML code, as you may be aware that HTML file follows a proper template for writing code,
below is the syntax for a simple HTML file:
<!DOCTYPE html>​
<html>​
<head>​
</head>​
<body>​
</body>​
</html>

In HTML, the <head>, <body>, and <html> tags serve different and unique purposes:

<html> Tag: This is known to be the root element of the HTML page. it's the mandatory tag that
tells when a HTML code begins and ends.

<head> Tag: This section contains meta-information about the document, such as - title,
character encoding, links to external resources etc.

<body> Tag: This section contains the main content for the document or webpage, including
text, images, multimedia elements, and structural elements like headings, paragraphs, lists, etc.

Step 4: Print Hello Word on the Screen

Let's take a look at an example of an HTML file that prints hello world on the screen, for this we
will need to write the following code in the index.html file:

<!DOCTYPE html>​
<html>​
<head>​
</head>​
<body>​
<h1>Hello, World!</h1>​
</body>​
</html>

Steps to Run the index.html File

Now, let's understand the steps required to run the index.html file:

Step 1: Save the File

Once you have written the above code in the VScode, simply click on the File>Save,
otherwise you can also use the shortcut CTRL+S to save the file.
Step 2: Open the File

Now that you have saved the file, simply open the directory where the file is saved and double
click to open it, it will automatically get opened via the default browser.

Output:

Web Design

HTML, or Hypertext Markup Language, is the standard language used to create and
design web pages. It provides the structure and layout of a webpage by using a system of tags
and attributes to define elements such as headings, paragraphs, images, links, and more. By
arranging these elements in a hierarchical structure, designers can create visually appealing and
well-organized web pages.
HTML (Hypertext Markup Language) is a text-based approach to describing how content
contained within an HTML file is structured. This markup tells a web browser how to display
text, images and other forms of multimedia on a webpage.
How to Create a Website using HTML and CSS
Step 1: Create a Layout.
Step 2: Set up the code.
Step 3: Create major elements in the layout.
Step 4: Create the HTML content.
Step 5: Create CSS for the layout.
Step 6: Create CSS to style individual elements.
Step 7: Add background color and style.

Navigation within a Webpage

The <nav> HTML element represents a section of a page whose purpose is to provide
navigation links, either within the current document or to other documents. Common examples
of navigation sections are menus, tables of contents, and indexes.
In HTML

In CSS

A <nav> block is used to contain an unordered list (<ul>) of links. With appropriate CSS,
this can be presented as a sidebar, navigation bar, or drop-down menu.
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

You might also like