Learn HTML - From Beginner To Advanced HTML Complete Guide ( PDFDrive )
advertisement
WHAT IS HTML? HTML stands for Hypertext Mark Up Language. HOW TO SAVE A HTML DOCUMENT? Step 1. After writing your HTML command in notepad click on “File” in Menu Bar. Step 2. Then click on “Save As” option. Step 3. Write the name of the HTML page and add “.html” to its end (without quotes) and the drop down list below saying “Save as type” select “All Files” and click on “Save” button. HOW TO OPEN HTML DOCUMENT? HTML Document cab be opened by double-clicking on it and the default browser windows will open and you will be able to see your HTML page. HTML BASIC STRUCTURE: <HTML> <HEAD> <TITLE> MY HTML PAGE </TITLE> </HEAD> <BODY> THE BODY OF THE PAGE </BODY> </HTML> <BODY> tag attributes 1. BGCOLOR BGCOLOR is used to set the background colour of the HTML page. 2. TEXT TEXT attribute is used to specify the text colour of the HTML page. Attributes for setting the text links, visited links and active links 3. colour in the html page. Link Attribute is used to set the colour of the link in the HTML page. <BODY LINK=GREEN> ALink attribute is used to set the active link’s colour in the HTML page. <BODY ALINK=YELLOW> VLink attribute is used to set visited link’s colour in the HTML page. <BODY VLINK=BLUE> 4. Attributes for setting page margins Left margin attribute: This attribute is used to set the left margin of the HTML page. The value entered is in pixels. <BODY LEFTMARGIN=40> Right margin attribute: this attribute is used to set the right margin of the HTML page. The value entered is in pixels. <BODY RIGHTMARGIN=60> Top margin attribute: This attribute is used to set the top margin of the page. The value entered is in pixels. <BODY TOPMARGIN=50> 5. Attribute for setting background image Background attribute is used to set an image as the background for an HTML page. <BODY BACGROUND=”C:/IMAGE.JPG”> Or If the image is the same folder where the html page is located simply enter the following code: <BODY=IMAGENAME.PNG> See the following example: Text formatting elements in HTML TAG TYPE FUNCTION ATTRIBUTES FONT CONTAINER Used to change size, colour and style of text SIZE, FACE, COLOR BASEFONT CONTAINER Used to set a basic size for the font which the browser will use to display the HTML page. SIZE BR EMPTY Used to insert a line breaks NONE CENTER CONTAINER Center any text that is written within it NONE H1 to H6 CONTAINER Used as heading element with various sizes 1-6 ALIGN P CONTAINER Used to define a paragraph of text on the web page ALIGN HR EMPTY Used segregate SIZE, WIDTH, different parts of COLOR, ALIGN, the text from one NOSHADE another with help of a horizontal line COMMENT CONTAINER Comments are text NONE that are written into the HTML page, but are ignored by the browser and hence not displayed. B CONTAINER Display text in bold face NONE I CONTAINER Display text in italics NONE U CONTAINER Underlines the enclosed text NONE SUP CONTAINER Display text in superscript NONE SUB CONTAINER Display text in subscript NONE Using FONT Tag Font tag is a very convenient tag used to change the size, colour and style of the text, especially when different segments of text require different looks. <FONT>This is font tag</FONT> Font tag attributes: SIZE - <FONT SIZE=20>THE TEXT SIZE IS NOW 20</FONT> COLOR - <FONT COLOR=GREEN>THE TEXT COLOR IS NWO GREEN</FONT> FACE - <FONT FACE=ARIAL>THE TEXT’S FONT IS ARIAL</FONT> See the coding below: Using BASEFONT Tag <BASEFONT> tag is used to set the basic size for the font, the browser will use to display your HTML page. 1. A single value ranging from 1 to 7 e.g. <BASEFONT size=4> 2. A relative value by placing a plus or minus sign before the value <BASEFONT SIZE=+4> The base font size will increase the existing size by 4 resulting in a total font size of 7. <BASEFONT SIZE=-2> The base font size will decrease the existing size by 2 resulting in a total font size of 5. Using BR Tag The <BR> tag is used to give break between the lines or words in a HTML document. It gives page a neat and organised look and makes it visually appealing. Try this code: Using <CENTER> tag <CENTER> tag is used to set text or image in centre align. It is a container element so the text entered within this tag gets center aligned. Using <H1> to <H6> tags These tags are known as heading tags. HTML has six level of heading tags from <H1> to <H6>. They are used to a text as heading in html document. For e.g. <H1> This is heading</H1> Align attribute is used to set the alignment of the heading existing in heading tags. For e.g. <H1 align=right>The heading alignment is right</h1> Using <p> tag <p> tag is used to specify the paragraph in the document and also to set the alignment of the different paragraphs. Syntax: <P ALIGN=CENTER>THE PARAGRAPH HERE</P> <P ALIGN=LEFT>THE PARAGRAPH HERE</P> <P ALIGN=RIGHT>THE PARAGRAPH HERE</P> Using <HR> tag <HR> tag is used to create a horizontal link in the html document. It is a empty element. Attributes: 1. SIZE – SIZE attribute is used to set the size (broadness) of the horizontal line. Syntax - <HR size=50> 2. Width – This attribute is used to set the width of the horizontal line. Syntax - <HR WIDTH=60%> 3. Colour – This attribute is used to set the colour of the horizontal line. Syntax - <HR COLOR=GREEN> Using comment tag Comment tag is creates a text which is not visible in the browser but can be seen in the HTML code. There are two ways of creating a comment in HTML: 1. Using <COMMENT> tag Syntax - <COMMENT>THIS IS A COMMENT</COMMENT> 2. Using <!—and tab Syntax - <!—This is also a comment Using <B>, <U>, <I>, <SUP>, <SUB> tags 1. <B> tag is used to set the text in bold. Syntax - <B>THE TEXT HERE IS BOLD.</B> 2. <U> tag is used to underline the text. Syntax - <U>The text is underlined</U> 3. <I> tag is used to italicize the text. Syntax - <I>The text here is italicized</I> 4. <SUP> tag is used to set the text in superscript. Syntax – X<SUP>2</SUP>Y 5. <SUB> tag is used to set the text in subscript. Syntax – H<SUB>2</SUB>O Creating Lists in HTML TAG TYPE TITLE ATTRIBUTES UL Container Tag is used to TYPE create unordered lists. <LI> tag has to be used inside this. OL Container Tag is used to TYPE, START create ordered lists. <LI> tag has to be used inside this. DL Container Used for terms and their definitions. Type of lists: Unordered lists are bulleted lists like: Computer components are: Processor Motherboard Graphics Card HDD Ordered Lists are numbered lists like: Computer components are: 1. 2. 3. 4. Processor Motherboard Graphics Card HDD Definition lists are mostly used for terms and their definitions HTTP Hypertext Transfer Protocol FTP File Transfer Protocol - Creating unordered lists <UL> tag is used to start creating unordered lists. <LI> is used to create a new list item. Syntax – Attributes of <UL> tag: TYPE – is used to set the type of bullets in the lists. Their are four types of bullets available disc, circle & square. Syntax – <UL TYPE=disc> <UL TYPE=circle> <UL TYPE=square> Creating ordered lists <OL> tag is used to start creating ordered lists. <LI> is used to create a new list item. Syntax – Attributes of <OL> tag: 1. TYPE is used to set the type of numbered lists. Type Values Style of Numbered Lists Sample Output I Uppercase Roman Numerals I, II, III i Lowercase Roman Numerals I, ii, iii 1 Arabic Numerals 1, 2, 3 A Uppercase Alphabets A, B, C a Lowercase Alphabets a, b, c Syntax – <OL TYPE=I> <OL TYPE=i> <OL TYPE=1> <OL TYPE=A> <OL TYPE=a> 2. START attribute lets the user set the starting numeral or alphabet valuein the numbered or alphabet value lists. Syntax – <OL type=A start=5> <li>Green <li>Yellow <li>Blue </ol> Note- The start attribute has to be always specified numeral value if it is a alphabetical ordered list also. Nesting of lists: Observe the following code you will understand how nesting can be done in ordered as well as unordered lists. The above method is same for unordered lists. Try yourself. Creating Definition Lists Definition lists are mostly used for displaying Definition, Terms and their Definition descriptions. They are not list of the items. So, as the name suggests there are three tags involved in this combination - <DL> for Definition Lists, <DT> for Definition Terms and <DD> for Definition Description. Syntax: <HTML><HEAD><TITLE>DL</TITLE><BODY> <DL> <DT>Term1 <DD>Definiation1 <DT>Term2 <DD>Definiation2 </DL></BODY> </HTML> Compact attribute of <DL> tag If the definitions are short, one can display it on the same line rather than have a line break. This is main purpose compact lists. Syntax: <HTML><HEAD><TITLE>COMPACT</TITLE><BODY> <DL COMPACT> <DT>HTTP <DD>HYPERTEXT TRANSFER PROTOCOL <DT>FTP <DD>FILE TRANSFER PROTOCOL </DL></BODY></HTML> Observe the coding. GET THE SECOND VOLUME IT’S FREE TO LEARN HYPERLINKING, INSERTING IMAGE & MARQUEE.
