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

Slides:

Advertisements

Similar presentations

HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.

Advertisements

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

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.

LIST- HYPERLINK- IMAGES

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

ETT 429 Spring 2007 Web Design I.

Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

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

HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.

Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.

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

Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.

Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.

Chapter 2 HTML (Hypertext Markup Language) Part I.

1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.

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.

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

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.

Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.

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.

Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.

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.

Understanding HTML Code

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.

 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.

XHTML1-1 Extensible HyperText Markup Language (XHTML) Xingquan (Hill) Zhu

1 Basic HTML. 2 Part 1: Basic Web Page Production.

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.

1 Introduction to HTML Joshua S. Simon Collective Technologies.

DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.

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

Department of Information Technology Chapter 8 - Creating Hypertext links Lecturer: Ms Melinda Chung.

Getting Started with HTML Please use speaker notes for additional information!

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

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.

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

Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.

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.

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

Internet Applications Development Lecture 4 L. Obead Alhadreti.

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.

HTML(Hyper Text Markup Language) ByNaveen. Introduction HTML or Hyper Text Markup Language is the standard markup language Its used to create the web.

HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.

Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.

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.

Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems.

ECA 228 Internet/Intranet Design I HTML Tags. ECA 228 Internet/Intranet Design I anchor tags Adds a link to the web page Anything placed between the anchor.

REEM ALMOTIRI Information Technology Department Majmaah University.

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.

Hyperlink ● Anchor tag and its attributes ● Four Types of URL ─ ─ Absolute addressing ─ Relative addressing ─ Intrapage ● Attributes -- link, vlink,

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

1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.

Chapter 4 HTML Tags. HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write.

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.

HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.

Create a new stylesheet called Hotel Style

Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines

Marking Up with XHTML Tags describe how a web page should look

Hosted by Coach Slanina

COMPUTING FUNDAMENTALS

Introduction to HTML II

Hyperlinks, Images, Comments, and More…

Presentation transcript:

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

Agenda Homework Review and more……. Review Lists & Images Break In class assignment Break Discuss Readings & Links etc! Assign Next Week’s Homework

Homework Review There are issues with copied assignments. This is not acceptable. (can be a cause for academic dismissal) Most of you did extremely well Please do not go ahead unless you ask. Review FTP for those who need it.

Homework Tips Remember to close your preview your file. This will help you find your errors Open and close tags properly. Nesting – wrong – correct

Lists Unordered Lists Ordered Lists Definition Lists Combined 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.

Unordered List TYPE Attribute The TYPE attributes changes the bullet type. Available types are:  DISC (default)  CIRCLE  SQUARE TYPE can be used with the or tags.

Unordered List: TYPE Attribute

Unordered List : TYPE Attribute

Unordered List : TYPE Attribute

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.

Ordered Lists : TYPE Attribute is for aardvark …

Ordered List: START Attribute The START attribute changes the beginning value. The value must be decimal. START works with all types.

Ordered Lists: START Attribute <OL TYPE = “a” START = “4”> DINOSAUR … The list begins with “d” although the starting value is 4.

Ordered Lists: VALUE Attribute Shut the door …

Nested Ordered Lists Tie Your Shoes. Make a bow. … … The default type for all nested ordered lists is Decimal.

Definition Lists The … encase a definition list. The … define a term. The … encase a definition.

Definition Lists … The … tags encase a definition list.

Definition Lists Ice Bowl The … tags define a term.

Definition Lists The championship... The … tags contain the definition.

Nested Lists Unordered lists can be placed inside ordered lists.

Nested Lists Unordered lists can be placed inside definition lists.

Images: Introduction Image Formats:.gif,.jpg only (do not use.bmp) The Tag Images as Backgrounds Protocols The LINK, ALINK, VLINK Attributes. The Tag

GIFS vs. JPEG Images Use a Gif when it’s mostly solid colors Use a JPEG for photos and images with lots of gradations. Experiment with both so you know the difference. Make sure you optimize your images’ file size. I will delete large images from the server!

GIF Images This wood duck carving is stored in the GIF format. It requires 8K bits for storage.

JPEG Images This picture of Glacier Park uses the JPEG format. It requires 92K bits of storage.

Images The background is a grayscale GIF file. The title and Green Teal buttons are GIF files.

Images As Backgrounds <BODY BACKGROUND = “woody2Back.gif”> The BACKGROUND attribute uses an image for the backgound.

The Tag: Attributes SRC : The source file ALT : Alternate text for non-graphic browsers WIDTH : Width in pixels of image HEIGHT : Height in pixels of image BORDER : Link images have a default blue border of 1 pixel. If you want to have your image be a link with no border, you must specify border=“0”

The Tag: Final REMEMBER!!!! Changing the width and height attributes of an image tag does not change the file size of the image.

Break/In Class Assignment You will do either Case 1 on page 1.39 or Case 2 on page 1.40 I will tell you which one you will do. If you do not finish this in class you should finish it for homework.

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.

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

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

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.

Links <A HREF = “ Prentice Hall The … tags are used to encase a link.

Links Colors <BODY BGCOLOR = “white” LINK = “#FF0000” VLINK = #996666” ALINK = “#FF9966”> The link colors can be changed in the tag.

LINK, ALINK, and VLINK LINK changes the color of unvisited links. VLINK changes the color of visited links. ALINK changes the color of active links.

Absolute Links An absolute link contains the full URL of the page: For example, Prentice Hall

Relative Links A relative link can be used if the page is in the user’s directory. For example, Trout Recipes 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