Enhancing Your Web Site—Adding Links Web Page YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. YOU SHOULD HAVE COMPLETED THE.

Slides:

Advertisements

Similar presentations

Introduction to HTML Lists, Images, and Links. Before We Begin Save another file in Notepad Save another file in Notepad Open your HTML, then do File>Save.

Advertisements

Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.

CIS101 Introduction to Computing HTML Project Two.

CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.

HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.

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.

Did someone say Music? November 7, Adding MUSIC to a web page: 1. Find your music! 2. A good website is 3. You will.

Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.

Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.

Review: How do you change the border color of an image?

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

Lesson 6 Links. Creating Folders  For every web site/page, you need to create a separate folder  The computer cannot find links if they are not stored.

WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.

Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.

CURR 285, FirstName LastName, This_Semester This_Year FirstName LastName About Me [A] [My Own Choice Of Topic] [B] Favorite Educational Web Site [C] My.

Adding Hyperlinks To a Web Page. Hyperlink and Its Add-Ons Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is.

HTML Overview Part 4 – Tables 1. HTML Tables  Tables are defined with the tag pair.  A table is divided into rows with tag pairs. o tr stands for "table.

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.

CHAPTER 3 USING HYPERLINKS TO CONNECT CONTENT. LEARNING OBJECTIVES How to use the and anchor tag pair to create a text-based hyperlink. How to use the.

Images in HTML PowerPoint How images are used in HTML.

Using Hyper Text Markup Language to develop a Web page.

More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.

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

Designing Web Sites Using “tags” Tags are codes inserted among the text to tell the text how to behave Their format is very rigid; they always look like.

Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.

15.1 Fundamentals of HTML.

Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.

Unit 3 Day 6 FOCS – Web Design. Journal Unit #3 Entry #4 Write the source code that would make the following display on a rendered page: Shopping List.

Creating a Web Site Using 000webhost.com The 000webhost.com Site You will be required to create an account in order to use their host computer 000webhost.com.

And adding hyperlinks. MyWebpage Everything that we want in our website, including other folders, documents, xhtml files, image files, css files should.

15.1 Fundamentals of HTML DeKalb County School System.

HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

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.

15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where.

Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it.

HTML HyperText Markup Language. Text Files An array of bytes stored on disk Each element of the array is a text character A text editor is a user program.

HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.

Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.

HTML Links HTML uses a hyperlink to another document on the Web.

Images. Intro What is it? Getting your image Inserting Moving Resizing Cropping.

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

Lesson 6 Links. Creating Folders  For every web site/page, you need to create a separate folder  The computer cannot find links if they are not stored.

HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.

This shows CIS17 and the first day introduction..

KompoZer. What is it? A FREE product used to design websites A FREE product used to design websites A WYSIWYG HTML Editor A WYSIWYG HTML Editor –WYSIWYG:

Getting Started with HTML. HTML  Hyper Text Markup Language  HTML isn’t a program language, its known as a markup language  A Markup language has tags.

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.

Chapter 5 BIE2313 | Web design. ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of.

Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.

Behind every site is a mix of special languages that your web browser understands The main way of describing any website is HTML HTML stands for Hyper.

HTML HTML stands for Hyper Text Markup Language. HTML is used in making the base of a Website You can just use an online website maker like weebly.com.

Click on CIS120/17 to go to website for course. The week of will tell you what is planned for the week and what has been assigned.

Creating Web Pages with Links, Images, and Embedded Style Sheets

Web Page Design XHTML Lesson 4. Adding Structure 4 A div tag –Used to divide up a web page and to add structural meaning to the page. –Will not change.

ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.

Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.

HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.

Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines

HTML GUIDE Press F5 and then

Enhance your website.

Presenter Mindy Pistol Ext

Enhancing Your Web Site—Adding Links Web Page

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

15.1 Fundamentals of HTML 2 assignments: 1—complete the worksheet

Presentation transcript:

Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE LINKS NOTES SHEET ON 4-14 BEFORE DOING THE WEB PAGE.

Adding Links

Hyperlinks Main way to connect web pages and move throughout a web site. Uses the Anchor Tag which is a set. Must have the href add-on (Hypertext Reference) The tag will appear as

Hyperlinks Continues The text after the is the Target or Active Hyperlink & will become the color Blue and Underline. Then after Clicking on the link, it will turn Purple.

Linking to the Net Word to be linked The URL has to be the exact web site’s address including the example: Yahoo!

To make the Web Page Open in a Different Browser Window: put the add-on target=“_blank” after the url in the anchor tag. example: Yahoo! Linking to Open in a Different Browser Window

Let’s Practice Adding Links PLEASE NOTE: GOLD TEXT IS HTML CODE OR SOMETHING YOU MUST DO!

Creating a New Web Page Open a New Notepad (click File—New –from your MyImageWebPage.txt file) Click Format  check Word Wrap Save the new file as (NOTE THE FILE NAME CHANGES HERE) My4thWebPage.html & My4thWebPage.txt When finished typing NEW CODE, don’t forget to Save the Notepad and Refresh your New Browser.

Your Name Fourth Web Page This text is a link to a page on the World Wide Web. This is a link to the Henry County School System's website & it will open in a different Browser Window (Screen). Save the new Web Page & Refresh it’s Browser

Adding Links to Connect Web Pages

Linking to Pages (Files) on your Disk/Computer If the file is not in the same folder as the HTML file, the file’s location has to be exact, including the drive’s name such as a:\ or c:\ or e:\ or f:\ This is called an absolute link. To use absolute links on a desktop machine, you use the file:/// protocol. Like it goes at the beginning of the location. (Note file:/// has three slashes.) Example of using a File on your disk, computer or flash: Marquee If using a Folder’s Name: Example Marquee

Let’s Practice Linking Pages

After the last thing you typed on My4thWebPage add: I have created a link that will go to my Image Web Page Now, Save, Refresh & Click on your Link. You should now be on your Image Web Page!

When you clicked the link on My4thWebPage and it took you to MyImageWebPage, If you wanted to return to My4thWebPage you could press the BACK button OR Simply create a link! Let’s try creating a Link from the Image Page back to the 4th page. With MyImageWebPage Browser showing, Open the Notepad THAT GOES WITH IT Linking Page Practice Cont’

Make sure you’re still on MyImageWebPage After the last thing you typed add: Click here to go back to the 4th Page Save the Notepad & Refresh the Browser

Recap Activity Add the tags from the LINKS IN HTML POWERPOINT to the HTML Tag Page and save. Tell your teacher when you have completed the web page assignments from this PowerPoint. Be sure you have saved everything with the correct file names.