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

HTML

Introduction to HTML Tags

HTML Document

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

<BODY> <P>Hello world!

</BODY>

</HTML>

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

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

http://www.w3schools.com/tags/tag_font_style.asp


http://www.w3schools.com/tags/tag_phrase_elements.asp



Text Formatting

Preformatted text

"Computer output" Tags

Character Entities

Result Description Entity Name Entity Number

non-breaking space

< less than < <

> greater than > >

& ampersand & &

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

€ euro € €

§ section § §

© copyright © ©

® registered trademark ® ®

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:

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

Table

<table border="1"> <tr>

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

</tr> <tr>


</tr></table>

row 1, cell 1 row 1, cell 2


Table with Colspan


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


</tr></table>

row 1, cell 1


Table with Rowspan


<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

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.

HTML

HTML Hyperlinks

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

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.

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>

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

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:

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

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>

HTML

Frameset in HTML

Frame Vertical

<html>

<frameset cols=“120, *” />

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

</frameset>

</html>

Frame (Horizontal)

<html>

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

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

</frameset>

</html>

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>

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

Documents

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