HTML Basics and Coding Guide
Uploaded by
ruwipanchi1227HTML Basics and Coding Guide
Uploaded by
ruwipanchi1227Esoft Metro College - Kuliyapitiya
HTML – Hyper Text
Mark up Language
Esoft Metro College - Kuliyapitiya
Basic Structure of a web page
Esoft Metro College - Kuliyapitiya
There are many applications that can be used to write HTML5 code, including:
Notepad
A simple text editor that can be used to learn HTML
TextEdit
A simple text editor for Mac that can be used to learn HTML
Sublime Text
An advanced editor that can be used to write HTML programs
Notepad++
An open-source editor that can be used to edit HTML code
Visual Studio Code (VS Code)
An advanced editor that can be used to create HTML websites
Esoft Metro College - Kuliyapitiya
• What is a tag ?
HTML tags are simple instructions that tell a web browser how to
format text.
HTML tags contain three main parts
1. Opening tag
2. Content and
3. Closing tag
Example :-
<title> First Webpage </title>
Opening Closing
Content
Tag Tag
Esoft Metro College - Kuliyapitiya
HTML Colors
Color Names
In HTML, a color
can be specified
by using a color
name
Esoft Metro College - Kuliyapitiya
Basic Coding Structure
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Esoft Metro College - Kuliyapitiya
HTML tags and their functions
Esoft Metro College - Kuliyapitiya
Basic HTML tags and their function
➢ <html> - </html>
This is the opening tag of any web pages. All the other html tags must be contained
with in this tag.
➢ <head> - </head>
This controls the header section of a web page.
➢ <title> - </title>
You can type any text with in this tag which will display on the title bar.
➢ <body> - </body>
All the content of the web page must be placed with in this tag.
Esoft Metro College - Kuliyapitiya
Saving a HTML Visual Studio Code
Step 1 : Type the HTML code in VS Code.
Step 2 : File Save Type a file name(Eg: Home)
Step 3 : Save as type HTML
Step 4 : Click “Save” button
Esoft Metro College - Kuliyapitiya
First Web Page
Type the following code in vs code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Designing</title>
</head>
<body>
This is my first web page
</body>
</html>
Esoft Metro College - Kuliyapitiya
Step 2 : Click on “Run and Debug”
Step 3 : Select a Browser “Chrome” or “Edge”
Output :
Esoft Metro College - Kuliyapitiya
Title tag <title> </title>
HTML Source Code Output
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Paragraph tag | <p>… </p>
HTML Source Code Output
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<p> First paragraph </p>
<p> Second paragraph </p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Heading tags <h1>..</h1>
HTML Source Code Output
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<h1> First paragraph </h1>
<h2> Second paragraph </h2>
<h3> Third paragraph </h3>
<h4> Fourth paragraph </h4>
<h5> Fifth paragraph </h5>
<h6> Sixth paragraph </h6>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Line Breaks tag | <br>
HTML Source Code Output
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
ESOFT Metro College<br>
Kuliyapitiya
</body>
</html>
Esoft Metro College - Kuliyapitiya
Preformatted Text tag | <pre>…</pre>
HTML Source Code Output
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<pre>
Esoft Metro College
hissa Mawatha
Kuliyapitiya
</pre>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Text formatting tags
HTML Source Code Output
<pre>
<b>Bold Text </b>
<i>Italic Text </i>
<u>Underline Text </u>
<strong> Strong Text </strong>
<small> Smaller Text </small>
<mark>Esoft</mark>
<del> Esoft </del>
4<sup>th</sup> of December
H<sub>2</sub>O
<pre> Esoft Metro College - Kuliyapitiya
Progress bar | <progress>….</progress>
HTML Source Code
<progress> value="22" max="100"></progress>
Output
Esoft Metro College - Kuliyapitiya
Marquee tag
You can move text or image from right to left
<body>
<marquee>Esoft </marquee>
</body>
Esoft Metro College - Kuliyapitiya
Bullets and Numbering
Bullets (Un ordered List) Numbers (Ordered List)
<ul> <ol>
<li> Ditec </li> <li> HND </li>
<li> DiE </li> <li> BIT </li>
<li> DiSE </li> <li> TOP-UP </li>
<li> DiNW </li> <li> MSc </li>
</ul> </ol>
Esoft Metro College - Kuliyapitiya
HTML attributes
HTML attributes are used to provide additional information or modify
the behavior of HTML elements. They are placed within the opening tag
of an element and consist of a name-value pair.
For and example if you want to show paragraph description in right side
of the web page. You need to use these attribute.
<p align="right">Content of paragraph </p>
Attributes Value
Esoft Metro College - Kuliyapitiya
Common
HTML
attributes
Esoft Metro College - Kuliyapitiya
Paragraph align attribute
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<h1>HTML paragraph align Attribute</h1>
<p align="left">Left align content</p>
<p align="center">center align content</p>
<p align="right">Right align content</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
src /width/height Attributes
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<img src="[Link]" width="250" height="250">
</body>
</html>
Esoft Metro College - Kuliyapitiya
Style attribute
The style attribute is used to add styles to an element, such as color
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<h1 style="color:blue;">This is a blue paragraph.</h1>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Title attribute
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<h2 title="I'm a header">title Attribute for a heading </h2>
<p title="I'm a paragraph">title attribute for a paragraph</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
href attributes
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<h1>Linking website</h1>
<a href="[Link] click to go to Esoft Cooperate website</a>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Font
<html lang="en">
<head>
<title>Web Designing</title>
</head>
<body>
<font face="Algerian" size="20" color="Blue"> Esoft Metro Collage </font>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Background attributes
1. Background Color
<body bgcolor="Blue">
Esoft Metro College - Kuliyapitiya
02. Background Image
<body background="[Link]">
Esoft Metro College - Kuliyapitiya
What is HTML Tables?
An HTML Table is an arrangement of data in rows and columns in tabular format.
Tables are useful for various tasks, such as presenting text information and numerical
data. A table is a useful tool for quickly and easily finding connections between
different types of data. Tables are also used to create databases.
<th>
<tr>
<td>
Esoft Metro College - Kuliyapitiya
<!DOCTYPE html>
HTML Table Code Example <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Table</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width: 40%;">
<tr>
<th>Frist Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
Esoft Metro College - Kuliyapitiya
<tr>
<td>Pathum</td>
<td>Samaranayaka</td>
<td>24</td>
</tr>
<tr>
<td>Piyumi</td>
<td>Hansika</td>
<td>32</td>
Output
</tr>
<tr>
<td>Viraj</td>
<td>Dharshana</td>
<td>35</td>
</tr>
</table>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Adding Collapsed Borders in an HTML Table
For borders to collapse into one border, add the CSS border-collapse property.
Syntax
table, th, td {
border: 1px solid black;
Output
border-collapse: collapse;
}
Esoft Metro College - Kuliyapitiya
Adding Cell Padding in an HTML Table
Cell padding specifies the space between the cell content and its borders. If we do not specify a padding, the table cells will
be displayed without padding.
Syntax
th, td { Output
padding: 20px;
}
Esoft Metro College - Kuliyapitiya
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 Output
th {
text-align: left;
}
Esoft Metro College - Kuliyapitiya
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
Output
table {
border-spacing: 5px;
}
Esoft Metro College - Kuliyapitiya
Adding Cells that Span Many Columns in HTML Tables
To make a cell span more than one column, we must use the colspan attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" Output
content="width=device-width, initial-
scale=1.0">
<title>Table</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: center;
Esoft Metro College - Kuliyapitiya
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2> <tr>
<table style="width: 40%;"> <td>Viraj</td>
<tr> <td>0714587452</td>
<th>Frist Name</th> <td>077857496</td>
<th colspan="2">Telephone</th> </tr>
</table>
</tr> </body>
<tr> </html>
<td>Pathum</td>
<td>0776585741</td>
<td>0718574851</td>
</tr>
<tr>
<td>Piyumi</td>
<td>0776154874</td>
<td>0748574852</td>
</tr>
Esoft Metro College - Kuliyapitiya
Adding Cells that span many rows in HTML Tables
To make a cell span more than one row, we must use the rowspan attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
Output
content="width=device-width, initial-
scale=1.0">
<title>Table</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
Esoft Metro College - Kuliyapitiya
th,
td {
padding: 5px;
text-align: center;
}
<tr>
<td>077458352</td>
</style>
</tr>
</head>
<body>
</table>
<h2>Cell that spans two rows:</h2>
</body>
<table style="width: 40%;">
</html>
<tr>
<th>Name:</th>
<td>Pathum</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>0778574585</td>
</tr>
Esoft Metro College - Kuliyapitiya
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>
Output
Esoft Metro College - Kuliyapitiya
Adding a Background Color to the Table
A color can be added as a background in an HTML table using the “background-color” option.
Syntax
Table,
Th,
td {
Output
background-color: #f2f2d1;
}
Esoft Metro College - Kuliyapitiya
HTML Elements
HTML elements are responsible for creating various types of content on
a webpage, such as text, images, headings, paragraphs, links, lists,
tables, forms, and more. They provide the structure and formatting
instructions necessary for web browsers to interpret and display the
content correctly.
Cascading Style Sheets - CSS
CSS, or Cascading Style Sheets, is a language used to define the visual
appearance and layout of web pages written in HTML or XML. It
separates the content from the presentation, allowing developers to
control the style and design of elements.
There are three ways of inserting a style sheet:
• Internal CSS
• Inline CSS
• External CSS
CSS Syntax
❑ The selector points to the HTML element you want to style.
❑ The declaration block contains one or more declarations separated by semicolons.
❑ Each declaration includes a CSS property name and a value, separated by a colon.
❑ Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Internal CSS
Internal CSS is a method for defining CSS styles directly within an HTML document. It’s particularly
useful for applying unique styles to a single web page, and it’s embedded within the <style> element
located in the <head> section of the HTML file.
<html lang="en">
<head> p {
<title>Internal CSS</title> color: blue;
<style> font-size: 50px;
/* Internal CSS */ line-height: 1.5;
h1 { text-align: center;
color: green; }
font-size: 100px; </style>
text-align: center; </head>
} <body>
<h1>Esoft Metro Campus</h1>
<p>Shaping Lives, Creating Futures</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Advantages of Internal CSS
•Localized Styling: Keeps styles within the HTML file, avoiding conflicts with other pages and
making it easier to manage styles at the local level.
•Higher Specificity: Internal CSS has higher specificity than external CSS, allowing easier
overriding of external styles within the same HTML file.
•Performance: Reduces HTTP requests, potentially enhancing performance as no additional CSS
files need to be loaded.
•Ease of Implementation: Simple to use and implement, making it easy to quickly apply styles to
a single page.
Esoft Metro College - Kuliyapitiya
Disadvantages of Internal CSS
•Repetition: Styles must be repeated in multiple HTML files if the same styles are needed across different
pages.
•Increased File Size: Embedding CSS in HTML increases the file size of the HTML document.
•Reduced Reusability: Limited code reusability across different web pages.
•Limited Management: Managing styles across multiple pages can become difficult without a centralized
stylesheet.
Esoft Metro College - Kuliyapitiya
CSS #id Selector
The CSS #id selector is used to apply styles to a specific element identified by its unique id
attribute in an HTML document.
Since each id must be unique within the page, the #id selector allows you to target and style
individual elements with precision. The # character is used to indicate that the selector is an
id selector.
Esoft Metro College - Kuliyapitiya
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
}
scale=1.0">
</style>
<title>#id selector</title>
</head>
<style>
<body>
<h1 id ="para1">Esoft Metro Campus</h1>
#para1 {
<h2 id ="para2">Shaping Lives, Creating
color: green;
Futures</h2>
font-size: 100px;
</body>
text-align: center;
</html>
}
#para2 {
color: blue;
font-size: 50px;
line-height: 1.5;
text-align: center;
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Class Selector
The CSS .class selector is used to select all elements that belong to a specific class
attribute. By using the period (.) character followed by the class name, you can apply
CSS properties to all elements with that class.
Syntax:
.class {
// CSS property
}
Esoft Metro College - Kuliyapitiya
<html lang="en">
<head>
<title Class Selector</title>
<style>
.class {
color: green;
</style>
font-size: 100px;
</head>
text-align: center;
<body>
}
<h1 class ="class">Esoft Metro Campus</h1>
<h2 class ="class1">Shaping Lives, Creating
.class1 {
Futures</h2>
color: yellow;
</body>
font-size: 50px;
</html>
font-style: italic;
text-align: center;
}
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
<html lang="en">
<head>
<title>Class Selector</title>
<style>
[Link] {
color: green;
font-size: 100px; </head>
text-align: center; <body>
} <h1 class ="class">Esoft Metro Campus</h1>
<p class ="class1">Shaping Lives, Creating
p.class1 { Futures</p>
color:red; </body>
font-size: 50px; </html>
font-style: italic;
text-align: center;
}
</style>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same
style definitions.
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
h1, h2, p {
color: red; text-align: center;
}
color: red;
p{ }
text-align: center;
color: red;
}
Esoft Metro College - Kuliyapitiya
Example :
<html lang="en">
<head>
<title>Class Selector</title>
<style>
h1,h2,p{
text-align: center;
color: brown;
}
</style>
</head>
<body>
<h1>Esoft Metro Campus</h1>
<h2>Shaping Lives, Creating
Futures</h2>
<p>This is a paragraph.</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Inline CSS
Inline CSS is a method that applies CSS styling directly to HTML elements using the
‘style’ attribute. This approach allows developers to define styles for individual
elements, making it an effective tool for applying unique styles to specific HTML
elements.
Syntax:
<tag style = " "></tag>
Esoft Metro College - Kuliyapitiya
Example
<html lang="en">
<head>
<title>Inline css</title>
</head>
<body>
<h1 style="color: brown; font-size: 60px; text-align: center;">
Esoft Metro Campus
</h1>
<p style="color: blue; font-size: 20px; text-align: center;">
Kuliyapitiya
</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
External CSS
• With an external style sheet, you can change the look of an entire website by
changing just one file.
• Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
Syntax:
<link rel="stylesheet" href="path/to/your/[Link]">
Esoft Metro College - Kuliyapitiya
CSS File. HTML File.
.main{ <html lang="en">
text-align: center; <head>
} <title>External CSS</title>
</head>
.main1{ <link rel="stylesheet" href="[Link]"
font-size: 60px; <body>
color: green; <div class="main" >
} <h1 class="main1">
Esoft Metro Campus
#esoft{ </h1>
font-size: 25px;
color: skyblue; <p id="esoft">
}; Shaping Lives, Creating Futures
</p>
</div>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Colors
CSS Color Names
In CSS, a color can be specified by using a predefined color name:
Esoft Metro College - Kuliyapitiya
Example
html lang="en">
<head>
<title>CSS Colors</title>
</head>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Text Color
Example
<html lang="en">
<head>
<title>CSS Colors</title>
</head>
<body>
<h1 style="color:Tomato;">Esoft Metro Campus</h3>
<h2 style="color:DodgerBlue;">Shaping Lives, Creating Futures</h2>
</body>
</html>
Esoft Metro College - Kuliyapitiya
CSS Border Color
Example
<html lang="en">
<head>
<title>CSS Colors</title>
</head>
<body>
<h1 style="border: 2px solid Tomato;">ESOFT</h1>
<h1 style="border: 2px solid DodgerBlue;">ESOFT</h1>
<h1 style="border: 2px solid Violet;">ESOFT</h1>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
01 - CSS background-color
The background-color property specifies the background color of an element.
<html lang="en">
<head>
<style>
body{
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Esoft Metro Campus</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Other Elements
You can set the background color for any HTML elements:
<html lang="en">
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue; <body>
} <h1>CSS background-color example!</h1>
<div>
p { This is a text inside a div element.
background-color: yellow; <p>This paragraph has its own background color.</p>
} We are still in the div element.
</style> </div>
</body>
</head> </html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value
from 0.0 - 1.0. The lower value, the more transparent:
Esoft Metro College - Kuliyapitiya
<html lang="en">
<head>
<title>Background Colors</title>
<style> <body>
div { <div class="first">
background-color: green; <h1>opacity 0.1</h1>
} </div>
[Link] { <div class="second">
opacity: 0.1; <h1>opacity 0.3</h1>
} </div>
[Link] { <div class="third">
opacity: 0.3; <h1>opacity 0.6</h1>
} </div>
<div>
[Link] { <h1>opacity 1 (default)</h1>
opacity: 0.6; </div>
} </div>
</style> </body>
</head> </html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden border
Esoft Metro College - Kuliyapitiya
<html lang="en">
<head>
<title>Background Colors</title>
<style>
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;} <body>
[Link] {border-style: double;} <p class="dotted">A dotted border.</p>
[Link] {border-style: groove;} <p class="dashed">A dashed border.</p>
[Link] {border-style: ridge;} <p class="solid">A solid border.</p>
[Link] {border-style: inset;} <p class="double">A double border.</p>
[Link] {border-style: outset;} <p class="groove">A groove border.</p>
[Link] {border-style: none;} <p class="ridge">A ridge border.</p>
[Link] {border-style: hidden;} <p class="inset">An inset border.</p>
[Link] {border-style: dotted dashed solid double;} <p class="outset">An outset border.</p>
</style> <p class="none">No border.</p>
</head> <p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Border Width
<html lang="en">
<head>
<title>The Boarder width</title>
<style>
[Link] {
border-style: solid;
border-width: 5px;
}
[Link] {
border-style: solid;
border-width: medium;
}
[Link] {
border-style: dotted;
border-width: 2px;
}
Esoft Metro College - Kuliyapitiya
[Link] {
border-style: dotted;
border-width: thick;
}
[Link] {
border-style: double;
border-width: 15px;
}
[Link] {
border-style: double;
border-width: thick;
}
</style>
</head>
<body>
<p class="one">Some text.</p> </body>
<p class="two">Some text.</p> </html>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Border Color
The border-color property is used to set the color of the four borders.
[Link] {
<html lang="en"> border-style: dotted;
<head> border-color: blue;
<title>The Boarder color</title> }
<style> </style>
[Link] { </head>
border-style: solid; <body>
border-color: red; <h2>The border-color Property</h2>
} <p>This property specifies the color of the
four borders:</p>
[Link] {
border-style: solid; <p class="one">A solid red border</p>
border-color: green; <p class="two">A solid green border</p>
} <p class="three">A dotted blue border</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Specific Side Colors
<html lang="en">
<head>
<title>The Boarder color</title>
<style>
[Link] {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and
yellow left */
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="one">Esoft Metro Campus</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Shorthand Border Property
Example :
<html lang="en">
<head>
<title>The Boarder color</title>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<p>Esoft Metro Campus</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Rounded Borders
<html lang="en">
<head>
<title>The Roundest border</title>
<style>
[Link] {
border: 2px solid red;
padding: 5px;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
} Esoft Metro College - Kuliyapitiya
p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined
borders.
CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
Esoft Metro College - Kuliyapitiya
Example
<html lang="en">
<head>
<title>The Roundest border</title>
<style>
div {
border: 1px solid black;
margin-top: 50px;
margin-bottom: 100px;
margin-right: 800px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>Esofr Metro Campus</div>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Padding
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
CSS has properties for specifying the padding for each side of an element:
• padding-top
• padding-right
• padding-bottom
• padding-left
Esoft Metro College - Kuliyapitiya
<html lang="en">
<head>
<title>CSS padding</title>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 100px;
padding-bottom: 50px;
padding-left: 100px;
margin-top: 50px;
margin-bottom: 100px;
margin-right: 500px;
margin-left: 500px;m
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>Esofr Metro Campus</div>
</body>
</html> Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Height, Width
html lang="en">
<head>
<title>height and width </title>
<style>
div {
height: 100px;
width: 25%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an
element</h2>
<div>Esoft Metro Campus</div>
</body>
</html>
Esoft Metro College - Kuliyapitiya
CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
<html lang="en">
<head>
<title>Box Model</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h1>Esoft Metro Campus</h1>
Esoft Metro College - Kuliyapitiya
<h2>Shaping Lives, Creating Futures</h2>
<div>Welcome to ESOFT Metro Campus – Sri
Lanka's Premier Destination for Higher
Education Excellence! Established in 2000,
ESOFT has grown into the country's largest
private sector higher education network,
providing educational opportunities for over
30,000 students annually across our 40
branches. Committed to shaping futures, we
offer a diverse range of programs in ICT &
Computing, Business Management, Hospitality
Management, Engineering, Personal &
Professional Development, Language Training and
Corporate Training. What started with a focus
on Computing has now blossomed into a beacon of
academic diversity and excellence, empowering
students to chart their path to success. Join
us on this transformative journey where
education meets innovation!</div>
</body>
</html>
Esoft Metro College - Kuliyapitiya
CSS Text
Text Color
<html lang="en">
<head>
<title>Text Color</title>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Esoft Metro Campus</h1>
<p>Shaping Lives, Creating Futures</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Text Color and Background Color
<html lang="en">
<head>
<title>Text Color and Background Color</title>
<style>
body {
background-color: lightgrey;
color: blue;
}
<body>
h1 { <h1>This is a Heading</h1>
background-color: black; <p>This page has a grey background
color: white; color and a blue text.</p>
} <div>This is a div.</div>
</body>
div { </html>
background-color: blue;
color: white;
}
</style>
</head>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Text Alignment
<html lang="en">
<head>
<title>Text Alignment</title>
<style>
h1 {
text-align: center; <body>
} <h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
h2 { <h3>Heading 3 (right)</h3>
text-align: left;
} <p>The three headings above are aligned
center, left and right.</p>
h3 { </body>
text-align: right; </html>
}
</style>
</head>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
justify
<html lang="en">
<head>
<title>Text Alignment</title>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<div>
In my younger and more vulnerable years my father gave me some advice that I've been
turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told
me, 'just remember that all the people in this world haven't had the advantages that you've
had.'
</div>
</body>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Text Decoration
In this chapter you will learn about the following properties:
• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration
Esoft Metro College - Kuliyapitiya
<html lang="en">
<head>
<title>Text Alignment</title>
<style>
h1 {
text-decoration: overline;
}
<body>
<h1>Overline text decoration</h1>
h2 {
<h2>Line-through text decoration</h2>
text-decoration: line-through;
<h3>Underline text decoration</h3>
}
<p class="ex">Overline and underline text
decoration.</p>
h3 {
text-decoration: underline;
<p><strong>Note:</strong> It is not
}
recommended to underline text that is not a
link, as this often confuses
[Link] {
the reader.</p>
text-decoration: overline underline;
</body>
}
</html>
</style>
</head>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
<html lang="en">
<head>
<title>text-transform property</title>
<style>
[Link] {
text-transform: uppercase;
} <body>
<h1>Using the text-transform property</h1>
[Link] { <p class="uppercase">This text is transformed
text-transform: lowercase; to uppercase.</p>
} <p class="lowercase">This text is transformed
to lowercase.</p>
[Link] { <p class="capitalize">This text is
text-transform: capitalize; capitalized.</p>
}
</style> </body>
</head> </html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Text Spacing
Text Indentation
<html lang="en">
<head>
<title>text-indent</title>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<h1>Using text-indent</h1>
<p>In my younger and more vulnerable years my father gave me some advice that
I've been turning over in my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me, 'just remember that all the people in this world haven't had
the advantages that you've had.'</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Letter Spacing
<html lang="en">
<head>
<title>letter-spacing</title>
<style>
h2 {
letter-spacing: 5px;
}
h3 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Using letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Text Shadow
1
<html lang="en">
<head>
<title>Text Shadow</title>
<style>
h1 {
text-shadow: 2px 2px;
}
h3 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Esoft Metro Campus</h1>
</body>
</html>
Esoft Metro College - Kuliyapitiya
2
<html lang="en">
<head>
<title>Text Shadow</title>
<style>
h1 {
text-shadow: 2px 2px red;
}
h3 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Esoft Metro Campus</h1>
</body>
</html>
Esoft Metro College - Kuliyapitiya
3
<html lang="en">
<head>
<title>Text Shadow</title>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
h3 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Esoft Metro Campus</h1>
</body>
</html>
Esoft Metro College - Kuliyapitiya
CSS Fonts
Generic Font Families
In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical
look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
Esoft Metro College - Kuliyapitiya
<html lang="en">
<head>
<title>CSS Font</title>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New",
monospace;
}
h3 {
letter-spacing: -2px;
}
</style>
</head>
Esoft Metro College - Kuliyapitiya
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in
the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in
the Arial font.</p>
<p class="p3">This is a paragraph, shown in
the Lucida Console font.</p>
</body>
</html>
Esoft Metro College - Kuliyapitiya
CSS Navigation Bar
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Esoft Metro College - Kuliyapitiya
Vertical Navigation Bar
<html lang="en">
<head>
<title>Vertical Navigation Bar</title> /* Change the link color on hover */
<style> li a:hover {
ul { background-color: #555;
list-style-type: none; color: white;
margin: 0; }
padding: 0; </style>
width: 200px; </head>
background-color: #f1f1f1; <body>
} <ul>
<li><a href="#home">Home</a></li>
li a { <li><a href="#news">News</a></li>
display: block; <li><a href="#contact">Contact</a></li>
color: #000; <li><a href="#about">About</a></li>
padding: 8px 16px; </ul>
text-decoration: none;
} </body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Active/Current Navigation Link
.active {
background-color: #04AA6D;
color: white;
}
Esoft Metro College - Kuliyapitiya
Example
li [Link] {
<html lang="en"> background-color: #04AA6D;
<head> color: white;
<title>Active/Current Navigation }
Link</title>
<style> li a:hover:not(.active) {
ul { background-color: #555;
list-style-type: none; color: white;
margin: 0; }
padding: 0; </style>
width: 200px; </head>
background-color: #f1f1f1; <body>
} <ul>
<li><a class="active"
li a { href="#home">Home</a></li>
display: block; <li><a href="#news">News</a></li>
color: #000; <li><a href="#contact">Contact</a></li>
padding: 8px 16px; <li><a href="#about">About</a></li>
text-decoration: none; </ul>
}
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Horizontal Navigation Bar
<html lang="en">
<head>
<title>Active/Current Navigation
Link</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
} Esoft Metro College - Kuliyapitiya
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
Esoft Metro College - Kuliyapitiya
</html>
Esoft Metro College - Kuliyapitiya
Active/Current Navigation Link
<html lang="en">
<head>
<title>Active/Current Navigation
Link</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
Esoft Metro College - Kuliyapitiya
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; <ul>
} <li><a class="active"
href="#home">Home</a></li>
li a:hover { <li><a href="#news">News</a></li>
background-color: #111; <li><a href="#contact">Contact</a></li>
} <li><a href="#about">About</a></li>
.active { </ul>
background-color: #04AA6D;
}
</style> </body>
</head> </html>
<body>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Border Dividers
<html lang="en">
<head>
<title>Active/Current Navigation Link</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
Esoft Metro College - Kuliyapitiya
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111; <ul>
} <li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
.active { <li><a href="#contact">Contact</a></li>
background-color: #04AA6D; <li style="float:right"><a
} href="#about">About</a></li>
</style> </ul>
</head>
<body> </body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Fixed Top Navigation Bar
<html lang="en">
<head>
<title>Fixed Top Navigation Bar</title>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
Esoft Metro College - Kuliyapitiya
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
</head>
Esoft Metro College - Kuliyapitiya
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
Esoft Metro College - Kuliyapitiya
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Dropdown Menu
<html lang="en">
<head>
<title>Fixed Top Navigation Bar</title>
<style>
.dropbtn{
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
Esoft Metro College - Kuliyapitiya
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
Esoft Metro College - Kuliyapitiya
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Image Gallery
<html lang="en">
<head>
<title>Image Gallery</title>
<style>
[Link] {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
[Link]:hover {
border: 1px solid #777;
}
[Link] img {
width: 100%;
height: auto;
}
Esoft Metro College - Kuliyapitiya
[Link] {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="[Link]">
<img src="[Link]" alt="Cinque Terre" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="amanda-frank-MvsjXlQtkCY-unsplash (1).jpg">
<img src="amanda-frank-MvsjXlQtkCY-unsplash (1).jpg" alt="Forest" width="600"
height="400">
</a>
Esoft Metro College - Kuliyapitiya
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="[Link]">
<img src="[Link]" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="[Link]">
<img src="[Link]" alt="Mountains" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
CSS Forms
<html lang="en">
<head>
<title>CSS Form</title>
<style>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
Esoft Metro College - Kuliyapitiya
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
Esoft Metro College - Kuliyapitiya
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Sri Lanka</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
Esoft Metro College - Kuliyapitiya
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Search Input
<html>
<head>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('./img/[Link]');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
Esoft Metro College - Kuliyapitiya
</style>
</head>
<body>
<h2>Input field with an icon inside</h2>
<form>
<input type="text" name="search"
placeholder="Search..">
</form>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Text areas
<html lang="en">
<head>
<title>Styling textarea</title>
<style>
textarea {
width: 100%;
height: 150px; </style>
padding: 12px 20px; </head>
box-sizing: border-box; <body>
border: 2px solid #ccc; <form>
border-radius: 4px; <textarea>Some text...</textarea>
background-color: #f8f8f8; </form>
font-size: 16px; </body>
resize: none; </html>
}
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Select Menus
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Menus</title>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
Esoft Metro College - Kuliyapitiya
<h2>Styling a select menu</h2>
<form>
<select id="country" name="country">
<option value="au">Sri Lanka</option>
<option value="ca">Canada</option>
<option value="usa">USA</option>
</select>
</form>
</body>
</html>
Esoft Metro College - Kuliyapitiya
Esoft Metro College - Kuliyapitiya
Buttons
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Menus</title>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
Esoft Metro College - Kuliyapitiya
</style>
</head>
<body>
<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</body>
</html>
Esoft Metro College - Kuliyapitiya
You might also like
- HTML Headings, Tags, and Lists ExplainedNo ratings yetHTML Headings, Tags, and Lists Explained18 pages
- HTML and JavaScript Programming ExamplesNo ratings yetHTML and JavaScript Programming Examples37 pages
- SJBHS-6953c8a413dbb0.900812637-ADVANCED FEATURES OF HTML 1 - ContdNo ratings yetSJBHS-6953c8a413dbb0.900812637-ADVANCED FEATURES OF HTML 1 - Contd9 pages
- HTML Lists, Tables, and XHTML ExplainedNo ratings yetHTML Lists, Tables, and XHTML Explained29 pages
- HTML Structure and Formatting Tags GuideNo ratings yetHTML Structure and Formatting Tags Guide12 pages
- HTML Programming Examples and TutorialsNo ratings yetHTML Programming Examples and Tutorials13 pages
- HTML Table, Frameset, and Meta Tags GuideNo ratings yetHTML Table, Frameset, and Meta Tags Guide11 pages
- HTML Basics: Structure, Tags, and ListsNo ratings yetHTML Basics: Structure, Tags, and Lists10 pages
- HTML Table Creation and Formatting GuideNo ratings yetHTML Table Creation and Formatting Guide24 pages
- Understanding Hypertext Markup Language (HTML)No ratings yetUnderstanding Hypertext Markup Language (HTML)25 pages
- G11-TVL-ICT Programming (.Net Technology) Capslet Quarter 3-Week 2No ratings yetG11-TVL-ICT Programming (.Net Technology) Capslet Quarter 3-Week 210 pages
- Mastering Bootstrap 5: FunCherish ProjectNo ratings yetMastering Bootstrap 5: FunCherish Project24 pages
- Web Programming: Python & JavaScript GuideNo ratings yetWeb Programming: Python & JavaScript Guide47 pages
- DOM Manipulation and Event Handling GuideNo ratings yetDOM Manipulation and Event Handling Guide49 pages
- Custom Widget Tutorial for SAP Analytics CloudNo ratings yetCustom Widget Tutorial for SAP Analytics Cloud96 pages