Laboratory exercises for WEB/HTML
|
|
|
- Eunice Fowler
- 7 years ago
- Views:
Transcription
1 Laboratory exercises for WEB/HTML Anders Ardö Department of Electrical and Information Technology Lund University Contents 1 World Wide Web - WWW / HTML / CSS 3 2 Appendix - css2.html 11 1
2 2
3 1 World Wide Web - WWW / HTML / CSS Before the lab, read through section and answer the questions in section Objectives The purpose of this lab exercise is to improve your understanding of the basic architecture of the World Wide Web (WWW). After the exercise you should be able to create Web pages. In this lab you will also learn how to write Web documents in HTML language including hypertext links, create presentation styles using CSS, and make a simple website. 1.2 Some useful links Below are some useful links. You can also look in the catalouge of the university library ( use LUBsearch) and nd e-books that you can read for free on this subject. Ask a teacher or librarian if you don't know how to do that! A basic introduction into the WWW. HTML, XHTML, CSS HTML: CSS: Starting with HTML + CSS. XHTML HTTP 1.3 Theory HTTP made really easy: Uniform Resource Locator - URL: We will in this section write a short HTML document. Although several of you probably are familiar with HTML code, here is still a small introduction What is HTML? HTML (HyperText Markup Language) is a markup language for describing Web pages. HTML is not a programming language or protocol, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages A browser, eg Internet Explorer or Firefox, can interpret the HTML and display a Web page in the desired fashion. HTML markup tags are usually called HTML tags 3
4 HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in matched pairs like <b> and </b> The rst tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags For some special HTML tags, start tag and end tag can combined, eg <br /> HTML Documents = Web Pages HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages Example: <h1> This is my homepage. </h1> Here is <h1> start-tag and </h1> end-tag. Tags will in this case mean that the text "This is my homepage." is a heading of type 1. All HTML documents have certain basic standard tags. These are <html>, <head>, <title> and <body> and corresponding end tags. A brief HTML documents with such standard tags may look like the complete example below. <html> <head> <title>first Web-page</title> </head> <body> <h1> HTML is simple to learn </h1> All new students are welcome to <a href=" <br /> Here you will learn a lot! </body> </html> Below are the tags used in the document above and a few more tags. It does not matter if you use lowercase or uppercase when writing HTML code. <h1> will be interpreted in the same way as <H1>. In XHTML all tags should be lower case. <html> This tag tells your browser that the le contains HTML-coded information. Each HTML document begins and ends with this tag. <head> HTML documents can be fundamentally divided into two parts, a head and a body. The <head>... </head> contains the title, metadata, and information on style sheets and scripts, while the <body>... </body> contains the markup with the visible content. <title> 4
5 The title is the name of the page and displayed in the browser's window bar, it does not appear inside the window. The tag <title> has to be in the head part of an HTML document. <body> The tag <body>... </body> identies the body of a HTML document. This part contains the information that the browser will show on the screen. <h1> HTML has six levels of headings, numbered from 1 to 6, where 1 is the one with the largest font. The text enclosed by <h1>... </h1>, is therefore the biggest heading the browser can display. Headings are shown by a browser bold face with a bigger font. <a href=" The <a> tag is used to create a hypertext link. The example above is displayed as the clickable text LTH. Clicking on it leads to the LTH home page (which has the URL <br /> A browser does not take into account whether you have put carriage returns (CR) in your HTML code. You have to use a tag <br /> to break a line and get to the next line. <br /> stands for 'BReak'. If we had not used a <br />-tag, the two lines All new students are welcome to LTH and Here you will learn a lot! would have ended up on the same line, next to each other. If you want to not only break a line but start a new paragraph use the tag <p>... </p>. <img src="bild.format" /> With the above command, you can include a picture in your website. Source, 'src', is the path of the source le with the image you want to show. Adding alt="some text" in the tag gives the browser a text to display if it can't download your image. Note that the image is not part of the HTML document. Your web browser will download and add the image to the web page built from the code in the HTML document. Example: <img src="minbild.jpg" alt="this is my image." /> If the image is in the same directory as the HTML le, you only write the le-name, otherwise you should also specify a path. Since directory structure in the Web server is not the same as on the computer, it's easiest to store the les that make up a web page in the same directory as the HTML document. You can then use so-called relative addressing, and are not dependent on how the other le structure looks like. Relative addressing is when you enter the path to les starting in the directory where the HTML document is. 5
6 1.4 Preparing for the lab Using the lectures, the links provided earlier and other sources (search engines...) nd the anslwer to the following questions: What is a URL? Give an example! How is an HTML page sectioned? What are major elements of the head part of a Web page? What is metadata? What are metatags connected with metadata? How can you see metadata in a browser? What are the benets of using XHTML instead of HTML? In CSS, what is a 'selector', a 'property', and a 'value'? How do you add a special style to an element when you 'mouse' over it? 1.5 Lab assignments Web site creation Comment all the code (HTML, CSS) you write where appropriate. Go to the catalog C:\Apache\htdocs where you will nd a le called index.html. That is a very small HTML le that you should use as a starting point when you do the lab. Do the following: 1. Open the le index.html by just clicking on it. The default browser should start and show the contents. 2. Edit the le using for exampel Notepad++, just make a change to the text for example. 3. Find the IP address of your own computer by rst starting the command window and give the command ipcong. Then open a new tab in the browser, write the IP address of your computer in the URL eld and press enter. What do you see? 4. Ask another group about their IP address, open a new browser tab and write the other group's IP address in the URL eld and then press enter. Can you see the other group's page? 5. If you have a mobile phone with a browser, try to look at your web page with the phone. Does it work? 6. Create a small Web site in the folder C:\Apache\htdocs consisting of (at least) two dierent Web pages (linking to each other). The Web site pages should contain at least the following elements: headings paragraphs 6
7 bold-face text lists internal (inside a Web page) hyperlink with anchor-text external hyperlink with anchor-text Metadata 1. What are metadata used for? 2. Add the following metadata elements to a Web page you created: keywords, description, and author. 3. Add a tooltip to a link. Check that it works! Multimedia Copy some multimedia les to your Web folder, at least one picture and one video. 1. Add an image in one of your pages 2. Add a video in one of your pages. (hint: Check out the tags '<video>', '<embed>', and '<object>' at the w3schools HTML Videos page at Cascading Style Sheets - CSS Review the CSS tutorial Starting with HTML + CSS (from the literature list) at or another introduction to CSS. If you want to control how a HTML le should be presented when it is displayed in the browser, we often use Cascading Style Sheets (CSS). There you can describe in detail how the page will be presented when it is displayed. 1. Take one of your pages (with bold-face text) and add an inline CSS style sheet (in the <head> section) that make bold-face text use a larger font size. The style sheet can look like this <style type="text/css"> b { font-size: 150%; } </style> 2. Change the style sheet to make the bold-face text red on a blue background. 3. Add another piece of text in bold-face, but make it belong to a dierent class than your previous bold text. (Example <b class="another">more text to view</b>) Make text like that (but not your other bold-face text) use a smaller font than normal and be blue on a red background. 7
8 1.5.5 External CSS les Suppose we want the text in the headings that are tagged with <h1> to be in a special font and red. Then you can write a CSS le (called e.g. mystyle.css) that contains the following line: h1 {color: red; font-family: sans-serif} Then you add the following tag in the headsection of the HTML le: <link rel="stylesheet" href="mystyle.css"> 1. Do this for your page above. The le mystyle.css should be in the same folder as your HTML-le CSS placement You can also specify where the text is placed. Study the css2.html le (shown in the Appendix 2 below and also available on the ome page of the course in a text editor and see how it looks when you open it in a browser. Here the CSS code is entered directly in the le header. Study the CSS code and try to determine what it is supposed to do. It might help to look up the box model of CSS (see gure 1) in your reference literature. Figure 1: CSS box model. From Cascading Style Sheets: The Denitive Guide, 3rd ed by E. Meyer. 1. Try to gure out how to put a yellow bar that will contain a header (made with such <h1>... </h1>) that extends along the entire width of the page, which is located above the two elds that are already. 2. Change to a font without serifs in the blue bar by changing the CSS code! 3. Examine what happens if you change the value of the padding. 8
9 1.5.7 More CSS 1. Design a presentation style for your Web pages using an external CSS le. Use a presentation style with three boxes as suggested in Figure 2. Use <div> tags with dierent classes to implement the boxes. 2. Modify the Web pages to use this presentation style and verify that it works. 3. Change the style so that links gets enhanced (bold, color and/or background) when the mouse pointer hovers above it. 4. Modify your style so that link enhancement only occurs in the navigation box. Top box. Should contain some title text and use a picture as the background. Navigation box. Should use a light yellow background and have a few links. Content box. Just text, with some links. Figure 2: Suggested Web page presentation. 1.6 Web-site Create a Web-site that uses the presentation style developed above for all pages. The site should have a structure according to gure 3. Figure 3: Suggested Web site structure. Pages A and B should include images. Page B should be fairly big (> 200 lines, use any text) and have a named position in the middle. All pages including the Start page should be part of the navigation box. Link types: 9
10 I Normal text link II Link into the middle of Page B (hint: see fragment links at III Image that links to a page IV Hotspot image link (hint: see image-map at HTML and CSS validation 1. Validate your HTML pages. Use the HTML validator at Here you can upload your page as a le, and automatically get comments and errors, if any. Make sure there are no errors or comments on your pages. 2. Validate your CSS code. Use the CSS validator at Include links to some of the other lab-groups Add a link to at least one of the other lab groups web pages. 10
11 2 Appendix - css2.html <html> <head> <style type="text/css">.right { position:absolute; top:0px; left:325px; width:300px; background-color:\#b0e0e6; padding: 10px; }.left { top:0px; position:absolute; left:0px; width:300px; background-color:pink; padding: 10px; } </style> </head> <body> <div class="left"> <p>in my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p> <p>'whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' </p> <p>this text ought to be placed to the left on the web page, if not something may be wrong.</p> </div> <div class="right"> <p>in my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p> <p>'whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p> </div> </body> </html> 11
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...
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.
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
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.
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
CREATING WEB PAGES USING HTML INTRODUCTION
CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual
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,
Introduction to Web Technologies
Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced
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 1. Introduction to web development
Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser.
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
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
CS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov
Appendix H: Cascading Style Sheets (CSS)
Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of
Contents. Introduction... 2. Downloading the Data Files... 2
Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading
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
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workshop Session Plan
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workshop Session Plan Workshop Schedule By failing to prepare, you are preparing to fail. Event Set Up 30 minutes Introduction Welcome/Pre-day
HTML, 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
Web 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
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
Taking your HTML Emails to the Next Level. Presented by: Joey Trogdon, Asst. Director of Financial Aid & Veterans Affairs Randolph Community College
Taking your HTML Emails to the Next Level Presented by: Joey Trogdon, Asst. Director of Financial Aid & Veterans Affairs Randolph Community College Purpose This past spring, the NCCCS delivered a financial
How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
Programming exercises (Assignments)
Course 2013 / 2014 Programming exercises (Assignments) TECHNOLOGIES FOR DEVELOPING WEB USER INTERFACES Websites (HTML5 and CSS3) Table of contents Technologies for developing web user interfaces... 1 Websites
Basic Website Maintenance Tutorial*
Basic Website Maintenance Tutorial* Introduction You finally have your business online! This tutorial will teach you the basics you need to know to keep your site updated and working properly. It is important
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
ITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
4 Understanding. Web Applications IN THIS CHAPTER. 4.1 Understand Web page development. 4.2 Understand Microsoft ASP.NET Web application development
4 Understanding Web Applications IN THIS CHAPTER 4.1 Understand Web page development 4.2 Understand Microsoft ASP.NET Web application development 4.3 Understand Web hosting 4.4 Understand Web services
CSC9B2 Spring 2015 Web Design Practical 1: Introduction to HTML 5
CSC9B2 Spring 2015 Web Design Practical 1: Introduction to HTML 5 AIM To learn the basics of creating web pages with HTML5. Remember to register your practical attendance. This sheet contains one checkpoint.
NUI Galway Web Training Presentation
NUI Galway Web Training Presentation Welcome Objective To provide training on how best to maintain and update University Web pages while also providing an introduction to systems & services provided by
Web 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
Lesson Overview. Getting Started. The Internet WWW
Lesson Overview Getting Started Learning Web Design: Chapter 1 and Chapter 2 What is the Internet? History of the Internet Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related
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
Learnem.com. Web Development Course Series. Quickly Learn. Web Design Using HTML. By: Siamak Sarmady
Learnem.com Web Development Course Series Quickly Learn Web Design Using HTML 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 Quickly Learn Web Design Using HTML Ver.
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
WEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
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
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
Intro to Web Development
Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing
Madison Area Technical College. MATC Web Style Guide
Madison Area Technical College MATC Web Style Guide July 27, 2005 Table of Contents Topic Page Introduction/Purpose 3 Overview 4 Requests for Adding Content to the Web Server 3 The MATC Public Web Template
ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2
HTML, XHTML & CSS: Introduction, 1-2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers
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
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
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
Interactive Data Visualization for the Web Scott Murray
Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding
Web Editing Basics 1 TOPICS
Web Editing Basics 1 TOPICS 1. Opening your site.1 2. What you see.1 3. Navigate to your Web page 2 4. Make text edits...2 5. Prepare documents and images for the Web 3 6. Move documents and images from
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)
Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing
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
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
Dreamweaver CS5. Module 2: Website Modification
Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,
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
Terminal 4 Site Manager User Guide. Need help? Call the ITD Lab, x7471
Need help? Call the ITD Lab, x7471 1 Contents Introduction... 2 Login to Terminal 4... 2 What is the Difference between a Section and Content... 2 The Interface Explained... 2 Modify Content... 3 Basic
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 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
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
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4
CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...
HTML and CSS 2 Class Meetings Instructor Contact Office Hours: Tuesdays 5:30-7:30 PM Online Email: Class Message List Opt Out of Class email
HTML and CSS 2 CS50.11A Summer 201 Syllabus Instructor : Corrine Haverinen Class Meetings This class is accelerated for summer. There will be two lectures and assignments per week. There will not be live
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13
WEBSITE CONTENT MANAGEMENT SYSTEM USER MANUAL CMS Version 2.0 CMS Manual Version 1.0 2-25-13 CONTENTS Things to Remember... 2 Browser Requirements... 2 Why Some Areas of Your Website May Not Be CMS Enabled...
Microsoft Expression Web
Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as
How 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
U.S. Coast Guard Auxiliary Department of User Services Dynamic Web Template User Guide. Version: 10.0.1
U.S. Coast Guard Auxiliary Department of User Services Dynamic Web Template User Guide Version: 10.0.1 Date: August 2, 2011 [ This page is intentional left blank ] Page: ii Table of Contents List of Figures...
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
Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1
Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection
Basic Website Creation. General Information about Websites
Basic Website Creation General Information about Websites Before you start creating your website you should get a general understanding of how the Internet works. This will help you understand what goes
Chapter and Support Group Custom Web Page Creation
Chapter and Support Group Custom Web Page Creation This document provides instructions on creating and managing custom web pages for Chapters and Support Groups of the National Ataxia Foundation. While
ITNP43: 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
CSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers.
What is a Web Browser? Web Site Functionality April 1, 2004 A client program that uses HTTP to communicate with web servers. HTML interpreter Reads HTML, determines how to display it A Simple HTML file
Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP
Creating Web Pages with Netscape/Mozilla Composer and Uploading Files with CuteFTP Introduction This document describes how to create a basic web page with Netscape/Mozilla Composer and how to publish
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008 To do this tutorial you will need Flash 8 or higher, Dreamweaver 8 or higher. You will also need some movie clips
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
Internet 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
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
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
Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots
Updated version September 2015 All Creative Designs Cascading Style Sheet (CSS) Tutorial Using Notepad Step by step instructions with full color screen shots What is (CSS) Cascading Style Sheets and why
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
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
Introduction to web development and JavaScript
Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge
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
Dreamweaver: Getting Started Website Structure Why is this relevant?
Dreamweaver: Getting Started Dreamweaver is a Graphic Designer s tool to create websites as he or she designs. As part of the Adobe Creative Suite, Dreamweaver is able to work in conjunction with Photoshop,
Step 2 Open Kompozer and establish your site. 1. Open Kompozer from the Start Menu (at the Polytechnic) or from the downloaded program.
Kompozer User Guide KompoZer is web authoring software that combines web file management and easy-to-use WYSIWYG web page editing. It is designed to be easy to use, making it ideal for non-technical computer
UW WEB CONTENT MANAGEMENT SYSTEM (CASCADE SERVER)
UW WEB CONTENT MANAGEMENT SYSTEM (CASCADE SERVER) LEVEL 1 Information Technology Presented By: UW Institutional Marketing and IT Client Support Services University of Wyoming UW CONTENT MANAGEMENT SYSTEM
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
JISIS 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
Web 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
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
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
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,
A send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
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
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
SellerDeck 2014 Responsive Design Guide
SellerDeck 2014 Responsive Design Guide Version: 1.0.0 SellerDeck 2014 Responsive Design 1 Contents Introduction...3 Themes and Wireframe...4 Classic Theme...4 Smart Theme...5 Wireframe...6 How the Responsive
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
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
Course Duration: One hour Theory and 3 hours practical per week for 15weeks. As taught in 2010/2011 Session
ICS 202 Web Site Design 2 Credits The use of web design software in creating Web Pages. Available options for hosting Web pages. Design of web pages. Program interactive websites. Use of multimedia. Group
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
Development and Alumni Relations Systems (DARS)
Development and Alumni Relations Systems (DARS) BBIS (Blackbaud Internet Solutions) Part 1 (DARS Version 3.0) Manual Version 1.0 Part 1 of the BBIS Manual Covers: Interface and Navigation Website Design
Skills and Topics for KidCoder: Beginning Web Design
Skills and Topics for KidCoder: Beginning Web Design Our Self-Study Approach Our courses are self-study and can be completed on the student's own computer, at their own pace. You can steer your student
Quick Guide to the Cascade Server Content Management System (CMS)
Quick Guide to the Cascade Server Content Management System (CMS) Waubonsee Community College Cascade Server Content Administration January 2011 page 1 of 11 Table of Contents Requirements...3 Logging