What is an HTML File? What is an HTML File? HTML stands for HTML stands for H H yper yper T T ext ext M M arkup arkup L L anguage anguage An HTML file is a text file containing An HTML file is a text file containing small small markup tags markup tags The markup tags tell the Web browser The markup tags tell the Web browser how to display how to display the page the page An HTML file must have an An HTML file must have an htm htm or or html html file extension file extension An HTML file can be created using a An HTML file can be created using a simple text editor simple text editor
Html Presentation Of Web Page Making
May 17, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
What is an HTML File?What is an HTML File?
HTML stands for HTML stands for HHyper yper TText ext MMarkup arkup LLanguage anguage
An HTML file is a text file containing small An HTML file is a text file containing small markup tagsmarkup tags
The markup tags tell the Web browser The markup tags tell the Web browser how to how to displaydisplay the page the page
An HTML file must have an An HTML file must have an htmhtm or or htmlhtml file file extension extension
An HTML file can be created using a An HTML file can be created using a simple simple text editortext editor
HTML TagsHTML Tags HTML tags are used to mark-up HTML HTML tags are used to mark-up HTML elementselements HTML tags are surrounded by the HTML tags are surrounded by the two characters < two characters <
and >and > The surrounding characters are called The surrounding characters are called angle bracketsangle brackets HTML tags normally HTML tags normally come in pairscome in pairs like <b> and </b> like <b> and </b> The first tag in a pair is the The first tag in a pair is the start tag,start tag, the second tag is the second tag is
the the end tagend tag The text between the start and end tags is the The text between the start and end tags is the element element
contentcontent HTML tags are HTML tags are not case sensitive,not case sensitive, <b> means the <b> means the
same as <B> same as <B>
Basic HTML TagsBasic HTML Tags
TagTag DescriptionDescription
<html><html> Defines an HTML documentDefines an HTML document
<body><body> Defines the document's bodyDefines the document's body
<h1> to <h6<h1> to <h6>>
Defines header 1 to header 6Defines header 1 to header 6
<p><p> Defines a paragraphDefines a paragraph
<<brbr>> Inserts a single line breakInserts a single line break
<hr><hr> Defines a horizontal ruleDefines a horizontal rule
<!--><!--> Defines a commentDefines a comment
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
Tag
kaushik
Tag AttributesTag Attributes
Tags can have attributesTags can have attributes. . Attributes can provide Attributes can provide additional information about the HTML elements on additional information about the HTML elements on your page.This tag defines the body element of your your page.This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of you can tell the browser that the background color of your page should be red, like this: <body your page should be red, like this: <body bgcolor="red">.bgcolor="red">.
This tag defines an HTML table: <table>. With an This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that added border attribute, you can tell the browser that the table should have no borders: <table border="0">the table should have no borders: <table border="0">
Attributes always come in name/value pairs like this: Attributes always come in name/value pairs like this: name="value".name="value".
Attributes are always added to the start tag of an Attributes are always added to the start tag of an HTML element.HTML element.
HeadingsHeadings
Headings are defined with the <h1> to <h6> tags.Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h1> defines the largest heading. <h6> defines the smallest heading.<h6> defines the smallest heading.
<h1>This is a heading</h1><h1>This is a heading</h1> <h2>This is a heading</h2> <h2>This is a heading</h2> <h3>This is a heading</h3><h3>This is a heading</h3> <h4>This is a heading</h4> <h4>This is a heading</h4> <h5>This is a heading</h5><h5>This is a heading</h5> <h6>This is a heading</h6><h6>This is a heading</h6>
HTML automatically adds an extra blank line before and HTML automatically adds an extra blank line before and after a heading.after a heading.
ParagraphsParagraphs
Paragraphs are defined with the <p> Paragraphs are defined with the <p> tag.tag.
<p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is another paragraph</p> <p>This is another paragraph</p>
HTML automatically adds an extra blank HTML automatically adds an extra blank line before and after a paragraph.line before and after a paragraph.
Line BreaksLine Breaks
The <br> tag is used when you want to end a line, The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line <p>This <br> is a para<br>graph with line breaks</p> breaks</p>
The <br> tag is an empty tag. It has no closing tag.The <br> tag is an empty tag. It has no closing tag.
Comments in HTMLComments in HTML
The comment tag is used to insert a The comment tag is used to insert a comment in the HTML source code. comment in the HTML source code.
A comment will be ignored by the browser.A comment will be ignored by the browser. You can use comments to explain your You can use comments to explain your
code, which can help you when you edit code, which can help you when you edit the source code at a later date.the source code at a later date.
<!-- This is a comment --><!-- This is a comment --> Note that you need an exclamation point Note that you need an exclamation point
after the opening bracket, but not before after the opening bracket, but not before the closing bracket.the closing bracket.
Attribute Value Description
alink rgb(x,x,x)#xxxxxxcolorname
Specifies the color of the active links in the document. Deprecated. Use styles instead.
background file_name An image to use as the background. Deprecated. Use styles instead.
bgcolor rgb(x,x,x)#xxxxxxcolorname
The background color of the document. Deprecated. Use styles instead.
<BODY> Tag Attrib.<BODY> Tag Attrib.
Attribute Value Description
link rgb(x,x,x)#xxxxxxcolorname
Specifies the color of all the links in the document. Deprecated. Use styles instead.
text rgb(x,x,x)#xxxxxxcolorname
Specifies the color of the text in the document. Deprecated. Use styles instead.
vlink rgb(x,x,x)#xxxxxxcolorname
Specifies the color of the visited links in the document. Deprecated. Use styles instead.
FONT tagFONT tag
Attribute Value Description
color rgb(x,x,x)#xxxxxxcolorname
Defines the color of the text in the font element. Deprecated. Use styles instead
face list_of_fontnames
Defines the font of the text in the font element. Deprecated. Use styles instead
size A number from 1 to 7.
Defines the size of the text in the font element. Deprecated. Use styles instead
Text Formatting TagsText Formatting Tags
TagTag DescriptionDescription<b><b> Defines bold textDefines bold text<big><big> Defines big textDefines big text
<<emem>>Defines emphasized Defines emphasized text text
<i><i> Defines italic textDefines italic text<small><small> Defines small textDefines small text
<strong><strong> Defines strong textDefines strong text
<sub><sub> Defines subscripted textDefines subscripted text
<sup><sup> Defines superscripted textDefines superscripted text
<ins><ins> Defines inserted textDefines inserted text
<del><del> Defines deleted textDefines deleted text
<s><s> Deprecated. Use <del> insteadDeprecated. Use <del> instead
<strike><strike> Deprecated. Use <del> insteadDeprecated. Use <del> instead
<u><u> Deprecated. Use styles insteadDeprecated. Use styles instead
Citations, Quotations, and Citations, Quotations, and Definition TagsDefinition Tags
TagTag DescriptionDescription
<<abbrabbr>> Defines an abbreviationDefines an abbreviation
<acronym><acronym> Defines an acronymDefines an acronym
<address><address> Defines an address elementDefines an address element
<<bdobdo>> Defines the text directionDefines the text direction
<<blockquoteblockquote>> Defines a long quotationDefines a long quotation
<q><q> Defines a short quotationDefines a short quotation
<cite><cite> Defines a citationDefines a citation
<<dfndfn>> Defines a definition termDefines a definition term
The Most Common The Most Common Character Entities:Character Entities:
ResultResult DescripDescriptiontion Entity NameEntity Name Entity Entity
NumberNumber
non-non-breaking breaking spacespace
  
<<less less thanthan << <<
>>greater greater thanthan >> >>
&&ersaampersandnd && &&
""quotatioquotation markn mark "" ""
Some Other Commonly Some Other Commonly Used Character Entities:Used Character Entities:
ResultResult DescriptionDescription Entity Entity NameName
Entity Entity NumberNumber
¢¢ centcent ¢¢ ¢¢
££ poundpound ££ ££
¥¥ yenyen ¥¥ ¥¥
§§ sectionsection §§ §§
©© copyrightcopyright ©© ©©
®®registered registered trademarktrademark ®® ®®
×× multiplicationmultiplication ×× ××
÷÷ divisiondivision ÷÷ ÷÷
The Frameset TagThe Frameset Tag
The <frameset> tag defines how to divide the The <frameset> tag defines how to divide the window into frames window into frames
Each frameset defines a set of rows Each frameset defines a set of rows oror columns columns The values of the rows/columns indicate the The values of the rows/columns indicate the
amount of screen area each row/column will amount of screen area each row/column will occupy occupy
Important:Important: You cannot use the <body></body> You cannot use the <body></body> tags together with the <frameset></frameset> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag tags! However, if you add a <noframes> tag containing some text for browsers that do not containing some text for browsers that do not support frames, you will have to enclose the support frames, you will have to enclose the text in <body></body> tags! text in <body></body> tags!
FRAMESET tagFRAMESET tag
AttributAttributee
ValueValue DescriptionDescription
colscols pixelspixels%%**
Defines the number and size of Defines the number and size of columns in a framesetcolumns in a frameset
rowsrows pixelspixels%%**
Defines the number and size of Defines the number and size of rows in a framesetrows in a frameset
FRAME tagFRAME tagAttributeAttribute ValueValue DescriptionDescription
frameborderframeborder 0011
Specifies whether or not to Specifies whether or not to display border around the display border around the frameframe
marginheightmarginheight pixelspixels Defines the top and bottom Defines the top and bottom margins in the framemargins in the frame
marginwidthmarginwidth pixelspixels Defines the left and right Defines the left and right margins in the framemargins in the frame
namename frame_nameframe_name Defines a unique name for the Defines a unique name for the frame (to use in scripts)frame (to use in scripts)
noresizenoresize noresizenoresize When set to noresize the user When set to noresize the user cannot resize the framecannot resize the frame
scrollingscrolling yesyesnonoautoauto
Determines scrollbar actionDetermines scrollbar action
srcsrc URLURL Defines the URL of the file to Defines the URL of the file to show in the frameshow in the frame
<A> Anchor tag(Hyperlinks)<A> Anchor tag(Hyperlinks)hrefhref URLURL The target URL of the linkThe target URL of the link SS
TTFF
namename section_nasection_nameme
Names an anchor. Use this attribute to Names an anchor. Use this attribute to create a bookmark in a document.create a bookmark in a document.In future versions of XHTML the name In future versions of XHTML the name attribute will be replaced by the id attribute will be replaced by the id attribute!!attribute!!
SSTTFF
targetargett
_blank_blank_parent_parent_self_self_top _top
Where to open the target URL.Where to open the target URL._blank - the target URL will open in a _blank - the target URL will open in a new window new window _self - the target URL will open in the _self - the target URL will open in the same frame as it was clicked same frame as it was clicked _parent - the target URL will open in _parent - the target URL will open in the parent frameset the parent frameset _top - the target URL will open in the _top - the target URL will open in the full body of the window full body of the window
TTFF
List TagsList Tags
TagTag DescriptionDescription
<<olol>> Defines an ordered listDefines an ordered list
<<ulul>> Defines an unordered listDefines an unordered list
<<lili>> Defines a list itemDefines a list item
<dl><dl> Defines a definition listDefines a definition list
<<dtdt>> Defines a definition termDefines a definition term
<<dddd>> Defines a definition descriptionDefines a definition description
FormsA form is an area that can contain form elements.Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.A form is defined with the <form> tag.The most used form tag is the <input> tag. The type of input is specified with the type attribute.
<form> <input> <input>
</form>
INPUT tag attributesINPUT tag attributestypetype buttonbutton
checkbocheckboxxfilefilehiddenhiddenimageimagepassworpassworddradioradioresetresetsubmitsubmittexttext
Indicates the type of the Indicates the type of the input element. The input element. The default value is "text"default value is "text"
AttributAttributee
ValueValue DescriptionDescription
acceptaccept list_of_mime_typlist_of_mime_typeses
A comma-separated list A comma-separated list of MIME types that of MIME types that indicates the MIME type indicates the MIME type of the file transfer.of the file transfer.Note:Note: Only used with Only used with type="file"type="file"
alignalign leftleftrightrighttoptopmiddlemiddlebottombottom
Defines the alignment Defines the alignment of text following the of text following the image.image.Note:Note: Only used with Only used with type="image"type="image"
altalt texttext Defines an alternate text for the Defines an alternate text for the image.image.Note:Note: Only used with Only used with type="image"type="image"
checkedchecked checked checked Indicates that the input element Indicates that the input element should be checked when it first should be checked when it first loads.loads.Note:Note: Used with Used with type="checkbox" and type="checkbox" and type="radio"type="radio"
maxlengtmaxlengthh
numbernumber Defines the maximum number of Defines the maximum number of characters allowed in a text field.characters allowed in a text field.Note:Note: Only used with Only used with type="text"type="text"
NameName field_namfield_namee
Defines a unique name for the Defines a unique name for the input element.input element.Note:Note: This attribute is required This attribute is required with type="button", with type="button", type="checkbox", type="file", type="checkbox", type="file", type="hidden", type="image", type="hidden", type="image", type="password", type="text", type="password", type="text", and type="radio“and type="radio“
readonlreadonly y
readonlreadonlyy
Indicates that the value of Indicates that the value of this field cannot be modified.this field cannot be modified.Note:Note: Only used with Only used with type="text"type="text"
sizesize numbernumber_of_char_of_char
Defines the size of the input Defines the size of the input element.element.Note:Note: Cannot be used with Cannot be used with type="hidden"type="hidden"
srcsrc URLURL Defines the URL of the image Defines the URL of the image to display.to display.Note:Note: Only used with Only used with type="image"type="image"
valuvaluee
valuvaluee
For buttons, reset buttons and For buttons, reset buttons and submit buttons:submit buttons: Defines the text on Defines the text on the button.the button.For image buttons:For image buttons: Defines the Defines the symbolic result of the field passed to a symbolic result of the field passed to a script.script.For checkboxes and radio buttons:For checkboxes and radio buttons: Defines the result of the input element Defines the result of the input element when clicked. The result is sent to the when clicked. The result is sent to the form's action URL.form's action URL.For hidden, password, and text For hidden, password, and text fields:fields: Defines the default value of Defines the default value of the element.the element.Note:Note: Cannot be used with type="file" Cannot be used with type="file"Note:Note: This attribute is required with This attribute is required with type="checkbox" and type="radio"type="checkbox" and type="radio"
TEXTAREA tagTEXTAREA tag
AttributAttributee
ValueValue DescriptionDescription
colscols numbernumber Specifies the number of Specifies the number of columns visible in the text-areacolumns visible in the text-area
rowsrows numbernumber Specifies the number of rows Specifies the number of rows visible in the text-areavisible in the text-area
namename name_of_textarname_of_textareaea
Specifies a name for the Specifies a name for the text-areatext-area
readonlreadonlyy
readonlyreadonly Indicates that the user Indicates that the user cannot modify the cannot modify the content in the text-areacontent in the text-area
TABLE tagTABLE tagTagTag DescriptionDescription
<table><table> Defines a tableDefines a table
<<thth>> Defines a table headerDefines a table header
<<trtr>> Defines a table rowDefines a table row
<td><td> Defines a table cellDefines a table cell
<caption><caption> Defines a table captionDefines a table caption
<<colgroupcolgroup>> Defines groups of table columnsDefines groups of table columns
<<colcol>>Defines the attribute values for one Defines the attribute values for one or more columns in a tableor more columns in a table
<<theadthead>> Defines a table headDefines a table head
<<tbodytbody>> Defines a table body Defines a table body
<<tfoottfoot>> Defines a table footerDefines a table footer
<BORDER=“number”><BORDER=“number”> ““number” pixel wide bordernumber” pixel wide border
<CELLSPACING=“num”<CELLSPACING=“num”>>
““num” space between each cellnum” space between each cell
<CELLPADDING=“num”<CELLPADDING=“num”>>
““num” pixel distance b/w border and contentnum” pixel distance b/w border and content
AlignAlign Left/right/centerLeft/right/center
ValignValign Top/bottom/middle/baselineTop/bottom/middle/baseline
BgcolorBgcolor Rgb color code or nameRgb color code or name
ColspanColspan A num. To merge data of number of cellsA num. To merge data of number of cells
RowspanRowspan Value is numValue is num
WidthWidth Width of tableWidth of table
Values to FRAME attri.Values to FRAME attri.AboveAbove Top side has single border line of Top side has single border line of
each celleach cell
BelowBelow Bottom side has single border line of Bottom side has single border line of each celleach cell
BorderBorder All four sidesAll four sides
BoxBox -----do-----------do------
HsidesHsides Top and Bottom sidesTop and Bottom sides
LHSLHS Left hand sideLeft hand side
RHSRHS Right Hand sideRight Hand side
VoidVoid No sideNo side
VsidesVsides LHS & RHSLHS & RHS
Values to RULES attri.Values to RULES attri.
NoneNone No cell borderNo cell border
GroupGroupss
Cell border between cell groups and Cell border between cell groups and row groups onlyrow groups only
RowsRows Rules between rows onlyRules between rows only
ColsCols Rules between columns onlyRules between columns only
AllAll All rows and columnsAll rows and columns
Related Documents
