Intro to Web Design. ACM UIUC
|
|
|
- Julia Leona Riley
- 10 years ago
- Views:
Transcription
1 Intro to Web Design ACM UIUC
2 How do websites work? Note that a similar procedure is used to load images, etc.
3 What is HTML? An HTML file is just a plain text file. You can write all your HTML in Notepad or gedit Similar to.cpp,.tex,.java, etc HyperText Markup Language The word "markup" means it only indicates how the page should look and behave Unlike a programming language, does not contain explicit instructions for the browser "client-side" languages like Javascript, however, do Uses an XML-derived format
4 The key idea behind XML (and HTML) Content is organized into ELEMENTS -- essentially, a container Elements specify a part of the webpage, and can alter how their content is displayed For example: Sometimes you want bold text. Sometimes you want <b>bold</b> text. You should visit this page. You should visit <a href=' page</a>.
5 More about elements Note that each element has a starting tag and a closing tag. Each tag is surrounded by angular braces (<>) Starting tags have the name of the tag, plus any attributes to qualify the tag list attributes one after the other, in the form x="y" z=" a" b="c d" Ending tags have a forward slash (/) before the tag name, and cannot have attributes. <tagname attr="value" something="else"> Content goes here. You can <nest>tags</nest>. </tagname>
6 Anatomy of an element the opening (or starting) tag attributes <element name attr="val" foo="bar"> contents </element> the closing tag
7 Commonly-used elements <b>text</b> Makes the contained text bold. <i>text</i> Italicizes the contained text. <u>text</u> Underlines the contained text. <a href=" Text</a> Turns the contents into a link to the URL specified in the "href" attribute. <img src="images/myimage.jpg"/> Inserts an image. The path can be a full URL, or a relative path (that is, relative to the HTML file). <br/> Inserts a line break.
8 General structure of a basic HTML page <html> (the container element that should wrap everything) <head> (this section is ONLY for information for the browser) <title>my Webpage</title> </head> <body> (this is where your actual content goes) </body> (this be dead man's land) </html>
9 So, let's make a website. On the next slide is a mock-up (i.e., a picture of what we want it to look like) of a website a client wants. Rather than list tags one by one, let's walk through the basics by seeing what we need to know in order to make this website Feel free to follow along by yourself: Open up Notepad, gedit, or whatever Create a new file and save it as example.html In Notepad, make sure you don't save it as example. html.txt instead Right click on the file (in Explorer or Nautilus) and open with Firefox (or Chrome) to view it.
10
11 Where to start? I recommend working from the top down. Browsers will render your HTML from the top down as well, so it makes sense. However, to make things a bit easier, first consider how everything will fit together. In this case, we want to structure the layout of the page There are multiple ways to do this, but let's start with the simplest and oldest: a table.
12 Tables In this context, "table" refers to the sorts of tables you see used to display statistics, poll results, etc. So why are we using it to structure the layout of our page? Because looked at in the right way, the page actually fits into a table well (provided we can merge some cells):
13 How to make a table For our table: First, we need to lay out the basic 2-col, 2-row structure. Then, we merge the top two cells to make the title bar. In HTML: First, use the <table> tag to wrap the entire table. Use the <tr> (table row) tag for each row. Within each row, use the <td> (table data) for each cell. So, we get:
14 Our code so far: <html> <head><title>example</title></head> <body> <table border="1"> (always a good idea to add a border when starting out.) <tr> <td>my </td> <td>blog.</td> </tr> <tr> <td>left bar</td> <td>main content</td> </tr> </table> </body> </html>
15 So what does that give us?
16 Uh... Not really what I had in mind. But, that's all we told the browser to do -- we need to be a little more specific. Let's start by making this table take up the whole page. Tables have the nice property of being able to specify their width and height easily in HTML. Let's use "100%" for both -- that will make the table use up 100% of its parent element's size (here, the body tag). <table width="100%" height="100%" border="1">
17 Resizing cells individually Before we try it out again, let's also make it so that each cell uses up the right amount of space. We want our top row to be exactly 95 pixels high, but we want the bottom row to use up the rest. This is much harder to do without tables -- if we were using a pure-css approach, we'd be doing things differently. But since we are using tables... Also, we want the left column to be 167px wide.
18 <html> <head><title>example</title></head> <body> <table width="100%" height="100%" border="1"> <tr> <td width="167px">my </td> <td height="95px">blog.</td> </tr> <tr> <td width="167px">left bar</td> <td>main content</td> </tr> </table> </body> </html>
19
20 Looking better. There are still three problems we want to fix with the layout before moving on. The space around the edge of the table... that'll be a problem. The client didn't want the blue title bar to have a margin around it. The content is vertically-centered in each cell... we don't want that, either. Easy: just add valign="top" to each cell. We also need to merge the top two cells. This one is easy, if a bit counter-intuitive: we remove the right cell, and add an attribute called colspan (column span) to the left cell with the value 2. That will make it act as if it were two whole cells.
21 Let there be CSS The first problem, however, is pretty specific, and we'll need more than just HTML to deal with it We can apply a style to the document The markup language that we define styles in is called CSS, for Cascading Style Sheets. For now, we'll throw the CSS right into the tags -- this is called "inline" CSS. Usually, you abstract the CSS into a separate style sheet. We put this style information inside the style attribute. Note: Some problems can be solved with either HTML attributes or CSS styles; some can only be solved via one or the other.
22 Adding some style to our page <body style="margin:0px;"> Note that the syntax used for specifying style attributes is somewhat like how HTML attributes work -- however, instead of property="value", we use property:value; (with semicolons separating multiple styles). The property we're adjusting here is called margin. Margin is how much extra space should be around the given element That is, how wide the element's "personal space" is. Here, we don't want any. Why did I put this in the body tag, rather than table? Experiment! Sometimes it's hard to tell what will work. Remember to test on multiple browsers...
23 Much better.
24 Still pretty bad, though. Let's make this actually look like something. We want the top cell to have a blue background, right? So let's give it a style that will make it blue. The background property (in CSS) is a versatile way to specify backgrounds. Look it up for more details. Here, we just want background:#006699; # is a hexadecimal color code. It's a compact way of specifying colors. I would recommend using a hex colorpicker of some sort (google it, there are plenty) to get these. Remember the # in the beginning! You can use words for very common colors, like white, red, or black. E.g., background:white;
25 The header text Let's also make the text inside the blue bar look like it should. First, we'll wrap it in an h1 element (header-one). h1, h2, h3... h7 are various levels of header text. You should use them when appropriate (for accessibility). Then, we need to style that header element: Need to make it white color:white; Need to make it big font-size:43px; Need to make it Verdana font-family: Verdana; <h1 style="color:white;font-size:43px;fontfamily:verdana;">my Blog</h1>
26 <html> <head><title>example</title></head> <body style="margin:0px"> <table width="100%" height="100%" border="1"> <tr> <td height="97px" valign="bottom" colspan="2" style="background:#006699;"> <h1 style="color:white;font-size:43px; font-family:verdana;">my Blog</h1> </td> </tr> <tr> <td width="167px" valign="top">left bar</td> <td valign="top">main content</td> </tr> </table> </body> </html> (Notice how we can split tags across multiple lines? HTML doesn't really care.)
27
28 Better... but...
29 What's going on? Unfortunately, the header tags all come bundled with their own (pretty crappy) styles Lots of margin/padding and boldness You can use e.g. Firebug to find out more We'll need to overwrite these. style="margin:5px;padding:0px;font-weight:normal;... <h1 style="margin:5px;padding:0px;font-weight: normal;color:white;font-size:43px;font-family: Verdana;">My Blog</h1> (there's a good reason styles are put in separate CSS files!)
30 That fixes that, so let's move on. We need a border on the bottom of the header... Add style="border-bottom:7px solid white;" to the cell This gives the cell a solid (as opposed to dashed, for example) bottom border 7 pixels wide, colored white. Also, the page as a whole needs that light blue background. Add background:#dbe8fd; to the body tag's style. And, let's get rid of that border on the table. Don't need it right now.
31
32 Not bad. That takes care of the header bar. Now, we need to add the off-white boxes for the actual page content. We could nest another table inside each cell, and style the cell of that table like we did before... But there's no need. We can use HTML's all-purpose "content box" element, the DIV. <div style="">anything you want</div> Note that the DIV element has very few actual HTML attributes -- to really manipulate it, you need to use styles. And since all a DIV starts off as is an invisible box, you'll usually need to style it.
33 Making the content DIV So, we want a box that fills up each table cell, but still has some margin around it. We can use the margin style to add in the spacing around the box, but how do we make each box fill up the entire cell? This is actually a tricky problem, so we're just going to approximate a solution to save time. We'll tell the left box exactly how wide to be, and for the right one, tell it 95%. Why can't we just tell each box 100% and then add margin? Per the HTML standard, margin is added on top of width and height. So is padding from the containing element! There are lots of little things like this (some browserspecific) that can make web design frustrating.
34 So, the code for those DIVs... Left: <div style="width:140px;margin:8px;height:95% background:#edf3fe;"> Left bar </div> Right: <div style="width:95%;margin:8px;height:95% background:#edf3fe;"> Main content </div> And remember, these go inside the table cells -- that's where we want them to show up on the page, after all.
35
36 Looking better. One thing: the spacing between the two content areas is too wide. Why? The margin from both boxes is applied, meaning there's 16px worth of margin between them. We want to set the left-margin of the right box (or the rightmargin of the left box) to be zero pixels. To do this, we could either specify margins side-by-side, or override the margin-left property like so: style="margin:8px;margin-left:0px;" CSS has the property that later definitions will override previous ones. This comes in handy often.
37 Finishing things up The text inside the content boxes has two problems: Too close to the edge of the box. Times New Roman? Not so much. We can fix both problems by styling the DIVs. font-family:verdana;font-size:14px;padding:8px; Also, we want a header in the right box -- since the header there is of secondary importance to the main title, we use h2. <h2 style="font-size:31px;font-family:verdana;fontweight:normal;margin-top:0px;">post Title</h2>
38 A bit more... And, we want to put an image in the left bar. To do so, we use the img tag: <img src="myimage.jpg" alt="picture of me"/> Note that this tag self-closes. Some tags do this, if they cannot contain any content. Also, we want that image centered. It's deprecated, but to keep things simple, let's just use the <center></center> tag. <center>anything</center> will center that content. Finally, let's put a newline beneath it, to avoid cramping the text. The <br/> tag is another self-closing tag. It stands for "break", as in, line break.
39 <html> <head><title>example</title></head> <body style="margin:0px;background:#dbe8fd;"> <table width="100%" height="100%"> <tr> <td height="97px" valign="bottom" colspan="2" style="background:#006699;border-bottom:7px solid white;"> <h1 style="margin:5px;padding:0px;font-weight:normal;color:white;font-size:43px;fontfamily:verdana;">my Blog</h1> </td> </tr> <tr> <td width="167px" valign="top"> <div style="width:140px;margin:8px;background:#edf3fe;height:90%;font-family:verdana; font-size:12px;padding:8px;"> <center> <img src="myimage.jpg" alt="picture of me"/> </center> <br/> Left col. </div> </td> <td valign="top"> <div style="width:95%;margin:8px;margin-left:0px;background:#edf3fe;height:90%;fontfamily:verdana;font-size:14px;padding:8px;"> <h2 style="font-size:31px;font-family:verdana;font-weight:normal;margin-top:0px;" >Dolorem Ipsum</h2> Right col. </div> </td> </tr> </table> </body> </html>
40
41 Key ideas to take away Build your webpage step-by-step. It's easier to tackle one thing at a time than try to write out your entire page at once. There are hundreds of HTML tags and CSS properties. Find a good reference and bookmark it. For example, There are multiple ways to do anything in HTML/CSS. There may not be a "best" way for something, but there usually are better and worse ways. Google your problem (i.e. "fixed-height two column CSS layout") if you need to.
42 Can you modify the layout?
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...
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 [email protected] www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 [email protected] www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
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 HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
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
HTML and CSS. Elliot Davies. April 10th, 2013. [email protected]
HTML and CSS Elliot Davies [email protected] 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
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
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
Website Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
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
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
{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:
Designing 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
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,
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
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
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
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
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
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
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
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
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
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
EVENT PLANNING MYTHBUSTER. Building Pre-event Engagement: How to Make an Email Invite
EVENT PLANNING MYTHBUSTER Building Pre-event Engagement: How to Make an Email Invite YOUR STEP BY STEP GUIDE In reality, most events begin months before the doors open on the first day. The internet is
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Emailmovers Limited, Pindar House, Thornburgh Road Scarborough, North Yorkshire, YO11 3UY Tel: 0845 226 7181 Fax: 0845 226 7183 Email: [email protected]
Email Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
Chapter 1: Outlook Isn t Going Anywhere... 2. Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3
Table of Contents Chapter 1: Outlook Isn t Going Anywhere... 2 Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3 Chapter 3: 3 Way to Remove Unwanted Gaps Between Tables... 12 Chapter 4:
HTML5 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
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
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
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Creative Guidelines for Emails
Version 2.1 Contents 1 Introduction... 3 1.1 Document Aim and Target Audience... 3 1.2 WYSIWYG editors... 3 1.3 Outlook Overview... 3 2 Quick Reference... 4 3 CSS and Styling... 5 3.1 Positioning... 5
Creating Web Pages with HTML Simplified. 3rd Edition
Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you
Advanced 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
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
But have you ever wondered how to create your own website?
Foreword We live in a time when websites have become part of our everyday lives, replacing newspapers and books, and offering users a whole range of new opportunities. You probably visit at least a few
jquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
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
WP Popup Magic User Guide
WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical
Creating 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
Guidelines for Effective Email Creative
Guidelines for Effective Email Creative While the need for quality and effective design has always existed from a marketing standpoint, challenges unique to the email space require a different look at
Module 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
Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
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
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
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,
How to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
Drupal Training Guide
Drupal Training Guide Getting Started Drupal Information page on the IT site: http://it.santarosa.edu/drupal On this page is information about Drupal sign up, what Drupal is, which is a content management
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
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
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...
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
Introduction 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
How to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes [email protected] ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com [email protected]. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com [email protected] INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
New 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
So you want to create an Email a Friend action
So you want to create an Email a Friend action This help file will take you through all the steps on how to create a simple and effective email a friend action. It doesn t cover the advanced features;
ADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
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
Informz for Mobile Devices: Making Your Emails PDA and Phone-Friendly
Informz for Mobile Devices: Making Your Emails PDA and Phone-Friendly The use of personal digital assistants (PDAs) has increased exponentially since the early days of rudimentary Palm Pilots and similar
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
By 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
Dreamweaver CS5. Module 1: Website Development
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
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.
PE Content and Methods Create a Website Portfolio using MS Word
PE Content and Methods Create a Website Portfolio using MS Word Contents Here s what you will be creating:... 2 Before you start, do this first:... 2 Creating a Home Page... 3 Adding a Background Color
Designing HTML emailers
24 SEPTEMBER 2015 Designing a beautiful but functional HTML emailer can be challenging for the most experienced designer, especially if you don t have a lot of experience working with code. This guide
Email Creator Coding Guidelines Toolbox
Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for
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)
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
Fairsail PDF Template Generator: A Complete Guide
Fairsail PDF Template Generator: A Complete Guide Version 12 FS-HCM-PTG-COMP-201506--R012.00 Fairsail 2015. All rights reserved. This document contains information proprietary to Fairsail and may not be
Microsoft Word 1A: Business Letters: Format, Text Wrap, Insert Text Box, Logo
Microsoft Word 1A: Business Letters: Format, Text Wrap, Insert Text Box, Logo Format of a Business Letter: Although there are different formats to use when preparing a business letter, you should always
CiviCRM for The Giving Circle. Bulk Mailing Tips & Tricks
CiviCRM for The Giving Circle Bulk Mailing Tips & Tricks By Leo D. Geoffrion & Ken Hapeman Technology for the Public Good Saratoga Springs, NY Version 1.1 5/26/2013 Table of Contents 1. Introduction...
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
WYSIWYG Editor in Detail
WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.
CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
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
Web Portal User Guide. Version 6.0
Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries
RESPONSIVE DESIGN FOR MOBILE RENDERING
WHITEPAPER RESPONSIVE DESIGN FOR MOBILE RENDERING DELIVER MOBILE-SPECIFIC CONTENT USING MEDIA QUERIES EXECUTIVE SUMMARY With the widespread adoption of smartphones and tablets, proper email rendering in
Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.
Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format
NDSU Technology Learning & Media Center. Introduction to Google Sites
NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants
Responsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
MadCap Software. Import Guide. Flare 11
MadCap Software Import Guide Flare 11 Copyright 2015 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished
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
Short 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
Google Sites: Creating, editing, and sharing a site
Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly
Excel Intermediate Session 2: Charts and Tables
Excel Intermediate Session 2: Charts and Tables Agenda 1. Introduction (10 minutes) 2. Tables and Ranges (5 minutes) 3. The Report Part 1: Creating and Manipulating Tables (45 min) 4. Charts and other
Web Ambassador Training on the CMS
Web Ambassador Training on the CMS Learning Objectives Upon completion of this training, participants will be able to: Describe what is a CMS and how to login Upload files and images Organize content Create
Sage Accountants Business Cloud EasyEditor Quick Start Guide
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful