4 Tags (Required for every Webpage)
|
|
- Stella Gilmore
- 7 years ago
- Views:
Transcription
1 HTML
2 4 Tags (Required for every Webpage) HTML <html> </html> Head <head> </head> (only one thing in the head the title) Title <title> </title> (What appears in the blue bar) Body <body> </body> (Everything on the Screen)
3 Headings/Paragraphs Block Elements: will always have a blank line after them & include Headings, Paragraphs, & Horizontal Rules Headings: <h1> </h1> <h2> </h2> Headings are always Block Elements Headings are always Bold (DO NOT add strong tags around headings!) Headings are not always big Paragraphs: <p> </p> Horizontal Rule: is a line that goes straight across the page <hr /> (does not have to be inside a heading or a paragraph tags) *Always make sure ALL block element tags are closed!!
4 Line Breaks <br /> Do not use on it s own use it whenever you want an Enter <h6> This<br /> is<br /> a<br /> heading<br /> 6<br /></h6>
5 Save As Must save coding as.html to view in a Web Software (Internet Explorer).
6 HTML Assignment #1 Draw the HTML Guy in Microsoft Word using shapes & include WordArt with the 4 tags that are required for every Website. Open Notepad & practice coding a Web site using the guide below: 4 Required Tags for every Website Heading 1 (2 Headings) Heading 2(4 Subheadings) Paragraph (2 Sentences under each SubHeading) Line Break (1 in-between any 2 sentences)
7 Types of HTML List 1. UNORDERED (Bullets) <ul> </ul> <ul> <li>ham</li> <li>eggs</li> <li>milk</li> 2. ORDERED (Numbers) <ol> <ol> (will automatically re-number) <ol> <li>steak</li> <li>bacon</li> <li>macaroni and Cheese</li> </ol> 3. DEFINITION (Vocabulary Type List) <dl> <dl> <dt>dog</dt> <dd>an animal that barks.</dd> <dt>cat</dt> <dd>an animal that meows </dd> </dl> **Can change bullets to squares, circles, etc. & numbers to roman numerals, letters, etc. BUT we ll learn that a little later!
8 HTML Assignment #2 Open Notepad & practice coding a Web site using the guide below: 4 Required Tags for every Website Heading 1 Paragraph Ordered List (3 items) Unordered List (3 items) Definition List (5 items)
9 Adding Color to your Website Inline Styles (for colors and other styles): Change Color of Background of entire page <body style= > Properties - color, background-color, text-align (PROPERTIES CANNOT HAVE A SPACE, Use a colon after the property) Values - red, blue, white, left, center (Use a semi colon after the property) Example color: red; or background-color: red;
10 Color Codes Values can be the color red or they can use the Hexadecimal Code Hexadecimal Codes Must have a # sign, Only consist of letters A-F and numbers 0-9 You can go to Google & easily find HTML Color Code Charts, but you also need to learn some color codes (such as basic black )! Example: <p style= color: #99CC33; >
11 HTML Assignment #3 Open Notepad & practice coding a Web site using the guide below: 4 Required Tags for every Website Heading 1 (3 each with a different color) Paragraph (4 sentences each in a different color) Unordered List, Ordered List (3 items each, each item in a different color) Background Color (on page & different behind 1 paragraph)
12 Hyperlinks (HTML#4) Jump from Webpage to Webpage You can hyperlink to a Webpage, Photo, Picture Hyperlink CODE: <a href= > </a> Href stands for hyperlink reference Example: Linking to a file in your folder: <a href= HTMLCOLORSI.html >Colors</a> Example: Linking to a webpage: <a href= You must use
13 Advanced Hyperlinks Hyperlinks should all be in the same folder! Link to a webpage in a folder: <a href= first.html Link to a picture in a folder: <a href= pics/family.jpg (must put folder name first) If a webpage was in the pics folder../first.html.. Means back up a folder If you want hyperlink to open in a new window: <a href= isaac.jpg target= _blank > If you want to add a title for your link: <a href= isaac.jpg target= _blank title= click to see my little cutie! > Isaac </a> REMEMBER: Hyperlinks must be inside a paragraph or heading tag inside of the body!
14 HTML Assignment #4 4 Required Tags for every Website Open Notepad & practice coding a Web site using the guide: Heading 1 (3) Hyperlinks to Websites, Hyperlinks to Pictures, Hyperlinks to Webpages Paragraph (4 Hyperlinks under each heading 1 must be inside of a paragraph tag) Hyperlinks 4 Website Hyperlinks 4 Picture Hyperlinks 4 Webpage in a Folder Hyperlinks (must be titled & have a heading 1) as follows: Webpage1Practice, Webpage2Practice, Webpage3Practice, Webpage4Practice **It is best to NOT have spaces in Webpage names
15 Color & Internal Styles Review (HTML#5) Free web design software PS Pad Play-Hookey.com Html-color-codes.info <h1 style= text-align: center; font-style: italics; color: #FF0000;>Colors!</h1> Hexadecimal Color Codes (RGB): FF is the degree of red, 00 is degree of green, 00 is degree of blue
16 Color & Internal Styles Review (HTML#5) Add Style Codes into the HEAD <style></style> Style Codes: body {} h1{} A: link{} A: hover{} Hyperlinks are shown in blue by default, but it can be changed using a: link, a: visited, a: hover To add color to only one word or something that you cannot connect it to: <span style= color: purple; > purple </span>
17 HTML Assignment #5 Open Notepad & practice coding a Web site using the guide: 4 Required Tags for every Website Heading 1 (3) Heading 2 (1) Paragraphs (3 separate sentences) Add color/style to 1 paragraph that is different from the rest of the body Add a color to ONE word in a paragraph that is different from the rest of the paragraph Hyperlinks 1 Website Hyperlink 1 Picture Hyperlink 1 Webpage in a Folder Hyperlink **Do NOT have spaces in Webpage or Picture file names when you are linking to them Add Color/Style to the Head using these codes: Body {} H1 {} H2 {} A:link, A:visited {} A:hover {}
18 Image/Background Images (HTML#6) 3 Types of Images GIF Images animations, low color, clipart, transparency (256 colors) JPG photographs, high color (16 million colors) PNG transparency (high quality than GIF, but not as high as JPG) Animations Website: <image src= dinosaur.gif /> Text Alternative (alt text) <image src= dinosaur.gif alt= running dinosaur animation /> descriptive text about the image Accessibility (if tag doesn t work) Animations MUST BE INSIDE A PARAGRAPH TAG IF YOU WANT ANIMATION CENTERED <p style= text-align: center; >) Animations can also be floated <image src= dinosaur.gif alt= running dinosaur animation style= float: left; /> Background Image Website: To add background to the BODY: <style> body{ background-image: url(filename); }</style> To add a background to a heading: <h1 style= background-image: url(filename); >
19 HTML Assignment #6 Open Notepad & practice coding a Web site using the guide: 4 Required Tags for every Website Styles Added to the Head: Style body 18 pt. Arial font with blue font color (using a hexadecimal code..not color blue ) & black background Style Heading 1 with 28 pt. Georgia font with white font colors & green background color (use hexadecimal code..not color green ) Style hyperlink color to yellow (use hexadecimal code) & visited hyperlink to pink (use hex code) Add hyperlink to a picture of a school (must open a new window) & add a hyperlink to the MCE Website Add an animation to the bottom of the website that floats right (gifanimations.com) Heading 1: School Memories Paragraph: write two sentences about your two favorite school memories. Unordered list: list your 2 least favorite subjects/classes in school. Ordered list: list your top 3 favorite lunch menu items at school.
20 List Styles (HTML #7) Unordered List Disc is the Default bullet You can change to Circle or Square (NOT PLURAL) Ordered List Numbers are the Default You can change to upper-alpha (A. B. C.), lower-alpha (a. b. c.), upper-roman (I, II) Better to change in the internal style sheet rather than inline style ul { list-style-type: square; } ol { list-style-type: upper-alpha; } { list-style-image: url (filename.gif) } Bullet Website: **Make sure you save your bullet image in the HTML folder!
21 HTML Assignment #7 Open HTML #6 in Notepad & practice coding a Web site using the guide: ALL LIST STYLES SHOULD BE DONE IN THE HEAD!! Change to a circle or square bullet for your unordered list. Change to a uppercase roman numerals for your ordered list. Add another unordered list and use an image for the bullets.
22 External Style Sheets (HTML #8) A CSS document comment line: /*CSS Document by your name for animal science project*/ CSS documents are exactly the same as HTML just without the style tags Example: body { color: yellow; backgroundcolor: pink; } h1 { color: black; } Save as a CSS Page:.css
23 Linking External Style Sheets (HTML #8) How to link to the style sheet IN THE HEAD: insert a link tag: <link rel= type= href= /> Example: <link rel= stylesheet type= text/css href= FILENAME /> Dreamweaver: Click on HTML or CSS Dreamweaver: Code, Split, or Design View Open Notepad Files in Dreamweaver Dreamweaver CSS: CSS Codes automatically pop-up in a drop-down list!
24 Linking External Style Sheets (HTML #8) Creating a Class in CSS Style Sheet: Examples:.red { color: red; font-weight: bold; }.green { color: green; font-style: italic;} Inserting classes into HTML Sheet: Examples: <span class= red > red </span> <span class= green > green </span>
25 HTML Assignment #8 Open Notepad & practice coding a CSS Sheet & an HTML Web site using the guide: CSS Sheet (Classstyle.css) Add comment tag /*CSS Document by your name for HTML Assignment 8*/ Style Body: 28 pt. Arial font with Purple font color (using a hexadecimal code) & Black background Style Heading 1: 28 pt. Georgia font with white font color & Hot Pink background (use hexadecimal code) Style hyperlink: Bright Yellow font color (use hexadecimal code) & visited hyperlink to green (use hex code) HTML Web Site (Class.html) 4 Required Tags for every Website Link to Style Sheet in the Head: <link rel= stylesheet type= text/css href= FILENAME /> Add a hyperlink to a college/university website that you plan to attend Heading 1: What I want to do with the rest of my life! Paragraph1: Write three sentences about your plans after high school. Paragraph2: Write two sentences about challenges you must overcome to achieve your plans. Style Paragraph 2 ONLY: Orange font color & White background color
26 Hyper linking DOWN (HTML #9) Creating a Glossary of Choices: A B C Funny Angry Sad Setting Bookmarks id= Funny id= Angry id= Sad EXAMPLE: <h1 id= Funny >
27 Hyper linking DOWN (HTML #9) How to hyperlink Glossary Terms to Bookmarks <a href= #Funny > </a> <a href= #Angry > </a> <a href= #Sad > </a> If the link doesn t jump all the way down, the page is not long enough Adding Hyperlinks Down makes it easier for the viewer to navigate the page.
28 HTML Assignment #9 Open Notepad & practice coding a CSS Sheet & an HTML Web site using the guide: HTML Web Site (Plans.html) 4 Required Tags for every Website Add a Glossary to the top of the HTML Page with the following Terms: Plans, Goals, Obstacles Add the following Heading 2: Plans, Goals, Obstacles Add bookmark tags to each of the Heading 2 Add Hyperlinks to the Glossary Terms
29 Styling Images & Resizing in Photoscape (HTML #10) Styling Images (on css stylesheet) Img {} Things to add to images: Border-style: groove; Border-width: 10px; Border-color: black; Display: block; Photoscape FREE PHOTO EDITING PROGRAM Batch Editor, find folder w/ pictures & drag to middle (white space) Adjust width: 300 pixels, Convert All, Save in the same folder as the same name, SAVE (save as small version if you plan to link to big picture) Picture Fixes: Img{ clear: both; } Img { float: left; } Img { margin-left: 10px; margin-right; 10 px;}
30 HTML Assignment #10 Open Notepad & practice coding a CSS Sheet & an HTML Web site using the guide: CSS Sheet (Foodstyle.css) Add comment tag /*CSS Document by your name for HTML Assignment 10*/ Style Body: 16 pt. Georgia font with White font color & Blue background color (use hex code) Style Heading 1: 40 pt. Arial font with Orange font color & Bright Green background (use hexadecimal code) Style hyperlink: Bright Yellow font color (use hexadecimal code) Style Images: 30 pixel White groove border Block style images HTML Web Site (FOODS.html) 4 Required Tags for every Website Link to Style Sheet in the Head: <link rel= stylesheet type= text/css href= FILENAME /> Add a hyperlink to a website Heading 1: My Favorite Foods Paragraph1: Use an Unordered List to name your 5 favorite foods Paragraph2: Find a recipe for one of your favorite foods and copy paste it into your HTML document Images: Add a picture of each of your favorite foods (5) at the bottom of the webpage (resize one image to a width of 700 pixels)
31 CoolText & Creating Linked Buttons (HTML #11) Free Buttons, Logos, Fonts, Text Website: Types of Fonts: Serif (straight fonts) Sans-Serif (curly/fancy fonts) Save Buttons as.png files in folder To link to button Image: Open Hyperlink tag: <a href= next.html > Image tag: <img src= next.png alt= click to go to next page /> Close Hyperlink tag: </a> To get rid of hyperlink around button: CSS Sheet--Img { border: none; } OR CREATE A CLASS FOR IMAGES WITHOUT A HYPERLINK BORDER
32 HTML Review Assignment 4 Required Tags (for every webpage) Heading, Heading2, Paragraph Tags Line breaks & Horizontal Rule Tags Save as HTML, CSS, JPEG, PNG, TIF, GIF List Tags (ordered, unordered, definition) Adding Color (font color, background color) Text Alignment Tags Hex Color Codes Adding Hyperlinks (to Webpage, Website, Pictures) New Window for Hyperlinks Title for Hyperlinks In-line Styling CSS Sheet Styling (body, h1, hyperlink, hyperlink visited, images, lists) Span Tags Adding Animated Images Alt Text Float Style Background Images (style in CSS) Changing List Styles (to Circle, Bullet, Images) Linking to CSS Sheet Creating a Class in CSS Sheet & Applying Class in HTML Sheet Hyperlinking Down (Glossary) Set bookmarks Hyperlink Glossary Abbreviations Styling Images Border Style Border Width Border Color Display (block) Margins (left/right) Resizing Images Buttons Creating a button Hyperlinking buttons
{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:
More informationDreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
More informationContents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
More informationWeb Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
More informationEssential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
More informationHow 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
More informationCSS. 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
More informationITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
More informationLast 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
More informationWeb 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,
More informationWeb 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
More informationBasic 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
More informationWeb 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
More informationWhat 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?
More informationCST 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
More informationKOMPOZER 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
More informationCREATING 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
More informationCascading 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
More informationUsing 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
More informationCIS 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
More informationJJY 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
More informationIntroduction 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
More informationUsing 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
More informationFile types There are certain image file types that can be used in a web page. They are:
Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner
More informationWeb 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
More informationModule 6 Web Page Concept and Design: Getting a Web Page Up and Running
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create
More informationInspiring 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.
More informationICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
More informationCREATING 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
More informationDreamweaver. 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
More informationGUIDE 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
More informationChapter 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
More informationWeb 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
More informationGarfield 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
More informationDigital Marketing EasyEditor Guide Dynamic
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
More informationCreating 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
More informationSage 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
More informationHTML 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
More informationMicrosoft 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,
More informationMastering 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
More informationCreating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
More informationSample 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
More informationNURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK
Nursing 3225 Web Dev Manual Page 1 NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK Nursing 3225 Web Dev Manual Page 2 N3225: Nursing Inquiry Student Created Group Website Addresses (1 of 2)
More informationCHAPTER 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
More informationFireworks CS4 Tutorial Part 1: Intro
Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the
More informationJoomla 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
More informationDesigning HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
More informationHTML5 and CSS3 Design with CSS Page 1
HTML5 and CSS3 Design with CSS Page 1 1 12 2 3 3 4 45 5 6 6 7 7 HTML5 and CSS3 DESIGN WITH CSS Styles in HTML Documents Styles provide a method of creating consistent formatting of elements throughout
More informationFurther 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
More informationJadu 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
More information04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks
One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via
More informationAdobe 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
More informationCreating 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
More informationWeb Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
More informationDevelopment 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
More informationIE Class Web Design Curriculum
Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,
More informationInstructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint
Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe
More informationAdobe InDesign Creative Cloud
Adobe InDesign Creative Cloud Beginning Layout and Design November, 2013 1 General guidelines InDesign creates links to media rather than copies so -Keep all text and graphics in one folder -Save the InDesign
More informationHow 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
More informationSimply 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,
More informationCreating HTML authored webpages using a text editor
GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage
More informationLEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES
Updated 3/15/2013 4:07 PM LEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES The League of Women Voters logo, like our name, is our identity. It conveys the full collective power of the LWV mission to the public,
More informationBuilding 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
More informationRecreate 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)
More informationUsing Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
More informationWeb 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
More informationCreating Accessible Documents in Word 2011 for Mac
Creating Accessible Documents in Word 2011 for Mac NOTE: Word 2011 for Mac does not offer an Accessibility Checker. After creating your document, you can double-check your work on a PC, to make sure your
More informationCreate a Web Page with Dreamweaver
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
More informationGoogle Sites: Site Creation and Home Page Design
Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and
More informationWeb 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
More informationMicrosoft PowerPoint 2010 Handout
Microsoft PowerPoint 2010 Handout PowerPoint is a presentation software program that is part of the Microsoft Office package. This program helps you to enhance your oral presentation and keep the audience
More informationCreate a GAME PERFORMANCE Portfolio with Microsoft Word
Create a GAME PERFORMANCE Portfolio with Microsoft Word Planning A good place to start is on paper. Get a sheet of blank paper and just use a pencil to indicate where the content is going to be positioned
More informationBasics 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
More informationAdvanced 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
More informationGo Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
More informationIntro 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
More informationGetting 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
More informationcustomer 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
More informationCreating Web Pages With Dreamweaver MX 2004
Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic
More informationIn this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move
WORD PROCESSING In this session, we will explain some of the basics of word processing. The following are the outlines: 1. Start Microsoft Word 11. Edit the Document cut & move 2. Describe the Word Screen
More informationWe 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
More informationRequirements for Developing WebWorks Help
WebWorks Help 5.0 Originally introduced in 1998, WebWorks Help is an output format that allows online Help to be delivered on multiple platforms and browsers, which makes it easy to publish information
More informationUSING THE INTRO (SPLASH) PAGE
USING THE INTRO (SPLASH) PAGE Your DIY Template can be used to create multiple websites using the same company name. You can create separate websites for weddings, portraits, art etc. The splash page allows
More informationIAS Web Development using Dreamweaver CS4
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute
More informationDreamweaver: 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,
More informationPlease select one of the topics below.
Thanks for choosing WYSIWYG Web Builder! In this section we will give a short introduction to Web Builder so you can start building your web site in (almost) no time. Please select one of the topics below.
More informationCreating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
More informationMICROSOFT POWERPOINT STEP BY STEP GUIDE
IGCSE ICT SECTION 16 PRESENTATION AUTHORING MICROSOFT POWERPOINT STEP BY STEP GUIDE Mark Nicholls ICT Lounge Page 1 Contents Importing text to create slides Page 4 Manually creating slides.. Page 5 Removing
More informationTUTORIAL 4 Building a Navigation Bar with Fireworks
TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar
More informationCaldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
More informationHow to Author a Custom Course
How to Author a Custom Course Table of Contents 1. Introduction 2. Ordering Custom Course Hosting 3. Creating a new course 4. Copying Courses 5. Maintaining a Customized Course 6. Assigning Authoring Privileges
More informationAdvanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
More informationRedback Solutions. Visionscape Manual
Redback Solutions Visionscape Manual Updated 31/05/2013 1 Copyright 2013 Redback Solutions Pty Ltd. All rights reserved. The Visionscape Content Management System (CMS) may not be copied, reproduced or
More informationDreamweaver and Fireworks MX Integration Brian Hogan
Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The
More informationUSER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor
USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...
More informationContents. 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
More informationWORDPRESS MANUAL WEBSITEDESIGN.CO.ZA
WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://easywpguide.com/wordpress-manual/ to assist you with your website 1 WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA
More informationThe 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
More informationVirtual 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
More informationJoomla! 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
More information