Scribd
Upload
10 views94 pages

HTML5&CSS3 B

Uploaded by

Sonu Sravan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views94 pages

HTML5&CSS3 B

Uploaded by

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

EDUCATION

EMPLOYABILITY

HTML5 AND CSS3


ENTREPRENEURSHIP

by K.Rasagnya

www.task.telangana.gov.in
EDUCATION

Introduction :
• HTML is the language in which most websites are written. HTML is used to
EMPLOYABILITY

create pages and make them functional.

• A web page is fundamentally made up of three constituents the first is HTML,


second is CSS and the third is JavaScript.
ENTREPRENEURSHIP

• HTML will only give the structure of the web page.

• CSS adds beauty to the webpage.

• JavaScript is used for making web page dynamic.

www.task.telangana.gov.in
EDUCATION

Introduction :

• HTML stands for Hyper Text Markup Language.


EMPLOYABILITY

• HTML is the standard markup language for creating web pages and web applications.

• It is used to describe the structure of the web pages using a process called markup.

• HTML consists of a series of elements.


ENTREPRENEURSHIP

• HTML elements tell the browser how to display the content.

• HTML elements label pieces of content such as “this is heading”, “this is paragraph”, “this
is a link”, etc.

www.task.telangana.gov.in
EDUCATION

Introduction :

• HTML was first created by Tim Berners-Lee and others starting in 1989.
EMPLOYABILITY

• Hypertext means that the document contains links that allow the reader to jump to other
places in the document or to another document altogether. The latest version is known
as HTML5.
ENTREPRENEURSHIP

• A Markup Language is a way that computers speak to each other to control how text is
processed and presented.

• To do this HTML uses two things: tags and attributes.

www.task.telangana.gov.in
EDUCATION

• Structure of HTML (or) HTML boilerplate :


EMPLOYABILITY

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
ENTREPRENEURSHIP

</head>
<body>
Content of the document
</body>
</html>
www.task.telangana.gov.in
EDUCATION

DOCTYPE Declaration :

• Helps browser to display web pages correctly.


EMPLOYABILITY

• It must appear once, at the top of the page before any HTML tags.

• HTML <!DOCTYPE> tag is used to inform the browser about the version of HTML used in
the document.
ENTREPRENEURSHIP

• It is called as the document type declaration (DTD).

Syntax :

• The DOCTYPE declaration for HTML5

• <!DOCTYPE html>

www.task.telangana.gov.in
EDUCATION

• Structure of HTML (or) HTML boilerplate :

• All HTML documents must start with the document type declaration.
EMPLOYABILITY

• HTML document itself begin with <html> and end with </html> (which
tells the browser that this is an HTML page)

• Head tag which contains meta information about the document. The head
ENTREPRENEURSHIP

normally also contains a link to the styling sheets, the fonts etc. head tag
also has the title element which specifies the title for the document and can
be seen as the text on the tab that open on a browser.

www.task.telangana.gov.in
EDUCATION

• Structure of HTML (or) HTML boilerplate :

• The visible part(content that is visible the viewer of page) of the HTML
EMPLOYABILITY

document is between <body> and </body> . Body tag contains of elements


like heading tags, paragraph tags, etc.
ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

HTML Editors :
• A simple text editor is all you need to learn HTML.
 Notepad for PC (or) notepad++ ,sublime text, visual studio code.
EMPLOYABILITY

 TextEdit for MAC


• Simple text editor is a good way to learn HTML.
Steps :
1. Open notepad
ENTREPRENEURSHIP

2. Write HTML code


3. Save the code and extension of the file name should be html
• Ex : [ 1.html ]
• You can use either .htm or .html as file extension.
4. Open the saved HTML file in your favorite browser.

www.task.telangana.gov.in
EDUCATION

Tags and Attributes :


HTML Tags:

• Tags are used to mark up the start of an HTML element and they are usually enclosed in angle
EMPLOYABILITY

brackets. An example of a tag is: <h1>.

• Most tags must be opened <h1> and closed </h1> in order to function.
HTML Attributes:
ENTREPRENEURSHIP

• Attributes contain additional pieces of information. Attributes take the form of an opening tag
and additional info is placed inside.

• An example of an attribute is:

• <img src=“task.jpg" alt=“task logo.">

www.task.telangana.gov.in
EDUCATION

HTML HEADINGS :
EMPLOYABILITY

• HTML headings are titles or subtitles that you want to display on a webpage.

• HTML headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading.


ENTREPRENEURSHIP

• <h6> defines the least important heading

www.task.telangana.gov.in
EDUCATION

HTML HEADINGS :
Example :
EMPLOYABILITY

<!DOCTYPE html>
<html>
<body>
<h1>First Heading TASK</h1>
<h2>Second Heading TASK</h2>
<h3>Third Heading TASK</h3>
ENTREPRENEURSHIP

<h4>Fourth Heading TASK</h4>


<h5>Fifth Heading TASK</h5>
<h6>Last Heading TASK </h6>
</body>
</html>

www.task.telangana.gov.in
EDUCATION

HTML HEADINGS :

Note :
EMPLOYABILITY

• Browsers automatically add some white space (a margin) before and after a heading.

• Search engines use the headings to index the structure and content of your webpage.

• Use HTML headings for headings only. Don’t use headings to make text big or bold.
ENTREPRENEURSHIP

• Each HTML heading has a default size.

• However, you can specify the size for any heading with the style attribute, using the CSS
font-size property.
• Ex : <h1 style = “font-size : 50px;”> TASK </h1>

www.task.telangana.gov.in
EDUCATION

HTML PARAGRAPHS :
EMPLOYABILITY

• A paragraph contains text or paragraphs.

• A paragraph always starts on a new line, and is usually a block of text.

• HTML paragraphs are defined with the <p> tag.


ENTREPRENEURSHIP

• Opening tag is <p> and closing tag is </p> .

• Browsers automatically add some white space (a margin) before and after a
paragraph.

www.task.telangana.gov.in
EDUCATION

HTML PARAGRAPHS :
EMPLOYABILITY

• Example :

<!DOCTYPE html>
<html>
<body>
ENTREPRENEURSHIP

<p>My first paragraph</p>

<p>Telangana Academy for Skill and Knowledge</p>


<p>Hyderabad</p>
</body>
</html>

www.task.telangana.gov.in
EDUCATION

HTML Elements :

• HTML element is defined by a start tag, some content and an end tag.
EMPLOYABILITY

• The HTML element is everything from the start tag to the end tag.

• Syntax :

<tag name> content </tag name>


ENTREPRENEURSHIP

• Some HTML elements have no content ( br element). These elements are called empty elements.

• Empty elements do not have an end tag.

www.task.telangana.gov.in
EDUCATION

Nested HTML Elements :

• HTML elements can be nested (this means that element can contain other elements).
EMPLOYABILITY

• All HTML documents consists of nested HTML elements.

• Example :
<!DOCTYPE html>
<html>
ENTREPRENEURSHIP

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

www.task.telangana.gov.in
EDUCATION

Nested HTML Elements :


The above example contains four HTML elements (<html>, <body>, <h1> and <p>).

1. The <html> element is the root element and it defines the whole HTML document.
EMPLOYABILITY

Start tag : <html>

End tag : </html>

2. Then inside the <html> element there is a <body> element. It defines the documents body.

Start tag : <body>


ENTREPRENEURSHIP

End tag : </body>

3. Then inside the <body> element there are two other elements <h1> and <p>.

heading : h1 paragraph : p

start tag : <h1> start tag : <p>

end tag : </h1> end tag : </p>


www.task.telangana.gov.in
EDUCATION

Important points :
• tags must be opened (<tag>) and closed (</tag>).
EMPLOYABILITY

• Never skip the end tag because unexpected errors may occur.

• When using multiple tags, the tags must be closed in the order in which they were opened.

• For example :
ENTREPRENEURSHIP

<strong><em>This is really important!</em></strong>

HTML is not case sensitive :


<P> is same as <p>

www.task.telangana.gov.in
EDUCATION

HTML Display :

• You cannot be sure how HTML will be displayed.


EMPLOYABILITY

• Large or small screens, and resized windows will create different results.

• With HTML, you cannot change the display by adding extra spaces or extra
ENTREPRENEURSHIP

lines in your HTML code.

• The browser will automatically remove any extra spaces and lines when the
page is displayed.

www.task.telangana.gov.in
EDUCATION

HTML Horizontal Rules :

• The hr element represents a paragraph-level thematic break in an HTML page and it


EMPLOYABILITY

most often displayed as a horizontal rule.

• The <hr> element is used to separate content (or define a change) in an HTML page.
ENTREPRENEURSHIP

• Ex : a scene change in a story, or a transition to another topic within a section of a


reference book.

• <hr> tag is an empty tag, which means that it has no end tag.

www.task.telangana.gov.in
EDUCATION

<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
EMPLOYABILITY

<p>paragraph.</p>

<hr>

<h2> Telangana </h2>


ENTREPRENEURSHIP

<p>TASK Information…..</p>

<hr>

<h3> HTML </h3>


</body>
</html>

www.task.telangana.gov.in
EDUCATION

HTML Line Breaks :

• The HTML <br> (or) </br> element defines a line break.


EMPLOYABILITY

• Use <br> if you want a line break (a new line) without starting a new paragraph.

• The <br> tag is an empty tag, which means that it has no end tag.
ENTREPRENEURSHIP

• Ex :

<p> TASK <br> Telangana <br> Hyderabad </p>

www.task.telangana.gov.in
EDUCATION

HTML pre Element :


The HTML <pre> element defines preformatted text.
EMPLOYABILITY

The text inside a <pre> element is displayed in a fixed-width font (usually courier) and it preserves both spaces and line breaks.

• Ex : paragraph element • Ex : pre element


<p> <pre>
ENTREPRENEURSHIP

TASK TASK
TELANGANA TELANGANA
</p> </pre>
• output : TASK TELANGANA • output : TASK
TELANGANA

www.task.telangana.gov.in
EDUCATION

HTML Text formatting :

HTML contains several elements for defining text with a special meaning.
EMPLOYABILITY

1. b : bold text

2. strong : Important text (bold)

3. big : Increases the font size.


ENTREPRENEURSHIP

4. i : Italic text

5. em : Emphasized text

www.task.telangana.gov.in
EDUCATION

HTML Text formatting :

6. mark : Marked text (Highlight the text)


EMPLOYABILITY

7. small : smaller text

8. del : removal from the document (no longer accurate or relevant)


ENTREPRENEURSHIP

9. s : strike the text (no longer accurate or no longer relevant) . So to


strike you can use either s or del.

10. ins : Inserted text

11. u : Underline text

www.task.telangana.gov.in
EDUCATION

HTML Text formatting :

12. sub :subscript text. Ex. Chemistry formulae.


EMPLOYABILITY

13. sup : superscript text. Ex. Mathematical formulae

14. blockquote : it is same as <p> but left spacing will be given. In <p> the
ENTREPRENEURSHIP

text will directly start from left side.

15. q : element(quote element) is used to print double quotes.

16. tt : element(teletype text element) is used to print monospace format of text.

www.task.telangana.gov.in
EDUCATION

COMMENT LINES :
EMPLOYABILITY

• Comments must start with the four character sequence (<!--).


Following this sequence, the comment may have text.

• Finally, the comment must be ended by the three character sequence


ENTREPRENEURSHIP

(-->).

www.task.telangana.gov.in
EDUCATION

HTML Links : ANCHOR element


EMPLOYABILITY

• HTML links are defined with the <a> tag.

• Ex : <a href="https://www.task.telangana.gov.in">This is a link for TASK website</a>

• The links destination is specified in the href attribute (attributes are used to provide
ENTREPRENEURSHIP

additional information about HTML elements).

• If the element has an href attribute, then it represents a hyperlink (a hypertext anchor).

www.task.telangana.gov.in
EDUCATION

HTML Images :

• HTML images are defined with the <img> tag.


EMPLOYABILITY

• <img src=“image.jpg" width="104" height="142">

• <img src="G:\Desk Files\rassup\p&s\nrassu.jpg" alt="rasagnya image" width="100px"


height="100px">
ENTREPRENEURSHIP

• Attributes :
1. Source file (src)
2. Alternate text (alt)
3. Width
4. height

www.task.telangana.gov.in
EDUCATION

HTML Links using image :


EMPLOYABILITY

<a href="https://www.task.telangana.gov.in"><img src=“image.jpg" width=“20%" height=“30%"></a>

HTML Links in separate tab : to display link in new tab


ENTREPRENEURSHIP

<a href="https://www.task.telangana.gov.in" target="_blank">link</a>

www.task.telangana.gov.in
EDUCATION

IMAGE Element :

• The image given by the src attributes is the embedded content; the value of the alt attribute
EMPLOYABILITY

provides equivalent content for those who cannot process images or who have image
loading disabled.

• The requirements on the alt attribute's value are described in the next section.
ENTREPRENEURSHIP

• The src attribute must be present, and must contain a valid non-empty URL potentially
surrounded by spaces referencing a non-interactive, optionally animated, image resource
that is neither paged nor scripted.

www.task.telangana.gov.in
EDUCATION

IMAGE
• The border property is used to set the width of an image border.
EMPLOYABILITY

• The height property is used to set the height of an image.


• The width property is used to set the width of an image.
<html>
<head> </head>
ENTREPRENEURSHIP

<body>
<img style = "border:0px;" src = "/css/images/logo.png" /> <br />
<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
</body>
</html>

www.task.telangana.gov.in
EDUCATION

HTML List Tags :

<ul> Defines an unordered list


EMPLOYABILITY

<ol> Defines an ordered list


<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

LISTS
• HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag,
followed by <li> tags (list items)
EMPLOYABILITY

• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
ENTREPRENEURSHIP

</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

www.task.telangana.gov.in
EDUCATION

LISTS Element:

• The ol element represents a list of items, where the items have been intentionally ordered,
EMPLOYABILITY

such that changing the order would change the meaning of the document.

• The items of the list are the li element child nodes of the ol element, in tree order.

• The ul element represents a list of items, where the order of the items is not important —
that is, where changing the order would not materially change the meaning of the document.
ENTREPRENEURSHIP

• The items of the list are the li element child nodes of the ul element

• The li element represents a list item. If its parent element is an ol, ul, or menu element, then
the element is an item of the parent element's list, as defined for those elements.

www.task.telangana.gov.in
EDUCATION

Definition Lists (DL):

• <DL> and <DD> tags can be used to define a list of definitions, where each DD (Definition
EMPLOYABILITY

Description) defines an item. The Item can be replaced with an image to create a user defined
bullets list.

<body>

<dl>
ENTREPRENEURSHIP

<dd>List item 1</dd>

<dd>List item 2</dd>

</dl>

</body>

www.task.telangana.gov.in
EDUCATION

• The dl element represents an association list consisting of zero or more name-value groups (a
description list). Each group must consist of one or more names (dt elements) followed by one or
EMPLOYABILITY

more values (dd elements). Within a single dl element, there should not be more than
one dt element for each name.

• The dt element represents the term, or name, part of a term-description group in a description list
ENTREPRENEURSHIP

(dl element).

• The dd element represents the description, definition, or value, part of a term-description group
in a description list (dl element).

www.task.telangana.gov.in
EDUCATION

AUDIO TAG :

• To add audio files


EMPLOYABILITY

• It is a paired tag <audio> and </audio>

Ex : <audio src="cardinal-37075.mp3"></audio>

• Your browser does not support the HTML5 audio element. If above code is written, no
ENTREPRENEURSHIP

audio will be displayed in browser.

www.task.telangana.gov.in
EDUCATION

AUDIO TAG :

<audio controls autoplay loop muted src="cardinal-37075.mp3"></audio>


EMPLOYABILITY

• controls : If this attribute is present, it will allow the user to control audio playback,
including volume, seeking, and pause/resume playback.

• loop : This Boolean attribute if specified, will allow audio automatically seek back to the
ENTREPRENEURSHIP

start after reaching at the end.

• muted : audio will be muted in browser.

• src : The URL of the audio to embed.

www.task.telangana.gov.in
EDUCATION

Image to play audio :


EMPLOYABILITY

<a href="cardinal-37075.mp3"><img src="TASK_LOGO.jpg"></a>


ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

VIDEO TAGS
EMPLOYABILITY

<video src="G:\Desk Files\rassup\luckybday.mp4"> </video>

• Your browser does not support the HTML5 Video element.

<video controls src="G:\Desk Files\rassup\luckybday.mp4"> </video>


ENTREPRENEURSHIP

• Controls : If this attribute is present, it will allow the user to control video
playback, including volume, seeking, and pause/resume playback.

www.task.telangana.gov.in
EDUCATION

TABLE Element :
EMPLOYABILITY

• <TABLE> tag is used to create a table in HTML.

• <CAPTION> defines the caption(main heading) of the table

• <TH> declares the header row of the table


ENTREPRENEURSHIP

• <TR> declares a row of the table

• <TD> defines a cell of a row

www.task.telangana.gov.in
EDUCATION

TABLE Element : TABLE has the following attributes

• BORDER=“n” : defines the width of the border in pixels


EMPLOYABILITY

• WIDTH=“npx” or “n%” : defines the width in pixels or a percentage of page width

• BGCOLOR=“color” : defines the background color of table

• CELLPADDING=“n” : space in pixels from sides of the cell


ENTREPRENEURSHIP

• CELLSPACING=“n” : space in pixels between cells

• ALIGN=“left|right|center” : Aligns the table w.r.t. page

• RULES=“none|rows|cols|all” : internal lines of the table

www.task.telangana.gov.in
EDUCATION

TABLE EXAMPLE:

• <table>
EMPLOYABILITY

<tr>
<th>Month</th>
<th>Savings</th>
</tr>
ENTREPRENEURSHIP

<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

www.task.telangana.gov.in
EDUCATION

• Cells can span across multiple rows and columns. ROWSPAN=“n” and COLSPAN=“n” attributes can be used for this purpose,
where n is the number of rows/cols to merge.
<tr>
EMPLOYABILITY

<th>Name</th>
<td> Rasagnya </td>
</tr>
<tr>
<th ROWSPAN="2"> >Phone </th>
ENTREPRENEURSHIP

<td>123</td>
</tr>
<tr>
<td>456</td>
</tr>

www.task.telangana.gov.in
EDUCATION

Tbody, Thead, Tfoot Elements:

• The tbody element represents a block of rows that consist of a body of data for the parent table
EMPLOYABILITY

element, if the tbody element has a parent and it is a table.

• The thead element represents the block of rows that consist of the column labels (headers) for
the parent table element, if the thead element has a parent and it is a table.

• The tfoot element represents the block of rows that consist of the column summaries (footers)
ENTREPRENEURSHIP

for the parent table element, if the tfoot element has a parent and it is a table.

www.task.telangana.gov.in
EDUCATION

PROGRESS Element:

• The progress element represents the completion progress of a task. The progress is either
EMPLOYABILITY

indeterminate, indicating that progress is being made but that it is not clear how much more work
remains to be done before the task is complete (e.g. because the task is waiting for a remote host to
respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that
has so far been completed.
ENTREPRENEURSHIP

• There are two attributes that determine the current task completion represented by the element. The
value attribute specifies how much of the task has been completed, and the max attribute specifies
how much work the task requires in total.

• Progress: <progress value=23 max=100></progress>

www.task.telangana.gov.in
EDUCATION

DETAILS and SUMMARY Element:

• The details element represents a disclosure widget from which the user can obtain
EMPLOYABILITY

additional information or controls.

• The summary element child of the element, if any, represents the summary or legend of the
details.

<details>
ENTREPRENEURSHIP

<summary>Automated Status: Operational</summary>

<p>Velocity: 12m/s</p>

<p>Direction: North</p>

</details>
www.task.telangana.gov.in
EDUCATION

BDO Element:

• The bdo element represents explicit text directionality formatting


EMPLOYABILITY

control .

• must specify the dir attribute on this element, with the value ltr to
specify a left-to-right override and with the value rtl to specify a right-
ENTREPRENEURSHIP

to-left override.

• <bdo dir=“ltr”>TASK</bdo>

www.task.telangana.gov.in
EDUCATION

ABBR Element:

• The abbr element represents an abbreviation or acronym, optionally


EMPLOYABILITY

with its expansion. The title attribute may be used to provide an


expansion of the abbreviation. The attribute, if specified, must contain
an expansion of the abbreviation, and nothing else.
ENTREPRENEURSHIP

• <abbr title=“Telangana Academy for Skill and


Knowledge">TASK</abbr>

www.task.telangana.gov.in
MARQUEE Element:
EDUCATION

• The <marquee> tag in HTML is used for creating scrolling text or image in a webpages. It scrolls either
from horizontally left to right or right to left, OR vertically top to bottom or bottom to top.

• Attributes of marquee element are :


EMPLOYABILITY

• Direction

• Scrollamount

• Height
ENTREPRENEURSHIP

• Width

• bgcolor

• Scrolldelay

• Loop

www.task.telangana.gov.in
EDUCATION

MARQUEE Element:

• <marquee bgcolor="blue" direction="up" hspace="10"


EMPLOYABILITY

vpsace="30" scrollamount="10"><img src=“image.png" alt=“no


image" width="100px" height="100px"></marquee><br>
ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

ADDRESS ELEMENT :

• The address element represents the contact information for its nearest article or body element.
EMPLOYABILITY

• If that is the body element, then the contact information applies to the document as a whole the address element

would be included along with other information in a footer element.

<footer>

<address> For more details, contact<a href="https://www.shivanicollege.in/shivani-womens-degree-


ENTREPRENEURSHIP

college/contact">shivani college contact details</a>.

</address>

</footer>

www.task.telangana.gov.in
EDUCATION

HEADER ELEMENT :

• The header element represents a group of introductory or navigational aids.


EMPLOYABILITY

• A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element)

<header>

<div>

<img src="shivaniimage1.jfif" style="display: inline-block;">


ENTREPRENEURSHIP

<h1>Shivani Degree college</h1>

<img src="shivaniimage2.jfif" style="display: inline-block;">

</div>

</header>

www.task.telangana.gov.in
EDUCATION

FOOTER ELEMENT :
EMPLOYABILITY

• The footer element represents a footer for its nearest ancestor sectioning content or
sectioning root element. A footer typically contains information about its section such as
who wrote it, links to related documents, copyright data etc.

• When the footer element contains entire sections, they represent appendices, indexes, long
ENTREPRENEURSHIP

colophons, verbose license agreements, and other such content.

www.task.telangana.gov.in
EDUCATION

FOOTER ELEMENT:

<footer style="background-color:pink;">
<h2>Details of College</h2>
EMPLOYABILITY

<div>House No 11-13-1428&1429</div>

<div>Kothapet Cross Road</div>

<div>Nh-9, Kothapet</div>

<div>Hyderabad - 500035</div>
ENTREPRENEURSHIP

<div>Beside South Indian Shopping</div>

<address> For more details, contact<a href="https://www.shivanicollege.in/shivani-womens-degree-college/


contact">shivani college contact details</a>.

<p>copyright © Shivani College</p>

</address>

</footer>
www.task.telangana.gov.in
EDUCATION

SECTION ELEMENT:

A section, in this context, is a thematic grouping of content, typically with a heading.


EMPLOYABILITY

<section>

<h1>Red Delicious</h1>

<p>These bright red apples are the most common found in many supermarkets.</p>

</section>
ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

NAV Element:

• The nav element represents a section of a page that links to other pages or to parts within the
EMPLOYABILITY

page.

<nav>

<h1>Navigation</h1>

<ul>
ENTREPRENEURSHIP

<li><a href="articles.html">Index of all articles</a></li>

<li><a href="today.html">Things sheeple need to wake up for today</a></li>

</ul>

</nav>

www.task.telangana.gov.in
EDUCATION

FRAME Element:
EMPLOYABILITY

• HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the
browser window is known as a frameset. The window is divided into frames in a
similar way the tables are organized: into rows and columns.
ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

FRAME Element :
EMPLOYABILITY

• To use the frameset, we need to remove body tag because frameset is used to divide the body
into different sections(frames).

• We can divide body section into different columns or rows.


ENTREPRENEURSHIP

• To create frames inside the frameset tag we use frame tag.

• frame tag is unpaired tag(both opening and closing will be one tag)

<frame/>

www.task.telangana.gov.in
EDUCATION

!DOCTYPE html>
<html>
<head>
EMPLOYABILITY

<title>Frames Shivani</title>
</head>
<frameset rows = "20%,80%" border="1">
<frame name="f1" src="headingofCollege.html"/>
ENTREPRENEURSHIP

<frameset cols="30%,*">
<frame name="f2" src="aboutcollege.html"/>
<frame name="f3" src="frame2details.html"/>
</frameset>

</frameset>
</html> www.task.telangana.gov.in
EDUCATION

FORM ELEMENT :

• An HTML Form is used to collect user input. The user input is more often
EMPLOYABILITY

sent to server for processing.

• The HTML <form> element is used to create an HTML form for user
input.
ENTREPRENEURSHIP

<form>
form elements
</form>
www.task.telangana.gov.in
EDUCATION

FORM ELEMENT :

• The form element represents a collection of form-associated elements,


EMPLOYABILITY

some of which can represent editable values that can be submitted to a


server for processing.
ENTREPRENEURSHIP

• The fieldset (<fieldset>) element represents a set of form controls


optionally grouped under a common name.

www.task.telangana.gov.in
EDUCATION

FORM ELEMENT :

The <label> Element :


EMPLOYABILITY

• The <label> tag defines a label for many form elements.

• The label represents a caption in a user interface. The caption can be associated with a specific
form control, either using for attribute, or by putting the form control inside the label element
ENTREPRENEURSHIP

itself.

• It is useful for screen-reader users, because the screen-readers will read out loud the label when
the user focus on the input element.

www.task.telangana.gov.in
EDUCATION

FORM ELEMENT :

• The <input> Element :


EMPLOYABILITY

 The HTML <input> element is the most used form element.

The input element represents a typed data field, usually with a form control to
allow the user to edit the data.
ENTREPRENEURSHIP

An <input> element can be displayed in many ways, depending on the type
attribute.

The default width of an input field is 20 characters.

www.task.telangana.gov.in
EDUCATION

FORM ELEMENT

• The HTML <form> element is a container for different types of input


EMPLOYABILITY

elements.
1. Text fields

2. Checkboxes
ENTREPRENEURSHIP

3. Radio buttons

4. Submit buttons etc.

www.task.telangana.gov.in
EDUCATION

FORM ELEMENT :
EMPLOYABILITY

Type Description
<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)
ENTREPRENEURSHIP

<input type=“submit”> Displays a submit button (for submitting the form)


<input type=“button”> Displays a clickable button

www.task.telangana.gov.in
EDUCATION

FORM ELEMENT :

• If you give value, you need to erase that and give the new name.
EMPLOYABILITY

<label>First Name</label>

<input type="text" value="Enter First Name">

• placeholder helps us to give new input directly.


ENTREPRENEURSHIP

<label>First Name</label>

<input type="text" placeholder="">

www.task.telangana.gov.in
EDUCATION

FORM ELEMENT :

<form>
EMPLOYABILITY

<body bgcolor="lightblue">
<center><h1>Shivani College Registration Form</h1></center>
<hr>
<fieldset>
ENTREPRENEURSHIP

<legend><h3><mark>Student Details</mark></h3></legend>
<label>First Name</label>
<input type="text" value=“Enter First Name"><br>
</form>

www.task.telangana.gov.in
EDUCATION

FORM ELEMENT :

<form>
EMPLOYABILITY

<body bgcolor="lightblue">
<center><h1>Shivani College Registration Form</h1></center>
<hr>
<fieldset>
ENTREPRENEURSHIP

<legend><h3><mark>Student Details</mark></h3></legend>
<label>First Name</label>
<input type="text" placeholder=""><br>
</form>

www.task.telangana.gov.in
EDUCATION

FORM ELEMENT : with legend


The <legend> tag defines a caption for the <fieldset> element
EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
fieldset
EDUCATION

FORM ELEMENT : without legend


EMPLOYABILITY
ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

TELEPHONE STATE (TYPE=TEL)


EMPLOYABILITY

• The input element represents a control for editing a telephone number given in the element's value.

Mobile:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="tel" pattern="[0-9]{10}">

(or)

<label>Mobile :</label>
ENTREPRENEURSHIP

<input type="tel" pattern="[0-9]{10}"><br><br>

www.task.telangana.gov.in
EDUCATION

RADIO BUTTON STATE (TYPE=RADIO) :


• The input element represents a control that, when used in conjunction with other input elements,
EMPLOYABILITY

forms a radio button group in which only one control can have its checkedness state set to true.

• If the element's checkedness state is true, the control represents the selected control in the group,
and if it is false, it indicates a control in the group that is not selected.

• The name attribute should be same because we need to select one thing from multiple things.
ENTREPRENEURSHIP

• Ex :

gender:<input type="radio" name="Gender">Female

<input type="radio" name="Gender">male

<input type="radio" name="Gender">others<br>


www.task.telangana.gov.in
EDUCATION

CHECKBOX STATE (TYPE=CHECKBOX) :

• The input element represents a two-state control that represents the


EMPLOYABILITY

element's checkedness state.


<label>Languages: </label>

English <input type=“checkbox” name=“l”>


ENTREPRENEURSHIP

Telugu <input type=“checkbox” name=“l”>

Hindi <input type=“checkbox” name=“l”>

<br>

<br>

www.task.telangana.gov.in
EDUCATION

DATE STATE (TYPE=DATE) :

• The input element represents a control for setting the element's value to a
EMPLOYABILITY

string representing a specific date.

Dob:
ENTREPRENEURSHIP

<input type="date"><br><br>

www.task.telangana.gov.in
EDUCATION

• NUMBER STATE (TYPE=NUMBER) :


EMPLOYABILITY

The input element represents a control for setting the


element's value to a string representing a number.
<label>Marks</label>
ENTREPRENEURSHIP

<input type=“number” max=“100” min=“0”>

www.task.telangana.gov.in
EDUCATION

E-MAIL STATE (TYPE=EMAIL) :


• How the E-mail state operates depends on whether the multiple attribute is
EMPLOYABILITY

specified or not.

Email:<input type="email">
URL STATE (TYPE=URL) :
ENTREPRENEURSHIP

• The input element represents a control for editing a single absolute URL given in
the element's value.

Link:<input type="url">

www.task.telangana.gov.in
EDUCATION

FILE UPLOAD STATE (TYPE=FILE) :


EMPLOYABILITY

• The input element represents a list of selected files, each file consisting of a
file name, a file type, and a file body (the contents of the file).

Upload Resume:<input type="file"><br><br>


ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

PASSWORD STATE (TYPE=PASSWORD) :


EMPLOYABILITY

• The input element represents a one line plain text edit control for the
element's value. The user agent should obscure the value so that people other than
the user cannot see it.
ENTREPRENEURSHIP

Password:<input type="password">

www.task.telangana.gov.in
EDUCATION

• DATE AND TIME STATE (TYPE=DATETIME-LOCAL) :

The input element represents a control for setting the element's value to a string
EMPLOYABILITY

representing a local date and time, with no time-zone offset information.

datetime:<input type="datetime-local">

• MONTH STATE (TYPE=MONTH) :


ENTREPRENEURSHIP

The input element represents a control for setting the element's value to a string
representing a specific month.

Month:<input type="month">

www.task.telangana.gov.in
EDUCATION

WEEK STATE (TYPE=WEEK) :

• The input element represents a control for setting the element's value to a string
EMPLOYABILITY

representing a specific week.

week:<input type="week">

• TIME STATE (TYPE=TIME) :


ENTREPRENEURSHIP

The input element represents a control for setting the element's value to a string
representing a specific time

time:<input type="time">

www.task.telangana.gov.in
EDUCATION

NUMBER STATE (TYPE=NUMBER) :


EMPLOYABILITY

• The input element represents a control for setting the element's value to a
string representing a number.(accepts only numbers)

Numbers:<input type="number">
ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

RANGE STATE (TYPE=RANGE) :


EMPLOYABILITY

• The input element represents a control for setting the element's value to a
string representing a number, but with the caveat that the exact value is not
important, letting UAs provide a simpler interface than they do for
the Number state.
ENTREPRENEURSHIP

range:<input type="range">

range:<input type="range" min="50" max="200" value="60">

www.task.telangana.gov.in
EDUCATION

COLOR STATE (TYPE=COLOR) :


EMPLOYABILITY

• The input element represents a color well control, for setting the
element's value to a string representing a simple color.

Favourite color:<input type="color">


ENTREPRENEURSHIP

www.task.telangana.gov.in
EDUCATION

SUBMIT BUTTON STATE (TYPE=SUBMIT) :

• The input element represents a button that, when activated, submits the form. The element
EMPLOYABILITY

is a button, specifically a submit button.

submit:<input type="submit">

IMAGE BUTTON STATE (TYPE=IMAGE) :


ENTREPRENEURSHIP

• The input element represents either an image from which a user can select a coordinate and
submit the form, or alternatively a button from which the user can submit the form. The
element is a button, specifically a submit button.
Image:<input type="image" src="TASK_LOGO.jpg" width="100px" height="100px">

www.task.telangana.gov.in
EDUCATION

District/Country/Qualification/Branch/ :

<select>
EMPLOYABILITY

<option>select District</option>

<option>Hyderabad</option>

<option>Warangal</option>
ENTREPRENEURSHIP

<option>karimnagar</option>

</select>

www.task.telangana.gov.in
EDUCATION

RESET BUTTON STATE (TYPE=RESET) :

• The input element represents a button that, when activated, resets the form. The element is
EMPLOYABILITY

a button.

reset:<input type="reset">

BUTTON STATE (TYPE=BUTTON) :


ENTREPRENEURSHIP

• The input element represents a button with no default behavior. A label for the button must be
provided in the value attribute, though it may be the empty string. The element is a button.

<button type="submit">Register</button>

<button type="reset">Reset</button>

www.task.telangana.gov.in
Keyword State Datatype Control
EDUCATION

type

time Time A time (hour, minute, A time control


seconds, fractional
seconds) with no time
EMPLOYABILITY

zone
datetime-local Local Date and Time A date and time (year, A date and time
month, day, hour, control
minute, second,
fraction of a second)
with no time zone
ENTREPRENEURSHIP

number Number A numerical value A text field or spinner


control
range Range A numerical value, A slider control or
with the extra similar
semantic that the
exact value is not
important
www.task.telangana.gov.in
Keyword State Datatype
EDUCATION

Control type
datetime Date and Time A date and time A date and time
(year, month, day, control
hour, minute,
second, fraction of a
EMPLOYABILITY

second) with the


time zone set to
UTC

date Date A date (year, month, A date control


day) with no time
ENTREPRENEURSHIP

zone
month Month A date consisting of A month control
a year and a month
with no time zone
week Week A date consisting of A week control
a week-year number
and a week number
with no time zone
www.task.telangana.gov.in
EDUCATION

Keyword State Datatype Control type


text Text Text with no line A text field
breaks

search Search Text with no line Search field


EMPLOYABILITY

breaks

tel Telephone Text with no line A text field


breaks

url URL An absolute URL A text field


ENTREPRENEURSHIP

email E-mail An e-mail address A text field


or list of e-mail
addresses

password Password Text with no line A text field that


breaks (sensitive obscures data entry
information)

www.task.telangana.gov.in
EDUCATION

color Color An sRGB color with A color well


8-bit red, green, and
EMPLOYABILITY

blue components

checkbox Checkbox A set of zero or A checkbox


more values from a
predefined list
ENTREPRENEURSHIP

radio Radio Button An enumerated A radio button


value

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

Thank you

www.task.telangana.gov.in

You might also like