EDUCATION

EMPLOYABILITY

Front end Development

HTML 5
ENTREPRENEURSHIP

CSS 3
Bootstrap
By Ashok Kumar naik

www.task.telangana.gov.in
 EDUCATION

• In the web technology world, below are the fundamental

building blocks of any web page.
EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 How does the
EDUCATION
EMPLOYABILITY

Internet
ENTREPRENEURSHIP

works
www.task.telangana.gov.in
 EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP The internet

www.task.telangana.gov.in
 EDUCATION
EMPLOYABILITY

www.google.com
ENTREPRENEURSHIP

www.task.telangana.gov.in
 EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP

ISP
DNS

www.task.telangana.gov.in
 https://www.submarinecablemap.com/
EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 How Do
EDUCATION

Websites
EMPLOYABILITY

Actually
Work?
ENTREPRENEURSHIP

www.task.telangana.gov.in
 How Do Websites Actually Work?
EDUCATION

• What exactly does HTML, CSS, and JavaScript do exactly?

• Now, in order to access a webpage, we all know that you
need a browser, right? And that can be Chrome,Safari,
EMPLOYABILITY

Firefox, Microsoft edge whatever is your favorite one.

• These are all pieces of software that allow you to look up the
IP address of your website and be able to receive data that it
can render into the beautiful websites that we see.
ENTREPRENEURSHIP

• Now, the data that you receive from the server usually
consists of three types of
files; HTML, CSS, and JavaScript.
www.task.telangana.gov.in
 EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP Website

www.task.telangana.gov.in
 EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP Website

www.task.telangana.gov.in
 EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP Website

www.task.telangana.gov.in
 EDUCATION

Introduction to HTML HTML structure and tags HTML Forms

what HTML is and its role in basic structure of an HTML document, Applying HTML forms
web development headings, paragraphs, links, images, and
lists
EMPLOYABILITY
ENTREPRENEURSHIP

Setting up the development environment HTML Lists & Tables Embedded

environment for HTML. unordered lists, ordered lists Using media and
text editor and a web browser iframe
www.task.telangana.gov.in
 HTML Personal Site
EDUCATION
EMPLOYABILITY

Our very first website.

ENTREPRENEURSHIP

www.task.telangana.gov.in
 Full Stack Development
EDUCATION

Full stack
EMPLOYABILITY

Backend Emerging
Front-end Database
Technology
ENTREPRENEURSHIP

HTML JAVA MySQL AWS

CSS Python SQL CI
JavaScript PHP MongoDB CD
NodeJs Oracle SQL
www.task.telangana.gov.in
 Software Development Life Cycle SDLC
EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Anatomy of html
EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 HTML editors
EDUCATION

• Notepad
• Notepad ++
EMPLOYABILITY

• Atom
• Sublime Text
• VS Code
ENTREPRENEURSHIP

• Brackets

www.task.telangana.gov.in
 Need of HTML
EDUCATION

• HTML is needed to fill online forms in web applications.

• Also, with the help of HTML, we can watch online videos
EMPLOYABILITY

on YouTube.
• While browsing the Web, when you click on a hyperlink,
you navigate to another web page. This is possible with the
help of HTML.
ENTREPRENEURSHIP

www.task.telangana.gov.in
 What is HTML?
EDUCATION

• HyperText Markup Language (HTML)

• Hyper Text Markup Language (HTML) is a standard
EMPLOYABILITY

markup language to create the structure of a web page.

It annotates the content on a web page using HTML
elements.
• In a web page, all instructions to the browser are given in
ENTREPRENEURSHIP

the form of HTML tags, also known as HTML elements.

www.task.telangana.gov.in
 What is HTML?
EDUCATION

• The content of the web page will be rendered as per the

HTML tags in which they are enclosed.
EMPLOYABILITY

• Observe the below picture.

ENTREPRENEURSHIP

www.task.telangana.gov.in
 What is HTML?
EDUCATION

Now, let us see the document structure of HTML.

• HTML document structure tells the browser how to render
EMPLOYABILITY

the text written in each of the HTML elements of the web

page.
• Consider that we need to create a web page, the basic HTML
document structure will be as below:
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Basic Document Structure
EDUCATION

Now, let us see the document structure of HTML.

<!DOCTYPE html>
EMPLOYABILITY

<html>
<head>
<title></title>
ENTREPRENEURSHIP

</head>
<body>
</body>
</html>
www.task.telangana.gov.in
 Basic Document Structure - Elements
EDUCATION

Now, let us understand these basic HTML tags in detail.

• <!DOCTYPE html> declaration update the browser about
EMPLOYABILITY

the version of HTML being used. By default, it points to

HTML5, the latest version.
• The <html> tag encapsulates the complete web page content.
All other tags are 'nested' within the <HTML> tag.
ENTREPRENEURSHIP

• Any HTML document or web page consists of two main

sections the 'head' and the 'body'.
• The head section starts with the start tag <head> and ends
with the end tag </head>.
www.task.telangana.gov.in
 Basic Document Structure - Elements
EDUCATION

The following elements can be provided within the head tag.

Tags Description
EMPLOYABILITY

<title> Defines the title that should be displayed on the browser tab

Metadata is in-general, data about data.

Provides metadata about the HTML document.
Metadata will not be displayed on the page but will be machine-readable.
<meta>
Used to specify page description, author of the document, last modified, etc.
ENTREPRENEURSHIP

Used by browsers (control how to display content or reload the page), search engines (keywords), or other
web services.

<style> Defines style information for the web page

<link> Defines a link to other documents like CSS

<script> Defines script like JavaScript

www.task.telangana.gov.in
 Basic Document Structure - Elements
EDUCATION

• Every HTML document/web page will have only one set of

• <html>...</html> tag
EMPLOYABILITY

• <head>...</head> tag
• <body>...</body> tag
• HTML document/web page is saved with .htm or .html
ENTREPRENEURSHIP

extension.

www.task.telangana.gov.in
 Tryout : Sample Code
EDUCATION

<!DOCTYPE html>
<html>
EMPLOYABILITY

<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
ENTREPRENEURSHIP

<body>
Hello World
Content of the document......
</body>
</html>
www.task.telangana.gov.in
 Exercise : Sample Code
EDUCATION

• Problem Statement
• Open any website in the Chrome browser.
EMPLOYABILITY

• Right-click on the browser, and then Select the "View

page source" option.
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Exercise : Sample Code
EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Exercise : Sample Code
EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP

• Hence, you can observe that every web page on WWW is

built using HTML.
www.task.telangana.gov.in
 Case-insensitivity
EDUCATION

Code 1: Code 2:
EMPLOYABILITY

<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<head> <head>
<title>Homepage </title> <title>Homepage </title>
ENTREPRENEURSHIP

</head> </head>
<body> <body>
Hello World! Hello World!
</body> </boDy>
</html> </html>
www.task.telangana.gov.in
 Platform-independency
EDUCATION

• HTML Language is platform-independent. That means the

same HTML code can run on different operating systems as
EMPLOYABILITY

shown below.
ENTREPRENEURSHIP

www.task.telangana.gov.in
 DOCTYPE Declaration
EDUCATION

• There are many versions of HTML out there such as -

HTML 2.0, HTML 3.0, HTML 3.2, HTML4.0, HTML 4.01
EMPLOYABILITY

and latest is HTML5.0. In each version, some elements and

attributes are either added or depreciated. The appearance of
your .html page depends on how the browser renders HTML
elements. And how the browser renders HTML elements
ENTREPRENEURSHIP

depends on how the browser understands them.

• This is done by using <!DOCTYPE> declaration which
stands for Document Type. It tells the browser what version
of HTML it should follow for rendering the web page.

www.task.telangana.gov.in
 DOCTYPE Declaration
EDUCATION

Sample.html: Best Practice:

EMPLOYABILITY

<!DOCTYPE html>
<html> • Provide a proper DOCTYPE
<head> declaration while designing an
<title> Sample page </title>
HTML web page, so that browser
ENTREPRENEURSHIP

</head>
<body> can understand the version and
Hello world!
interpret elements of the web page
</body>
</html> appropriately.
www.task.telangana.gov.in
 Types of Elements
EDUCATION

• HTML elements can be broadly categorized into two as below:

EMPLOYABILITY
ENTREPRENEURSHIP

• It is a good practice to use the closing tag for the respective start tag without fail .
www.task.telangana.gov.in
 Types of Elements
EDUCATION

• Types of Elements - Block/Inline Elements

• HTML elements can be further categorized into two as below:
EMPLOYABILITY

• Block Element:
• A block element begins on a new line occupying the entire
width of the parent tag.
• Inline Element:
ENTREPRENEURSHIP

• An inline element occupies the necessary space to

accommodate the content in the element. Inline elements can
be nested within other inline elements, whereas, block
elements cannot be nested within inline elements.
• Some of the examples are illustrated below:
www.task.telangana.gov.in
 Types of Elements
EDUCATION

• Types of Elements - Block/Inline Elements

EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Sectioning Elements
EDUCATION

Sectioning Elements – Layout

EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Sectioning Elements
EDUCATION

Sectioning Elements – Layout

<header>
EMPLOYABILITY

• The <header> element is used to include header content

like web page logo, login link, website settings link, etc.
Ideally, every web page has one header. However,
multiple headers may also be included as per need.
ENTREPRENEURSHIP

<footer>
• The <footer> element is used to include footer content
like copyright, about us, terms and conditions link, etc.
One footer is included per page.
www.task.telangana.gov.in
 Sectioning Elements
EDUCATION

• The <header> element contains header information of the

web page.
EMPLOYABILITY

• The <article> element contains the main content of the web

page.
• The <section> element groups thematically related content.
• The <aside> element contains side-info.
ENTREPRENEURSHIP

• The <h1> element defines heading.

• The <nav> element defines navigational links.
• The <footer> element contains footer information.
www.task.telangana.gov.in
 HTML Elements
EDUCATION

Basic Elements Self closing tags Embedded

Images
EMPLOYABILITY

Links
 <br> Img
<hr> Audio
List
<img> Video
Table
ENTREPRENEURSHIP

<input> Source
Forms
Iframe
div <link> etc…,
Semantic elements Etc…,
Span etc…, www.task.telangana.gov.in
 Html headings and paragraphs
EDUCATION

• <!DOCTYPE html>
<html>
EMPLOYABILITY

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
ENTREPRENEURSHIP

</html>

www.task.telangana.gov.in
 HTML Heading and Paragraph
EDUCATION

Headings in HTML5 are used to define the structure of a web

page, to indicate the importance of different sections of
EMPLOYABILITY

content and to improve accessibility for screen readers. There

are six levels of headings in HTML5, from h1 to h6. The h1
tag is used for the main heading of the page, and the
subsequent headings (h2, h3, etc.) are used for subheadings
ENTREPRENEURSHIP

and lower-level headings.

Paragraphs in HTML5 are used to group and present blocks of

text. They are created using the <p>
www.task.telangana.gov.in
 Division and Span Elements
EDUCATION

THE DIVISION ELEMENT: is used to group various other

EMPLOYABILITY

HTML tags. This element helps us in organizing the web page

into different sections.
ENTREPRENEURSHIP

It is defined using <div>…</div> tag.

www.task.telangana.gov.in
 EDUCATION

• The Span Element is also used to group various other

EMPLOYABILITY

HTML tags to apply some common styles.

• It is defined by using <span> ...</span>

ENTREPRENEURSHIP

www.task.telangana.gov.in
 List Element
EDUCATION

HTML lists come in 3 basic <dl>

flavors: <dt> Description Term 1
EMPLOYABILITY

• Unordered list </dt>

• Ordered list <dd> Description Definiton 1
• Description list </dd>
<dt> Description Term 2
ENTREPRENEURSHIP

</dt>
<dd> Description Definition 2
</dd>
</dl>
www.task.telangana.gov.in
 Link Element
EDUCATION

• Link elements are defined using <a> .. </a> tag as below:

• Text hyperlink:
• A clickable text is used to take the user to another web page. Largely, we use text-based
EMPLOYABILITY

hyperlinks.
• This text usually appears with an underline and in a different color.
• This color mapping is automatically done by the browser for all text hyperlinks.
• Image hyperlink:
• A clickable image is used to take the user to another web page.
ENTREPRENEURSHIP

• Bookmark hyperlink:
• A clickable text/image is used to take the user to another part of the same web page.
• Email hyperlink:
• It allows users to send an email by clicking on that link.
• Contact number hyperlink:
• It allows the user to call a number by clicking on that link.
www.task.telangana.gov.in
 Table Elements
EDUCATION

• An HTML table is a great way to display data that make

more sense in spreadsheet formats as shown below.
EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Form Elements
EDUCATION

• In a web application, providing user's inputs is required in

various contexts such as:
EMPLOYABILITY

• Provide users' information to create his/her account with a

website
• Provide a username and password to login into the account.
• Provide feedback on a tour package the user had used, etc.
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Form Element
EDUCATION

• The form can be created using <form>...</form> tag of

HTML.
EMPLOYABILITY

• The form input element is used to collect details from the user.
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Input Types - Text, Password, Email and Number
EDUCATION

A single-line text field. The value attribute defines the value

of the input field.
EMPLOYABILITY

Name: <input type="text" value="">

• Input type - password:

ENTREPRENEURSHIP

• An input field can be used to enter a password.

Password: <input type="password">

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

1. ALL HTML5 tags must

EMPLOYABILITY

A. Have an opening tag

B. Have a closing tag
C. Have at least 1 attribute
ENTREPRENEURSHIP

D. Be lower case, i.e., <p> not <P>

E. Have an 'id' attribute

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

2.Which of the below is eventually facilitated by the addition

of Semantic Tags?.
EMPLOYABILITY

1) Adding Styling for web page contents like header, footer, etc.
2) Adding the clarity of the role for page content.
3) Ability to provide an idea of what kind of content each portion of
the page contains.
ENTREPRENEURSHIP

A. 1 and 3
B. 2 and 3
C. 1 and 2

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

3.Riya finds <!DOCTYPE html> at the beginning of all the

web page codes. Can you help her to understand the relevance
EMPLOYABILITY

of this?
A. It declares the version of HTML
B. It defines the capabilities of HTML
C. It defines the features of HTML
ENTREPRENEURSHIP

D. All of the options

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

4. Which of the below tags can be used to integrate external

web content into a web page?
EMPLOYABILITY

A. <img>
B. <iframe>
ENTREPRENEURSHIP

C. <source>

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

5.HTML is what type of language ?

A.Scripting Language
EMPLOYABILITY

B.Markup Language
C.Programming Language
D.Network Protocol
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

6.HTML uses
A.User defined tags
EMPLOYABILITY

B.Pre-specified tags
C.Fixed tags defined by the language
D.Tags only for linking
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

7.Fundamental HTML Block is known as

A.HTML Body
EMPLOYABILITY

B.HTML Tag
C.HTML Attribute
D.HTML Element
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

8. In a basic HTML form, which attribute will help us to

submit collected data to a specific location?
EMPLOYABILITY

A. href
B. action
C. id
ENTREPRENEURSHIP

D. location

www.task.telangana.gov.in
 Knowledge Check
EDUCATION

9. While creating HTML page we use various HTML elements.

And these HTML elements together form the entire web page.
EMPLOYABILITY

Choose the element from the given options which encloses all
other elements in the web page

A. <title>
ENTREPRENEURSHIP

B. <html>
C. <body>
D. <head>
www.task.telangana.gov.in
 Knowledge Check
EDUCATION

10.HTML web pages can be read and rendered by

A. Compiler
EMPLOYABILITY

B. Server
C. Web Browser
D. Interpreter
ENTREPRENEURSHIP

www.task.telangana.gov.in
 Publish your website
EDUCATION

Create an account in github

EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
 EDUCATION
EMPLOYABILITY
ENTREPRENEURSHIP

Thank You
www.task.telangana.gov.in