this is a html and html5 very use fully. you a college logo upgrade and change a name.

1. 1
GOVERNMENTPOLYTECHNICCOLLEGEHIMA
TNAGAR
DEPARTMENTOFINFORMATION TECHNOLOGY
DiplomaEngineering(SEMESTER:3rd)year2022-23
SummerInternship-IReporton
HTMLAND HTML 5
-------------
Submittedby: Mentoring by:
Patel Tirth vinitgupta

2. 2
CERTIFICATE
This is to certify that this Summer Internship-I report
entitled“HTML AND HTML5” by 1.Patel
TirthMaheshbhai(ER.no.216240316049) submitted in
partial fulfillment of therequirements for the Diploma
Engineering in INFORMATION TECHNOLOGY of the
GujaratTechnological University, Ahmedabad, during 3rd
Semester
and theacademic year 2022-23, her Internship-I work is a bonafide
record ofcarried out in a satisfactory way.
Submittedby. College Mentor Name:
PatelTirth vinit A Gupta
Ku.P.N.Parikh
HOD,information Technology

3. 3
CERTIFICATE

4. 4
Abstract
HTML is the Standard Markup Language. It is used for developing Web Pages. HTML
isHyperTextMarkupLanguageandis usedfor describingthestructureofwebpages.
VariousTagsareusedinHTMLlike&quot,heading&quot,,&quot,paragraph&quot,,
&quot, table &quot, , and so on. This paper discusses various HTML tags that are
mustfor developing web pages.

5. 5
Index
Abstract… …………………..………4
Chapter1.Introductionto HTML…….…….…..7
1.1Browers……………….…...……...7
1.2Tag………………………........….10
1.3meta Tag…………………........…10
1.4Attributed……….……….........…12
Chapter 2.Text Formatting HTML… .……..14
2.1WhatisFormatting…………..……14
Chapter3.IframeandfilepathHTML……......16
3.1Filepath………………….…….…16
3.2TypesofHTMLHeading……..…...18
Chapter4.Table and list HTML…………....20

6. 6
4.1HTMLtable………...…........……20
4.2.HTML LIST………....…....…….22
Chapter5 Html form…………....……..……24
5.1HTMLFORM………………..……..24
5.2Fromattributes……………................25
5.3Inputtypes……………………...…...27
5.4InputAttributes………….….……….30

7. 7
Day1
IntroductiontoHTML
 HTMLstandsforHyper TextMarkupLanguage
 HTMListhestandardmarkuplanguage forcreatingWebpages
 HTMLdescribesthestructureof aWebpage
 HTMLconsistsofaseries ofelements
 TMLelementstell thebrowserhowtodisplaythecontent
 Why you select course?
This course is very beneficial for me because I want to get a job in this course.
I havetaken this course forthat.
1.1Browsers
 Google
 Internetexplorer
 Firefox
 Safari

8. 8
EX.
GoogleChrome.
Staticwebsite
A static website contains Web pages with fixed content. Each page is coded in HTML
anddisplaysthe same information toevery visitor.
Dynamicwebsite
DynamicwebsitescontainWebpagesthataregeneratedinreal time.
HistoryofHTML
 HTMLwas createdbyBerners-Leeinlate1991
 “HTML 2.0” was the first standard HTML specification which was published
in1995.HTML 4.01 was a major version of HTML and it was published in

9. 9
Texteditor
o Notepad
o Sublinetext

10. 10
Day2
1.2 Tags
 HTMLtagsarelikekeywordswhichdefinesthat howwebbrowser
willformatanddisplaythe content.
 With the help of tags, a web browser can distinguish between an HTML
contentandasimple content.
 HTML tags contain three main parts: opening tag, content and closing tag.
ButsomeHTMLtagsare unclosed tags.
 Day3
1.3 MetaTags
 <!DOCTYPEhtml>
 <title>
 <link>
 <meta>
 <style>

11. 11
HTMLTextTag
 <P>
 <h1>,<h2>, <h3>, <h4>,<h5>,<h6>
 <strong>
 <em>
 <cite>
HTMLUnclosedTags
 <br>
 <hr>
UsefulHTMLElements
 HTMLLinkTags
 HTMLImage
 HTMLList
 HTMLTable
 HTMLForm

12. 12
Day4
1.4 Attributes
 Each element or tag can have attributes, which defines the behaviour of
thatelement.
 Attributesshouldalwaysbeappliedwithstarttag.
 TheAttributeshouldalways beappliedwithitsnameandvaluepair.
 The Attributes name and values are case sensitive, and it is recommended
byW3Cthatitshouldbe written inLowercase only.
 You can add multiple attributes in one HTML element, but need to give
spacebetweentwo attributes.
Syntax
<elementattribute_name=”value”>content</
element>
Ex. 1
<bodytext=”green”bgcolor=”orange”>
Ex. 2
<h1title=”Thisis headingtag”>Exampleoftitleattribute</h1>
Ex. 3

13. 13
<a href=https://www.javatpoint.com/html-anchor>This is
alink</a>
Ex. 4
<imgsrc=”abc.jpg”height=”400”width=”600”>
Ex. 5
<pstyle=”color:red”>Itwill changethecolorofcontent</p>

14. 14
Day 5
Text Formatting
HTML2.1WhatisFormatting
HTML Formatting is a process of formatting text for better look and feel. HTML
providesusabilityto formattextwithoutusing CSS.
Categories:
Physical tag: These tags are used to provide the visual appearance to the
text.Logical tag:Thesetags areusedto addsomelogical or semanticvaluetothetext.
• FormattingText
 1.BoldText:<b>and<strong>
 2.ItalicText: <i> and<em>
 3.MarkedFormatting:<mark>
 4.UnderlinedText:<u>and<ins>
 5.StrikeText:<strike>and<del>
 6.MonospacedFont: <tt>
 7.SuperscriptText:<sup>
 8.Subscript Text:<sub>
 9.LargerText:<big>

15. 15
 10.SmallerText:<small>
o HTMLPhrasetag
The HTML phrase tags are special purpose tags, which defines the structural meaning of
ablockoftextorsemanticsoftext.
o PhraseTags Ex.
 Abbreviation:<abbrtitle=””></abbr>
 Marked:<mark>
 Strong:<strong>
 Emphasized:<em>
 Definition:<dfn>
 Quoting:<blockquotecite=””><cite>
 Short:<q>
 Code:<code>
 Keyboard:<kbd>
 Address:<address>

16. 16
Day 6
Iframeand filepathHTML
3.1 FilePaths
An HTML file path is used to describe the location of a file in a website folder. Used
tolink images,file, CSSfile,JS file, video,etc.
 <imgsrc=”picture.jpg”>
 <imgsrc=”images/picture.jpg”>
 <imgsrc=”/images/picture.jpg”>
 <imgsrc=”../picture.jpg”>
AbsoluteFilePaths:
Absolute file path specifies full URL
address.Ex.

17. 17
<imgsrc=https://www.learnvern.com/ alt=”image”
style=”width:300px”>FilePaths
<imgsrc=”images/learnvern.jpg”alt=”Mountain”style=”width:300px”>
Iframes
HTML Iframe is used to display a nested webpage (a webpage within a webpage).
Usedtoembed Webpageora YouTube video.
Syntax:
<iframesrc=”URL”></iframe>
Attributes:
 Src
 Width
 Height
 Frameborder
 Allowfullscreen

18. 18
Day7
3.2 TypesofHTMLHeading
 H1: 2emor 32px
 H2: 1.5empr 24px
 H3: 1.17emor 18.72px
 H4: 1emor 16px
 H5: 0.83em or 13.28px
 H6: 0.67em or 10.72px
AnchorTag
TheHTMLanchor tagdefinesahyperlinkthatlinksonepagetoanother page.
Attributes:
1.Href2.
Target

19. 19
AppearanceofHTMLanchortag:
 Unvisitedlink
 Visitedlink
 Activelink
Image Tag
•HTMLimgtagisusedto displayimage onthewebpage.
Attributes:
 Src
 Alt
 Width
 Height

20. 20
Day 8
•TableandlistHTML
4.1 HTMLtable
HTML table tag is used to display data in tabular form (row* column). There can be
manycolumnsin a row.
HTML tables are used to manage the layout of the page e.g. header section,
navigationbar, body content, footer section etc. But it is recommended to use div tag
over table tomanagethelayoutofthe page.
Ex.
 <table>
 <tr>
 <th>1header</th>
 <th>1header</th>
 <th>1header</th>
 </tr>
 <tr>
 <td>1data</td>
 <td>1data</td>
 <td>1data</td>
 </tr>

21. 21
TableSupportivetags
 <table>
 <tr>
 <th>
 <td>
 <caption>
 <tbody>
 <thead>
 <tfooter>
Attributes:
 Rowspan
 Colspan

22. 22
Day9
4.2 HTMLLIST
HTML Lists are used to specify lists of information. All lists may contain one or more
listelements.Thereare three differenttypesof HTMLlists:
 OrderedList or NumberedList(ol)
 UnorderedListorBulletedList(ul)
 DescriptionListorDefinitionList(dl)
OrderedListorNumberedList
 <ol>
 <li>Aries</li>
 <li>Bingo</li>
 <li>Leo</li>
 <li>Oracle</li>
 </ol>

23. 23
UnorderedListor
BulletedList
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
Types
 <dl>
 <dt>HTML</dt>
 <dd>isamarkuplanguage</dd>
 <dt>Java</dt>
 <dd>isaprogramminglanguageandplatform</dd><dt>JavaScript</dt>
 <dd>isascriptinglanguage</dd>
 <dt>SQL</dt>
 <dd>isaquerylanguage</dd>
 </dl>

24. 24
Day10
• 5.1HTML FORM
 An HTML form is a section of a document which contains controls such as text
fields,passwordfields,checkboxes, radiobuttons, submit button,menusetc.
 An HTML form facilitates the user to enter data that is to be sent to the server
forprocessingsuchasname,emailaddress,password, phonenumber, etc.
 HTMLformsarerequiredif youwanttocollect somedatafrom of thesitevisitor.
Ex.OnlineShoppingWebsite
syntax
• <formaction=”serverurl”method=”get/post”>
• </form>
HTMLFormElements
 <form>
 <input>
 <textarea>
 <label>

25. 25
InputTypes
 <inputtype=”text”name=”username”>
 <inputtype=”password”name=”password”>
 <inputtype=”email”name=”email”>
 <inputtype=”radio”name=”password”>
 <inputtype=”checkbox”id=”cricket”name=”cricket”value=”cricket”/>
 <inputtype=”submit”value=”submit”><inputtype=”button”value=”button”>
Day11
5.2 Fromattributes
Action:The action attribute value defines the web page where information proceed. It
canbe.php, .jsp, .asp, etc. orany URL
1. method: DefinestheHTTPmethod
post: We can use the post value of method attribute when we want to process
thesensitivedataasit doesnot displaythe submitteddata inURL.
get:Thegetvalueofmethodattributeisdefaultvaluewhilesubmittingtheform.Butthisisnotsecu
re asitdisplaysdatainURLaftersubmittingthe form.
2. target: Whereto openthe responseaftersubmittingtheform

26. 26
• _self: The response will display in current page
only.blank:Load theresponsein anewpage.
3. autocomplete:Enablesaninputfieldtocompleteautomatically.
4. enctype:Definestheencodingtype
application/x-www-form-urlencoded:Default
multipart/form-data: It does not encode any character. It is used when our
formentcontainsfile-upload controls.
ext/plain (HTML5): only space are encoded into +
symbolnovalidate:Doesnotperformanytypeof validationandsubmitthe

27. 27
Day12
5.3Inputtypes
 Text
Definesaone-linetextinputfield
 Password:
Definesaone-linepasswordinputfield
 Submit:
Defines asubmitbuttonto submitthe formtoserver
 Reset:
Definesareset buttontoreset allvalues intheform.
 Radio:
Definesaradiobuttonwhichallowsselect oneoption.
 Checkbox:
Definescheckboxeswhichallowselectmultipleoptionsform.
 Button:
Definesasimplepushbutton,whichcanbe programmedtoperformataskonanevent.

28. 28
 File:
Definestoselectthefilefrom devicestorage.
 Image:
Definesagraphical submitbutton
HTML5 AddedInputTypes
 Color:
Definesaninputfieldwithaspecificcolor.
 Date:
Datetime-local:Definesaninputfieldforenteringadatewithout
 Time zone.
Definesaninputfieldforselectionofdate.
 Email:
Definesan inputfieldfor enteringanemail address.

29. 29
Month:
Definesacontrolwithmonthandyear,withouttimezone.
 Number:
Definesaninput fieldtoenter anumber.
 url:
DefinesafieldforenteringURL
 Week:
Defines afieldtoenterthedatewith week-year,withou timezone.
 Search:
Defines asinglelinetextfield forenteringasearchstring
 Tel:
Defines aninputfieldforenteringthetelephone numbe

30. 30
5.4 InputAttributes
 Name
 Value
 Required
 Autofocus
 Placeholder
 Disabled
 Size
 Form

31. 31