How To Create A Web Page On A Windows (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
|
|
|
- Marsha Ray
- 3 years ago
- Views:
Transcription
1 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 the Windows operating system. In addition to using Notepad, you can complete this tutorial with any text editor that can save plain text files. To view the HTML files in your browser, simply click to launch them. To see the HTML code, use the browser's View Source option. I. Start a Web page with Notepad 1. Open Notepad 2. Type the following text: <html> <head> <title> My first Web Page </title> </head> <body> </body> </html> 3. Save the file as myfirstpage.html in the folder called mywebsite. Save As Type: All Files (*.*) 4. To display the web page, open the web Click File, and then click Open. Click Browse button to search and open the file myfirstpage.html. II. Creating Headings and Paragraphs 1. If you do not have myfirstpage.htm open, use Notepad to open it. 2. Position the cursor after the tag <body>. In the body type: <h1> My First Web Page</h1> <p>this is my first web page. I created this page with a plain text Notepad.</p> <p>you can make as many paragraphs as you want. There is no limit on creating content this way.</p> 3. Save myfirstpage.html and leave it open for the next set of steps. 4. If the browser is already open, click the refresh button to display the file myfirstpage.html; otherwise, use the browser to open it. 1
2 III. How to make Boldings and Italics 1. Continue working in the file myfirstpage.html. Add italics to plain text <em>plain text</em> 2. Add bold to no limit <strong>no limit</strong> 3. Save myfirstpage.html and leave it open for the next set of steps. View the file in the IV. Making Ordered and Unordered List 1. Continue working in the file myfirstpage.html. Add an unordered list of few items after the second paragraph <ul> <li>cerritos College</li> <li>sem division</li> <li>cis department</li> </ul> 2. Save myfirstpage.html and leave it open for the next set of steps. View the file in the 3. Change the unordered list to ordered list by changing the <ul> and </ul> to <ol> and </ol> respectively. V. Creating Hypertext Links 1. Continue working in the file myfistpage.html. Add the following paragraph that contains a link to Cerritos College. <p> I am taking the Web Design hands-on session at <a href= >Cerritos college</a>with instructor Phuong Nguyen. 2. Save myfirstpage.html and leave it open for the next set of steps. View the file in the VI. Putting Images on a Web Page 1. Right after the body tag, add your image. <img src= images/pnguyen.jpg alt= Phuong s picture > 2
3 2. Save myfirstpage.html and leave it open for the next set of steps. View the file in the VII. Defining the DOCTYPE 1. Continue working in the file myfistpage.html. Delete the <html> tag. 2. Copy and add the following code at the top of myfirstpage.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 3. Save myfirstpage.html and leave it open for the next set of steps. View the file in the You won t see anything change, but you need to declare the DOCTYPE because you will use the cascade style sheet later in your web page. VIII. Creating a Style Sheet CSS file 1. Open another notepad. 2. Create a first CSS style to style the tag h1. Type: h1 {color: DarkBlue; text-align: center;} 3. Save the file in the web site folder. Name the file mystyles.css. 4. Bring the Notepad contained myfirstpage.html. After the close tag </title>, create a link to the style sheet mystyle.css. <link rel= stylesheet href= mystyles.css type= text/css > 5. Save myfirstpage.html and leave it open for the next set of steps. View the file in the 6. Bring the Notepad contained mystyles.css. Add the following styles to style the hypertext link. a:link, a:visited { color: darkblue; text-decoration: none; } a:hover, a:focus { color: red; text-decoration: underline;} 7. Save mystyles.css and leave it open for the next set of steps. 8. Bring the notepad contained myfirstpage.html. View myfistpage.html in the 3
4 IX. Positioning Images using CSS floats 1. Bring the Notepad contained mystyles.css. Add a CSS style class called leftimage to position the image to the left..leftimage { float: left; padding: 3px; } 2. Save mystyles.css. 3. Bring the Notepad contained myfirstpage.html. Go the image tag, add the following after src= images/pnguyen.jpg. class = leftimage 4. Save myfirstpage.html and leave it open for the next set of steps. View the file in the 5. Bring the Notepad contained mystyles.css. Add a CSS style class called rightimage to position the image to the right..rightimage { float: right; padding: 3px; } 6. Save mystyles.css. 7. Bring the Notepad contained myfirstpage.html. Change the class attribute in the image tag, to the right. class = rightimage 8. Save myfirstpage.html and leave it open for the next set of steps. View the file in the X. Creating a container DIV 1. Bring the Notepad contained mystyles.css. 2. Create a CSS style to style the body. body { margin: 0px; padding: 0px; text-align: center; } 3. Create a div called container. #container { width: 400px; background: white; 4
5 margin: 0px auto; text-align: left; font-family: arial; } 4. Save mystyles.css. 5. Bring the Notepad contained myfirstpage.html. Right after the start body tag <body> type: <div> 6. Before the close body tag </body>, type: 7. Associate the div created in step 4 with the div called container by adding a parameter called id = container after the div. <div id= container> 8. Save myfirstpage.html and leave it open for the next set of steps. View the file in the XI. Creating a Sidebar and Content DIVs 1. Bring the Notepad contained mystyles.css. Create a CSS styling called maincontent. This styling will be used for a div on the web page. #maincontent { width: 700px; background: white; text-align: left; margin-left: 270px; } 2. Create a styling for a side bar. #sidebar { float: left; width: 250px; background: lightgray; padding: 5px; text-align: left; } 3. Change the width of the styling #container to 970px. width: 970px; 4. Save the mystyles.css file. 5. Bring the Notepad contained myfirstpage.html. Position the cursor after the div tag <div id= container, type: <div id= maincontent > 5
6 6. Position the cursor before the close div tag, type: 7. Create the div sidebar. Position the cursor after the div tag <div id= container >, type: <div id= sidebar > 8. Create a paragraph inside the div sidebar. <p>the Computer and Information Sciences Department offers programs which prepare students to meet the challenges of the Information Technology (IT) industry as well as transfer to a four-year college or university.</p> 9. Save myfirstpage.html. View myfistpage.html in the XII. Creating a Header DIV and Navigation Tabs 1. Bring the Notepad contained myfirstpage.html. Right after the div tag <div id= container >, type: <div id= header> 2. Inside the div header, type: <h1>my Header</h1> 3. Under the My Header, create an unordered list. Type: <ul> <li>page One<</li> </ul> 4. Create a link for the list item Page One, <li><a href= # >Page One</a></li> 5. Create four more list items. <li><a href= # >Page Two</a></li> <li><a href= # >Page Three</a></li> <li><a href= # >Page Four</a></li> <li><a href= # >Page Five</a></li> 6. Save myfirstpage.html. View myfistpage.html in the 7. Bring the Notepad contained mystyles.css. Create a CSS style for the main header. #header { width: 970px; text-align: left; background: lightblue; margin-bottom: 15px; } 6
7 8. Save mystyles.css. View myfistpage.html in the 9. Here is the link to down load the Image header.gif Bring the Notepad contained mystyles.css. On the background of the header, right after the lighblue, insert an url command to locate a header image. background: lightblue url( images/header.gif ) no-repeat top right 10. Save mystyles.css. View myfistpage.html in the 11. Bring the Notepad contained mystyles.css. Create a style for the unordered list inside the header div. After the header div, type: #header ul { margin: 0px; text-align: center; padding: 5px 0px; border-bottom: 1px solid darkblue; font: bold 14px Verdana;} 12. Save mystyles.css. View myfistpage.html in the 13. Bring the Notepad contained mystyles.css. Create a style for the unordered list item inside the header div. Type: #header li { list-style: none; margin: 0px; display: inline;} 14. Save mystyles.css. View myfistpage.html in the 15. Bring the Notepad contained mystyles.css. Style the links that are inside the list items. Type: #header li a { color: white; padding: 5px 15px; margin-left: 3px; border: 1px solid darkblue; border-bottom: none; text-decoration: none;} 16. Save mystyles.css. View myfistpage.html in the 17. Bring the Notepad contained mystyles.css. Style the link state and the visited state.type: #header li a:link, #header li a:visited { color: white; background: darkblue;} 18. Save mystyles.css. View myfistpage.html in the 7
8 19. Bring the Notepad contained mystyles.css. Style the hover state. Type: #header li a:hover { color: white; background: blue; border-color: blue; } 20. Save mystyles.css. View myfistpage.html in the 21. Bring the Notepad contained mystyles.css. Style the current list item. Type: #header li a#current { color: black; background: white; border-bottom: 1px solid white;} 22. Save mystyles.css. 23. Bring the Notepad contained myfirstpage.html. Position the cursor after href= # in the first list item, add the following: <li><a href= # id= current >Page One</a></li> 24. Save mystyles.css. View myfistpage.html in the XIII. Creating a Footer DIV and a Mailto 1. Bring the Notepad contained mystyles.css. Create a div for the footer. Type: #footer { margin-top: 10px; border-top: solid 7px darkblue; width: 970px; line-height: 24px; text-align: center; } 2. Create a class called clearfloat.type:.clearfloat { clear: both; } 3. Save mystyles.css. 4. Bring the Notepad contained myfirstpage.html. Position the cursor after the ending of the maincontent div and prior the ending tag of the container div. Type: <div class= clearfloat > <div id = footer > <a href = # >Page One</a> <a href = # >Page Two</a> <a href = # >Page Three</a> <a href = # >Page Four</a> <a href = # >Page Five</a> <br /> 8
9 Send Comments to < a ref= mailto:pnguyen@cerritos.edu >pnguyen@cerritos.edu </a> 5. Save mystyles.css. View myfistpage.html in the XIV. Cloaning and Linking to Navigation Tabs 1. Bring the Notepad contained myfirstpage.html. Save the file as mysecondpage.html. ( Save as types: All Files (*.*) ). 2. Open another Notepad. Open myfirstpage.html. 3. On the mysecondpage.html, change the heading My First Web Page to My Second Web Page. <h1>my Second Web Page</h1> Change the title to My Second Web Page. <title>my Second Web Page</title> 4. Save mysecondpage.html. 5. Create links to Page One and Page Two. Position the cursor to first list item and change the # to myfirstpage.html. <li><a href= myfirstpage.html id= current >Page One</a></li> 6. Position the cursor to second list item and change the # to mysecondpage.html. <li><a href= mysecondpage.html >Page Two</a></li> 7. Bring the Notepad contained myfirstpage.html. Make the same change from steps 5 and 6 to myfirstpage.html. <li><a href= myfirstpage.html id= current >Page One</a></li> <li><a href= mysecondpage.html >Page Two</a></li> 8. Save myfirstpage.html. 9. Bring up MySecondPage.html. Move the id = current from the Page One to Page Two. <li><a href= mysecondpage.html id= current >Page Two</a></li> 10. Save mysecondpage.html. 11. View myfirstpage.html on the Click to go to Page Two. 9
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
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
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
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
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
CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28
CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline
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
Further web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
{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:
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
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
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 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,
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,
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
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
Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Coding Standards for Web Development
DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
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
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
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
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
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
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
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
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
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
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
Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be
Slicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
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
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
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
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
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
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
Level 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
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.
WordPress and HTML Basics
WordPress and HTML Basics Intro: Jennifer Stuart Graphic Design background - switched to Web Design (1998) Started blogging in 2001 Became Interested in Javascript, PHP, etc. 2004 - Moved to WordPress
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
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
Advanced Editor User s Guide
Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
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
Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6
Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration
Web Design and Development ACS-1809. Chapter 9. Page Structure
Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a
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
FETAC 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
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,
The Training Floor s. Webmaster s. Bible
The Training Floor s Webmaster s Bible Host... 4 Login for WordPress... 4 Making Mistakes... 4 Email... 4 Retrieving Email... 5 Setting up Email on phones or computer... 5 Editing Pages... 5 Creating Email
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
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External
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
Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
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
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
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
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
Create Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
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
Klik op deze albums als u de foto s van onze evenementen wil ontdekken.
Fotogalerij by Charlotte Dion - mardi, août 04, 2015 http://www.acfbenelux.be/nl/fotogalerij/ Klik op deze albums als u de foto s van onze evenementen wil ontdekken. var lightbox_transition = 'elastic';
Web publishing: An introduction to CSS
Web publishing: An introduction to CSS 1 1 How to Use this User Guide 1.1. The Exercises This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic
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
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
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 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
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
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
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
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
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
Website Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
Creating the Surf Shop website Part3 REVISED
Creating the Surf Shop website Part3 REVISED Part 2 Recap: You should have the navigation completed for the website before starting Part 3. 1)Create a new DIV in index.html. It should come after banner
Adobe Illustrator CS6. Illustrating Innovative Web Design
Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe
Website 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
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
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
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
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
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
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) W3C standard for defining presentation of web documents (way documents are displayed or delivered to users typography, colours, layout etc) Presentation separated from content
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
Using an external style sheet with Dreamweaver (CS6)
Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not
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
Flare Tips and Tricks. Tips and tricks. Importing content Lists. Variables and snippets Condition tags Printed documentation WebHelp.
Flare Tips and Tricks Scott DeLoach scott@clickstart.net t t t Founder, ClickStart Certified Instructor, Flare RoboHelp Captivate Author, MadCap Flare for RoboHelp Users 2007 ClickStart, Inc. All rights
Create Webpages using HTML and CSS
KS2 Create Webpages using HTML and CSS 1 Contents Learning Objectives... 3 What is HTML and CSS?... 4 The heading can improve Search Engine results... 4 E-safety Webpage... 5 Creating a Webpage... 6 Creating
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
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
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 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
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
To change title of module, click on settings
HTML Module: The most widely used module on the websites. This module is very flexible and is used for inserting text, images, tables, hyperlinks, document downloads, and HTML code. Hover the cursor over
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
Mastering the JangoMail EditLive HTML Editor
JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
How to Create a Mobile Responsive Template in ExactTarget
How to Create a Mobile Responsive Template in ExactTarget This manual contains the following: Section 1: How to create a new mobile responsive template for a Business Unit/Artist Section 2: How to adjust
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.
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