![Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
o/p-- My favorite color is blue .
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes,
like WWW[1]
:
Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.](https://image.slidesharecdn.com/computerapplicationhtml-210520173546/85/Computer-application-html-12-320.jpg)
Computer application html
- 1. Computer application Ch 3 Introduction to HTML Table of Content :- HTML- advantage and disadvantage formatting in html -> STYLE tag { Bold <b>, Italic, underline} Writing html documents- HTML elements & Str of HTML Logical style tag HTML attributes <PRE> tag Basic HTML tags (Bg color, Text, Margins) list - unordered list ordered list list items Inserting Background image nested list Syntax description list <DL> tag Link, Alink & Vlink heading tag <h1>...<h6> line break tag <br> centre tag <center> horizontal line <hr> { no shade, size, align, width, color} paragraph <p> align attribute (center, left, right, justify) comment tag <!-- --> font tag {color face size} /<BAse font> HTML is the standard markup language for creating Web pages.
- 2. What is HTML? ● HTML stands for Hyper Text Markup Language ● HTML is the standard markup language for creating Web pages ● HTML describes the structure of a Web page ● HTML consists of a series of elements ● HTML elements tell the browser how to display the content ● HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> The <!DOCTYPE> Declaration The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading: <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3>
- 3. HTML Elements The HTML element is everything from the start tag to the end tag: <tagname>Content goes here...</tagname> Examples of some HTML elements: <h1>My First Heading</h1> <p>My first paragraph.</p> Start tag Element content End tag <h1> My First Heading </h1> <p> My first paragraph. </p> <br> none none HTML Attributes ● All HTML elements can have attributes ● Attributes provide additional information about elements ● Attributes are always specified in the start tag ● Attributes usually come in name/value pairs like: name="value"
- 4. The href Attribute The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to: <a href="https://www.w3schools.com">Visit W3Schools</a> The src Attribute The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: <img src="img_girl.jpg"> There are two ways to specify the URL in the src attribute: 1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg". 2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg". The width and height Attributes The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels): <img src="img_girl.jpg" width="500" height="600"> The alt Attribute The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.
- 5. <img src="img_girl.jpg" alt="Girl with a jacket"> The style Attribute The style attribute is used to add styles to an element, such as color, font, size, and more. <p style="color:red;">This is a red paragraph.</p> The title Attribute The title attribute defines some extra information about an element. The value of the title attribute will be displayed as a tooltip when you mouse over the element: <p title="I'm a tooltip">This is a paragraph.</p> ● All HTML elements can have attributes ● The href attribute of <a> specifies the URL of the page the link goes to ● The src attribute of <img> specifies the path to the image to be displayed ● The width and height attributes of <img> provide size information for images ● The alt attribute of <img> provides an alternate text for an image ● The style attribute is used to add styles to an element, such as color, font, size, and more ● The lang attribute of the <html> tag declares the language of the Web page ● The title attribute defines some extra information about an element HTML headings are titles or subtitles that you want to display on a webpage. Heading 1<h1>Heading 1</h1> Heading 2 <h2>Heading 2</h2>< Heading 3h3>Heading 3</h3> Heading 4<h4>Heading 4</h4>
- 6. Heading 5<h5>Heading 5</h5> Heading 6<h6>Heading 6</h6> HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. HTML Paragraphs The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it.
- 7. </p> HTML Horizontal Rules The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizonta l rule. The <hr> element is used to separate content (or define a change) in an HTML page: <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> HTML Line Breaks The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph: The Poem Problem This poem will display on a single line: eg-- <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
- 8. </p> Solution - The HTML <pre> Element The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: HTML Styles The HTML style attribute is used to add styles to an element, such as color, font, size, and more. The HTML style attribute has the following syntax: <tagname style="property:value;"> Background Color The CSS background-color property defines the background color for an HTML element. Set the background color for a page to powderblue: <body style="background-color:powderblue;"> Text Color The CSS color property defines the text color for an HTML element: <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> Fonts
- 9. The CSS font-family property defines the font to be used for an HTML element: <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> Text Size The CSS font-size property defines the text size for an HTML element: <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> Text Alignment The CSS text-align property defines the horizontal text alignment for an HTML element: <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> HTML Text Formatting HTML contains several elements for defining text with a special meaning. HTML Formatting Elements Formatting elements were designed to display special types of text: ● <b> - Bold text ● <strong> - Important text ● <i> - Italic text ● <em> - Emphasized text ● <mark> - Marked text ● <small> - Smaller text ● <del> - Deleted text ● <ins> - Inserted text ● <sub> - Subscript text
- 10. ● <sup> - Superscript text HTML <b> and <strong> Elements The HTML <b> element defines bold text, without any extra importance. Example <b>This text is bold</b> <!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><b>This text is bold.</b></p> </body> </html> Output--This text is normal. This text is bold. The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold. <p><strong>This text is important!</strong></p> HTML <i> and <em> Elements The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic. <i>This text is italic</i> <!DOCTYPE html> <html>
- 11. <body> <p>This text is normal.</p> <p><i>This text is italic.</i></p> <p><em>The HTML element defines emphasized text. The content inside is typically displayed in italic.</em><p> </body> </html> HTML <small> Element The HTML <small> element defines smaller text: <p><small>This is some smaller text.</small></p> HTML <mark> Element The HTML <mark> element defines text that should be marked or highlighted: Example <p>Do not forget to buy <mark>milk</mark> today.</p> HTML <del> Element The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text: Example <p>My favorite color is <del>blue</del> red.</p> HTML <ins> Element The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:
- 12. Example <p>My favorite color is <del>blue</del> <ins>red</ins>.</p> o/p-- My favorite color is blue . HTML <sub> Element The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O: Example <p>This is <sub>subscripted</sub> text.</p> HTML <sup> Element The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1] : Example <p>This is <sup>superscripted</sup> text.</p> HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
- 13. HTML Color HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values. Color Names In HTML, a color can be specified by using a color name: HTML Styles The HTML style attribute is used to add styles to an element, such as color, font, size, and more. Background Color The background-color property defines the background color for an HTML element. Example Set the background color for a page to powderblue: <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> Text Color The color property defines the text color for an HTML element:
- 14. Example <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> Fonts The font-family property defines the font to be used for an HTML element: Example <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> Text Size The font-size property defines the text size for an HTML element: Example <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> Text Alignment The text-align property defines the horizontal text alignment for an HTML element: Example <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> ● Use the style attribute for styling HTML elements ● Use background-color for background color ● Use color for text colors ● Use font-family for text fonts ● Use font-size for text sizes ● Use text-align for text alignment
- 15. HTML Lists HTML lists allow web developers to group a set of related items in lists. Unordered HTML List An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Ordered HTML List An ordered list starts with the <ol> tag. Each list item starts with the list items <li> tag. The list items will be marked with numbers by default: Example <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> HTML Description Lists HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
- 16. Example <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> o/p-- A Description List Coffee - black hot drink Milk - white cold drink HTML List Tags Tag Description <ul> Defines an unordered list <ol> Defines an ordered list <li> Defines a list item <dl> Defines a description list <dt> Defines a term in a description list <dd> Describes the term in a description list
- 17. How do I make a picture as a background on my web pages? Point the body background to the name of your image you want to use as the background, as shown below. This body line should be the first line after your </head> tag. <body background="picture.gif"> You can also have the background image fixed, so it does not move when using the scroll bar in the browser. To do this, add the BGPROPERTIES tag as shown below. <body background="picture.gif" bgproperties="fixed">