1 / 97

HTML stands for 'hyper text mark-up language' and is a simple language that

What is HTML? learn html. What is HTML? . HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages. What tools are needed to make a webpage?.

cybill
Download Presentation

HTML stands for 'hyper text mark-up language' and is a simple language that

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. What is HTML? learn html What is HTML? HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages.

  2. What tools are needed to make a webpage? All that is needed is 'notepad' and a second browser, notepad is a simple text editor in windows, click start on your taskbar then programs and then goto accessories, finally click notepad. What does html look like? Most html tags work in pairsThe first <HTML> tag tells the browser that it is reading a html document. The </HTML> tag with the / in it tells the browser that the html has ended.Take a look belowThe first <HEAD> tag tells the browser that it is reading the head of a html document. The </HEAD> tag with the / in it tells the browser that the head part has ended.One more exampleThe first <TITLE> tag tells the browser that it is reading the title of a html document. The </TITLE> tag with the / in it tells the browser that the title has ended.

  3. The minimal webpage:- <HTML> <HEAD> <TITLE>my first web page</TITLE> </HEAD> <BODY> This is my very first webpage, ainti clever? </body> </HTML> Output:-

  4. What is Web Page Web page is a page which is displayed on the internet. Web pages are created by using HTML syntax. In web pages we can insert the picture ,table , graphics by using different tags of html language.

  5. HTML TAGS • Html tags are standard set of codes that are typed in between greater than and less than signs on the keyboard. Like <HTML> There are basically two types of HTML tags • Padded Tags • Unpadded Tags

  6. Padded Tags:- Padded tags are those tags which are required to be closed at the end. The Padded tag is closed with forward hash (/) before the tag name. <HTML>……..</Html> <Head>……..</Head> <Body>……..</Body>

  7. Unpadded tags:- unpadded tags is just the opposite of Padded Tags, as they need not be closed at the end. <HR> <BR>

  8. Layout of Web Page Title Heading Body Footer

  9. Basic Tags:- <HTML>….……..</HTML> <TITLE>…………</TITLE> <HEAD>………..</HEAD> <BODY>…………</BODY>

  10. BASIC TAGS

  11. <Html> <Title> MY Page </Title> <Head> Punsoft life skills academy </head> <Body> this is my first web page </body. </Html> Output of this My page Title Punsoft life skills academy Head This is my first web page. Body

  12. Formatting Tags Formatting Tags are used to design, styles and colors to the text.

  13. Center Aligned Heading <html><body> <h1 style="text-align:center">This is heading 1</h1> <p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p> </body></html> Output:- This is heading 1 The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. Note:- to make your text in center of page you can also use the option (tag) <center> simply.

  14. Use of horizontal line in HTML <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr /> <p>This is a paragraph</p><hr /> <p>This is a paragraph</p><hr /> <p>This is a paragraph</p> </body></html> • Output: • The hr tag defines a horizontal rule: • This is a paragraph • This is a paragraph • This is a paragraph

  15. Text formatting tags

  16. Use of Paragraph option.<p> <html> <body> <p>This is a paragraph. we are using this option to display the result of this option on the web page </p> <p>This is a paragraph. we are using this option to display the result of this option on the web page </p> <p>This is a paragraph. we are using this option to display the result of this option on the web page </p> </body> </html> Output:- This is a paragraph. we are using this option to display the result of this option on the web page This is a paragraph. we are using this option to display the result of this option on the web page This is a paragraph. we are using this option to display the result of this option on the web page

  17. <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>

  18. Output:-Text formatting This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This is subscript and superscript

  19. Pre and p options <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>

  20. Preformatted text (how to control line breaks and spaces) Output This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print I next i

  21. Abbreviation tags: <html> <body> <abbr title="United Nations">UN</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> </body> </html>

  22. Output of abbreviation tag UN WWW The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

  23. <html> <body> <p> If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html>

  24. Output • If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): • TxetwerbeHemossiereH Note:- <bdo dir="rtl"> tag show the text in opposite direction like mirror effect.

  25. Use of Some other tags (coding) <html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <tt>Teletype text</tt> <br> <samp>Sample text</samp> <br> <var>Computer variable</var> <br><p> <b>Note:</b> These tags are often used to display computer/programming code. </p> </body></html>

  26. Output:- Computer code Keyboard input Teletype text Sample text Computer variable Note: These tags are often used to display computer/programming code.

  27. <html> • <body> • <abbr title="United Nations">UN</abbr> • <br /> • <acronym title="World Wide Web">WWW</acronym> • <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> • </body></html>

  28. Use of heading tags: <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body></html> Output:- This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

  29. Additional Tags

  30. Use of background tags/attributes <html> <body style="background-color:orange"> <h2>Look: Colored Background!</h2> </body> </html> Output:- Look: Colored Background! Note:- This option is also used as <body Bgcolor=“orange”> both have same effects.

  31. Use of comment tag. Output:-This is a regular paragraph <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body></html>

  32. Color codes in html

  33. Lists in HTML • List mean to make/arrange the information in order. Listing of item is possible in html. List is divided into two parts. • Order list: • Unordered list: items to be listed are typed after <li> tag which mean <list item>. It is a unpadded tag it mean there is no need to close it, it is op

  34. Ordered list:- The ordered list consists of alphabetical order and numeric order. The ordered list begins with <ol> tag and is a padded tag hence the list ends with a </ol> tag. This tag must be closed at the end of list. Example:- <ol>Names of cities <li> Chandigarh <li> Ropar <li>Patiala </ol> Output:- Names of cities Chandigarh Ropar Patiala Note:- by default numbers are shown in ordered list.

  35. Example and other features of ordered list: Output:- Chandigarh Ropar Patiala Alphabets in ordered list: For uppercase list: <ol type=A> <li> Chandigarh <li> Ropar <li>Patiala </ol> Alphabets in ordered list: For uppercase list: <ol type=a> <li> Chandigarh <li> Ropar <li>Patiala </ol> Output:- Chandigarh Ropar Patiala

  36. Other options of ordered list: Output:- Chandigarh Ropar Patiala Roman Characters as ordered list:- Uppercase: <ol type=I> <li> Chandigarh <li> Ropar <li>Patiala </ol> Output:- Chandigarh Ropar Patiala Roman Characters as ordered list:- Lower case: <ol type=i> <li> Chandigarh <li> Ropar <li>Patiala </ol>

  37. To start the list from particular number- in ordered list only Output:- Chandigarh Ropar Ludhiana Patiala <ol type=“1”start=7> <li> Chandigarh <li> Ropar <li> Ludhiana <li> Patiala</ol> Output:- Chandigarh Ropar Ludhiana Patiala <ol type=“a”start=5> <li> Chandigarh <li> Ropar <li> Ludhiana <li> Patiala</ol>

  38. Unordered list:- The unordered list consists of bullets. The unordered list begins with <ul> tag and is a padded tag hence the list ends with a </ul>. <li>Tag is sub tag or attribute of this list. Example:- default bullets as unordered list. <ul><li> Chandigarh <li> Ropar> <li> Patiala <li> Ludhiana </ul> • Output :- • Chandigarh • Ropar • Patiala • Ludhiana

  39. To change the shape of the bullets from default to square. • Output:- • Chandigarh • Ropar • Patiala • Ludhiana <ul type=“square”> <li> Chandigarh <li> Ropar <li> Patiala <li> Ludhiana</ul> • <ul type=“Circle”> • <li> Chandigarh • <li> Ropar • <li> Patiala • <li> Ludhiana</ul> • Output:- • Chandigarh • Ropar • Patiala • Ludhiana

  40. What is Nested list:- List within a list is known as a nested list. It can be extended up to several levels. The most common example of nested list is index or contents of any book.

  41. Images in HTML Images can be inserted on the wed page using HTML tags. There are different types of images or graphics file formats like gif, jpeg(jpg), Wmf, etc. that can be easily inserted on a web page through HTML tags. HTML tag associated with inserting images and its attributes with their functions are given in the following table:

  42. Image Tags in HTML

  43. <html> <title> Inserting Images</title> <head> <center> This is a picture of roses</head> <body> <img Src=“C:\images\Roses.jpg” align=“center”> </body> </html>

  44. Output of these tags This is a picture of Roses

  45. Links in HTML Links:-link is a connection of one test/picture with other text/picture. In Html links are necessary to link different web pages in a web site. It is also necessary for linking from one part of the document to another part in the same document. Types of Links:- • Internal links • External links

  46. Tags for hyperlinks

  47. Internal Link Internal Links are those links that are inserted within a single current document. It mean it is a link within a document. It is used when Document is too large and it needs link from Top to Bottom or Bottom to Top.

  48. Syntax 1.<a name=“location name’> <a href=“# location name”> link text </a> Type the text as you required 2.<a href=“#a1”> link text </a> <a name=a2> Note:- Both the text are required to create internal link.

  49. Example: <Html> <Body> <a name=“a1”> <a href=“#a2”> Bottom </a> This is a document which shows the link with in a page. All the text is used to show link of top text with bottom text. <a href=“#a1”> Top </a> <a name=“a2”> </body></html> Note=“#” symbol is used to indicate internal link.

More Related