html ppt by fathima faculty hasanath college for women bangalore
DESCRIPTION
HTML ppt defining tags,attributes and element with example best for computer application in bussinessTRANSCRIPT
It is the document typeThe text between <html> and </html>
describes the web pageThe text between <body> and </body> is the
visible page contentThe text between <h1> and </h1> is
displayed as a headingThe text between <p> and </p> is displayed
as a paragraph
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup languageA markup language is a set of markup tagsThe tags describe document contentHTML documents contain HTML tags and
plain textHTML documents are also called web pages
HTML markup tags are usually called HTML tagsHTML tags are keywords (tag names)
surrounded by angle brackets like <html>HTML tags normally come in pairs like <b>
and </b>The first tag in a pair is the start tag, the second
tag is the end tagThe end tag is written like the start tag, with
a forward slash before the tag nameStart and end tags are also called opening
tags and closing tags<tagname>content</tagname>
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:
HTML Element:<p>This is a paragraph.</p>
Web BrowsersThe purpose of a web browser (such as
Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
HTML Page StructureBelow is a visualization of an HTML page structure:<html><body><h1>This a heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p></body></html>
Writing HTML Using Notepad or TextEdit
Step 1: Start NotepadTo start Notepad go to:Start All Programs Accessories Notepad
Follow the 4 steps below to create your first web page with Notepad.
Step 3: Save Your HTMLSelect Save as.. in Notepad's file menu.When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.Save the file in a folder that is easy to remember, like w3schools.
Step 4: Run the HTML in Your BrowserStart your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.The result should look much like this:
<html><head><title>Title of the document</title></head>
<body>The content of the document......</body>
</html>
AttributesAttribute Value Alink Specifies the color of an active link in a
document background. Specifies a background image for a
document bgcolor Specifies the background color of a
document link. Specifies the color of unvisited links in a
document text Specifies the color of the text in a document vlink Specifies the color of visited links in a
document
Example <html><head>Line break</head><br>This is<br>a para<br>graph with line breaks</html>
line break This isa paragraph with line breaks
Example<html><p>This is a paragraph</p><p>This is another paragraph</p> </html>
Output
This is a paragraph
This is another paragraph
Attributesalign LeftRightcenter
Specifies the alignment of the text within a paragraph
<html><body>
<p align="right">A right-aligned paragraph.</p>
<p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>
</body></html>
Out putA right-aligned paragraph.
Note: The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.
Example
<html><body>
<p><font size="6">This is some text!</font></p>
<p>The size attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p>
</body></html>
Out put
This is some text!
The size attribute was deprecated in HTML 4, and is
Not supported in HTML 4.01 Strict DTD or in XHTML 1.0
Strict DTD. Use CSS instead.
<html><body background="w3s.png">
<h1>Hello world!</h1><p><a href="http://www.w3schools.com">Visit
W3Schools.com!</a></p><p>The background attribute was deprecated in
HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p>
</body></html>
<html><body bgcolor="#ff0000">
<h1>Hello world!</h1><p><a href="http://www.w3schools.com">Visit
W3Schools.com!</a></p>
<p><b>Tip:</b> To produce equal results in all browsers, always use hex code to specify colors.</p>
<p>the bgcolor atribute is used to give color to backgroung.</p>
</body></html>
The most common HTML lists are ordered and unordered lists:
HTML Lists
An ordered list:1.The first list item2.The second list item3.The third list itemAn unordered list:List itemList itemList item
HTML Unordered ListsAn unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.The list items are marked with bullets (typically
small black circles).
example<ul>
<li>Coffee</li><li>Milk</li>
</ul>
How the HTML code above looks in a browser:
• Coffee• Milk
HTML Ordered ListsAn ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.The list items are marked with numbers.example<ol>
<li>Coffee</li><li>Milk</li>
</ol>
How the HTML code above looks in a browser:
1.Coffee2.Milk
Style Tags/html text formatting
<u> for underline</u> <sup>for superscript</sup> <sub>for subscript</sub> <strike> for striked text</strike> <i> for italic text</i> <b> for bold text</b>
<html><body><b>This text is bold</b><strong>This text is strong</strong><i>This text is italic</i>This is<sub> subscript</sub> and
<sup>superscript</sup>another example of subscript ans superscript is
(a+b)<sup>2</sup>=a<sup>2</sup>+<sup>2</sup>+2ab
<br>chlorine gas formula isCL<sub>2</sub><strike> This is an example of strike out text</strike><u>This text is underlined.HTML provides various
style tags></u></body></html>
This text is boldThis text is strongThis text is italicThis is subscript and superscript
another example of subscript ans superscript is (a+b)2=a2+2+2ab chlorine gas formula isCL2
This is an example of strike out textThis text is underlined.HTML provides various
style tags>
Align Specifies the alignment of a <hr> element
noshadeSpecifies that a <hr> element should render in one solid color (noshaded), instead of a shaded color
size Specifies the height of a <hr> element Width Specifies the width of a <hr> element
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
<hr size=4> it is used to define the<b> thickness</b> of the line
<hr width= 70%> it defines the <b>width of the line(size) </b>70% of the page width
<hr width = 50 noshade>here the line is define in <b>pixel value of 50 and there is no shade</b> given to the line
</body>
</html>
<html>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
</body>
</html>
Alt : The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
Height : The height attribute specifies the width of an image, in pixels.
Width: The width attribute specifies the width of an image, in pixels.
<html><body><img src="C:\Users\Hasnath-1\Desktop\search.jpg“
alt="goolgle image cannot be displayed" ></body></html>
<html><body><img src="smiley.gif" alt="Smiley face" width="50" height="400">
</body></html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="450" height="100">
</body>
</html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="100" height="100" border="5">
<p>The border attribute give border to the image in HTML.you can define the border width as border="10" </p>
</body>
</html>
The <font> tag specifies the font face, font size, and font color of text.
color: Specifies the color of textSize: Specifies the size of textFace: Specifies the font of textBase font tag: it is used to give default font size ,color,
face to the entire page
<html>
<body>
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
<basefont size="6" >This is some text in base font!
</body>
</html>
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
<html><body>
<!--This is a comment. Comments are not displayed in the browser-->
This is a html web page with comments and these comments are not displayed
</body></html>
<html>
<body>
<pre>
<font size =8>
∀ ∁ ∂
∃ ∄ ∅
∆ ∇ ∈
∉ ∊ ∋
∌ ∍ ∎
</pre>
</body>
</html>
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces and line breaks.
<font size =3>
-------------------------------------
Sl no Name
-------------------------------------
1 Ayesha
2 Radhika
-------------------------------------
</pre>
</body>
</html>
The href attribute specifies the URL of the page the link goes to.
If the href attribute is not present, the <a> tag is not a hyperlink.
Syntax <a href="URL">
<html><body>
<p>An absolute URL: <a href="http://www.w3schools.com">
W3Schools</a></p><p>A relative URL: <a href="tag_a.asp">
The a tag</a></p>
</body></html>
If we select the first URL W3 Schools then the following website will be opened
Else if the selection is done for the second URL then following site will be displayed