HTML Introduction to HTML Tags

HTML Document My first HTML document Hello world!

HTML Basic HTML Headings ( to ) This is a heading This is a heading This is a heading HTML Paragraph This is a paragraph HTML Link This is a link HTML Image

Text Formatting Tags TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use instead Deprecated. Use instead Deprecated. Use styles instead

Text Formatting

Preformatted text

"Computer output" Tags

Character Entities ResultDescriptionEntity NameEntity Number non-breaking space   <less than< < >greater than> > &ampersand& & ¢cent¢ ¢ £pound£ £ ¥yen¥ ¥ €euro€ € §section§ § ©copyright© © ®registered trademark® ®

Meta Tags This meta element defines a description of your page: This meta element defines keywords for your page: (for search engine) This demonstrates how to redirect a user if your site address has changed: This meta element defines character set:

HTML Attributes This is an identified heading thanks to the id attribute This is a link AttributeValueDescription classclass_rule or style_ruleThe class of the element idid_nameA unique id for the element stylestyle_definitionAn inline style definition titletooltip_text A text to display in a tool tip

Table row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

Table with Colspan row 1, cell 1 row 2, cell 1 row 2, cell 2 row 1, cell 1 row 2, cell 1row 2, cell 2

Table with Rowspan row 1, cell 1 row 1, cell 2 row 2, cell 2 row 1, cell 1 row 1, cell 2 row 2, cell 2

HTML Layouts using Tables An HTML 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 tag The 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 attribute

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 Link text 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 Visit W3Schools Administrative Staff W3Schools

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 Visit the Useful Tips Section Useful Tips Section Or, from another page:

Image Map Tag 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. is used in association with tag (with “usemap” attribute) as shown in the following slide

Image Map

HTML Frameset in HTML

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

Frame (Horizontal)

Frameset Combination