HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!
-
Upload
cecil-gregory-edwards -
Category
Documents
-
view
287 -
download
4
Transcript of 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
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>
<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
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
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
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>