1 / 41

HTML

HTML. popo. HTML. Each HTML document begins with a <HTML> and ends with </HTML> tags . Each document consists of a HEAD section surrounded by <HEAD> and </HEAD> tags and a BODY section with <BODY> and </BODY>.

ania
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML • popo

  2. HTML • Each HTML document begins with a <HTML> and ends with </HTML> tags. • Each document consists of a HEAD section surrounded by <HEAD> and </HEAD> tags and a BODY section with <BODY> and </BODY>. • HTML tags come in pairs (usually) with the ending tag containing an additional "/". • Some Tags can surround other tags. This is called Nesting. • <TITLE> tags are nested in the <HEAD>-</HEAD>tags. • Text inside <TITLE> tags is displayed on the browser Title Bar. • The text between the <BODY> tags is displayed inside the browser window. • popo

  3. HTML The <HR> tag without any attributes, draws a full length (100%) rule across the page. To decrease its length to half its value, you should specify "50%" value to the WIDTH attribute. Thus, with <HR width="50%">, we get a shorter horizontal rule: • popo

  4. HTML • Tags usually surround some text. • This text is displayed based on the instructions contained in the tag and its attributes. • A simple example is the Bold (<B> and </B>) tag. • When these tags are placed surrounding some text, it becomes bold as: • (<B>This is bold text</B>) • popo

  5. HTML • Headings help in defining the format and structure of the document. • There are six levels of headings in HTML specified by <H1>, <H2>, <H3>, <H4>, <H5> and <H6> tags. • <H1>I am heading 1</H1> gives: • I am heading 1 • popo

  6. HTML • <HTML> • <HEAD> • <TITLE>My fist HTML </TITLE> • </HEAD> • <BODY> • <H1>I am heading 1</H1> • <H2>I am heading 2</H2> • <H3>I am heading 3</H3> • <H4>I am heading 4</H4> • <H5>I am heading 5</H5> • <H6>I am heading 6</H6> • </BODY> • </HTML> • popo

  7. HTML • What are HTML Tag attributes • Attributes change the properties of tags and are placed ONLY inside the starting tag. • Each attribute usually has a value associated. • <TAG ATTRIBUTE="VALUE">some text ... </TAG> • popo

  8. HTML • The attribute-value pair is placed INSIDE the starting tag • An "equal to" sign separates the attribute from its value. • All heading tags <H1> to <H6> have attributes. • The important one are 'ALIGN’ • The 'ALIGN' attribute takes one of the four values: • LEFT, RIGHT, CENTER, or JUSTIFY. • <H3 align="left">I am aligned to the left</H3 • <H3 align="right">I am aligned to the right</H3> • <H3 align="center">I am centrally aligned</H3> • popo

  9. HTML The <BR> tag has no end tag because it doesn't need too. Just the presence of <BR> adds a line break. The opposite of the <BR> tag is the <NOBR> tag. It has an ending </NOBR> tag. Text placed between these tags will be displayed in a single line, which might result in horizontal scrolling if the text too is long. Try this out with the following code. • popo

  10. HTML • <HTML> • <HEAD> • <TITLE>Testing the BR tag</TITLE> • </HEAD> • <BODY> • <NOBR> • This is a long piece of text consisting of three • sentences and shows you the functions of the • NOBR tag. This tag is causes the text between it • to be displayed in a single line and will result • in horizontal scrolling in the browser if the text • is too long and continues and continues and continues • and continues and continues and continues and continues • and continues and continues and continues and continues • and continues and continues and continues and continues • and continues and continues and continues and continues • and continues and continues and continues and continues • and continues and continues and continues and continues • and continues and continues and continues and continues • and finally ends here. • </NOBR> • </BODY> • </HTML> • popo

  11. HTML • Physical Tags • There are 10 physical tags each requiring a closing tag: • <I> Italics: I am in italics • <B> Bold: I am in bold • <U> Underline: I am underlined • <STRIKE> Strikethrough: I am struck! • <SUP> Superscript: My superscript • <SUB> Subscript: My subscript • <TT> Typewriter: I am in typewriter form • <BIG> Bigger font: I am bigger • <SMALL> Smaller font: I am smaller • <S> Strikethrough alternative: I am also struck! • popo

  12. HTML • <HTML> • <HEAD> • <TITLE>Physical Tags</TITLE> • </HEAD> • <BODY> • <I>Text in Italics</I> • <BR><BR> • <B>Text in Bold</B> • <BR><BR> • <U>Underlined Text</U> • <BR><BR> • <STRIKE>Text Struck-through</STRIKE> • <BR><BR> • Text with <SUP>Superscript</SUP> • <BR><BR> • Text with <SUB>Subscript</SUB> • <BR><BR> • <TT>Typewriter Text</TT> • <BR><BR> • <BIG>Bigger text</BIG> • <BR><BR> • <SMALL>Smaller text</SMALL> • <BR><BR> • <S>Text Struck-through</S> • <BR><BR> • <U><B>Bold and Underlined</B></U> • <BR><BR> • <I><U><B>Bold, Underlined and in Italics</B></U></I> • </BODY> • </HTML> • popo

  13. HTML • There are 9 logical tags each requiring a closing tag: • <STRONG> Strong: I am strong • <EM> Emphasis: I am emphasized • <ABBR> Abbreviation: I am abbreviated • <CITE> Citation: Citation • <CODE> Code: I am programming code • <DFN> Definition: Definition • <KBD> Keyboard: Quite like keyboard strokes • <SAMP> Sample: Sample • <VAR> Programming Variable: Programming Variable • popo

  14. HTML • <HTML> • <HEAD> • <TITLE>Logical Tags</TITLE> • </HEAD> • <BODY> • <STRONG>Strong</STRONG> • <BR><BR> • <EM>Emphasis</EM> • <BR><BR> • <ABBR>Abbreviation</ABBR> • <BR><BR> • <CITE>Citation</CITE> • <BR><BR> • <CODE>Code</CODE> • <BR><BR> • <DFN>Definition</DFN> • <BR><BR> • <KBD>Keyboard</KBD> • <BR><BR> • <SAMP>Sample</SAMP> • <BR><BR> • <VAR>Programming Variable</VAR> • </BODY> • </HTML> • popo

  15. HTML To separate blocks of text in a document you can use the simple but useful <HR> tag, which puts a straight line across the page. There is no ending tag for the horizontal rule. The very inclusion of <HR> introduces the separating line. • popo

  16. HTML • You can change the length, width, size, color and alignment of the horizontal rule using various attributes. • WIDTH Attribute • This attribute defines the length of the rule. • A value is required for this attribute. • This value can be expressed in pixel numbers or percentage. • <HR width="50"> presents a rule which is 50 pixels in length • <HR width="70%"> specifies that the length of the rule should be 70% of the page's width as: • popo

  17. HTML • SIZE Attribute • The SIZE defines the thickness of the horizontal rule. • You can change the thickness by specifying the number of pixels with the value. • <HR SIZE="1">: 1 pixel thick. • <HR SIZE="8">: 8 pixels thick. • <HR SIZE="30">: 30 pixels thick. • popo

  18. HTML • ALIGN Attribute • can align horizontal rules using one of the three values for ALIGN attribute, "CENTER", "LEFT", or "RIGHT". • The default value for this attribute is "CENTER". • <HR align="center" width="50”> • <HR align="left" width="50%">: • <HR align="right" width="50%">: • popo

  19. HTML • COLOR Attribute • <HR COLOR="RED" SIZE="10" width="50%“ >: Red colored rule, 10 pixels in thickness. • popo

  20. HTML • <HTML> • <HEAD> • <TITLE>Horizontal Rules</TITLE> • </HEAD> • <BODY> • Modify the attributes of these horizontal rules. • <BR><BR> • <HR WIDTH="50"> • <HR SIZE="3"> • <HR ALIGN="RIGHT" WIDTH="50%"> • <HR ALIGN="LEFT" COLOR="GREEN" WIDTH="80%"> • <HR WIDTH="50%“ SIZE="5"> • <HR COLOR="RED" SIZE="10" WIDTH="50%"> • </BODY> • </HTML> • popo

  21. HTML • Paragraph tag <P> • Blocks of text in HTML should be placed in paragraphs. • Browsers typically insert a blank line before and after a paragraph of text. • The paragraph tag is <P>. You should always end the paragraph with </P> even though it is not required. • The important Attribute of this tag is ALIGN which can take one of the four values; "LEFT", "RIGHT", "CENTER", "JUSTIFY". • LEFT is the default value. • <P> is aligned to the left.</P> • <P align="right"> is aligned to the right.</P> • <P align="center"> is centrally aligned.</P> • popo

  22. HTML • <DIV> tag • HTML elements inside <DIV> and </DIV> tags divides the document into sections. • <DIV align="left"> aligns elements inside it, to the left.</DIV> • <DIV align="right"> aligns elements inside it, to the right.</DIV> • <DIV align="center"> aligns elements inside it, to the center.</DIV> • popo

  23. HTML • <CENTER> tag • <CENTER>Centrally aligns this text</CENTER> • popo

  24. HTML • <MARQUEE> • The <MARQUEE> tag provides some animated text to the page. • An easy way to put some colorful animated text on your page. • It has many attributes: • BEHAVIOUR = ALTERNATE, SCROLL OR SLIDE • BGCOLOR = "Blue", "Green" etc. • DIRECTION = DOWN, LEFT, RIGHT OR UP • HEIGHT = in pixels or percentage • LOOP = number or INFINITE • SCROLLDELAY = in milliseconds • TITLE = some text • TRANSPARENCY = 0 to 100 (number) • WIDTH = in pixels or percentage • popo

  25. HTML • <HTML> • <HEAD> • <TITLE>Text Controlling </TITLE> • </HEAD> • <BODY> • <MARQUEE DIRECTION="LEFT" BGCOLOR="BLUE" INFINITE WIDTH="400">Scrolling POPO</MARQUEE> • </BODY> • </HTML> • popo

  26. HTML • Font FACE attribute • Face attribute takes the name of the font you want to use. • <FONT FACE="Times New Roman">This should be displayed in Times New Roman</FONT> • <FONT FACE="Arial">This should be displayed in Arial</FONT> • <FONT FACE="Verdana">This should be displayed in Verdana</FONT> • <FONT FACE="Comic Sans MS">This should be displayed in Comic Sans MS</FONT> • IMPORTANT: If you do not have the font installed in your system, the text will be displayed in the default font of your browser. • popo

  27. HTML • Font COLOR attribute • The attribute takes either the hexadecimal color value or just the color name. • Some common color names are Blue, Green, Red, Yellow, White, Black, Cyan, Magenta, Pink etc. • <FONT COLOR="RED">Red Text</FONT> • <FONT COLOR="BLUE">Blue Text</FONT> • <FONT COLOR="GREEN">Green Text</FONT> • popo

  28. HTML • Font SIZE attribute • The size attribute takes a number from 1 to 7 • <FONT SIZE="1">Some Text</FONT> • <FONT SIZE="2">Some Text</FONT> • <FONT SIZE="3">Some Text</FONT> • <FONT SIZE="4">Some Text</FONT> • <FONT SIZE="5">Some Text</FONT> • popo

  29. HTML • <HTML> • <HEAD> • <TITLE>Text </TITLE> • </HEAD> • <BODY> • <FONT FACE="Arial">Text in Arial</FONT> • <FONT FACE="Times New Roman">Text in Times New Roman</FONT> • <FONT SIZE="4">Size 4 text</FONT> • <FONT SIZE="2" COLOR="BLUE">Size 2, blue colored text</FONT> • </BODY> • </HTML> • popo

  30. HTML LIST • HTML Ordered List • If the ranking of items is desired, we employ ordered lists. • To place individual list items, you use the <LI> tag as • <OL> • <LI>Item One • <LI>Item Two • <LI>Item Three • <LI>Item Four • </OL> • popo

  31. HTML • Numbers are the default bullets in ordered lists but you can change this using the TYPE attribute of <OL> tag. • This attribute takes one of the five values: • TYPE="a": Lowercase alphabet • TYPE="A": Uppercase Alphabet • TYPE="i": Lowercase Roman Numerals • TYPE="I": Uppercase Roman Numerals • TYPE="1": Regular number (default) • Thus, • <OL TYPE="A"> • <LI>Item One • <LI>Item Two • <LI>Item Three • </OL> • popo

  32. HTML • HTML Unordered List • <UL> - </UL> are the starting and ending tags of Unordered lists. • List items are included using the <LI> tag. • Unordered lists also support the TYPE attribute that takes disc, circle or square as its value. • <UL> • <LI>Item One • <LI>Item Two • <LI>Item Three • <LI>Item Four • </UL> • Using TYPE="square" • popo

  33. HTML Linking • Anchor tags have a starting (<A>) and an (</A>) ending tag. • The HREF attribute is required and takes the URL address of the destination page as value. Without this attribute-value, no links will be created. • Some text is enclosed between the anchor tags. • This text serves as the hot spot. When a visitor clicks on this 'hot spot', he or she will be transported to the target page. • <a href= "popo.html" >click to popo page</a> • popo

  34. HTML • Load image • <IMG> tag. The required attribute of this tag is SRC, which takes the value of the image file's URL. • <IMG SRC="ash.jpg"> • Three kinds of images files .gif, .jpg and .pngare used on the Internet. • The <IMG> tag has many attributes • WIDTH: used for specifying the width of the image • HEIGHT: specifies height • BORDER: displays a border around the image • <IMG SRC="hat.gif" width="150" height="100"> • popo

  35. HTML • Tables • Tables are defined with the <table> tag. • A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). • The letters td stands for "table data," which is the content of a data cell. • A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. • <table border="1"> • <tr> • <td>row 1, cell 1</td> • <td>row 1, cell 2</td> • </tr> • <tr> • <td>row 2, cell 1</td> • <td>row 2, cell 2</td> • </tr> • </table> • popo

  36. HTML • Headings in a Table • Headings in a table are defined with the <th> tag. • <table border="1"> • <tr> • <th>Heading</th> • <th>Another Heading</th> • </tr> • <tr> • <td>row 1, cell 1</td> • <td>row 1, cell 2</td> • </tr> • <tr> • <td>row 2, cell 1</td> • <td>row 2, cell 2</td> • </tr> • </table> • popo

  37. HTML HTML Anchor Tag • The HTML anchor element is used to create a link to a resource (another web page, a file, etc.) or to a specific place within a web page. The anchor tag is written like this: • <a> • The HREF Attribute • <a href=http://www.poposir.orgfree.com>popo page</a> • popo

  38. HTML • For example, suppose you want to link to a page you've saved with the name of MyPage.html. You'd code it like this: • <a href="MyPage.html">My Page</a> • The NAME Attribute • The name attribute allows an anchor tag to be used to point to a specific place on a web page. • You might link from the bottom of a long page to the top of the page • The syntax for using the name attribute is like this: • <a name="top"></a> or... • <a name="top">Some text</a> • You can leave out the text between the "a" tags or use them to surround some text. • popo

  39. HTML • to link to that named anchor • <a href="#top">go top</a> • As you can see, it's simply a hash mark (#) in front of the actual anchor name. • The hash mark tells the browser the link is on the current page. • You can also link to a named anchor on another page. • The syntax for that is: • <a href="AnotherPage.html#name">Link Text</a> • popo

  40. HTML • The TARGET Attribute • The target attribute allows you to determine where the link will open. • With a framed site, it allows you to target a link to a specific frame. • <a href="http://www.site.com" target="_blank">Link Text</a> • popo

  41. HTML HTML Comments Comments can be hidden in your HTML source code. You can also hide a whole block of code or content by marking it out using an HTML comment. A comment is written like this: <!-- This is a comment. --> • popo

More Related