Building Web Sites: Introduction to HTML
|
|
- Preston Johnston
- 7 years ago
- Views:
Transcription
1 Building Web Sites: Introduction to HTML Mel Anderson IBM iseries Technology Center Copyright IBM Corporation, All Rights Reserved This publication may refer to products that are not currently available in your country. IBM makes no commitment to make available any products referred to herein. Agenda What is HTML? Why do we use HTML? HTML tools Basic HTML syntax Resume Publishing a Web site HTML and Web programming Registration form Resources 1
2 What is Hypertext Markup Language (HTML)? An open standard Developed by the World Wide Web Consortium (W3C) A language used to format text and objects (such as images) to be displayed in a Web browser The display language of a browser Static it is only display. Use other technologies to add dynamic function: Client-side (browser) scripting languages (JavaScript) Server-side programs (CGI, Java servlets) The user interface language of the Web. Why do we use HTML? Light Files are flat text and very small Quickly transferred over a network Easy to learn Smaller and less complex than other markup languages Less than 100 tags (instructions) Open standard Not proprietary Works with all platforms, all browsers, and all Web servers The rise of Internet technologies 2
3 HTML tools Two parts to HTML Source code Display Text/HTML editor HTML files are flat-text files that have a.html (or.htm) extension. Browser When you open an HTML file with a browser, the code is run. 3
4 Free tools Editors Text Windows Notepad Edit File (EDTF) Etc. Graphical Nvu (open source) Mozilla/Netscape Composer Microsoft FrontPage Express WebSphere Development Studio Client for iseries Etc. Browsers Microsoft Internet Explorer Netscape (built on Mozilla) Mozilla (open source) Mozilla Firefox (open source) Opera Etc. Tools Use the browser s View (Page) Source function to see the HTML code behind any Web page 4
5 Basic HTML syntax HTML syntax Tags Instructions for the browser <tag>some text</tag> Nesting Close tags in the opposite order in which you opened them. <tag1><tag2>some text</tag2></tag1> Attributes Specify attributes to use non-default behavior <tag attribute= value >Text</tag> 5
6 HTML document structure <html> <head> (Header: information about the page) </head> <body> (Body: Web page content) </body> </html> Header (<head>) Content within the <head> tags is not displayed in the browser. Optionally, contains information about your Web page. <meta name= author content= Mel Anderson > Optionally, contains non-html code for your Web page JavaScript, Cascading Style Sheets, etc. Contains the title of the Web page Optional, but recommended 6
7 Header (<head>) Use the <title> tag for the title of the page <html> <head> <title>ima Geeke s Resume</title> </head>... </html> Body <body> The contents of the Web page (mainly text) Headings Paragraphs and line breaks Text formatting Lists Links and images Tables Fonts and colors Comments The tags described in the rest of the session occur in the <body> section 7
8 Headings <hx> - x is a number from 1 to 6 <h1> is the biggest <h6> is the smallest <body> <h1>ima Geeke</h1> <h2>ima Geeke</h2> <h3>ima Geeke</h3> <h4>ima Geeke</h4> <h5>ima Geeke</h5> <h6>ima Geeke</h6> </body> Paragraphs (<p>) Adds a line feed after a line. <body> <h1>ima Geeke</h1> <p>123 State Street</p> <p>rochester, MN 55901</p> <p>(507) </p> <p>imageeke@geeke.com</p> <p>objective: To get a really sweet job.</p> </body> 8
9 Line breaks (<br>) Add a line break. <h1>ima Geeke</h1> <p>123 State Street <br>rochester, MN <br>(507) <br>imageeke@geeke.com</p> <p>objective: To get a really sweet job.</p> Bold, Italics, and Underline (<b>, <i>, <u>) <p>123 State Street <br>rochester, MN <br>(507) <br><u>imageeke@geeke.com</u></p> <p><b>objective:</b> To get a really <i>sweet</i> job.</p> 9
10 Lists Unordered list (UL) with list items (LI) <ul> <li>item</li> <li>item</li> </ul> Ordered list (OL) <ol> <li>item 1</li> <li>item 2</li> </ol> Lists <p>languages:</p> <ul> <li>rpg</li> <li>cobol</li> <li>java</li> </ul> 10
11 Links (<a href>) Use the anchor tag (<a>) with required hyperlink reference (HREF) attribute Local file: <a href= rpg.html >RPG</a> Full URL: <a href= >Java</a> address <a href= >.</a> Links (<a href>) <br><a </p>... <p>languages:</p> <ul> <li><a href="rpg.html">rpg</a></li> <li><a href="cobol.html">cobol</a></li> <li> <a href=" </li> </ul> 11
12 Images (<img src>) Use the image (IMG) tag with required source (SRC) attribute: Local file <img src= mypic.gif > Full URL: <img src= > No closing tag (</img>) <h1>ima Geeke</h1> <img src= mypic.gif > Tables Use the <table> tag as a container for the table contents. <table></table> By default, there is no border, so use the border (BORDER) attribute: <table border= 1 ></table> HTML tables are row-major ordered. Define the rows with the table row (TR) tag: <table border= 1 > <tr></tr> <tr></tr> </table> 12
13 Tables Use the table heading (TH) and table data (TD) tags to define the cells in a row: <th>: Content is bold and centered <td>: Content is not bold and left-justified You can have both <td> tags and <th> tags in the same row. The browser will resize the table to fit the contents. Manually size the table, rows, and cells with the WIDTH and HEIGHT attributes. Values are pixel widths or percentages. <td width= 10 > </td> <tr height= 50% > </tr> Tables <p>education:</p> <table border= 1 > <tr> <th>school</th> <th>degree</th> </tr> <tr> <td>pc University</td> <td>b.a. 1985</td> </tr> </table> 13
14 Positioning text Use the ALIGN attribute to position text. Values are RIGHT, CENTER, and LEFT. <p align= right > <td align= center > <th align= left > (default is center) <h1 align= right > <img src= mypic.gif align= right > Most tags take the ALIGN attribute. Positioning text <h1>ima Geeke</h1> <img src="mypic.gif" align="right">... <p align="center"> <b>objective:</b> To get a really <i>sweet</i> job.</p> 14
15 Positioning text Use an invisible table to position text into columns. <table border= 0 width= 100% > <tr> <td>(left column)</td> <td>(right column)</td> </tr> </table> The number of <td> tags is the number of columns. Fonts Use the FONT tag FACE attribute: Change the font type. Common types: Times New Roman (default), Arial, Courier, Verdana, Sans Serif, Script Choices are based on what is installed on the user s system SIZE attribute: Change the size of the text. size= x x is a number between 1 and 7 (default is 3) <h1><font face= script size= 7 >Ima Geeke</font></h1> 15
16 Colors Use the BACKGROUND and COLOR attributes to change the default colors. Color values: Simple names: black, blue, white, red, yellow, etc. Hexadecimal values: #RRGGBB (amount of red, green, and blue) See ref_colornames.asp for a list of named and hex values. <body bgcolor="#ffffaa"> <h1><font face="script" size="7" color="green">ima Geeke</font></h1> Comments Use comment tags to comment your HTML code. <!-- Comment goes here. --> Comments are not displayed in the browser, but they show up in the source (View Source). Can be used to hide code you re not currently using. Use punctuation characters to make the comment tags stand out: <!-- ******** Left column ******** --> 16
17 Publishing a Web site 17
18 Publishing Web sites To publish a site means to make it accessible by a URL. To do this, the files need to be copied to directories that are served by a Web server. Also called Web space or document root Web serving Personal Most internet service providers (ISPs) offer Web space with their accounts Third-party Web hosting services Business External Third-party Web hosting services Internal IBM HTTP Server (powered by Apache) for iseries (5722-DG1) Lotus Domino for iseries HTTP server (5733-L65) Microsoft IIS Apache HTTP Server (Open source) 18
19 Publishing Web sites Placing Web site files on a Web server Copy the files to directories under the document root Methods Map a network drive to the Web server machine Copy or cut-and-paste the files File transfer protocol (FTP) Connect to the Web server machine and transfer the files HTML in a Web server environment Response Client ` Request Server 19
20 HTML and Web programming Adding dynamic processing Need to add another technology to HTML to get dynamic behavior HTML doesn t do logic Options: Browser (client-side) JavaScript, Java applets, VBScript, ActiveX Web server (server-side) scripting languages PHP, PerlScript, SSI, VBScript (ASP), ColdFusion, server-side JavaScript, etc. CGI programs (run in server s operating system) ILE RPG, ILE COBOL, ILE C, C++, Perl, Python, Visual Basic, etc. CGI API libraries have been created for most languages (such as CGIDEV2) 20
21 Common Gateway Interface (CGI) Data data Request 1. Write data 3. Get data 2. Call program Response HTML 4. Response (HTML) Server-side program HTML forms HTML forms support Web programs: By gathering input data from the user By sending the request that causes the Web server to invoke the program Data is sent to the server in name/value pairs. 21
22 Forms (<form>) Container for form elements Tells the Web server what to do with the request ACTION attribute The location of the Web program (full or partial URL or an alias) METHOD attribute GET Web server stores data in an environment variable POST Web server stores data in a buffer <form action= /cgi-bin/reg.pgm method= post ></form> Form elements Used to gather specific pieces of data from the user. Attributes we need to use on the form elements tags: NAME attribute Specifies a name for a piece of data VALUE attribute Available on selection elements Allows the return value to be different than the display text Most form elements are defined with the INPUT tag. TYPE attribute Specifies the type of form element 22
23 Text boxes One-line text boxes Plain <input type= text name= fname > Password (masked) text box <input type= password name= pwd > Change default size with SIZE attribute (number of characters) Don t need the VALUE attribute (whatever is typed in the box is the value) Multi-line text field <textarea name= comment >[Text to appear in the box] </textarea> Change default size: COLS attribute: Number of characters in a row ROWS attribute: Number of row (lines) in the box Text boxes <form action="/cgi-bin/reg.pgm" method="post"> <p>username: <input type="text" name= user size="10"> <br>password: <input type="password" name= pass size="10"> </p> <p>comments: <br><textarea name= comments > </textarea></p> </form> 23
24 Drop-down list (<select> and <option>) Use the SELECT tag as the container for the options Specify the NAME attribute here <select name= state ></select> Use the OPTION tag to define each option Can optionally use the VALUE attribute to return a value that is different than the display text: <select name= state > <option value= MN >Minnesota</option> </select> SELECTED attribute pre-selects one of the options Drop-down list (<select> and <option>) <select name= level > <option selected>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 24
25 Radio buttons Radio buttons give a list of choices, of which only one can be selected. <input type= radio name= pet >Cat</input> Group radio buttons with the same value for the NAME attribute <input type= radio name= pet >Cat</input> <input type= radio name= pet >Dog</input> <input type= radio name= pet >Fish</input> The CHECKED attribute pre-selects an option Use the VALUE attribute to return a value other than the display text <input type= radio name= pet value= dog >Dog</input> Radio buttons <p>please choose your ranting level: <br><input type="radio" name="rant" value="1" checked>peeved</input> <br><input type="radio" name="rant" value="2">seeing Red</input> <br><input type="radio" name="rant" value="3">angry</input> <br><input type="radio" name="rant" value="4">mad as hell</input> </p> 25
26 Checkboxes Like radio buttons, but more than one option can be selected <input type= checkbox name= pets >Cat</input> Also specify the same NAME attribute to group options <input type= checkbox name= pets >Cat</input> <input type= checkbox name= pets >Dog</input> <input type= checkbox name= pets >Fish</input> Multiple name/value pairs can be returned to the server. If all options in the example are selected, these name/value pairs are returned: pets=cat pets=dog pets=fish SELECTED attribute pre-checks the checkbox Checkboxes <p>please choose the MelCo newsletters you would like to receive: <br><input type="checkbox" name="news" value="rage" checked> Days of Our Rage</input> <br><input type="checkbox" name="news" value="school" checked> I Blame The Schools</input> <br><input type="checkbox" name="news" value="pols" checked> Those #@!*$ Politicians</input> </p> 26
27 Buttons Reset button <input type= reset > Resets (clears) the form to its initial values Default text is Reset Submit button <input type= submit > Submits the form data to the server Default text is Submit Query Use the VALUE attribute to change button text. Typically don t use buttons for data, so we don t need the NAME attribute. Buttons <input type="reset" value="clear"> <input type="submit" value="submit"> 27
28 Resources 28
29 Resources General Web development and design World Wide Web Consortium (W3C) W3 Schools: The Largest Web Developer s Site on the Net Webmonkey: The Web Developer s Resource Alertbox: Current Issues in Web Usability Dr. Jakob Nielsen Resources HTML W3C HTML Home Page W3 Schools HTML Tutorial WebMonkey HTML Basics Cascading Style Sheets (CSS) W3C CSS Home Page WebMonkey Stylesheets 29
30 Resources File transfer protocol (FTP) WebMonkey s FTP: For the People (article) CGIDEV2 and CGICBLDEV2 Tool resources Free graphical editors NVu (Open source) WebSphere Development Studio Client (WDSc) for iseries ** ** Your shop may already have free entitlement to WDSc: Free text editors HTML-Kit 30
31 Tool resources Browsers Mozilla Firefox (Open source) Web servers IBM HTTP Server (powered by Apache) for iseries Apache (Open source) Free FTP clients Filezilla (Open source) Any questions? 31
32 Trademarks and Disclaimers 8 IBM Corporation All rights reserved. References in this document to IBM products or services do not imply that IBM intends to make them available in every country. The following terms are trademarks of International Business Machines Corporation in the United States, other countries, or both AS/400 AS/400e eserver e-business on demand IBM IBM (logo) iseries i5/os OS/400 Rational is a trademark of International Business Machines Corporation and Rational Software Corporation in the United States, other countries, or both. Intel, Intel Inside (logos), MMX and Pentium are trademarks of Intel Corporation in the United States, other countries, or both. Linux is a trademark of Linus Torvalds in the United States, other countries, or both. Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the United States, other countries, or both. UNIX is a registered trademark of The Open Group in the United States and other countries. SET and the SET Logo are trademarks owned by SET Secure Electronic Transaction LLC. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Other company, product or service names may be trademarks or service marks of others. Information is provided "AS IS" without warranty of any kind. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Information concerning non-ibm products was obtained from a supplier of these products, published announcement material, or other publicly available sources and does not constitute an endorsement of such products by IBM. Sources for non-ibm list prices and performance numbers are taken from publicly available information, including vendor announcements and vendor worldwide homepages. IBM has not tested these products and cannot confirm the accuracy of performance, capability, or any other claims related to non-ibm products. Questions on the capability of non-ibm products should be addressed to the supplier of those products. All statements regarding IBM future direction and intent are subject to change or withdrawal without notice, and represent goals and objectives only. Contact your local IBM office or IBM authorized reseller for the full text of the specific Statement of Direction. Some information addresses anticipated future capabilities. Such information is not intended as a definitive statement of a commitment to specific levels of performance, function or delivery schedules with respect to any future products. Such commitments are only made in IBM product announcements. The information is presented here to communicate IBM's current investment and development activities as a good faith effort to help with our customers' future planning. Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve throughput or performance improvements equivalent to the ratios stated here. Photographs shown are of engineering prototypes. Changes may be incorporated in production models. 32
ICT 6012: Web Programming
ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term
More informationIntroduction 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
More informationXHTML BASICS. Institute of Finance Management CIT Department Herman Mandari
XHTML BASICS Institute of Finance Management CIT Department Herman Mandari HTML Styles Introduces CSS to HTML The main purposes is to provide a common way to style all HTML elements Examples
More informationShort notes on webpage programming languages
Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of
More informationFeaturing: GUI screen designer to edit DDS source for 5250 Display Files
IBM Software Group Rational Developer for IBM i (RDi) Screen Designer Technology Preview Featuring: GUI screen designer to edit DDS source for 5250 Display Files Last Update: 11/25/2009 2009 IBM Corporation
More informationHTML 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
More informationEUROPEAN 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
More informationWeb 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:
More informationWeb 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.
More informationCS412 Interactive Lab Creating a Simple Web Form
CS412 Interactive Lab Creating a Simple Web Form Introduction In this laboratory, we will create a simple web form using HTML. You have seen several examples of HTML pages and forms as you have worked
More informationRational Developer for IBM i (RDi) Introduction to RDi
IBM Software Group Rational Developer for IBM i (RDi) Introduction to RDi Featuring: Creating a connection, setting up the library list, working with objects using Remote Systems Explorer. Last Update:
More informationData Transfer Tips and Techniques
Agenda Key: Session Number: System i Access for Windows: Data Transfer Tips and Techniques 8 Copyright IBM Corporation, 2008. All Rights Reserved. This publication may refer to products that are not currently
More informationHTML 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
More informationHT H ML B as a ics c 1
HTML Basics 1 What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set
More informationCSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File
CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology Third
More information07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers
1 About Forms For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product
More informationTutorial 6 Creating a Web Form. HTML and CSS 6 TH EDITION
Tutorial 6 Creating a Web Form HTML and CSS 6 TH EDITION Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create input boxes and form labels
More informationWebsite 101. Yani Ivanov. Student Assistant / Web Administrator
Website 101 Yani Ivanov Student Assistant / Web Administrator Information Technology for Environmental Research Area of the Hawai`i NSF EPSCoR Program Covered Topics Introduction to HTML What is it and
More informationWeb 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
More informationIntroduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
More informationBuilding Your Website
Building Your Website HTML & CSS This guide is primarily aimed at people building their first web site and those who have tried in the past but struggled with some of the technical terms and processes.
More informationInteraction between browser and server. HTML (Hyper Text Markup Language)
Interaction between browser and server The client/server model is a computing model that acts as a distributed application which partitions tasks or workloads between the providers of a resource or service,
More informationLesson Review Answers
Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.
More informationFurther web design: HTML forms
Further web design: HTML forms Practical workbook Aims and Learning Objectives The aim of this document is to introduce HTML forms. By the end of this course you will be able to: use existing forms on
More informationCreating HTML authored webpages using a text editor
GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage
More informationWEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:
More informationHTML, CSS, XML, and XSL
APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these
More informationWebsite Planning Checklist
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
More informationInternet Technologies
QAFQAZ UNIVERSITY Computer Engineering Department Internet Technologies HTML Forms Dr. Abzetdin ADAMOV Chair of Computer Engineering Department aadamov@qu.edu.az http://ce.qu.edu.az/~aadamov What are forms?
More informationMigrating LAMP stack from x86 to Power using the Server Consolidation Tool
Migrating LAMP stack from x86 to Power using the Server Consolidation Tool Naveen N. Rao Lucio J.H. Correia IBM Linux Technology Center November 2014 Version 3.0 1 of 24 Table of Contents 1.Introduction...3
More informationSo we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going.
Web Design 1A First Website Intro to Basic HTML So we're set? Have your text-editor ready. Be sure you use NotePad, NOT Word or even WordPad. Great, let's get going. Ok, let's just go through the steps
More informationModule 6 Web Page Concept and Design: Getting a Web Page Up and Running
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create
More informationWeb Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
More informationIBM Systems Director Navigator for i5/os New Web console for i5, Fast, Easy, Ready
Agenda Key: Session Number: 35CA 540195 IBM Systems Director Navigator for i5/os New Web console for i5, Fast, Easy, Ready 8 Copyright IBM Corporation, 2008. All Rights Reserved. This publication may refer
More informationBy Glenn Fleishman. WebSpy. Form and function
Form and function The simplest and really the only method to get information from a visitor to a Web site is via an HTML form. Form tags appeared early in the HTML spec, and closely mirror or exactly duplicate
More informationWeb Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
More informationHow to Deliver Measurable Business Value with the Enterprise CMDB
How to Deliver Measurable Business Value with the Enterprise CMDB James Moore jdmoore@us.ibm.com Product Manager, Business Service, Netcool/Impact 2010 IBM Corporation Agenda What is a CMDB? What are CMDB
More informationRational Developer for IBM i (RDi) Working offline using i Projects
IBM Software Group Rational Developer for IBM i (RDi) Working offline using i Projects Featuring: Using i Projects for: working offline, editing, remote compiling/ building, interfacing with RTCi for source
More informationHTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
More informationHTML Overview. With an emphasis on XHTML
HTML Overview With an emphasis on XHTML What is HTML? Stands for HyperText Markup Language A client-side technology (i.e. runs on a user s computer) HTML has a specific set of tags that allow: the structure
More informationHTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
More informationHow to Manage Your Eservice Center Knowledge Base
Populating and Maintaining your eservice Center Knowledge Base Table of Contents Populating and Maintaining the eservice Center Knowledge Base...2 Key Terms...2 Setting up the Knowledge Base...3 Consider
More informationCGI Programming. What is CGI?
CGI Programming What is CGI? Common Gateway Interface A means of running an executable program via the Web. CGI is not a Perl-specific concept. Almost any language can produce CGI programs even C++ (gasp!!)
More informationScript Handbook for Interactive Scientific Website Building
Script Handbook for Interactive Scientific Website Building Version: 173205 Released: March 25, 2014 Chung-Lin Shan Contents 1 Basic Structures 1 11 Preparation 2 12 form 4 13 switch for the further step
More informationWeb Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
More informationContents. 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...
More informationBASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements
More informationHTML Form Widgets. Review: HTML Forms. Review: CGI Programs
HTML Form Widgets Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back to the web server Forms allow web servers to generate
More informationThe Web Web page Links 16-3
Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Write basic HTML documents Describe several specific HTML tags and their purposes 16-1 Chapter Goals
More informationNew Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
More informationHow to code, test, and validate a web page
Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on
More informationJavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. DOM Scripting, Web Design with JavaScript
More informationXHTML Forms. Form syntax. Selection widgets. Submission method. Submission action. Radio buttons
XHTML Forms Web forms, much like the analogous paper forms, allow the user to provide input. This input is typically sent to a server for processing. Forms can be used to submit data (e.g., placing an
More informationAJAX The Future of Web Development?
AJAX The Future of Web Development? Anders Moberg (dit02amg), David Mörtsell (dit01dml) and David Södermark (dv02sdd). Assignment 2 in New Media D, Department of Computing Science, Umeå University. 2006-04-28
More informationCreating your personal website. Installing necessary programs Creating a website Publishing a website
Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on
More informationUrban Planet Website Content Management System. Step-by-Step Instructions
Urban Planet Website Content Management System Step-by-Step Instructions For steps with pictures, videos, version bugs, integration ideas, and more see http://uphelp.spps.org Department of Educational
More informationCaldes 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
More informationHTML & XHTML Tag Quick Reference
HTML & XHTML Tag Quick Reference Interactive Media Center This reference notes some of the most commonly used HTML and XHTML tags. It is not, nor is it intended to be, a comprehensive list of available
More informationICE: 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
More informationA Complete Guide to HTML Form Output for SAS/IntrNet Developers Don Boudreaux, SAS Institute Inc., Austin, TX
A Complete Guide to HTML Form Output for SAS/IntrNet Developers Don Boudreaux, SAS Institute Inc., Austin, TX ABSTRACT A number of existing conference papers, course notes sections, and references can
More informationChapter 1 Programming Languages for Web Applications
Chapter 1 Programming Languages for Web Applications Introduction Web-related programming tasks include HTML page authoring, CGI programming, generating and parsing HTML/XHTML and XML (extensible Markup
More informationIntroduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...
Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...
More informationHTML Basics(w3schools.com, 2013)
HTML Basics(w3schools.com, 2013) What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language. HTML is a markup language A markup language is a set of markup tags.
More informationAbout webpage creation
About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that
More informationEssential 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
More informationAn Attribute is a special word used inside tag to specify additional information to tag such as color, alignment etc.
CHAPTER 10 HTML-I BASIC HTML ELEMENTS HTML (Hyper Text Markup Language) is a document-layout and hyperlink-specification language i.e., a language used to design the layout of a document and to specify
More informationWHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
More informationITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
More informationHow to Create an HTML Page
This is a step-by-step guide for creating a sample webpage. Once you have the page set up, you can add and customize your content using the various tags. To work on your webpage, you will need to access
More informationHTML. A computer network is a collection of computers linked through cables or wireless means.
What is a computer network? HTML A computer network is a collection of computers linked through cables or wireless means. What is Internet? Internet is a network of computers of different sizes and configurations
More informationFusionPro Links Microsite Creation Guide
FusionPro Links Microsite Creation Guide Product FusionPro Links Document Date January 15, 2010 Customer Support For more information or support, please email support@printable.com, or contact your Client
More informationFETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3
IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets
More informationUsing the Linux Samba Client with iseries NetServer
Session: 42006 47TC 7 Using the Linux Samba Client with NetServer Vern Yetzer yetzer@us.ibm.com April 2002 8 Copyright Corporation, 2002. All Rights Reserved. This publication may refer to products that
More informationAdvanced Drupal Features and Techniques
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
More informationXtreeme Search Engine Studio Help. 2007 Xtreeme
Xtreeme Search Engine Studio Help 2007 Xtreeme I Search Engine Studio Help Table of Contents Part I Introduction 2 Part II Requirements 4 Part III Features 7 Part IV Quick Start Tutorials 9 1 Steps to
More informationCGI.pm Tutorial. Table of content. What is CGI? First Program
CGI.pm Tutorial This is a tutorial on CGI.pm which include scripts to let you see the effects. CGI.pm is a Perl module to facilitate the writing of CGI scripts. Click here to see the details. This tutorial
More informationInternet Technologies_1. Doc. Ing. František Huňka, CSc.
1 Internet Technologies_1 Doc. Ing. František Huňka, CSc. Outline of the Course 2 Internet and www history. Markup languages. Software tools. HTTP protocol. Basic architecture of the web systems. XHTML
More informationPositioning the Roadmap for POWER5 iseries and pseries
Positioning the Roadmap for POWER5 iseries and pseries Guy Paradise Larry Amy Ian Jarman Agenda The Case For Common Platforms Diverse Markets: the pseries and iseries Common Platform: the Roadmap for pseries
More informationAccessibility in e-learning. Accessible Content Authoring Practices
Accessibility in e-learning Accessible Content Authoring Practices JUNE 2014 Contents Introduction... 3 Visual Content... 3 Images and Alt... 3 Image Maps and Alt... 4 Meaningless Images and Alt... 4 Images
More informationAdvanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
More informationClient-side Web Engineering From HTML to AJAX
Client-side Web Engineering From HTML to AJAX SWE 642, Spring 2008 Nick Duan 1 What is Client-side Engineering? The concepts, tools and techniques for creating standard web browser and browser extensions
More informationChapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 2 HTML Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 First Web Page an opening tag... page info goes here a closing tag Head & Body Sections Head Section
More informationJISIS and Web Technologies
27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS
More informationDesigning and Implementing Forms 34
C H A P T E R 34 Designing and Implementing Forms 34 You can add forms to your site to collect information from site visitors; for example, to survey potential customers, conduct credit-card transactions,
More informationPDG Software. Site Design Guide
PDG Software Site Design Guide PDG Software, Inc. 1751 Montreal Circle, Suite B Tucker, Georgia 30084-6802 Copyright 1998-2007 PDG Software, Inc.; All rights reserved. PDG Software, Inc. ("PDG Software")
More informationDesigning HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
More informationCreating an HTML Document Using Macromedia Dreamweaver
INFORMATION SYSTEMS SERVICES Creating an HTML Document Using Macromedia Dreamweaver This tutorial workbook contains a series of exercises that give an introduction to creating HTML documents for the World
More informationINTRODUCTION WHY WEB APPLICATIONS?
What to Expect When You Break into Web Development Bringing your career into the 21 st Century Chuck Kincaid, Venturi Technology Partners, Kalamazoo, MI ABSTRACT Are you a SAS programmer who has wanted
More informationIT3503 Web Development Techniques (Optional)
INTRODUCTION Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development
More informationAn Introduction to Dynamic Response Formatting by Christopher Boudreau
An Introduction to Dynamic Response Formatting by Christopher Boudreau A Senior Project counted as a semester s course toward a BA degree in Computer Science at Boston College January - April 1997 INTRODUCTION
More informationWeb 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
More informationCS z/os Application Enhancements: Introduction to Advanced Encryption Standards (AES)
Software Group Enterprise Networking and Transformation Solutions (ENTS) CS z/os Application Enhancements: Introduction to Advanced Encryption Standards (AES) 1 A little background information on cipher
More informationAsset Management. By: Brian Johnson
Asset Management By: Brian Johnson A Design Freeze Submitted to the Faculty of the Information Engineering Technology Program in Partial Fulfillment of the Requirements for the Degree of Bachelor of Science
More informationTitle. Click to edit Master text styles Second level Third level
Title Click to edit Master text styles Second level Third level IBM s Vision For The New Enterprise Data Center Subram Natarajan Senior Consultant, STG Asia Pacific subram.natarajan@in.ibm.com Multiple
More informationCisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief
Guide Cisco Adaptive Security Appliance (ASA) Web VPN Portal Customization: Solution Brief Author: Ashur Kanoon August 2012 For further information, questions and comments please contact ccbu-pricing@cisco.com
More informationDreamweaver 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,
More informationecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com
Advance User s Guide -www.ecommercesoftwareone.com Contents Background 3 Method 4 Step 1 - Select Advance site layout 4 Step 2 - Identify Home page code of top/left and bottom/right sections 6 Step 3 -
More informationHTML Forms. Pat Morin COMP 2405
HTML Forms Pat Morin COMP 2405 HTML Forms An HTML form is a section of a document containing normal content plus some controls Checkboxes, radio buttons, menus, text fields, etc Every form in a document
More informationPractical Web Services for RPG IBM Integrated Web services for i
Agenda Key: Session Number: 32CG 540191 Practical Web Services for RPG IBM Integrated Web services for i Dan Hiebert IBM dhiebert@us.ibm.com 8 Copyright IBM Corporation, 2009. All Rights Reserved. This
More informationThe Consolidation Process
The Consolidation Process an overview Washington System Center IBM US Gaithersburg SIG User Group April 2009 Trademarks The following are trademarks of the International Business Machines Corporation in
More information