Enhancing Your Web Site—Adding Links Web Page

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.

Basic HTML The Magic Of Web Pages. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.

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

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.

Web Design Unit Assignment #2: Job Skills Favorite Links Page You will create a HTML web page with links to informational websites about a variety of job.

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.

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.

1 Essential HTML coding By Fadi Safieddine (Week 2)

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.

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.

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.

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

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.

What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.

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.

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.

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.

1 Creating the Header Page The header frame always displays on the AHS Web site The image (screagle.gif) that will go in the header is contained on the.

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.

Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.

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.

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.

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..

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.

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.

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

HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.

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.

Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.

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.

Let’s Try It! Open Notepad

Online PD Basic HTML The Magic Of Web Pages

Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines

Links and Comments in HTML5

HTML Coding A new language.

HTML GUIDE Press F5 and then

Uppingham Community College

Images & Hyperlinks.

A guide to HTML.

Enhance your website.

Intro to Web Development Links

More Basic HTML 2 assignments: 1—complete the worksheet

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 <a> which is a set. <a> </a> Must have the href add-on (Hypertext Reference) The tag will appear as <a href=“URL, Filename or Email Address”>

Hyperlinks Continues The text after the <a href> 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 <a href = “page’s URL”> Word to be linked </a> The URL has to be the exact web site’s address including the http:// example: <a href=”http://www.yahoo.com”> Yahoo! </a>

Linking to Open in a Different Browser Window 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: <a href=“http://www.yahoo.com” target=“_blank”> Yahoo! </a>

PLEASE NOTE: GOLD TEXT IS HTML CODE OR SOMETHING YOU MUST DO! 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.

<title> Your Name Fourth Web Page</title> </head> <html> <head> <title> Your Name Fourth Web Page</title> </head> <body bgcolor="gray" text="white"> <font size=6> This text is a <a href="http://www.yahoo.com"> link </a> to a page on the World Wide Web. <br><br> This is a link to the <a href = "http://www.henry.k12.ga.us" target=“_blank"> Henry County School System's </a> website & it will open in a different Browser Window (Screen). </body> </html> 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 http://, it goes at the beginning of the location. (Note file:/// has three slashes.) Example of using a File on your disk, computer or flash: <a href=“file:///a:\Marquee Practice.html”>Marquee</a> If using a Folder’s Name: Example <a href=“file:///a:\WebPage\Marquee Practice.html”> Marquee</a>

Let’s Practice Linking Pages

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

Linking Page Practice Cont’ 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

Save the Notepad & Refresh the Browser Make sure you’re still on MyImageWebPage After the last thing you typed add: <br> <br> <br> <font size=6> Click here to go back to the <a href ="My4thWebPage.html"> 4th Page </a> </font> 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.