Web Site Design Development Lists and Links In HTML.

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

Intro to HTML Basics HTML = Hypertext Mark-up Language HTML = Hypertext Mark-up Language HTML is a plain-text file that can be created using a text editor.
Web Development & Design Foundations with XHTML
Chapter 2 HTML Basics Key Concepts
XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.
HTML Hypertext Markup Language –First proposed by CERN in 1989 –It is non-linear so it allows you to jump from place to place –Markup refers to the structure.
1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.
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.
AdvWeb-1/12 DePaul University SNL 262 Web Page Design Lists In HTML Instructor: David A. Lash.
AdvWeb-1/17 DePaul University SNL 262 Web Page Design Lists In HTML Instructor: David A. Lash.
1 * The World Wide Web * HTML Basics Internet 1: The World Wide Web.
CS /13 DePaul University SNL 262 Advanced Web Page Design Review & Introduction - I Instructor: David A. Lash.
1 Using HTML and JavaScript to Develop Website David Lash Module 1 Getting Started.
Web Page Development Identify elements of a Web Page Start Notepad
David Lash Web Site Design Development SNL 262 Lists and Links In HTML Instructor: David A. Lash.
AdvWeb-1/12 DePaul University SNL 262 Web Page Design Starting To Use HTML Instructor: David A. Lash.
1 Web Site Design Development Lists and Links In HTML.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
AdvWeb-1/12 DePaul University SNL 262 Web Page Design Forms! - Chapt 8 Instructor: David A. Lash.
1 Web Site Design Development Lists and Links In HTML.
AdvWeb-1/15 DePaul University SNL 262 Web Page Design Links In HTML Instructor: David A. Lash.
Purpose Tags are the key to marking up content on your HTML page. It’s the tags that mark up sections of the page and are defined (aesthetically) on the.
HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
AdvWeb-1/13 DePaul University SNL 262 Web Page Design Links In HTML Instructor: David A. Lash.
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.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
HTML Revisited. Learning Goals for Today 1.To develop your personal Web page 2.To upload your Web page to UMT’s Web server so that it becomes visible.
ULI101 – XHTML Basics (Part II) What is Markup Language? XHTML vs. HTML General XHTML Rules Block Level XHTML Tags XHTML Validation.
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.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
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.
Understanding HTML Code
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
F-1 Management Information Systems for the Information Age Copyright 2004 The McGraw-Hill Companies, Inc. All rights reserved Extended Learning Module.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.
Getting Started with HTML Please use speaker notes for additional information!
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.
Web Site Design & Management Class Two. Agenda Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images.
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
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.
HTML Basics BCIS 3680 Enterprise Programming. Web Client/Server Architecture 2  Your browser (the client) requests a Web page from a remote computer.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
HTML 58.51A LINKING & LISTS Linking to local files name of destination.... anchor tag HREF attribute. This attribute identifies the location of the link.
XP 1 HTML Tutorial 2: Developing a Basic Web Site.
Web Site Design & Management Class Three February 12, 2003 Pam Scanlon.
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.
Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML Links HTML uses a hyperlink to another document on the Web.
Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems.
REEM ALMOTIRI Information Technology Department Majmaah University.
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.
Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.
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.
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.
Computer Basics Introduction CIS 109 Columbia College.
LAB Work 01 MBA 61062: E-Commerce
CS7026: Authoring for Digital Media HTML Authoring
Digging in a little deeper
Presentation transcript:

Web Site Design Development Lists and Links In HTML

What Was Covered Last Week What we will talk about 1. A little background on Internet, Web Browsers 2. Creating your first HTML Web Page - What is HTML - Basic HTML document - How to publish your basic document. 3. New paragraphs, Horizontal rule, and header. 4. Validating HTML code

Review - HTML Overview - Example Mypage Welcome to Website Design. Stuff you write here becomes your HTML document. Indicates start and end of HTML document The header section of document This title appears in the upper left hand corner of browser. Not in the body of the document Inside the … tags is the main portion of your document. Note how new lines in file are ignored in web page display (because HTML did not indicate line break)

Review - Steps To Create HTML Document & Display 1. From your PC goto S tart->run enter n otepad 2. Enter your tags and document 3. From notepad window, goto f ile->saveas 4. Enter a filename with HTML suffix (SECOND WARNING!! No spaces or caps please!). 5. Start Netscape (or IE, or Firefox). 6. From Netscape, goto f ile->open page -> choose file. (Find the file you just saved and display it!) Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

Objectives A short section on aligning text right, center and left with Creating ordered, bullet and definition lists Creating Lists within lists Creating hyperlinks Creating regular links Using relative addresses Linking addresses

Competency Objectives 1.Can center text using the tag 2.Lists - Can create a and list with attributes 3.Links: 1.Can create a link to another page outside of current web page 2.Can create a ‘relative’ link to another page within current web page Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

Using To Align Text We have seen can use to align text. Can also use... Stands for divide or division. Block element. Can create logical divisions of the text you are formatting and treat them as 1 group. It really does nothing unless you use arguments. Often use align attribute to with to adjust text to left, right or center. Note: a subtle different between using VS to align text. will give an extra line break. will not Note2: We will see again. Will see div again in various places, e.g., CSS Competency Alert: You need to know this !

Using To Align Text For example, My Home Page This is a test of center adjusted text. Of Coarse, this is a Right sample By the way I can use a align=left but I don't need it because the default is to put the text to the extreme left anyway. Still there is a difference between using paragraph and div tags. This text will be aligned right This text will be centered Text will be aligned left by default

List Management 101 HTML supports 3 different types Ordered lists - numbered, 1. Baseball 2. Hotdgs 3. Apple Pie Unordered lists - bullet lists, Baseball Hotdogs Apple Pie Definition Lists - indented lists without numbers or symbols Baseball A only played well in NY Hotdogs A substance resembling meat Apple Pie What Sara Lee now makes instead of Mom

Ordered Lists This is an ordered list: 1. This is the first element 2. This is the second line 3. This is the third line To format above use the, tags Marks the start and end of the ordered list section... - Indicates start and end of each ordered list item. Note: How do you remember these? OL – stands for Ordered List LI – stands for List Item Competency Alert: You need to know this !

Ordered Lists For example: This is the first element This is the second line This is the third line Would look like: 1. This is the first element 2. This is the second line 3. This is the third line List item has start & List is contained in &

An Ordered List Example An Ordered List Example 3. 4.Some different endings for Lord of the Rings Gollum gets the ring and defeats Saron himself! 8. 9.Frodo jumps in the lava with the ring Sauron gets the ring and there is no more middle earth

Attributes For Ordered Lists Using Type = E.g., For 1,2,3 Ordering.....… For A,B,C Ordering For a,b,c ordering For Roman Numeral (E.g, I, II, III, IV) For small Roman Numerals (E.g., i, ii, iii, iv) Competency Alert: You need to know this !

Unordered Lists Unordered Lists - These would be bullet lists, For example  This is the first element  This is the second line  This is the third line To format above use the following tags... Starts & ends the ordered list section … - Starts & ends each individual item.

Unordered Lists For example, This is the first element This is the second line This is the third line Would create the following  This is the first element  This is the second line  This is the third line List is contained in & List item has start & Competency Alert: You need to know this !

Unordered Lists Use An Attribute TYPE E.g., Creates a small disc list Solid circles Solid Squares

An Unordered List Example John Adams 3. 4.Some information about John Adams He was a moral man and was against slavery He was friends with Tom Jefferson and then bitter political enemies and then friends again He and Tomas Jefferson died on the same day!

Definition Lists  Indented lists without any numbers or symbol in front of each item Baseball A only played well in NY Hotdogs A substance resembling meat Apple Pie What Sara Lee now makes instead of Mom ... A Definition List  … A Definition Term as part of a definition list - Level 1 term  … - A Definition to Definition term - level 2 term

An Unordered Example An Ordered List Example 3. 4.A few definitions Baseball 8. A only played well in NY Hotdogs 11. A substance resembling meat 12. Apple Pie 13. What Sara Lee now makes instead of Mom

Lists Within Lists You can put lists within lists if you wish creating an outline feel for your text. 1. Baseball  White Sox  Cubs 2. Football  Bears Corresponding HTML Code: Baseball> WhiteSox Cubs Football Bears Bullet list w/I numb list Separate Bullet list 1 Major Number list Note: It greatly helps to indent to keep things straight. Competency Alert: You need to know this !

A Roman Numeral Example Attention, attention, attention: Chicago Professional Sports Teams Baseball Cubs White Sox Football Bears? (well sort-of professional) basketball Bulls? (Well that is a stretch) Again It helps to indent when using lists within lists Lists Within Lists – Things can get confusing quickly Common Problem Area! People seem to forget this

HTML Hyperlinks Hyperlinks are the means which HTML lets you branch from 1 file to another. You can link to any file, that includes but not limited to: wav files, picture files (gif, jpg, etc), powerpoint files, Xls (excel files) html files. Or even a link to preaddressed letter (mailto:

Anatomy of a Hyperlink HTML hyperlinks have the following format: Click Here Anchor tag can be used for links HREF attribute specifies Internet address of file to link to The “clickable text” Home Page Clickable text displayed on page Page to load when link is clicked Competency Alert: You need to know this !

A Link Example RivaStudio 2. 3.You can visit this course at the Indelible Website 4.YOu can also see lots of Disney Stuff at the w3school website

Note A common link problem Sometimes, people forget the in an absolute address... Home Page DON’T DO THIS. It will look for a file called in the current directory structure (which of coarse will not be there) Common Problem Area! People seem to forget this

Linking to non-HTML Files Linking to non-html files if no different than linking to HTML files 1. DePaul Link 2. The picture can be found at this link 5. 6.

Specify links that are portable Specifying complete URL works well but what happens when … You need to change domain names or userids? For example, move site from to For example, suppose had a site with 3 files: myhome.html, moreinfo.html, and faq.html ) myhome.html has link to moreinfo.html and faq.html moreinfo.html and faq.html each link back to myhome.html [public_html] myhome.html moreinfo.html faq.html

Specify links that are portable If change domain name would have to change 2 lines in myhome.html and 1 each in moreinfo.html and faq.html. more info Frequently Asked Questions This document contains more information. Here is lots of stuff … Go back home click for home. Frequently asked questions... Go back home click for home. faq.html myhome.html moreinfo.html All 4 links in 3 different files must change if I move my site.

Soln: Use relative Internet addresses Absolute addresses – Specify the complete address of the file to link to: E.g., The file is here Relative Address – Specify just file name (relative to current site.) E.g., The file is here file.html So can now move directories w/o link changes … Note leave off and domain name Competency Alert: You need to know this !

So Use Relative Addresses So these pages can change directories or domains w/o changes moreinfo.html more info faq.html Frequently Asked Questions This document contains more information. Here is lots of stuff … Go back home myhome..html click for home. Frequently asked questions... Go back home click for home.myhome..html faq.html myhome.html moreinfo.html

Using Relative Links So relative links work well when file to connect to are in the same directories … But how to link from myfile.html to hw.html? [public_html] index.html \ myfile.html \ \ [homework] hw.html index.html and myfile.html are in public_html hw.html is in homework Note: Link from index.html to myfile.html: my personal file

Using Relative Links between directories... How link from myfile.html to hw.html? [public_html] index.html \ myfile.html \ \ [homework] hw.html Precede the file to link to by a forward slash (‘/’) and directory name: my homework index.html and myfile.html are in public_html hw.html is in homework Link to this file that is in this directory Note: the forward slash is used on both UNIX a MircoSoft web servers Competency Alert: You need to know this !

Linking up … to the parent directory To link to file in a parent directory (a directory above your current): Use.. to access the parent directory. E.g., [public_html] index.html \ \ [homework] hw.html Link from hw.html to back index.html: my home page index.html is in public_html hw.html is in homework Go u p 1 level to parent Get this file in parent directory

Relative Link Examples... Assume the following file structure [public_html] index.html / \ [labs] [homework] lab1.html hw1.html hw2.html What is the URL of hw2.html if web server How would you link from hw2.html to lab1.html? How would you link from hw2.html to index.html? Lab1.html is in “labs” hw1.html and hw2.html is in homework Lab1 Competency Alert: You need to know this !

Objectives A short section on aligning text right, center and left with Creating ordered, bullet and definition lists Creating Lists within lists Creating hyperlinks Creating regular links Using relative addresses Linking addresses

Linking to a pre-addressed A Link that when clicked, opens a page automatically to a pre-addressed mail form General Format: Click here For example: me! address Text to display Note: This construct is not often used in on Web sites. Why? It opens to a window using the users defined default client. If the user’s definition is wrong, no gets sent!

Summary A short section on aligning text right, center and left with Creating ordered, bullet and definition lists Creating Lists within lists Creating hyperlinks Creating regular links Using relative addresses Linking addresses

A Hyperlink Review... What file does each of the following load? 1. Click Here 2. pick one of these out 3. home. 4. Here are the results 5. The boys

Lab 2 - Hands-on Exercise

One Possible Solution A few of my favorite things 3. 4.Top three things Frodo should have done with the ring Not taken it from Bilbo 8. 9.Sold it on e-bay Bury it back in the lake After all it was there for hundreds of years I don't think Sauron could swim since he was a fireball

Lab 2 – b Create an HTML page that looks like: Put link to each homework And lab work for course. When click link automatically open your completed lab. You will need to continue to add to this page to link in each assignment as you finish it.