06 SEPTEMBER 2022
This day is the starting of .net stream.
HTML
Hyper text markup language is the language which is used to create web pages. This language will describe the structure of the web page and consists of series of elements which tell the browser how to display the content. HTML IS NOT CASE-SENSITIVE.
CSS
Cascading style sheets is used give the styling to the web page created using html. This will be used to give border, background colour and styling of the web page.
Three types:
1)Inline
2)Internal
3)External
Practice code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Introduction to html</title>
<link rel=”stylesheet” href=”styles.css”>
<style>
pre{
color:aquamarine;
font-size: larger;
background-color: cadetblue;
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
}
p{
color:blueviolet;
font-size: large;
font-family: cursive;
background-color: blanchedalmond;
}
ol>li{
color:blue;
}
ul>li{
color:red;
}
dl>dt{
color: blue;
}
dl>dd{
color:rgb(255,0,247)
}
table{
width:100%;
}
th{
height:35px;
color: brown;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
tr:nth-child(even){
background-color: bisque;
}
tr:hover{
background-color: paleturquoise;
color: blue;
}
a:hover{
background-color: aquamarine;
}
</style>
</head>
<body>
<abbr title=”CASCADING STYLE SHEETS”></abbr>
<h1 style=”color:blue; background-color: aqua;”> Welcome to HTML</h1>
<h1 style=”color:aqua; background-color: blue;”>Hi</h1>
<h6>HYPERTEXR MARKUP LANGUAGE</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nobis omnis cupiditate rerum corporis!</p>
<p> Aliquid inventore quidem voluptatibus soluta eos expedita quas, illum accusamus veritatis deserunt labore aspernatur? Similique, earum.</p>
<pre>
<i>Lorem ipsum dolor sit amet consectetur</i><br> adipisicing elit. Voluptate eveniet ea natus ipsum atque, accusantium maxime facere est aspernatur corporis deserunt modi, molestiae assumenda quos aut adipisci provident? Laudantium, ipsam!</p>
</pre>
<hr>
<a href=””></a>
<hr>
<img src=”” alt=””>
<! — Lists →
<! — Ordered, unordered, definition →
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
<ol type=”a”>
<li>HTML</li>
<li>CSS</li>
</ol>
<ol type=”A”>
<li>HTML</li>
<li>CSS</li>
</ol>
<ol type=”i”>
<li>HTML</li>
<li>CSS</li>
</ol>
<ol type=”I”>
<li>HTML</li>
<li>CSS</li>
</ol>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ul type=”Circle”>
<li>HTML</li>
<li>CSS</li>
</ul>
<ul type=”Square”>
<li>HTML</li>
<li>CSS</li>
</ul>
<ul type=”Rectangle”>
<li>HTML</li>
<li>CSS</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<hr>
<dl>
<dt>HTML</dt>
<dd>HYPERTEXT MARKUP LANGUAGE</dd>
<dt>CSS</dt>
<dd>CASCADING STYLE SHEETS</dd>
</dl>
<hr>
<audio controls autoplay muted>
<source src=”” type=”audio/mp3">
</audio>
<hr>
<video width=”400px” controls poster=””>
<source src=”” type=”video/mp4">
</video>
<hr>
<iframe src=”https://www.dlithe.com" height=”400px” width=”800px” frameborder=”0"></iframe>
<hr>
<a href=”https://www.google.com" target=”Google” title=”Google”>google</a>
<hr>
<iframe src=”https://www.dlithe.com" name=”google”></iframe>
<! — Tables →
<table>
<caption>DOTNET TRAINING</caption>
<thead>
<tr>
<th>Training code</th>
<th>Training name</th>
</tr>
</thead>
<tbody>
<tr>
<td>T001</td>
<td>Software Engineering</td>
</tr>
<tr>
<td>T002</td>
<td>OOPS</td>
</tr>
<tr>
<td>T002</td>
<td>Database</td>
</tr>
<tr>
<td>T004</td>
<td>Web UI</td>
</tr>
<tr>
<td>T005</td>
<td>Angular</td>
</tr>
<tr>
<td>T006</td>
<td>.NET</td>
</tr>
<tr>
<td>T007</td>
<td>SQL</td>
</tr>
</tbody>
</table>
<address>
Abc company<br>
Bangalore
</address>
<bdo dir=”rtl”></bdo>
<p>©www.abc.com</p>
<spam style=”background-color: aqua;”>©www.abc.com</spam>
<span>Hi</span>
<pre>Hi</pre>
</body>
</html>
Then we studied on how to use selectors and different types:
1)ID selector
2)class selector
3)element selector
4)Grouping selector
5)universal Selector
My Task1:
07 SEPTEMBER 2022
My Task2:
08 SEPTEMBER 2022
Javascript:
->Programming language.
->Interaction with the elements in the web page.
->Client-side scripting — web browser(html, css, js) — Interpreter — line by line.
->Dynamic web page — events, animations, validations, DOM(Document object model) manipulation.
->JavaScript has 3 main concepts, ECMA Script, DOM(interaction), BOM(API-Application program interface).
->JSON(JavaScript Object Notation).
->Case sensitive.
->Embed js in 3 ways
1)JS in head tag
2)JS in body tag
3)JS in External
My task3:
09 SEPTEMBER 2022
Javascript OOPS
Here i worked on the javascript by using the oops concept and done the practical work.
Application of the javascript concept with the object oriented concepts has been learnt on this day. also done the practical work on this topic.