Link and Table in HTML. Statistics HTML review The two faces of a HTML file In a notepad program. In a internet browser program. The function of HTML.

Slides:

Advertisements

Similar presentations

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

Advertisements

Chapter 3 – Web Design Tables & Page Layout

HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>

Creating basic HTML web pages R. Chris Fraley |

HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Web Site Development Test 2 Working in DreamWeaver.

Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.

16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.

V Summer workshop in Guildford County, July, 2014.

Design, Formatting, CSS, & Colors 27 February, 2011.

Design, Formatting, CSS, & Colors September 9, 2010.

CIS101 Introduction to Computing HTML Project Two.

Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.

ETT 429 Spring 2007 Web Design I.

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

Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.

Web Page Creation Part II ST: Introduction to Web Interface Design Prof. Angela Guercio.

HTML Basics What is HTML? Basic Tags Fonts Colors Pictures Links Lists Tables Frames Good Sites.

Website design Feng Zhao College of Educatioin California State University, Northridge.

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.

CSI315CSI315 Building Web Sites. What is a website A website is just a bunch of web pages connected together with something called a link. In HTML there.

XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives  Describe the uses of frames in a Web site  Lay out frames within a browser window.

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.

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.

Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.

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

WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.

CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.

 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.

Website Development with Dreamweaver

1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.

Unit 1 — HTML BASICS Lesson 2 — HTML Organization Techniques.

XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.

G053 Lecture 12 Introduction To HTML Mr C Johnston ICT Teacher

Review session for Web development. Time line of the internet history When was the ARPANET first demostrated? When did the NFSNet replace it? When did.

Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,

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

CO1552 – Web Application Development Linking Pages - The Basis of the Web.

HTML tags Some popular ones. Paragraph: separated by a single line of white space Line break NOTE: no end tag is used for this tag Headlines ( through.

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.

Creating Links. The Anchor Element: The anchor tag can be used in three different ways: 1.External link – to link to a web page outside your own website.

1 Review of HTML Elements. 2 The tag These tags are marked as comments in HTML. Any text between these two comment tags will.

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.

Tutorial 3 Adding and Formatting Text with CSS Styles.

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

Paper 3 Unit 15 – Web Authoring Software Choices Graphics Exporting Graphics Creating CSS RGB Colour CSS – Body, Table and TD Border Collapse Tables -

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.

Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.

Spiderman ©Marvel Comics Creating Web Pages (part 1)

1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.

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

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring

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

NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.

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

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.

XP Dreamweaver MX 2004 Tutorial 3 1 Adding and Formatting Text.

Review session for Web development. Today’s class Review the web designing. Filling out instructor evaluation form.

G053 Lecture 12 Introduction To HTML Mr C Johnston ICT Teacher

Lecture 3 Sarsenova Zhibek.

Cascading Style Sheets

HTML Basics and CSS style

Dreamweaver Basics.

Lesson 2 — HTML Organization Techniques

Presentation transcript:

Link and Table in HTML

Statistics

HTML review The two faces of a HTML file In a notepad program. In a internet browser program. The function of HTML tags. Tags are specific commands that tell the browser how to format text. Using WYSIWYG (Dreamweaver) to edit HTML file is just like using MS-Word

Cascading Style Sheets HTML tags only have limited format. Cascading style sheets control the structure and style of the web page. Dreamweaver provides very convenient user interface to deal with the CSS.

Separation of Content and Presentation Content Use tags like,,, or to indicate the structure of your pages Presentation Use a CSS style sheet to determine how the tags are formatted Advantage of separation Changing the formatting only requires editing the style sheet

What is a Hyperlink? Hyperlinks (also called “links”) are references in an HTML file that allow a user to connect to a different URL Hyperlinks are the magic behind the WWW - they transport you to a different world Michigan State University You may link to any page you wish!

Hyperlinks in HTML Code Text for link Opening Tag Tag Attribute: URL Closing Tag Link text href = “Hyper Text Reference ”

Hyperlinks in Action Welcome to Lyman Briggs School. Lyman Briggs School is a residential science program. What it will look like: Welcome to Lyman Briggs School. Lyman Briggs School is a residential science program.

Absolute vs Relative links Use an absolute (sometimes called remote) link when linking to other sites Absolute links use full URL Use a relative (or sometimes called local) link when linking between pages on the same web site Relative links refer only to the relative path and filename.

Create a link in Dreamweaver Highlight the text you want to make a link. In the right click menu: “make link”. Browse file to make a relative link. Or typing in URL to make an absolute link.

Customize your link Make your link outstanding: when mouse move over the link, it changes color. Edit the CSS style sheet to customize your link. The “a” tag should be customized.

Change the style of HTML Link Tag a:link – Customizes the style of a link that has not been visited recently a:visited -- Customizes the style of a link that has been recently visited a:hover -- Customizes the style of a link while the user’s mouse is over it.

Color Control Codes Computer monitors combine Red, Green and Blue (RGB) in various amounts Hexadecimal codes tell the computer how much Red, Green and Blue to display Red: FF0000 Green:00FF00 Blue: 0000FF Other colors? Combinations! Yellow = FFFF00 White: FFFFFF Black: Approximately 17 million combinations.

Adding link If you want to do it by adding HTML code. contact us! If you want do it in dreamweaver: Menu: Insert-> link

Anchor links Anchors are like bookmarks, when you want to jump to a specific position of a long HTML files. Create a named anchor. Menu: Insert-> Named anchor Jumping to the anchor within the same document. #AnchorName Jumping to the anchor in a different page. Page URL + #AnchorName

Targeting your links You can either open the linked page in the same window or in a “pop-up” window. In dreamweaver you can set the link to a target window. _self – open in the same window (default) _blank – open in a pop-up window.

Question In MS-Word, how do you arrange complex layout? (Do you remember how you did the resume assignment?) Answer: Tables with invisible borders. In HTML we can also use tables with invisible borders to control the layout.

Tables in HTML Tables are incredibly difficult to hand code. Why? Each cell needs a tag, each row needs a tag, and the outer table needs a tag. Use dreamweaver to insert and edit table.

Why Tables? CONTROL! Tables allow you to control where items appear on pages. LBS Homepage is all tables (without borders)

Inserting Tables in Macromedia DreamWeaver Menu: Insert->Table Determining rows, columns, cell padding, and cell borders. (Note: when cell borders are set to zero, table is invisible.) Table can be nested into another table. Fine tuning the size of each cell. Done

A Word about Frames Frames are also used to control layout Each cell is a separate window Frames are BAD! because they are user-UN-friendly

Extra material Downloading the Macromedia Dreamweaver tutorial file from the lecture notes page. Home work: Read Page for Cascading style sheets. We have only focused on the external style sheet.