LAB 4 HTML TABLES AND FORMS
|
|
|
- Baldric Dalton
- 8 years ago
- Views:
Transcription
1 LAB 4 HTML TABLES AND FORMS What You Will Learn How to create HTML tables How to style tables How to create HTML forms Approximate Time The exercises in this lab should take approximately 40 minutes to complete. Fundamentals of Web Development Randy Connolly and Ricardo Hoar Textbook by Pearson
2 2 Lab 4: HTML Tables and Forms CREATING TABLES P REPARING D IRECTORIES 1 If you haven t done so already, create a folder in your personal drive for all the labs for this book. 2 From the main labs folder (either downloaded from the textbook s web site using the code provided with the textbook or in a common location provided by your instructor), copy the folder titled lab04 to your course folder created in step one. The <table> element in HTML represents information that exists in a twodimensional grid. Tables can be used to display calendars, financial data, pricing tables, and many other types of data. Just like a real world table, an HTML table can contain any type of data: not just numbers, but text, images, forms, even other tables. E XERCISE 4.1 C REATE A B ASIC T ABLE 1 Open, examine, and test lab04 exercise01.html in browser. 2 Add the following markup to the document. <body> <table> <td>the Death of Marat</td> <td>jacques Louis David</td> <td>1793</td> <td>162cm</td> <td>128cm</td> <td>burial at Ornans</td> <td>gustave Courbet</td> <td>1849</td> <td>314cm</td> <td>663cm</td> </table> </body> The indenting shown here is purely for clarity purposes (that is, it is there to help you see the structure of the table more clearly). It is up to you whether you want to space the table markup in the same fashion. 3 Test in browser. 4 Add the following markup. <table> <th>title</th> <th>artist</th>
3 Fundamentals of Web Development 3 <th>year</th> <th>width</th> <th>height</th> <td>the Death of Marat</td>... This adds a heading row to the table. 5 Test in browser. The result should look similar to that shown in Figure 4.1. Figure 4.1 Exercise 4.1 Complete E XERCISE 4.2 C OMPLEX C ONTENT IN T ABLES 1 Open, examine, and test lab04 exercise02.html in browser. 2 Add the following content to the table. <table> <th></th> <th>work</th> <th>year</th> <th>size</th> <td><img src="images/art/05030.jpg" alt="the Death of Marat" /></td> <td><em>the Death of Marat</em><br/>Jacques Louis David</td> <td>1793</td> <td>width: 162cm<br/>Height: 128cm</td> <td><img src="images/art/10020.jpg" alt="burial at Ornans" /></td> <td><em>burial at Ornans</em><br/>Gustave Courbet</td> <td>1849</td> <td>width: 314cm<br/>Height: 663cm</td> Copyright 2014 Randy Connolly and Ricardo Hoar
4 4 Lab 4: HTML Tables and Forms <td><img src="images/art/06020.jpg" alt="betty de Rothschild" /></td> <td><em>betty de Rothschild</em><br/>Jean Auguste Ingres</td> <td>1848</td> <td>width: 142cm<br/>Height: 101cm</td> <td><img src="images/art/13030.jpg" alt="arrangement in Grey and Black" /></td> <td><em>arrangement in Grey and Black</em><br/>James Abbott Whistler</td> <td>1871</td> <td>width: 144cm<br/>Height: 162cm</td> </table> Here we are adding content to an existing table structure. Notice that some cells contain multiple HTML elements. 3 Test in browser. The result should look similar to that shown in Figure 4.2. Figure 4.2 Exercise 4.2 complete
5 Fundamentals of Web Development 5 E XERCISE 4.3 S PANNING R OWS AND C OLUMNS 1 Open, examine, and test lab04 exercise03.html in browser. 2 Add the following style to the <head> of the document and test. <style> td, th { border: solid 1pt black; </style> This will make the structure of the table more obvious. 3 Add the following two tags to the beginning of the table and test in browser. <th>artist</th> <th colspan="4">work Details</th> <td rowspan="4"> <img src="images/art/5.jpg" alt="jacques Louis David" /> <br/><strong>jacques Louis David</strong> </td> 4 Add the following element at the beginning of the table. <table> <caption>artist Inventory</caption> <th>artist</th> The caption is used to provide a title for the table, which improves accessibility. 5 Test in browser. The result should be similar to that shown in Figure 4.3. Figure 4.3 Exercise 4.3 complete Copyright 2014 Randy Connolly and Ricardo Hoar
6 6 Lab 4: HTML Tables and Forms E XERCISE 4.4 A LTERNATE T ABLE S TRUCTURE E LEMENTS 1 Open, examine, and test lab04 exercise04.html in browser. Notice that the <td> element can be used in rows and columns. 2 Add the following attributes to the table headings. <table> <caption>pricing Table</caption> <th></th> <th scope="col">free</th> <th scope="col">basic</th> <th scope="col">premium</th> <th scope="row">upload Space</th> <td>50mb</td> <td>200mb</td> <td>unlimited</td> <th scope="row">daily Uploads</th> <td>1</td> <td>10</td> <td>unlimited</td> <th scope="row">total Uploads</th> <td>20</td> <td>100</td> <td>unlimited</td> <th scope="row">social Sharing</th> <th scope="row">analytics</th> </table> This improves the accessibility of the table. 3 Add the following around the first row. <thead> <th></th> <th scope="col">free</th> <th scope="col">basic</th> <th scope="col">premium</th>
7 Fundamentals of Web Development 7 </thead> 4 Test in browser. There is no special formatting for this element; instead we can apply special styling to it. 5 Add the following element around the other table rows. <tbody> <th scope="row">upload Space</th> <td>50mb</td> <td>200mb</td> <td>unlimited</td> <th scope="row">daily Uploads</th> <td>1</td> <td>10</td> <td>unlimited</td> <th scope="row">total Uploads</th> <td>20</td> <td>100</td> <td>unlimited</td> <th scope="row">social Sharing</th> <th scope="row">analytics</th> </tbody> Like with the <thead> element, there is no preset-browser formatting associated with the <tbody> element. 6 Add the following element between the <thead> and <tbody> element. <tfoot> <th scope="row">price per year</th> <td>free</td> <td>$ 9.99</td> <td>$ 19.99</td> </tfoot> 7 Test in browser. Notice the <tfoot> appears at the end of the table but should appear in the markup before the <tbody> element. Copyright 2014 Randy Connolly and Ricardo Hoar
8 8 Lab 4: HTML Tables and Forms STYLING TABLES E XERCISE 4.5 S IMPLE T ABLE S TYLING 1 Open, examine, and test lab04 exercise05.html in browser. 2 Add the following style to the <style> element and test. table { border: solid 1pt black; 3 Change the style as follows and test. table, td { border: solid 1pt black; 4 Add the following and test. td, table { border: solid 1pt black; border collapse: collapse; 5 Add the following and test. td, table { border: solid 1pt black; border collapse: collapse; padding: 0.5em; 6 Replace the above styles with the following and test. table { font family: "Lucida Sans", Verdana, Arial, sans serif; font size: 1em; tbody { background color: #F1F1F1; td, th { padding: 0.5em; thead, tfoot { background color: #CACACA; 7 Add the following and test. caption { font size: 1.2em; font weight: bold; background color: #DCA806; padding: 0.5em;
9 Fundamentals of Web Development 9 8 Add the following styles and test. The final result should look similar to Figure 4.4. tbody tr:nth child(odd) { background color: white; This changes the background color of every other row within the <tbody> Figure 4.4 Exercise 4.5 complete E XERCISE 4.6 CSS3 T ABLE S TYLING 1 Open, examine, and test lab04 exercise06.html in browser. 2 Add the following style and test. caption { margin left: 2000px; While we want to keep the caption element for accessibility reasons, we don t, in this case, want it to be visible. Shifting it to the left off screen does that. In Chapter Five, you will learn how to do this via CSS positioning. Copyright 2014 Randy Connolly and Ricardo Hoar
10 10 Lab 4: HTML Tables and Forms 3 Add the following to the bottom two rows of the markup. <th scope="row">social Sharing</th> <td><span class="check"></span></td> <td><span class="check"></span></td> <th scope="row">analytics</th> <td><span class="yes"></span></td> 4 Add the following style and test. tbody span.yes:before { content: url(images/yes.png); The content property allows you to inject content into an element. The before or after pseudo-elements. In this case we are adding an image into the select cells. 5 Add the following style and test. tbody th { text align:right; color: #1D1626; background color: #F2E0BD; This will make the first column within the <tbody> element different from the other columns. 6 Add the following style and test. thead th:empty { background color: white; This uses the empty pseudo-element to select any empty <th> element within the <thead>. 7 Add the following style and test. tfoot th { background color: white; This
11 Fundamentals of Web Development 11 8 Add the following style and test. tfoot { color: #C74223; text shadow:1px 1px 1px black; font weight: bold; This changes every element within the <tfoot> element. 9 Change the following style and test. tfoot th { background color: white; text shadow: none; This removes the text shadow from the first cell of the footer. 10 Modify the following style and test. The result should look like that in Figure 4.5. tfoot, thead th:nth last child(1) { color: #C74223; text shadow:1px 1px 1px #000; font weight: bold; This selects the last cell in the <thead> so that it has the same styling as the footer elements. Figure 4.5 Exercise 4.6 complete Copyright 2014 Randy Connolly and Ricardo Hoar
12 12 Lab 4: HTML Tables and Forms CREATING FORMS Forms provide the user with an alternative way to interact with a web server. Up to now, clicking hyperlinks was the only mechanism available to the user for communicating with the server. Forms provide a much richer mechanism. Using a form, the user can enter text, choose items from lists, and click buttons. Typically programs running on the server will take the input from HTML forms and do something with it, such as save it in a database, interact with an external web service, or customize subsequent HTML based on that input. A form is constructed in HTML in the same manner as tables or lists: that is, using special HTML elements. E XERCISE 4.7 C REATING A F ORM 1 Open lab04 exercise07.html in text editor. 2 Add the following to the <body> of the document. <form method="get" action=""> <fieldset> <legend>details</legend> <label>title: </label> <input type="text" name="title" /> <label>country: </label> <select name="where"> <option>choose a country</option> <option>canada</option> <option>finland</option> <option>united States</option> </select> <input type="submit" /> </fieldset> </form> 3 Test in browser. E XERCISE 4.8 T ESTING A F ORM 1 Open lab04 exercise08.html in text editor. 2 Modify the <form> element as follows then test. <form method="get" action=" This sample PHP script on the book s web site simply echoes back any form data in the
13 Fundamentals of Web Development 13 request. 3 Modify the <form> element as follows then test. <form method="post" action=" FORM CONTROLS E XERCISE 4.9 T EXT C ONTROLS 1 Open and examine lab04 exercise09.html. 2 Modify the form as follows and test. <label>title: </label><br/> <input type="text" name="title" /> <label>password: </label><br/> <input type="password" name="pass" size="8"/> <label> </label><br/> <input type=" " name=" " size="45"/> <label>website: </label><br/> <input type="url" name="website" size="45"/> <label>description: </label><br/> <textarea placeholder="enter a description" rows="5" cols="45"></textarea> E XERCISE 4.10 C HOICE C ONTROLS 1 Open and examine lab04 exercise10.html. 2 Modify the form as follows and test (be sure to submit form). <label>countries: </label><br/> <select name="country"> <option>australia</option> <option>canada</option> <option>france</option> <option>sweden</option> <option>thailand</option> <option>united States</option> </select> Copyright 2014 Randy Connolly and Ricardo Hoar
14 14 Lab 4: HTML Tables and Forms <label>continent: </label><br/> <select size="4" name="continent"> <option value="na">north America</option> <option value="eu">europe</option> <option value="as">asia</option> <option value="sa">south America</option> </select> <label>city: </label><br/> <select name="city"> <optgroup label="north America"> <option>calgary</option> <option>los Angeles</option> </optgroup> <optgroup label="europe"> <option>london</option> <option>paris</option> <option>prague</option> </optgroup> </select> <label>gender of Traveler: </label><br/> <input type="radio" name="gender" value="1">female<br/> <input type="radio" name="gender" value="2">male<br/> <label>how did you hear about the site: </label><br/> <input type="checkbox" name="hear" value=" "> <br/> <input type="checkbox" name="hear" value="friend">friend<br/> <input type="checkbox" name="hear" value="website">website E XERCISE 4.11 B UTTON C ONTROLS 1 Open and examine lab04 exercise11.html. 2 Modify the form as follows and test. <input type="button" value="click Me" /> <input type="image" src="images/yes16.png" /> <input type="image" src="images/no16.png" /> <button> <a href="#"> <img src="images/yes16.png" alt=""/> Yes </a> </button> <button> <img src="images/no16.png" alt=""/>
15 Fundamentals of Web Development 15 No </button> <input type="submit" /> <input type="reset" /> E XERCISE 4.12 S PECIALIZED C ONTROLS 1 Open and examine lab04 exercise12.html. 2 Modify the form as follows and test (be sure to submit form). <label>rate this photo: </label><br/> <input type="number" min="1" max="5" name="rate" /> Happiness Rating: Grumpy <input type="range" min="0" max="10" step="1" name="happiness" /> Ecstatic <label>companion Color: </label><br/> <input type="color" name="back" /> Note: not every browser supports all of these controls. E XERCISE 4.13 D ATE AND T IME C ONTROLS 1 Open and examine lab04 exercise13.html. 2 Modify the form as follows and test (be sure to submit form). <label>date of photo: </label><br/> <input type="date" name="photodate" /> <label>time of photo: </label><br/> <input type="time" name="phototime" /> <label>date and time of photo: </label><br/> <input type="datetime" name="photodatetime" /> <label>week of photo: </label><br/> <input type="week" name="photoweek" /> Note: not every browser supports all of these controls. Copyright 2014 Randy Connolly and Ricardo Hoar
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Coding Standards for Web Development
DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as
In this chapter, you will learn how to...
LEARNING OUTCOMES In this chapter, you will learn how to... Create a table on a web page Apply attributes to format tables, table rows, and table cells Increase the accessibility of a table Style an HTML
Internet Ohjelmointi 1 Examples 4
Internet Ohjelmointi 1 Example 1 4 form 5 6 7 8 Loan Amount 9 Monthly Repayment
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE
SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:
HTML Lesson 7. Your assignment:
HTML Lesson 7 Tables are one of the biggest tools Web developers use to present data wherever they want data to go on the page. Like spreadsheets, rows go across (left to right) and columns go up and down.
CREATING WEB FORMS WEB and FORMS FRAMES AND
CREATING CREATING WEB FORMS WEB and FORMS FRAMES AND FRAMES USING Using HTML HTML Creating Web Forms and Frames 1. What is a Web Form 2. What is a CGI Script File 3. Initiating the HTML File 4. Composing
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II)
Sample Question Paper FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II) TIME : 3 Hrs MM : 80. SECTION A 1. Fill in the blanks: [10] 1.1 is the extension of an XML file. 1.2 attribute is used with
Web Application Developer s Guide for the SoundPoint IP/SoundStation IP Family
Web Application Developer s Guide for the SoundPoint IP/SoundStation IP Family SIP 3.0.2 April, 2008 Edition 1725-17693-300 Rev. A SIP 3.0.2 Trademark Information Polycom, the Polycom logo design, SoundPoint
Create a Web Page with Dreamweaver
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
HTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
AD Phonebook 2.2. Installation and configuration. Dovestones Software
AD Phonebook 2.2 Installation and configuration 1 Table of Contents Introduction... 3 AD Self Update... 3 Technical Support... 3 Prerequisites... 3 Installation... 3 Adding a service account and domain
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
How to Use the Text Editor in Blackboard
How to Use the Text Editor in Blackboard The image below is the text editor in Blackboard. No matter you add an item or discussion forum for your course as an instructor, post threads and replies on a
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
IE Class Web Design Curriculum
Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,
Base template development guide
Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento
Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
Site Maintenance. Table of Contents
Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...
HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features
HTML5 and CSS3 new semantic elements advanced form support CSS3 features other HTML5 features fallback solutions HTML5 and CSS3 are new and evolving standards two levels of fallback different browsers
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
Learnem.com. Web Development Course Series. Learn em. HTML Web Design in 7 days! By: Siamak Sarmady
Learnem.com Web Development Course Series Learn em HTML Web Design in 7 days! By: Siamak Sarmady L E A R N E M W E B D E V E L O P M E N T C O U R S E S E R I E S HTML Web Design in 7 Days! Ver. 2.08.02
User Guide for Smart Former Gold (v. 1.0) by IToris Inc. team
User Guide for Smart Former Gold (v. 1.0) by IToris Inc. team Contents Offshore Web Development Company CONTENTS... 2 INTRODUCTION... 3 SMART FORMER GOLD IS PROVIDED FOR JOOMLA 1.5.X NATIVE LINE... 3 SUPPORTED
Creating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
Style & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
PDF MAKER FOR VTIGER CRM
PDF MAKER FOR VTIGER CRM Introduction The PDF Maker is extension tool designed for vtiger CRM. There is already possibility of the export to pdf format in vtiger CRM functionality but it covers just few
Creating Web Pages With Dreamweaver MX 2004
Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic
When you have selected where you would like the form on your web page, insert these lines of code to start:
Mail Form Tutorial This tutorial will show you how to make use of SIUE s mail form script to allow web users to contact you via e mail regarding anything you wish. This script if most useful for receiving
UHR Training Services Student Manual
UHR Training Services Student Manual October 2012 1 Logging in to CareWorks Clicking the copyright symbol on the bottom left of the footer takes you to the sign-in screen and then to the control panel.
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
Dreamweaver and Fireworks MX Integration Brian Hogan
Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The
Web Developer Jr - Newbie Course
Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance
HTML Forms and CONTROLS
HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in
HTML5 & Friends. And How They Change A Developer s Life
HTML5 & Friends And How They Change A Developer s Life Yang Piao yp@cmu.edu 2 HTML5? 3 What is HTML5 The markup language 5 th major version of HTML successor of HTML 4.01 Or a set of cutting-edge web technologies
Getting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
Creating A Webpage Using HTML & CSS
Creating A Webpage Using HTML & CSS Brief introduction. List key learning outcomes: Understanding the basic principles of hypertext markup language (HTML5) and the basic principles of the internal cascading
Mobile Portal Optimization
IBM Mobile Portal Accelerator Mobile Portal Optimization Approach & Techniques Version 0.3 KRISHNA C KUMAR, PRINCIPAL SOFTWARE ENGINEER, IBM MPA DEVELOPMENT/L3 SUPPORT, INDIA SOFTWARE LABS, BANGALORE HIGH
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
CWU Content Management System (CMS) User Guide
CWU Content Management System (CMS) User Guide Last Revision: July 14, 2014 Version: 1.7 CWU Content management System (CMS) User Guide 2 Table of Contents NOTE: Copyright Guidelines... 4 What is a content
UComment. UComment is a comment component for Umbraco, it makes it very easy to add comment functionality to any Umbraco content document you wish.
UComment UComment is a comment component for Umbraco, it makes it very easy to add comment functionality to any Umbraco content document you wish. Contents Installation... 3 Setup... 4 Prerequisites...
UNIVERSITY OF CALGARY Information Technologies WEBFORMS DRUPAL 7 WEB CONTENT MANAGEMENT
UNIVERSITY OF CALGARY Information Technologies WEBFORMS DRUPAL 7 WEB CONTENT MANAGEMENT Table of Contents Creating a Webform First Steps... 1 Form Components... 2 Component Types.......4 Conditionals...
<a href="document URL"... attributes-list>link Text</a>
HTML LINKS: A link is specified using HTML tag . This tag is called anchor tag and anything between the opening tag and the closing tag becomes part of the link and a user can click that part
Website Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename
Joomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
Web page design in 7 days!
Learnem Group presents: Web page design in 7 days! Lessons 1-7 By: Siamak Sarmady Start Here Copyright Notice : 2000,2001 Siamak Sarmady and Learnem Group. All rights reserved. This text is written to
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Introduction to Macromedia Dreamweaver MX
Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver
RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide
RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and
BT CONTENT SHOWCASE. JOOMLA EXTENSION User guide Version 2.1. Copyright 2013 Bowthemes Inc. support@bowthemes.com
BT CONTENT SHOWCASE JOOMLA EXTENSION User guide Version 2.1 Copyright 2013 Bowthemes Inc. support@bowthemes.com 1 Table of Contents Introduction...2 Installing and Upgrading...4 System Requirement...4
WebCT 4.x: HTML Editor
Competencies After reading this document, you will be able to: Employ the HTML Editor capabilities to create and publish content. About HTML Editor The HTML editor provides word-processor-like features
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
Creating a Web Page in Microsoft Office
Creating a Web Page in Microsoft Office You will create the classroom web page much like you create a regular Word document, using all the formatting tools. However, you will need to save the page in two
customer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
Web Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
Learning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins
Learning Web Design Third Edition A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins O'REILLY Beijing- Cambridge Farnham Koln Paris Sebastopol -Taipei -Tokyo CONTENTS
Foundations of Web Design
Foundations of Web Design Introduction to HTML & CSS Thomas Michaud Foundations of Web Design: Introduction to HTML and CSS Thomas Michaud FOUNDATIONS OF WEB DESIGN Foundations of Web Design: Introduction
Converting Prospects to Purchasers.
Email Template Guide LASSO EMAIL TEMPLATE EDITOR... 2 ABOUT LASSO EMAIL TEMPLATE EDITOR... 2 CREATING AN EMAIL TEMPLATE... 2 ACCESSING EMAIL TEMPLATES... 2 ADDING AN EMAIL TEMPLATE FOLDER... 3 BASIC PRINCIPLES
Smartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service.
ARTSPHERE USER MANUAL Hosting for versions 5.0 and 5.1 The hosting control panel is where your website is located. We refer to this as the cpanel. To access the cpanel add /cpanel to your domain name (for
How To Design A Website For The Decs
ONLINE COMMUNICATION SERVICES FACTSHEET - DESIGN Created by: Mark Selan Version 1.1 Date Last Modified: April 2008 DESIGN GUIDELINES FOR GENER8 WEBSITES The purpose of this document is to provide Online
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
To change title of module, click on settings
HTML Module: The most widely used module on the websites. This module is very flexible and is used for inserting text, images, tables, hyperlinks, document downloads, and HTML code. Hover the cursor over
Website Style Guide LAST UPDATE: MAY 1, 2016
Website Style Guide LST UPTE: MY 1, 2016 presented by uttriss & Hambleton 2016 Table of ontents Main Website Introduction ontact Information... 4 Introduction... 5 General Page Information Page Templates...
01/42. Lecture notes. html and css
web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps
USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor
USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
Ten Simple Steps Toward Universal Design of Online Courses
Ten Simple Steps Toward Universal Design of Online Courses Implementing the principles of universal design in online learning means anticipating the diversity of students that may enroll in your course
How to Configure and Use the Moodle 1.9.5 Grade Book
How to Configure and Use the Moodle 1.9.5 Grade Book Table of Contents I. Definitions... 2 II. Grade Book Suggestions... 2 III. Decide on Aggregation Methods... 3 IV. Add Categories... 4 V. Add Graded
Fast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
Joomla Article Advanced Topics: Table Layouts
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview
Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and
Chapter 1 Introduction to web development and PHP
Chapter 1 Introduction to web development and PHP Murach's PHP and MySQL, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Use the XAMPP control panel to start or stop Apache or MySQL
Web layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
Editing the Web Template Files
Editing the Web Template Files This tutorial describes the process of editing the PHP files to make global changes to the layout, color, font, and text within the CONTENTdm Web templates. This documentation
End User Guide SharePoint Web Parts Site Creation Package
End User Guide SharePoint Web Parts Site Creation Package SharePoint Web Parts User Guide / Table of Contents Page 1 of 3 Table of Contents Cover Table of Contents... 2 Site Creation Plus (Site Builder