26
HTML Introduction to HTML Tags

HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Embed Size (px)

Citation preview

Page 1: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML

Introduction to HTML Tags

Page 2: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML Document

<HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD>

<BODY> <P>Hello world!

</BODY>

</HTML>

Page 3: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML Basic

HTML Headings (<H1> to <H6>)<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>

HTML Paragraph<p>This is a paragraph</p> HTML Link<a href="http://www.w3schools.com">This is a link</a>

HTML Image<img src="w3schools.jpg" width="104" height="142" /><img src="boat.gif" alt="Big Boat" />

Page 4: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Text Formatting TagsTag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text 

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<s> Deprecated. Use <del> instead

<strike> Deprecated. Use <del> instead

<u> Deprecated. Use styles instead

Page 5: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Text Formatting

Page 6: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Preformatted text

Page 7: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

"Computer output" Tags

Page 8: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Character Entities

Result Description Entity Name Entity Number

  non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

¢ cent &cent; &#162;

£ pound &pound; &#163;

¥ yen &yen; &#165;

€ euro &euro; &#8364;

§ section &sect; &#167;

© copyright &copy; &#169;

® registered trademark &reg; &#174;

Page 9: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Meta Tags

<META name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

<META name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript" />

This meta element defines a description of your page:

This meta element defines keywords for your page: (for search engine)

<META http-equiv=“Refresh” content=“5;url=http://www.w3schools.com” />

This demonstrates how to redirect a user if your site address has changed:

<META http-equiv="Content-Type" content=“text/html; charset=UTF-8” />

This meta element defines character set:

Page 10: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML Attributes

<H1 id="section1"> This is an identified heading thanks to the id attribute </H1>

<a href="http://www.w3schools.com">This is a link</a>

Attribute Value Description

class class_rule or style_rule The class of the element

id id_name A unique id for the element

style style_definition An inline style definition

title tooltip_text  A text to display in a tool tip

Page 11: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Table

<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>

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Page 12: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Table with Colspan

<table border="1"> <tr>

<td colspan=2>row 1, cell 1</td> </tr> <tr>

<td>row 2, cell 1</td><td>row 2, cell 2</td>

</tr></table>

row 1, cell 1

row 2, cell 1 row 2, cell 2

Page 13: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Table with Rowspan

<table border="1"> <tr>

<td rowspan=2>row 1, cell 1</td><td>row 1, cell 2</td>

</tr> <tr>

<td>row 2, cell 2</td> </tr></table>

row 1, cell 1

row 1, cell 2

row 2, cell 2

Page 14: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML Layouts using Tables

• An HTML <table> is used to divide a part of this Web page into two columns.

• The trick is to use a table without borders, and maybe a little extra cell-padding.

• We can use attribute “bgcolor” to paint the background color

• No matter how much text you add to this page, it will stay inside its column borders.

Page 15: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML

HTML Hyperlinks

Page 16: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Hyperlink in HTML

• A hyperlink (or link) is a word, group of words, or image that we can click on to jump to a new document or a new section within the current document

• Links are specified in HTML using the <a> tag

• The <a> tag can be used in two ways:– To create a link to another document, by using the href attribute – To create a bookmark inside a document, by using the name attr

ibute

Page 17: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML Link Syntax

• The HTML code for a link looks like this:

• The “href” attribute can point to:– Outside document– Another document within the same site– Another part of document within the same file

<a href="url">Link text</a>

Tip: The "Link text" doesn't have to be text. We can link from an image or any other HTML elements.

Page 18: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML Link Syntax (cont)

• An example of link to external document is shown below

• Attribute “target” specifies where to open the document– Example below opens linked document in a new browser window:

• An example of a link to document within the same site

<a href=“http://www.w3schools.com/”>Visit W3Schools</a>

<a href=“./HR/admin_peple.html”>Administrative Staff</a>

<a href=“http://www.w3schools.com/” target=“_blank”>W3Schools</a>

Page 19: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Link Within Document

• We use “name” attribute to specify the name of an anchor

• Name attribute is used to create a bookmark inside an HTML document

• Bookmarks are invisible to the reader

Page 20: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Link Within Document (cont)

• A named anchor inside an HTML document can be created as:

• This is how to create a link to the named anchor within the same document

<a href=“#tips”>Visit the Useful Tips Section</a>

<a href=“http://www.w3schools.com/html_links.htm#tips”>Visit the Useful Tips Section</a>

<a name=“tips”>Useful Tips Section</a>

Or, from another page:

Page 21: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Image Map

• Tag <map> is used to define a client-side image-map.

• An image-map is an image with clickable areas.

• The map element contains a number of area elements, that defines the clickable areas in the image map.

• <map> is used in association with <img> tag (with “usemap” attribute) as shown in the following slide

Page 22: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Image Map

<img src=“planets.gif” width=“145” height=“126” usemap=“#planetmap” />

<map id=“planetmap” name=“planetmap” />

<area shape=“rect” coords=“0,0,82,126” alt=“Sun” href=“sun.htm” />

<area shape=“circle” coords=“90,58,3” alt=“Mercury” href=“mercur.htm” />

<area shape=“circle” coords=“124,58,8” alt=“Venus” href=“venus.htm” />

</map>

Page 23: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML

Frameset in HTML

Page 24: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Frame Vertical

<html>

<frameset cols=“120, *” />

<frame src=“tryhtml_contents.htm” /><frame src=“frame_a.htm” Name=“showframe” />

</frameset>

</html>

Page 25: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Frame (Horizontal)

<html>

<frameset rows=“20%, 80%” />

<frame src=“frame_a.htm” /><frame src=“link.htm#C10” />

</frameset>

</html>

Page 26: HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

Frameset Combination<html>

<frameset rows=“20%, 80%” border=0 /> <frame src=“frame_a.htm” name=“titleframe” /> <frameset cols=“120, *” /> <frame src=“tryhtml_contents.htm” /> <frame src=“frame_b.htm” name=“showframe” /> </frameset></frameset>

</html>