4 Tags (Required for every Webpage)

Size: px
Start display at page:

Download "4 Tags (Required for every Webpage)"

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;}

{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 information

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 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 information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

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...

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

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

More information

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 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 information

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 (

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

More information

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 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 information

ITNP43: HTML Lecture 4

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

More information

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:

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

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

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,

More information

Web Design with CSS and CSS3. Dr. Jan Stelovsky

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

More information

Basic tutorial for Dreamweaver CS5

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

More information

Web Design and Databases WD: Class 7: HTML and CSS Part 3

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

More information

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure

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?

More information

CST 150 Web Design I CSS Review - In-Class Lab

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

More information

KOMPOZER Web Design Software

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

More information

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

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

More information

Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots

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

More information

Using Adobe Dreamweaver CS4 (10.0)

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

More information

CIS 467/602-01: Data Visualization

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

More information

JJY s Joomla 1.5 Template Design Tutorial:

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

More information

Introduction to Adobe Dreamweaver CC

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

More information

Using Style Sheets for Consistency

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

More information

File types There are certain image file types that can be used in a web page. They are:

File 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 information

Web Developer Jr - Newbie Course

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

More information

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 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 information

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2

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.

More information

ICE: HTML, CSS, and Validation

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

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

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

More information

Dreamweaver. Introduction to Editing Web Pages

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

More information

GUIDE TO CODE KILLER RESPONSIVE EMAILS

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

More information

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 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 information

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6

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

More information

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

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

More information

Digital Marketing EasyEditor Guide Dynamic

Digital 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 information

Creating Web Pages with Dreamweaver CS 6 and CSS

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

More information

Sage Accountants Business Cloud EasyEditor Quick Start Guide

Sage Accountants Business Cloud EasyEditor Quick Start Guide Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing

More information

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk

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

More information

Microsoft Expression Web Quickstart Guide

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,

More information

Mastering the JangoMail EditLive HTML Editor

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

More information

Creating Web Pages with Microsoft FrontPage

Creating 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 information

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9. Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format

More information

NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK

NURSING 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 information

CHAPTER 10. When you complete this chapter, you will be able to:

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

More information

Fireworks CS4 Tutorial Part 1: Intro

Fireworks 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 information

Joomla Article Advanced Topics: Table Layouts

Joomla Article Advanced Topics: Table Layouts Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand

More information

Designing HTML Emails for Use in the Advanced Editor

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

More information

HTML5 and CSS3 Design with CSS Page 1

HTML5 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 information

Further web design: Cascading Style Sheets Practical workbook

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

More information

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 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 information

04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks

04 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 information

Adobe Illustrator CS6. Illustrating Innovative Web Design

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

More information

Creating a Resume Webpage with

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

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

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.

More information

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

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

More information

IE Class Web Design Curriculum

IE 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 information

Instructions 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 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 information

Adobe InDesign Creative Cloud

Adobe 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 information

How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)

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

More information

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.

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,

More information

Creating HTML authored webpages using a text editor

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

More information

LEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES

LEAGUE 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 information

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan

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

More information

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts 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 information

Using Microsoft Word. Working With Objects

Using 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 information

Web Portal User Guide. Version 6.0

Web Portal User Guide. Version 6.0 Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries

More information

Creating Accessible Documents in Word 2011 for Mac

Creating 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 information

Create a Web Page with Dreamweaver

Create 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 information

Google Sites: Site Creation and Home Page Design

Google 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 information

Web Design and Development ACS-1809. Chapter 9. Page Structure

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

More information

Microsoft PowerPoint 2010 Handout

Microsoft 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 information

Create a GAME PERFORMANCE Portfolio with Microsoft Word

Create 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 information

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design

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

More information

Advanced Editor User s Guide

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

More information

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL

Go 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 information

Intro to Web Development

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

More information

Getting Started with KompoZer

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

More information

customer community Getting started Visual Editor Guide! www.pure360community.co.uk

customer community Getting started Visual Editor Guide! www.pure360community.co.uk Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for

More information

Creating Web Pages With Dreamweaver MX 2004

Creating 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 information

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move

In 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 information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

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

More information

Requirements for Developing WebWorks Help

Requirements 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 information

USING THE INTRO (SPLASH) PAGE

USING 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 information

IAS Web Development using Dreamweaver CS4

IAS 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 information

Dreamweaver: Getting Started Website Structure Why is this relevant?

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,

More information

Please select one of the topics below.

Please 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 information

Creating Personal Web Sites Using SharePoint Designer 2007

Creating 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 information

MICROSOFT POWERPOINT STEP BY STEP GUIDE

MICROSOFT 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 information

TUTORIAL 4 Building a Navigation Bar with Fireworks

TUTORIAL 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 information

Caldes CM12: Content Management Software Introduction v1.9

Caldes CM12: Content Management Software Introduction v1.9 Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge

More information

How to Author a Custom Course

How 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 information

Advanced Web Design. Zac Van Note. www.design-link.org

Advanced 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 information

Redback Solutions. Visionscape Manual

Redback 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 information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver 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 information

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor

USER 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 information

Contents. Introduction... 2. Downloading the Data Files... 2

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

More information

WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA

WORDPRESS 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 information

The Essential Guide to HTML Email Design

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

More information

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

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

More information

Joomla! 2.5.x Training Manual

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

More information