Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.

Slides:

Advertisements

Similar presentations

HTML 4 Hypertext Markup Language Tables, Lists & Links Science & Art Multimedia.

Advertisements

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

Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.

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

HTML & XHTML Web Publishing. What is HTML? HTML- Hypertext Markup Language ▫Start with text on your page & add special tags ▫These specific tags produce.

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.

CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.

CIS101 Introduction to Computing

27 September. Thursday’s Current Event: Follow Up Lands End Already offers VoIP eBay to purchase Skype Connect buyers and sellers Google Offers instant.

Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems

HTML Introduction HTML

Internet Publishing / Dreamweaver Luke E. Reese CARRS

Lecture 13. A Very Brief Introduction to HTML and XHTML, part II Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell.

ETT 229 Fall 2004 Web Design Basics III. Agenda 11:00-11:05 – Quiz 15 11:05-11:40 – Web Design Lecture 11:40-12:15 – Web Design Practice 3.

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by Caroline Hallam September 9, 2014.

Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.

CPSC 203 Introduction to Computers Lab 33 By Jie Gao.

Intro to MIS – MGS351 Building a Webpage. Chapter Overview m The World Wide Web – Web servers, Web browsers and Web pages m HTML Introduction m Using.

Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.

INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.

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.

IT Introduction to Website Development Welcome!

HTML Essentials HyperText. Why HyperText ? Hypertext is text or pictures which reference other pages which the reader can immediately access Hypertext.

CPSC203 Introduction to Computers Lab 69 By Jie Gao.

XHTML Introductory1 Linking and Publishing Basic Web Pages Chapter 3.

.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.

Tutorial #2 Creating Links. Tutorial #1 Review Basic Page (DOCTYPE, HTML, Head, Title, Body) Tags Structure( ),,,,,, Nested Tags content Tag Attributes.

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.

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.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 4: Creating Hyperlinks Kelly L.

Website Development & Management Creating Web Pages CIT Fall Instructor: John Seydel, Ph.D.

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.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Formatting Text and Lists Essentials for.

Developing a Web Site. Web Site Navigational Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating.

 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.

 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:

WEB DESIGN UNIT 2 Unit 2 Module 2-5. WHAT HAVE YOU LEARNED?  What is the title tag do? Where does it show?  What are the tags that need to be on every.

CM143Web Week 8 Review of Assignment 1 Revision & Elaboration.

1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.

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.

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.

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

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.

CIS133: Internet Development Week 2. Agenda  Homework Review  MYSCC  FTP  HTML Code  In-class  Lab / Homework.

HTML 58.51A LINKING & LISTS Linking to local files name of destination.... anchor tag HREF attribute. This attribute identifies the location of the link.

Tutorial 2 Developing a Web Site. XP Objectives Learn how to storyboard various Web site structures Create links among documents in a Web site Understand.

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

Web Site Design & Management Class Three February 12, 2003 Pam Scanlon.

Web Site Design & Management Class One Agenda Attendance Questionnaire Introductions Class Policies About the class Code your first page FTP Assignments.

Web Design Mr. Briggs’ Classes September 6-7, 2011.

Web Foundations THURSDAY, SEPTEMBER 26, 2013 LECTURE 2: WORKING WITH HTML FILES, HTML BASICS, LINKING.

CSCI N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Navigation, Links & Images.

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.

Introduction to HTML UWWD. Agenda What do you need? What do you need? What are HTML, CSS, and tags? What are HTML, CSS, and tags? html, head, and body.

Internet Publishing / Dreamweaver Luke E. Reese Biosystems & Ag. Engr. / CARRS

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2- part 2 Key Concepts 1 Copyright © Terry Felke-Morris.

HTML Review * is used as a reference for most of the notes in this powerpoint.

`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.

Web Design – Week 2 Introduction to website basics Website basics: How the Web Works Client / server architecture Packet switching URL components.

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.

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.

CSE 102 Introduction to Web Design and Programming

Hyperlinks, Images and Tables

Hyperlinks, Images and Tables

COMS 161 Introduction to Computing

Presentation transcript:

Web Site Design & Management Class Two

Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images Assign Next Week’s Homework

Setup Setup your computer –Notepad, ftp Log in to FTP Make a folder in your homework/class01 folder named fixed Make another folder in your “root” directory named inclass, put a folder in that named class02 Let me know when you are done and I’ll check it off.

Homework tips naming conventions –firstpage.html or first-page.html Missing tags don't always make it "render" wrong. Why and why should you care?

Homework tips Stuff outside of tag. –All things visible on the "canvas area" of the browser should be encased in the body element To rename a file or folder –Select, rename (F2 or right-click)

Homework Tips Remember to close your preview your file. This will help you find your errors Open and close tags properly. –Start and close at the same time What did I do? Forbidden listing

Home Page No home page, and you’ll see either –Forbidden or –A directory listing.directory listing Home page is named –index.html (most of the time) –default.htm (Microsoft server. We’re not using this)

FIX Stuff: See your assignment Fix the file(s) folders and upload it with the proper name to the “fixed” folder in homework/class01

Lists Unordered Lists Ordered Lists Nested Lists

Unordered Lists Unordered Lists resemble bullet lists. The … tags encase list items. The... tag creates items with a default bullet type of disc.

Unordered Lists Kick Off … The … tags encase list items.

Unordered Lists Kick Off Field Goal Extra Point Punt The tag creates list items.

Ordered Lists Ordered Lists use a ranking principle. The … tags encase list items. The... tag creates items with a default decimal ordering.

Ordered Lists Arsenic and Old Lace

Ordered List: type Attribute The type attributes changes the ordering. Available types are: 1 (Decimal: default) A (Uppercase) a (Lowercase) I (Uppercase Roman) i (Lowercase Roman) type can be used with the or tags.

Nested Lists Unordered lists can be placed inside ordered lists.

Nested Lists Unordered lists can be placed inside definition lists.

links Puts the “link” in hyperlink Gets you from one place to another!! Make a simple link from the class index page to your home page.

Links By default, all links are underlined. IE uses blue for unvisited links, green for visited. Netscape uses blue for unvisited links, purple for visited.

The http Protocol stands for HyperText Transfer Protocol. This protocol is commonly used for web pages.

Links Prentice Hall The … tags are used to encase a link.

Absolute Links An absolute link contains the full URL of the page: For example, Ebay, an auction site

Relative Links A relative link can be used if the page is in the user’s directory. For example, Trout Recipes

The mailto Link joe You can also specify the subject line by writing joe

Don’t get lazy NOTE: If you have a properly designed site structure, you should be able to use relative links for everything except external pages. DO NOT GET LAZY and use absolute links when you don’t need to.

Anchor Links A fragment is a link within a page. The tag creates a anchor link: Question 1 The tag accesses a fragment: Question 1 Our class website uses Anchor Links