UNIT 2. Creating Web Pages with Links, Images, and Formatted Text
|
|
- Cori Conley
- 5 years ago
- Views:
Transcription
1 UNIT 2 Creating Web Pages with Links, Images, and Formatted Text
2 DAY 1 Types of Links!
3 LESSON LEARNING TARGETS I can describe hyperlink elements and their associated terms. I can describe the different types of link locations. I can describe the paths needed for absolute and relative paths.
4 Project Overview: Plant World Web Site
5 5 Plant World Home Page Project 3: Creating Web Pages with Links, Images, and Formatted Text
6 Desert Plant Page
7 Desert Plant Page (continued)
8 Using Links on a Web Page
9 HYPERLINK ELEMENTS Hyperlink (or Link) Text, images, animations, or other Web page elements that you click to tell the browser to go to a different location in the page, to a new page, or a new Web site Used to navigate within, around, and between Web sites
10 HYPERLINK ELEMENTS Hyperlink (or Link ) Can link to graphics, sound, video, programs, etc. Text and graphics - the most common types of links used in a Web page
11 HYPERLINK ELEMENTS Hyperlink (or Link) Usually, when moving the mouse over a link: Pointer changes from arrow to pointing hand symbol URL of linked file is displayed on the bottom status bar of the browser
12 HYPERLINK ELEMENTS Hyperlink (or Link) When creating a link on a page avoid generic phrases like Click here use descriptive phrases indicating the purpose of the link
13 HYPERLINK ELEMENTS Hyperlink (or Link) Typical Color Schemes for Text Links Normal (unvisited) link: blue underlined Visited link: purple underlined Active (currently selected) link: underlined; color varies (usually red) Same color scheme applies to the borders of image links (if borders are being displayed)
14 HYPERLINK ELEMENTS Hyperlink (or Link) Colors for links can be set in browser Example: Internet Explorer using the Tools Menu
15 HYPERLINK ELEMENTS Hyperlink (or Link) Colors for links can also be manually set to override browser defaults: In <body> tag: <body link= color1 vlink= color2 alink= color3 > Note: color is any designated color (hexadecimal) code or predefined constant
16 Attribute Function link = In body tag Controls color of normal, unvisited link Default is usually blue vlink = In body tag Controls color of link that has been visited/clicked Default is usually purple alink = In body tag Controls color of link immediately after mouse clicks the hyper link Default color is red
17 TYPES OF LINK LOCATIONS Linking to Another Page within the Same Web Site Allows a user to move from one page to another within a Web site with multiple pages
18 Plant World Home Page Desert Plants Page Project 3: Creating Web Pages with Links, Images, and Formatted Text
19 TYPES OF LINK LOCATIONS Linking to a Web Page in Another Web Site A most important aspect of the Web! Allows users to connect to other Web pages with related information Allows the Web to be an interconnected resource
20 Home Page from Another Web Site Desert Plants Page
21 TYPES OF LINK LOCATIONS Linking within a Web Page Allows users to move quickly from one section of the Web page to another Especially important for Web pages that are long and require visitor to scroll down to see all of its content Often will appear in a menu of links at top of page
22 Project 3: Creating Web Pages with Links, Images, and Formatted Text Desert Plants Page
23 Linking to an Address Called an Link TYPES OF LINK LOCATIONS Allows users an opportunity to contact someone at the company for questions or more information
24 TYPES OF LINK LOCATIONS Linking to an Address Usually found on the home page, but often on other pages as well Automatically opens a blank new message, with contact address filled in; may also indicate the subject automatically
25 Plant World Home Page
26 PATHS OF LINKS ON A WEB PAGE Files and Folder Structure For smaller Web sites, it is easiest to keep all files related to the Web site within the same folder (image and HTML files)
27 PATHS OF LINKS ON A WEB PAGE Files and Folder Structure For larger Web sites, it is common to separate HTML code files in one folder, and graphical images into another sometimes, even large sections of Web pages will be kept in separate folders
28 PATHS OF LINKS ON A WEB PAGE Files and Folder Structure Problem: How to access files in various folders when all the files are not in the same folder??
29 Path: PATHS OF LINKS ON A WEB PAGE describes the location (folder or external Web site) where the files can be found lists the folders and subfolders in which the file resides Example: a:\proj3files\images\picture.jpg
30 PATHS OF LINKS ON A WEB PAGE Absolute Link Specifies the exact address for the file to which you are linking or displaying a graphic Starts with the root directory and lists all the subdirectories it takes to get to the file Example: a:\proj3files\images\picture.jpg
31 PATHS OF LINKS ON A WEB PAGE Absolute Link Advantage: you will always find the file you want, provided the path is correct Disadvantages: cumbersome to use and type in need to manually change all absolute links when a file is moved to a different folder or a different Web site server Example: Uploading a Web site
32 PATHS OF LINKS ON A WEB PAGE Relative Link Specifies the location of a file relative to the location of the file that is currently in use Doesn t take you back to the root directory, but starts specifying location based on where you are right now Uses double period (..) to move up or down the folder structure Example:..\images\picture.jpg
33 Relative Link Advantage: allows for flexibility PATHS OF LINKS ON A WEB PAGE if the root folder must change for some reason, you will not have to change all the links Example: Uploading a Web site Disadvantages: exact path may not be easily known Bottom line: use relative links whenever possible!
34 Creating the Plant World Home Page
35 SKELETON Type normal starting HTML tags into Notepad: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN xhtml1-transitional.dtd >
36 Type: <html> SKELETON <head> <title>plant World Home Page</title> </head> <body> </body> </html>
37
38 SAVING YOUR FILE Save your HTML document as: plantworld.htm Be sure to save in the a:\proj2files folder! View the file in your browser Should be blank except for title bar!
39 ADDING AN IMAGE Using a company logo on a Web site helps users to more readily relate to the Web site Type (after the <body> tag) <img src="plantworldlg.jpg width="720 height="84 alt="plant World logo" />
40
41 HOMEWORK Worksheet 2A Experiment Can you add your own images?!?!?!
42
43 DAY 2 Changing Fonts, Background IMAGES, and Hyperlinks!
44 LESSON LEARNING TARGETS I can use the <font> tag to format text. I can add a background image to a Web page. I can use the <a> tag to create links between Web pages and with an link.
45 Text and Background Attributes
46 CHANGING TEXT FONT ATTRIBUTES Font Attributes Any text (paragraphs, headings, etc.) can be formatted using: different colors different font faces different sizes
47 Font Attributes Uses the Font tag: CHANGING TEXT FONT ATTRIBUTES <font> and </font> often used as a nested tag (i.e. used within another tag, such as a heading tag or a paragraph tag)
48 Attribute Function color = Changes the font color Inside quotations is a 6-digit color code OR color name face = Changes the font face or type Inside quotations is font name (Arial, Verdana, etc) If no font default font is used size = Changes the font size Inside quotations is a number that represents font size Value can be font size: 1(smallest) to 7 (largest) Value also be relative compared to previous cont +2 = 2 sizes bigger than preset font -3 = 3 sizes smaller than preset font
49 ADDING A LEFT-ALIGNED HEADING WITH A FONT COLOR After image tag, type: <h1><font color="#000066">welcome to Plant World!</font></h1> Notice: Nested tags A set of tags inside of other tags Must be closed in the opposite order they were started!
50
51 ENTERING A PARAGRAPH OF TEXT After the heading tag, type: <p>for the finest in indoor and outdoor plants, come to Plant World! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard.</p>
52
53 CHANGING FONT ATTRIBUTES To change the (actual) size of part of the text, insert the colored code: <p>for the finest in indoor and outdoor plants, come to <font size= 5 >Plant World</font>! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard.</p>
54 CHANGING FONT ATTRIBUTES To change the color of part of the text, insert the colored code: <p>for the finest in indoor and outdoor plants, come to <font size= 5 color= #FF3118 >Plant World</font>! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard.</p>
55 CHANGING FONT ATTRIBUTES To change the font face of part of the text, insert the colored code: <p>for the finest in indoor and outdoor plants, come to <font size= 5 color= #FF3118 face= Comic Sans MS >Plant World</font>! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard.</p>
56 CHANGING FONT ATTRIBUTES To change the (relative) size of part of the text, insert the colored code: <p>for the finest in indoor and outdoor plants, come to <font size= 5 color= #FF3118 face= Comic Sans MS >Plant World</font>! Plant World is the premier nursery for all of your planting needs. Our <font size= +2 > professional landscape </font> design artists can visit your home and make recommendations for plants to use in your home or your yard.</p>
57 CREATING UNORDERED (BULLETED) LISTS After the paragraph, enter the code to produce the unordered list at the left; use <h2> for the headings
58
59 BACKGROUND ATTRIBUTES Recall: Background Color Attribute bgcolor=... Sets the Web page s background color Use either 6-digit hexadecimal code for color Name of one of the standard 16 colors Used in the <body> tag
60 BACKGROUND ATTRIBUTES Background Images Used to set the Web page s background as an image, not just a color background= imagefile.jpg Also used in the <body> tag
61 ADDING A BACKGROUND IMAGE In the Body tag, add the following <body background= greyback.jpg >
62
63 Creating Hyperlinks
64 CREATING HYPERLINKS Anchor Tag Used to create links in a Web page <a> and </a> Tag Function End Tag <a> Creates anchors for links to Another page in the same web site A location within the same web page A page in an external web site For links </a>
65 CREATING HYPERLINKS Anchor Tag General Format: <a href= URL >LinkText</a> href: hypertext reference URL: the location of the linked page or file LinkText: the clickable word or phrase that appears on the Web page should be descriptive word or phrase, such as the name of the content, or could be actual URL
66 <a> Tag Attributes Attribute Function href = Specifies the URL of the linked page name = Gives name so the link may be the target or destination of another link Each anchor must have its own unique name type = Specifies the type of file of the linked document Examples: Text html, css, or javascript Image jpg Video quicktime Application java
67 ADDING A TEXT LINK TO ANOTHER WEB PAGE WITHIN THE SAME WEB SITE Immediately after the second unordered list, type: <p>to learn more about the Plant World products and services, please browse the Plant World Web site. You can find information on all types of plants, both for indoor and outdoor use. You also can learn about this month's featured desert plants, which have a natural beauty that can enhance any Southwest landscape!</p>
68 ADDING A TEXT LINK TO ANOTHER WEB PAGE WITHIN THE SAME WEB SITE Insert the following code directly before and after desert plants in the last sentence of the paragraph: <a href="desertplants.htm">desert plants</a>
69
70 USING LINKS Links General Format: <a href= > LinkText</a> mailto: indicates an link automatically opens a new message in the default program inserts the contact address into the can also be given a subject line for the message
71 ADDING AN LINK After the last paragraph, type <p>have a question or comment? Call us at (206) 555-PLANT or us at plantworld@isp.com. </p>
72 ADDING AN LINK Type right before and after the address: <a </a>.
73
74 Save your HTML document as: SAVING AND PRINTING AN HTML FILE plantworld.htm Be sure to save in the Proj2Files folder! 74 Print the file using the File menu
75 VIEWING A WEB PAGE Open the file in your Web browser: View the Web page to be sure all the elements appear as desired
76 76 VIEWING A WEB PAGE Project 3: Creating Web Pages with Links, Images, and Formatted Text
77 TESTING LINKS IN A WEB PAGE Test the links to verify that they work correctly: Point to the link, plantworld@isp.com Click plantworld@isp.com Click the Close button in the New Message window Click desert plants link
78 78 DESERT PAGE NOT CURRENTLY THERE! Go to my classroom Website download the deserts.htm file Make sure to save it in the Proj2Files folder with the current homepage file!
79 The Desert Plants Web Page should open when you click on the link in the home page
80 Worksheet 2B HOMEWORK
Creating Web Pages with Links, Images, and Embedded Style Sheets
HTML 3 Creating Web Pages with Links, Images, and Embedded Style Sheets Objectives You will have mastered the material in this chapter when you can: Describe linking terms and definitions Create a home
More informationUnit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4
Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered
More information1. The SIZE attribute can be used in which of the following elements? a. FONT b. IFRAME c. SPAN d. STYLE Answer: a Page 86
Name Date Final Exam Prep Questions Worksheet #3 1. The SIZE attribute can be used in which of the following elements? a. FONT b. IFRAME c. SPAN d. STYLE Answer: a Page 86 2. Which of the following is
More informationHTML. Hypertext Markup Language. Code used to create web pages
Chapter 4 Web 135 HTML Hypertext Markup Language Code used to create web pages HTML Tags Two angle brackets For example: calhoun High Tells web browser ho to display page contents Enter with
More informationLesson 5 Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes
More informationintroduction to XHTML
introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationFundamentals of Web Technologies. Agenda: HTML Links 5/22/2017. HTML Links - Hyperlinks HTML Lists
ITU 07204: Fundamentals of Web Technologies Lecture 6: HTML Links & Lists Dr. Lupiana, D FCIM, Institute of Finance Management Semester 2 Agenda: HTML Links - Hyperlinks HTML Lists 2 HTML Links A hyperlink
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationFundamentals of Website Development
Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science Chapter 6: Adding Links Making Links to External Pages Making Links to Internal Pages Linking to a Specific Point
More informationLESSON LEARNING TARGETS
DAY 3 Frames LESSON LEARNING TARGETS I can describe the attributes of the tag. I can write code to create frames for displaying Web pages with headings, menus, and other content using the
More informationA HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension
HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called
More informationCreating A Web Page. Computer Concepts I and II. Sue Norris
Creating A Web Page Computer Concepts I and II Sue Norris Agenda What is HTML HTML and XHTML Tags Required HTML and XHTML Tags Using Notepad to Create a Simple Web Page Viewing Your Web Page in a Browser
More information(Refer Slide Time: 01:41) (Refer Slide Time: 01:42)
Internet Technology Prof. Indranil Sengupta Department of Computer Science and Engineering Indian Institute of Technology, Kharagpur Lecture No #14 HTML -Part II We continue with our discussion on html.
More informationrecall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)
HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its
More informationCOMSC-031 Web Site Development- Part 2. Part-Time Instructor: Joenil Mistal
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal Chapter 7 7 Creating Hyperlinks Links, also called hyperlinks, are used to connected related information. Using Dreamweaver, you
More informationHTML OBJECTIVES WHAT IS HTML? BY FAITH BRENNER AN INTRODUCTION
HTML AN INTRODUCTION BY FAITH BRENNER 1 OBJECTIVES BY THE END OF THIS LESSON YOU WILL: UNDERSTAND HTML BASICS AND WHAT YOU CAN DO WITH IT BE ABLE TO USE BASIC HTML TAGS BE ABLE TO USE SOME BASIC FORMATTING
More informationHtml basics Course Outline
Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and
More information< building websites with dreamweaver mx >
< building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
More informationObjective % Select and utilize tools to design and develop websites.
Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret
More informationCSC 121 Computers and Scientific Thinking
CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language
More informationCSCE 101. Creating Web Pages with HTML5 Applying style with CSS
CSCE 101 Creating Web Pages with HTML5 Applying style with CSS Table of Contents Introduction... 1 Required HTML Tags... 1 Comments... 2 The Heading Tags... 2 The Paragraph Tag... 2 The Break Tag... 3
More informationEDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9
EDITOR GUIDE Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 1 Button Functions: Button Function Display the page content as HTML. Save Preview
More informationBasic HTML. Lecture 14. Robb T. Koether. Hampden-Sydney College. Wed, Feb 20, 2013
Basic HTML Lecture 14 Robb T. Koether Hampden-Sydney College Wed, Feb 20, 2013 Robb T. Koether (Hampden-Sydney College) Basic HTML Wed, Feb 20, 2013 1 / 26 1 HTML 2 HTML File Structure 3 HTML Elements
More information4 HTML Basics YOU WILL LEARN TO WHY IT MATTERS... CHAPTER
CHAPTER 4 HTML Basics YOU WILL LEARN TO 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 lists
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationBasic HTML. Lecture 14. Robb T. Koether. Hampden-Sydney College. Wed, Feb 20, 2013
Basic HTML Lecture 14 Robb T. Koether Hampden-Sydney College Wed, Feb 20, 2013 Robb T. Koether (Hampden-Sydney College) Basic HTML Wed, Feb 20, 2013 1 / 36 1 HTML 2 HTML File Structure 3 HTML Elements
More informationWeb Publishing Basics I
Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic
More informationCMT111-01/M1: HTML & Dreamweaver. Creating an HTML Document
CMT111-01/M1: HTML & Dreamweaver Bunker Hill Community College Spring 2011 Instructor: Lawrence G. Piper Creating an HTML Document 24 January 2011 Goals for Today Be sure we have essential tools text editor
More informationThe internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.
Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.
More informationFRONTPAGE STEP BY STEP GUIDE
IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationA Balanced Introduction to Computer Science, 3/E
A Balanced Introduction to Computer Science, 3/E David Reed, Creighton University 2011 Pearson Prentice Hall ISBN 978-0-13-216675-1 Chapter 2 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is
More informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More information1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5
Name Date Final Exam Prep Questions Worksheet #1 1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 2. Which of the following
More informationLecturer. Haider M. Habeeb. Second Year, First Course
University of Babylon College of Information Technology Department of Information Networks Lecturer Haider M. Habeeb Second Year, First Course 2012-2013 Understand Hypertext and Links Why did the arrival
More informationFigure 1 Properties panel, HTML mode
How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties
More information1.264 Lecture 12. HTML Introduction to FrontPage
1.264 Lecture 12 HTML Introduction to FrontPage HTML Subset of Structured Generalized Markup Language (SGML), a document description language SGML is ISO standard Current version of HTML is version 4.01
More informationAPPENDIX THE TOOLBAR. File Functions
APPENDIX THE TOOLBAR Within the WYSIWYG editor, there are a variety of functions available to the user to properly update the page. Below is a list of all the functions available. Keep in mind that the
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationTeach Yourself HTML5 & CSS 3: Week 3 Task 11 - Anchors Part 1
Teach Yourself HTML5 & CSS 3: Week 3 Task 11 - Anchors Part 1 http://www.gerrykruyer.com This week you will continue working with your brave-tin-soldier.html webpage investigating how you can alter the
More information11. HTML5 and Future Web Application
11. HTML5 and Future Web Application 1. Where to learn? http://www.w3schools.com/html/html5_intro.asp 2. Where to start: http://www.w3schools.com/html/html_intro.asp 3. easy to start with an example code
More informationCreating Web Pages with SeaMonkey Composer
1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it
More informationSkill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)
Skill Area 323: Design and Develop Website Multimedia and Web Design (MWD) 323.2 Work with Text and Hypertext (7 hrs) 323.2.1 Add headings, subheadings and body text 323.2.2 Format text according to specifications
More informationLab 4 CSS CISC1600, Spring 2012
Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive
More information<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.
CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,
More informationPart 1: HTML Language HyperText Make-up Language
Part 1: HTML Language HyperText Make-up Language 09/08/2010 1 CHAPTER I Introduction about Web Design 2 Internet and World Wide Web The Internet is the world s largest computer network The Internet is
More informationCreating a Web Presentation
LESSON 9 Creating a Web Presentation 9.1 After completing this lesson, you will be able to: Create an agenda slide or home page. Create a hyperlink to a slide. Create a Web presentation with the AutoContent
More informationHTML, XHTML, and CSS 8/21/2011. Chapter Objectives. Chapter 4. Chapter Objectives. Chapter Objectives
HTML, XHTML, and CSS Sixth Edition Chapter 4 Creating Tables in a Web Site Using an External Style Sheet Chapter Objectives Define table elements Describe the steps used to plan, design, and code a table
More informationNational Training and Education Resource. Authoring Course. Participant Guide
National Training and Education Resource Authoring Course Participant Guide Table of Contents: OBJECTIVES... 4 OVERVIEW OF NTER... 5 System Requirements... 5 NTER Capabilities... 6 What is the SCORM PlayerWhat
More informationLava New Media s CMS. Documentation Page 1
Lava New Media s CMS Documentation 5.12.2010 Page 1 Table of Contents Logging On to the Content Management System 3 Introduction to the CMS 3 What is the page tree? 4 Editing Web Pages 5 How to use the
More informationUsing Dreamweaver CS6
6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just
More informationModify cmp.htm, contactme.htm and create scheduleme.htm
GRC 175 Assignment 2 Modify cmp.htm, contactme.htm and create scheduleme.htm Tasks: 1. Setting up Dreamweaver and defining a site 2. Convert existing HTML pages into proper XHTML encoding 3. Add alt tags
More information1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites
A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
More informationHYPERTEXT MARKUP LANGUAGE ( HTML )
1 HTML BASICS MARK-UP LANGUAGES Traditionally used to provide typesetting information to printers where text should be indented, margin sizes, bold text, special font sizes and styles, etc. Word processors
More informationrequest HTML Document send HTML Document
1 HTML PROGRAMMERS GUIDE LESSON 1 File: HtmlGuideL1.pdf Date Started: Dec 14,1999 Last Update: March 15, 2003 ISBN: 0-9730824-0-2 Version: 1.0 LESSON 1 HTML PROGRAMMING FUNDAMENTALS Pre-resequites You
More informationCreating a Website with Dreamweaver 4
Creating a Website with Dreamweaver 4 What is Dreamweaver (DW)? DW is a visual web page editor that allows you to create and manage Websites and pages without having to learn HTML (Hyper Text Markup Language).
More informationCSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
More informationUsing Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles
Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format
More informationDAY 4. Coding External Style Sheets
DAY 4 Coding External Style Sheets LESSON LEARNING TARGETS I can code and apply an embedded style sheet to a Web page. I can code and apply an external style sheet to multiple Web pages. I can code and
More informationKillTest *KIJGT 3WCNKV[ $GVVGT 5GTXKEG Q&A NZZV ]]] QORRZKYZ IUS =K ULLKX LXKK [VJGZK YKX\OIK LUX UTK _KGX
KillTest Q&A Exam : 9A0-803 Title : Certified Dreamweaver 8 Developer Exam Version : DEMO 1 / 7 1. What area, in the Insert bar, is intended for customizing and organizing frequently used objects? A. Layout
More informationChapter 4. Introduction to XHTML: Part 1
Chapter 4. Introduction to XHTML: Part 1 XHTML is a markup language for identifying the elements of a page so a browser can render that page on a computer screen. Document presentation is generally separated
More informationIntro to XHTML A Tutorial for the Beginner
Intro to XHTML A Tutorial for the Beginner Presented by Sarah Dopp August 20, 2005 Supplementary Website: www.seattlepies.com For more information, contact: Sarah Dopp Website Developer sarah@sarahdopp.com
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationCS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? a. www.whitehouse.gov
More informationCreating A Website - Part 1: Web Design principles, HTML & CSS. CSS Color Values. Hexadecimal Colors. RGB Color
Notes Week 3 By: Marisa Stoolmiller CSS Color Values With CSS, colors can be specified in different ways: Color names Hexadecimal values RGB values HSL values (CSS3) HWB values (CSS4) Hexadecimal Colors
More informationDear Candidate, Thank you, Adobe Education
Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:
More informationCSS means Cascading Style Sheets. It is used to style HTML documents.
CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style
More informationAGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationDreamweaver MX Technical Support Services. Office of Information Technology, West Virginia University. OIT Help Desk ext.
Dreamweaver MX 2004 Technical Support Services Office of Information Technology, West Virginia University OIT Help Desk - 293.4444 ext.1 http://oit.wvu.edu/support/training/classmat/ Instructors: Rick
More informationUnit Four (Hyper Text Markup Language) HTML. Lesson One Create Web Pages by Using HTML
Unit Four (Hyper Text Markup Language) HTML Lesson One Create Web Pages by Using HTML After finishing this lesson the student will be able to: Identify the following basic rules to create a web page By
More informationIntroduction to Computer Science (I1100) Internet. Chapter 7
Internet Chapter 7 606 HTML 607 HTML Hypertext Markup Language (HTML) is a language for creating web pages. A web page is made up of two parts: the head and the body. The head is the first part of a web
More informationThe default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows:
CSS Tutorial Part 2: Lists: The default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows: ul { list-style-type: circle; or
More informationIntroduction to HTML. SSE 3200 Web-based Services. Michigan Technological University Nilufer Onder
Introduction to HTML SSE 3200 Web-based Services Michigan Technological University Nilufer Onder What is HTML? Acronym for: HyperText Markup Language HyperText refers to text that can initiate jumps to
More informationc122jan2714.notebook January 27, 2014
Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the
More informationDREAMWEAVER QUICK START TABLE OF CONTENT
DREAMWEAVER QUICK START TABLE OF CONTENT Web Design Review 2 Understanding the World Wide Web... 2 Web Browsers... 2 How Browsers Display Web pages... 3 The Web Process at Sacramento State... 4 Web Server
More informationUsing Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles
Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant
More informationIntroduction to. Name: Class: ~ 1 ~
Introduction to Name: Class: ~ 1 ~ Contents Introduction... 4 Internet protocols... 5 Web servers... 6 Software installed in a web server... 6 Internet protocols and client/server software... 7 Files in
More informationBasic HTML Lecture 14
Basic HTML Lecture 14 Robb T. Koether Hampden-Sydney College Fri, Feb 17, 2012 Robb T. Koether (Hampden-Sydney College) Basic HTMLLecture 14 Fri, Feb 17, 2012 1 / 25 1 HTML 2 HTML File Structure 3 Headings
More informationGlossary. advance: to move forward
Computer Computer Skills Glossary Skills Glossary advance: to move forward alignment tab: the tab in the Format Cells dialog box that allows you to choose how the data in the cells will be aligned (left,
More informationClient Interview. Interview Topics. Goals and Target Audience. Activity 3.1 Worksheet. Client Name:
Activity 3.1 Worksheet Client Interview Team Name: Date: Client Name: Interview Topics Goals and target audience Content Design requirements Delivery requirements Goals and Target Audience Identify three
More informationCS 1124 Media computation. Lab 9.3 October 24, 2008 Steve Harrison
CS 1124 Media computation Lab 9.3 October 24, 2008 Steve Harrison Today using strings to write HTML HTML From text to HTML to XML and beyond... 3 HTML is not a programming language Using HTML is called
More informationContent Management System User Training
Content Management System User Training October 14, 2010 Logging In Log in using the following URL: http://www4.gsb.columbia.edu/login Use UNI and password 2 Editing Existing Content Once logged in, navigate
More informationWeb Development & Design Foundations with HTML5 & CSS3 Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What tag pair is used to create a new paragraph? a. b. c. d. 2. What tag pair
More information1 of 7 11/12/2009 9:29 AM
1 of 7 11/12/2009 9:29 AM Home Beginner Tutorials First Website Guide HTML Tutorial CSS Tutorial XML Tutorial Web Host Guide SQL Tutorial Advanced Tutorials Javascript Tutorial PHP Tutorial MySQL Tutorial
More informationImplementing a chat button on TECHNICAL PAPER
Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook
More informationCHAPTER 2 MARKUP LANGUAGES: XHTML 1.0
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document
More informationWeb Development & Design Foundations with HTML5 & CSS3 Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What tag pair is used to create a new paragraph? a. b. c. d. 2. What tag pair
More informationThis booklet is knowledge of. a web page. of a web page find what you. you want to. SiteSell offers. Introduction
From www.basic computerskills.com/ Thank you for downloading this freee Booklet. This booklet is intended for people, who want to start out with their own web site or just want to get the basic knowledge
More informationChapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?
LATIHAN BAB 1 Chapter 1 Self Test 1. What is a web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL: http://www.mcgrawhill.com/books/ webdesign/favorites.html ://
More informationUsing CSS in Web Site Design
Question 1: What are some of the main CSS commands I should memorize? Answer 1: The most important part of understanding the CSS language is learning the basic structure and syntax so you can use the language
More informationAdobe Dreamweaver CS4
Adobe Dreamweaver CS4 About Dreamweaver Whether creating simple blog pages complex web sites, Dreamweaver provides users with a powerful set of web-design tools necessary f the task. Its userfriendly interface
More informationDreamweaver. An Introduction to editing webpages
Dreamweaver An Introduction to editing webpages Edited: 2/7/18 Salter, Sharina D Contents Session Description... 3 Overview... 3 Introduction to Dreamweaver... 3 Toolbar... 5 Getting Started... 6 Create
More informationBasics of Web Design, 3 rd Edition Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What element is used to configure a new paragraph? a. new b. paragraph c. p d. div 2. What element is used to create the largest heading? a. h1 b. h9 c. head
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
More informationHTML/XML. HTML Continued Introduction to CSS
HTML/XML HTML Continued Introduction to CSS Entities Special Characters Symbols such as +, -, %, and & are used frequently. Not all Web browsers display these symbols correctly. HTML uses a little computer
More informationFUNDAMENTALS OF WEB DESIGN (405)
Page 1 of 8 Contestant Number: Time: Rank: FUNDAMENTALS OF WEB DESIGN (405) REGIONAL 2015 Multiple Choice & Short Answer Section: Multiple Choice (20 @ 10 points each) Application (200 pts) (205 pts) TOTAL
More information