1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.

Slides:

Advertisements

Similar presentations

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.

Advertisements

HTML Basics Customizing your site using the basics of HTML.

WeB application development

4.01 How Web Pages Work.

XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.

CPSC 203 Introduction to Computers Tutorial 59 & 64 By Jie (Jeff) Gao.

Relative and Absolute Relative Absolute.  In web-page design, a hyperlink (or link) is a reference to a document that the reader can directly follow,

XP Adding Hypertext Links to a Web Page. XP Objectives Create hypertext links between elements within a Web page Create hypertext links between Web pages.

1 Software Testing and Quality Assurance Lecture 32 – SWE 205 Course Objective: Basics of Programming Languages & Software Construction Techniques.

Internet – Part II. What is the World Wide Web? The World Wide Web is a collection of host machines, which deliver documents, graphics and multi-media.

HTML & Dreamweaver 101 Aman Yadav. Definitions HTTP – The Web uses a protocol called HTTP (Hyper Text Transport Protocol) to communicate between the Web.

Topics in this presentation: The Web and how it works Difference between Web pages and web sites Web browsers and Web servers HTML purpose and structure.

Introduction 2: Internet, Intranet, and Extranet J394 – Perancangan Situs Web Program Sudi Manajemen Universitas Bina Nusantara.

Computer Science 103 Chapter 2 HyperText Markup Language (HTML)

Announcement #1 1 Lecture 9. Announcement #2  Midterm exam will be on Oct. 12 (Tuesday)  pm – 1.45 pm  Exam will cover all materials till Oct.

Images: HTML and CSS. The Bells page without images in Source View and Design View.

1 Deploying a Web Application. 2 Virtual Directories Web servers map URLs to directories in their file systems. Called virtual directories. Normally one.

CPSC 203 Introduction to Computers Lab 39, 40 By Jie (Jeff) Gao.

Internet. Internet is Is a Global network Computers connected together all over that world. Grew out of American military.

Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

CPSC 203 Introduction to Computers Lab 21, 22 By Jie Gao.

XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.

5 Chapter Five Web Servers. 5 Chapter Objectives Learn about the Microsoft Personal Web Server Software Learn how to improve Web site performance Learn.

1 Session 1: Introduction to HTML Spring Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get.

Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.

E-Commerce: Introduction to Web Development 1 Dr. Lawrence West, Management Dept., University of Central Florida Topics What is a Web.

Web Design (5) Navigation (1). Creating a new website called ‘Navigation’ In Windows Explorer, open the folder “CU3A Web Design Group”; and then the sub-folder.

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.

 The tag to create a link is called, which stands for anchor.  You put the address of the page to link to in quotes after href=, like the following:

Computing Theory: HTML Year 11. Lesson Objective You will: o Be able to define what HTML is - ALL o Be able to write HTML code to create your own web.

Dreamweaver Edulaunch Project 1 EQ: What are the key concepts when building the first page of a web site?

Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.

Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.

XHTML1 Images N100 Building a Simple Web Page. XHTML2 The Element The src attribute specifies the filename of an image file To include the src attribute.

INTRODUCTORY Tutorial 6 Using Links on a Web Page.

XHTML Hyperlinks. Creating Links to Other Web Pages A link, or hyperlink, is a specially formatted Web page object that the user can click to open a different.

Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

1 More About HTML Tables and Images. 22 Objectives You will be able to Create tables in HTML. Include images in your HTML page. Create links to other.

XP 1 HTML Tutorial 2: Developing a Basic Web Site.

1 WWW. 2 World Wide Web Major application protocol used on the Internet Simple interface Two concepts –Point –Click.

Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.

Module: Software Engineering of Web Applications Chapter 2: Technologies 1.

Website design and structure. A Website is a collection of webpages that are linked together. Webpages contain text, graphics, sound and video clips.

1 After completing this lesson, you will be able to: Get around the Internet with your browser. Connect to the Internet. Print Web pages. Save Web pages.

The World Wide Web. What is the worldwide web? The content of the worldwide web is held on individual pages which are gathered together to form websites.

Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,

Website Design, Development and Maintenance ONLY TAKE DOWN NOTES ON INDICATED SLIDES.

1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server.

Hit125 application concepts Types of links File paths & directory structures.

Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!

Links and Images. Links HTML uses a hyperlink to link to another document on the Web A hyperlink can be either text or a picture Links are created with.

The Internet, Fourth Edition-- Illustrated 1 The Internet – Illustrated Introductory, Fourth Edition Unit B Understanding Browser Basics.

Session 1: Introduction to HTML Fall Today’s Agenda Talk about the functions of the Internet Cover useful terminology for today’s session HTML,

Computer Basics Introduction CIS 109 Columbia College.

Hyperlinks Links for Other Pages. Hyperlink (aka Link) Text (or image) user can click Takes user to different location In general, location can be: On.

Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”

HTML Links CS 1150 Spring 2017.

The World Wide Web.

4.01 How Web Pages Work.

4.01 How Web Pages Work.

Internal and External Links

Browsing and Searching the Web

Sec (4.3) The World Wide Web.

Internal and External Links

Web Design and Development

Internet Technologies I - Lect.01 - Waleed Ibrahim Osman

4.01 How Web Pages Work.

HTML Links CS 1150 Fall 2016.

Presentation transcript:

1 More About HTML Images and Links

22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.

33 Images in HTML Use the tag to display an image file in an HTML page..gif.jpg.png The image is a separate file stored within the web site’s virtual directory. Typically in /images directory

44 The Tag filename is path to image file Normally a relative address e.g. "images/xxx.jpg“ alt is text to be displayed if the image file cannot be found or cannot be displayed. Also used by page readers.

55 Image Example Create a folder called images on your desktop. Download file USF_Bull.gif from the class web site into images folder: 004_HTML_Tables_and_Images/ File USF_Bull.gif In Visual Studio, create a new html file and save on desktop as image_example.html

66 Image Example Save on desktop and double click to display file in browser.

7 image_example in Chrome

88 Deploy image_example to Server Copy both the images folder and file image_example from the desktop to your web directory. View image example on the web

9 Image Example on the Web End of Section

10 Creating Links Links allow a user to jump to other places by simply clicking on them. This is the hyper in hypertext! A link can go to another point in the same document or to a completely different page Anywhere in the Internet. Clicking on the link is like typing the URL into the browser’s address box.

11 A link to a page on a different site must include the full URL. Back to CSE Home Page Called an absolute URL. Links to Other Pages Where to go This is what the user sees as “the link”.

12 A Simple Page with a Link Click on the link below to go to the Computer Science and Engineering Home page. Back to CSE Home Page 12 File simple_link.html

13 simple_link.html in Chrome

14 Links to Other Pages A link to another page on the same site can use a relative URL No “ Specification in the link will be appended to the current directory. This is usually the preferred way to write a link. Pages can be moved to a different site, or different directory, without updating the links.

15 Link to Page on the Same Site

16 Link to Page on the Same Site End of Presentation