Introduction to CSS and HTML Links and Images, Slides of Web Programming and Technologies

Download Introduction to CSS and HTML Links and Images and more Slides Web Programming and Technologies in PDF only on Docsity!

Web

Technologies

(HTML)

Lecture # 5

Contents ■ (^) Introduction to CSS ■ HTML Links ■ HTML Images ■ Marquee Tag

Inline CSS ■ An inline CSS is used to apply a unique style to a single HTML element. ■ An inline CSS uses the style attribute of an HTML element. ■ (^) This example sets the text color of the

element to green:

This is a Blue Heading

Internal CSS ■ An internal CSS is used to define a style for a single HTML page. ■ (^) An internal CSS is defined in the section of an HTML page, within a

This is a heading

This is a paragraph.

HTML Links - Hyperlinks ■ In computing, a hyperlink , or simply a link , is a reference to data that the reader can directly follow either by clicking, tapping, or hovering. ■ A hyperlink points to a whole document or to a specific element within a document. ■ (^) A link does not have to be text. It can be an image or any other HTML element.

Syntax ■ (^) link text ■ For example Google

■ (^) The href attribute specifies the destination address ( https://www.google.com ) of the link. ■ (^) The link text is the visible part ( Google ). ■ (^) Clicking on the link text will send you to the specified address. ■ (^) The full address like above one is called Absolute URLs

Local Links----Pages in different folder ■ (^) This example links to a page located in the user folder on the current web site: Profile

Jumping to a specific position on the same page--- Bookmark ■ (^) HTML bookmarks are used to allow readers to jump to specific parts of a Web page. ■ (^) Bookmarks can be useful if your webpage is very long. ■ (^) To make a bookmark, you must first create the bookmark, and then add a link to it. ■ (^) When the link is clicked, the page will scroll to the location with the bookmark.

Bookmark Example in other page ■ We can link a bookmark from another page as: Jump to Heading 2 ■ (^) Bookmark1 is created already with id attribute in Page2.

The target Attribute ■ (^) The target attribute specifies where to open the linked document. ■ (^) The target attribute can have one of the following values:  (^) _blank - Opens the linked document in a new window or tab  (^) _self - Opens the linked document in the same window/tab as it was clicked (this is default)  (^) _parent - Opens the linked document in the parent frame  (^) _top - Opens the linked document in the full body of the window  (^) framename - Opens the linked document in a named frame Google

HTML Images

HTML Images ■ In HTML, images are defined with the **** tag. ■ The tag is empty, it contains attributes only, and does not have a closing tag. ■ (^) For example;

Example

Images in Another Folder ■ (^) If not specified, the browser expects to find the image in the same folder as the web page. ■ However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

■ Now let we have 2 folders in one folder 'HTML' and 'Images' To link an image from Images folder in code from HTML folder;