What is DNS?
The function of DNS server is resolving (translating) human-readable
domain names([Link]) to corresponding numeric Internet Protocol
(IP) addresses .
Ex: [Link] [Link]
The Domain Name System (DNS) is the phonebook of the Internet.
DNS is responsible for finding the correct IP Addresses for domains.
(like [Link], [Link] etc..).
TLD Name Server and Authoritative Name Server
• At first the DNS resolver(aka. DNS recursor) receives query from the DNS client ,
then interacts with other DNS servers to hunt down the correct IP Address.
After receiving request the resolver actually behaves like a client itself., then it
requests root nameserver.
Root server is the first step in resolving human readable domains into IP addresses.
The root server then responds to the resolver with the address of a top-level
Domain(TLD) DNS server (such as .com or .net) that stores the information for its
domains.
Next the resolver queries the TLD server. The TLD server responds with the IP
address of the domain’s authoritative nameserver. The recursor then queries the
authoritative nameserver, which will respond with the IP address of the origin server.
The resolver finally pass the origin server IP address back to the DNS client .Now
using this IP address the client can intiate a query directly to the origin
server([Link]) .th the IP address of the origin server.
Working of DNS:
Let client requested for [Link]
The request will be sent to DNS Resolver.
Resolver now acts like a client and requests Root server.
Root server will check the top level domain in the request (.com, .org
etc..) and sends the address of corresponding TLD (top-level domain)
server. In this case it is .com .
Now the TLD server responds with the authoritative name server. Now the
DNS server requests the corresponding authoritative server , this
authoritative server finally responds with the origin server.
How websites Work?
Frontend – Frontend is everything user can see and interact
with.
Frontend of website is accessible through the browser
Backend – Backend consists of a backend application and
database. Application.
Helps us interact with database, 3 rd
party APIs and backend
is where lots of business.
Logic and algorithms are written.
To build a frontend application we use HTML, CSS , JavaScript.
Backend application can be build using many languages.
Ex: Nodejs( javaScript), Java , C#, python etc..
Login Example
Person enters email Frontend sends login Backend interacts
id / pwd using id pwd to backend to with database and
Frontend check if it is correct finds out if login id
/pwd is correct
Frontend logins the Backend sends
user or shows msg information back to
of incorrect creds frontend
Opportunities in Web development:
There are job opportunities aplenty.
Roles for a web developer
i) Front-end developer.
ii) Back-end developer.
iii) Full stack engineer.
iv) Software engineer.
v) senior web developer.
Ofcourse..
You can start your own company as well.
HTM
L
Content
• What is HTML?
• HTML Tag
• HTML Boilerplate
• Box Model
• Texts in HTML
• Lists
• Images
• Forms
• Table
• Iframes
• Videos
• Div and span
Introduction to
HTML
Key Shortcuts :
• Ctrl + C copy the selected content.
• Ctrl + V Pasting.
• Ctrl + A select all the content in a file.
• Ctrl + Z Undo.
• Ctrl + X Cut .
What is HTML ?
●HTML stands for Hyper Text Markup Language.
●HTML is the standard markup language for creating
Web pages.
●HTML describes the structure of a Web page.
●HTML consists of a series of elements.
●HTML elements tell the browser how to display the
content
HTML TAGS:
HTML tags are predefined keywords which defines how web browser will format and
display content.
Ex: <b>bold words</b>
All HTML tags are must be enclosed within angular brackets (< & >) .
Ex: <html>, <head> etc..
Most of the HTML tags will have both opening and closing tags , very few tags will
have only opening tags.
Ex: 1) <html> </html>
2) <div> </div>
3) <hr> (only opening tag)
4) <br> (only opening tag)
HTML Tags Examples
<h1>Hello World</h1>
<p>Hi I am doing great</p>
<a href=“[Link] Here</a>
Some frequently used tags:
● <html></html> ( Root tag).
● <head></head> (head tag contains metadata of the webpage).
● <body></body> (Contains body of the webpage).
● <h1></h1> ( Heading tag)
● <div></div> ( used to make divisions of content in the webpage)
● <p></p> (paragraph tag)
● <b></b> (bold tag)
● <a></a> (anchor tag)
● <img > (image tag)
● <hr> (Horizontal Rule)
● <br> (Line break)
● <form></form> ( To create forms)
The above are frequently used tags , but there are many(140tags as of now) more tags are
there.
HTML Tags
attribu Conte Closing
attribute
te nt tag
value
<a
Eleme
href=“[Link]”>Index</a>
nt
HTML tags and attributes are case insensitive
Attribute values are case sensitive
Attributes:
HTML attributes provide additional information about HTML elements.
Ex: <img src=“image_url” >
Attributes are always specified within the start tag .
Ex: <a href=“url” >click </a> .
There can be multiple attributes for a single HTML elements .
Ex: <input name=“aravind” placeholder=“Username” >
HTML Structure:
Explanation For Above Sample Document
●The <!DOCTYPE html> declaration defines that this document is an HTML5 document
●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 (which is shown in the
browser's title bar or in the page's tab)
●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.
●The <h1> element defines a main heading
●The <p> element defines a paragraph
Head tag :
Content inside the head tag will not be displayed in the browser.
Head tag contains metadata (data about page).
The following tags can go inside head tag.
<title> <link>
<script> <meta>
<base> <noscript>
<title> is used to declare the title of the webpage .
<base> is used for default URL.
<meta> is used for defining metadata(information about webpage) of the
webpage.
Meta Tag :
● <!DOCTYPE html> White color box is the title of the
● <html> webpage.
Yellow color box is the description of the
● <head>
webpage.
● <title>C++ Tutorial</title>
● <meta name="dn" content="C++
Tutorial, C++ is a middle-level
programming escriptiolanguage
developed by Bjarne ...."/>
● </head>
● <body>
●
● </body>
● </html>
HTML Headings
Html headings are used to define the structure of the web page.
Html offers six different headings tags h1, h2, h3, h4, h5, and h6.
h1 tag mostly used for important headings like title (title of the content not the title
of webpage), and h6 used for the least important headings.
The heading is a block-level HTML element which means that it will always start
from a new line. The heading element in Html has both a starting tag and an ending
tag.
Html tag Rank Default size (in Px)
<h1><h1> 1 32
<h2><h2> 2 24
<h3><h3> 3 18
<h4><h4> 4 16
<h5><h5> 5 13
<h6><h6> 6 10
Heading sample Document
<!DOCTYPE html>
<html>
<head>
<title>Headings In Html</title>
</head>
<body>
<h1>This is h1 tag</h1>
<h2>This is h2 tag</h2>
<h3>This is h3 tag</h3>
<h4>This is h4 tag</h4>
<h5>This is h5 tag</h5>
<h6>This is h6 tag</h6>
</body>
</html>
Output For Heading Sample Document
HTML Headings
It is recommended to have one H1 heading – just like you have only one title of the
book
It is recommended not to use headings just for font size purpose, as we can manage
font size using css as well
You should use heading in sequence like h1 and then h2 and so on
Exercise
Try all h1 tags
Paragraph Tag
The p element represents a paragraph in an HTML document .
It is a block-level HTML element which means that it will always start from a
new line. When we create an HTML paragraph browser always creates white
space before and after the paragraph.
The p element in html has both a starting tag <p> and an ending tag </p>. All
the content of a paragraph is placed between the starting tag and ending tag.
In Html The paragraph is marked as:
<p>This is a paragraph.</P>
<!DOCTYPE html>
<html>
Paragraph <head>
<title>HTML paragraph</title>
sample </head>
<body>
Document <p>This is Paragraph,which will start on new line</</p>
</body>
</html>
Output For
Paragraph
sample
Document
Student Exercise
Replicate first four paragraphs of this site:
[Link]
Text Formatting:
em vs I : em used for emphasized text , i used for italic text.
strong vs bold : Used to make text bold strong is used for important
text, whereas bold is used for just making the text bold.
sub vs sup : For subscript and superscript.
ins vs del : ins used for underlined text , del is used for
strikethrough the text.
Mark : Used to mark/Highlight some text .
Small : Defines smaller text.
Text formatting :
● <!DOCTYPE html>
● <html>
● <head>
● <meta charset="UTF-8">
● <title>Aravind</title>
● </head>
● <body>
● <b>Bold Text</b><br>
● <strong>Important Text</strong><br>
● <i>Italic Text</i><br>
● <em>Emphasized Text</em><br>
● <mark>Marked Text</mark><br>
● <small>Smaller Text</small><br>
● <del>Deleted Text</del><br>
● <ins>Inserted Text</ins><br>
● Text<sub>Subscripted Text</sub><br>
● Text<sup>Superscripted Text</sup><br>
●
</body>
● </html>
HTML paragraph</
Anchor Tag(Known as Heart of HTML)
An anchor tag is a HTML element that creates a link to a target URL. When correctly
implemented, the link can wrap around text, images, or as buttons, so that users can interact
with it and visit the link's destination.
<a href="[Link] Home</a>
Opening Attribute
Attribute
Tag Value anchor text Closing Tag
It will display Google Home text with underline of blue colour and on
opening it it will redirect to the Google with in same Page
HTML paragraph</
Exercise
1) Write a text Hello World and on click of the text it should redirect to KCA website
Create two html files index1 and index2, create link between 2 files.
Image Tag :
●
img src="./tp/[Link]" alt="Random Image" width="400" height="300">
<
Image tag is used to place an image in the webpage.
src : Specifies the path to the image.
Width : Custom width of the Image in pixels.
Height : Custom height of the image in pixels .
alt : alt - Specifies an alternate text for the image, if the image for
some reason cannot be displayed.
To link an image to another document , simply nest the img tag inside anchor
(<a>) tag .
Ex: <a href=“target_url”><img src=“image_url”></a>.
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.
HTML paragraph</
Image Tag Example
Image Tag Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="100" height="100">
Image Tag Output
Relative path :
Relative path refers to a location that is relative to the
current folder.
Relative paths make use of two special symbols , a dot (.) and a
double dot (..) , which refers to current folder(directory) and
parent folder respectively.
Relative path is case insensitive .
HTML paragraph</
Absolute path and Relative path :
● Absolute path : ● Relative path :
An absolute path refers to the complete details Relative to current Folder
needed to locate a file or folder, starting from the / Directory .
root element and ending with the other subdirectories.
Ex:
Ex:
../folder1/folder2/[Link]
C:\Users\Aravind\OneDrive\Desktop\sessions\
[Link]
Relative path :
The folder system in a computer is a tree
like structure.
In the right side picture let if we are in
folder31.
./ : Refers to the same folder (folder31).
../ : refers to the parent folder of the
current folder i.e Folder3.
../../ : Grand parent folder of the current
folder i.e Folder1 .
../../Folder4 : refers to inside folder4
w.r.t the current folder.
../../[Link] : refers to the [Link]
file inside Folder1.
What is the relative path of [Link] file
when you are in Folder2 ?
HTML paragraph</
Image Tag Example
Exercise
Img src =
[Link]
Add above image using the url given
Also, download the image and add it using relative and absolute path
HTML paragraph</
Image Tag Example
HTML List:
HTML lists allow web developers to group a set of related items in
lists.
It consists of two types
[Link] List
[Link] List
HTML paragraph</
Image Tag Example
HTML Unordered List
An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag . The list items will be marked with bullets (small black circles) by
default:
Value Description
disc
circle
Value
Sets the list item marker to a bullet (default)
Sets the list item marker to a circle
Description
square Sets the list item marker to a square
none The list items will not be marked
disc Sets the list item marker to a bullet
(default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
HTML paragraph</
Image Tag Example
Unordered List:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aravind</title>
</head>
<body>
<ul type="disc"> <!-- default -->
<li>Tea</li>
<li>Coffee</li>
</ul>
<ul type="square">
<li>Tea</li>
<li>Coffee</li>
</ul>
<ul type="circle">
<li>Tea</li>
<li>Coffee</li>
</ul>
</body>
</html>
HTML paragraph</
Image Tag Example
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
The list items will be marked with numbers by default:
ordered list types
Type Description
type="1" The list items will be numbered with numbers (default).
type="A" The list items will be numbered with uppercase letters.
type="a" The list items will be numbered with lowercase letters.
type="I" The list items will be numbered with uppercase roman
numbers.
type="i" The list items will be numbered with lowercase roman
numbers.
Ordered List :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aravind</title>
</head>
<body>
<ol type="1"> <!-- default -->
<li>Tea</li>
<li>Coffee</li>
</ol>
<ol type="A">
<li>Tea</li>
<li>Coffee</li>
</ol>
<ol type="a">
<li>Tea</li>
<li>Coffee</li>
</ol>
<ol type="i">
<li>Tea</li>
<li>Coffee</li>
</ol>
<ol type="I">
<li>Tea</li>
<li>Coffee</li>
</ol>
HTML paragraph</
Image Tag Example
Exercise
Create a nested ordered list
Create an ordered list in reverse order 3,2,1
HTML paragraph</
Image Tag Example
HTML Forms:
An HTML form is used to collect user input. The
user input is most often sent to a server for
processing .
The <form> tag is a container for different
ype="i"
types of input elements, such as: text fields,
The list items will be numbered with lowercase roman numbers
checkboxes, radio buttons, submit buttons, etc.
The HTML <input> tag is the most used form
element.
An <input> element can be displayed in many
ways, using the type attribute.
Ex: <input type="number">
HTML paragraph</
Image Tag Example
HTML Forms
The HTML <input> element is the most used form
element.
An <input> element can be displayed in many ways, depending on the
type attribute
Type Description
An <input> element can be displayed in many ways, depending on the type attribute.
ype="i" The list items will be numbered with lowercase roman numbers
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of
many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more
of many choices)
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button
HTML paragraph</
Image Tag Example
Input Tag:
type attribute is mandatory for an
input tag.
The default value of type attribute
is text.
<input type="text"><br>
<input type="number"><br>
<input type="email"><br>
<input type="password"><br>
<input type="url"><br>
<input type="time"><br>
<input type="date"><br>
<input type="datetime-local"><br>
<input type="checkbox"><br>
<input type="radio"><br>
<input type="file"><br>
HTML paragraph</
Image Tag Example
HTML Form Required Attribute
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled
out before submitting the form.
Ex:
<form>
<input type="text" required>
<input type="submit" >
</form>
HTML paragraph</
Image Tag Example
HTML Form Dropdown
Dropdown is used to select the options from the list which is having in
the dropdown box
The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is
submitted (if you omit the name attribute, no data from the drop-down list
will be submitted).
<form>
<input type="text" name="username"><br>
<select name="dropdown">
<option value="Tea">Tea</option>
<option value="Coffee">Coffee</option>
<option value="milk">Milk</option>
</select>
</form>
The <option> tags inside the <select> element define the available options in the drop-down list.
Video Tag:
HTML <video> tag is used to embed a video content in the webpage.
<video> tag is much like <img> tag.
There are three supported video formats in HTML : MP4 , WebM , OGG .
The Video tag contains one or more <source> tags with different video sources .
The browser will choose the first source it supports .
Optional Attributes For Video tag:
Autoplay (Boolean) : As soon as the video is ready it plays automatically .
Controls (Boolean) : Enables controls of the video .
Height(in pixels) : Specifies the height of the video player.
Width(in pixels) : specifies the width of the video player.
Loop (Boolean) : Video will start over again , every time it’s finished.
Muted (Boolean) : Specifies the audio of the video should be muted .
Src(source) : Specifies the URL/Address of the video file.
Note : The autoplay attribute doesn’t work when the video is unmuted .
Iframes:
An inline frame(iframe) is used to embed another web page with in the
current HTML document .
Syntax:
<iframe src=“url” ></iframe>
● <iframe
● src="./[Link]"
● width="300"
● height="300"
● >
● </iframe>
Favicon :
A favicon is a small image displayed before title of the webpage .
We can add favicon to our webpage by using <link> tag .
Ex:
<link rel="icon" href="./[Link]">
HTML paragraph</
Image Tag Example
HTML Tables
HTML tables allow web developers to arrange data into rows
and columns.
Each table cell is defined by a <td> and a </td> [Link] stands
for table data.
Each table row starts with a <tr> and end with a </tr> [Link]
stands for table row.
You can have as many rows as you like in a table, just make
sure that the number of cells are the same in each row.
To make a cell span over multiple columns, use the colspan
attribute . To make a cell span over multiple rows, use the
rowspan attribute:
HTML Table :
<table> : Defines HTML table.
<caption> : Defines the title of the table.
<tr>(table row) : defines a table row .
<th>(table header): Defines the header cell
<td>(table data) : Defines a table’s cell .
<colgroup> :Specifies a group of one or more columns in a
table for formatting.
<col> : Specifies column properties for each column inside
<colgroup> .
<thead> : Groups the header content in a table ..
<tbody> : groups the body content in a table.
<tfoot> : Groups the footer content in a table .
HTML paragraph</
Image Tag Example
HTML Table: :
● <table>
● <caption>Students</caption>
● <thead>
● <tr>
● <th>Name</th>
● <th>Course</th>
● </tr>
● </thead>
● <tbody>
● <tr>
● <td>Aravind</td>
● <td>ECE</td>
● </tr>
● <tr>
● <td>Srikar</td>
● <td>EEE</td>
● </tr>
● </tbody>
● </table>
HTML paragraph</
Html Table Colspan Output
1 2
From Above Arrows indicated you can observe that Name occupies the two columns
HTML paragraph</
Html Table Colrow
As you can see above Phone Occupies two rows
HTML paragraph</
Exercise – Replicate the three forms
given below
HTML paragraph</
Image Tag Example
CSS Box model :
● <!DOCTYPE html>
● <html>
● <head>
● <title>Test</title>
● <style>
● b{
● padding:100px;
● border:10px solid rgb(255, 191, 191);
● background-color: rgb(240, 240, 178);
● margin:100px;
● }
● </style>
● </head>
● <body>
● <b>Text</b>
● </body>
● </html>
HTML paragraph</
Block vs Inline :
HTML paragraph</
Image Tag Example
Section :
Section tag defines the section documents such as headers,
footers or any other sections .
The section tag is used when requirements of two headers
or footers or any other section of documents needed.
The main advantage of the section tag is, it is a semantic element,
which describes its meaning to both browser and developer.
<section>Section Contents</section>
HTML paragraph</
Image Tag Example
Nav :
The <nav> tag defines the navigation menu .
<nav> tag is intended only for major block navigation
links .
<nav>
● <a href="[Link]
● <a href="[Link]
● <a href="https:// contact">Contact US</a>
● </nav>
HTML paragraph</
Image Tag Example
Header :
The <header> tag represents a container for introductory contents or a
set of navigation links .
You can have several header elements in a single HTML document .However
<header> tag can’t be placed in <footer> tag or another <header> element .
<header>
<h1>C++ Tutorial</h1>
<img src="./[Link]">
<p>This is the Page header</p>
</header>
HTML paragraph</
Image Tag Example
Footer :
The <footer> tag defines a footer for a document or section .
A <footer> element typically contains :
Authorship Information .
Copyright information .
contact information .
Sitemap .
Back to top links .
Related documents .
Command Line Interface :
mkdir – creates a new directory/folder .
C:\Users\Aravind>mkdir test
Rmdir – Removes the directory.
C:\Users\Aravind>rmdir test
dir – used for lookup of all directories and files.
Cd – Navigating from directory to directory .
notepad – Used to create a new file .
C:\Users\Aravind>notepad [Link]
del /f – To delete an existing file .
C:\Users\Aravind>del /f [Link]
Git Commands:
git init – Intialises a new repository in your current
working directory. (.git folder).
git status – shows the status of local repository .
git add – Adding one/more files and folders to the local git
repository .
git add ‘file1’ ‘file2’ folder1 folder2.
git commit –m “message” – Used to save changes.
git remote add origin “remote_git_repo_url” – Linking the
local git repository with remote git repository .
git push –u origin master - pushes the files from local git
repository to the linked remote git repository .