Editing for the Web TECM 4190 Dr. Lam. What makes a website “good” Write down some characteristics that you consider define a “good” website.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Hyper Text Markup Language.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
A guide to HTML. Slide 1 HTML: Hypertext Markup Language Pull down View, then Source, to see the HTML code. Slide 1.
Project 1 Introduction to HTML.
Intro to HTML Workshop. Welcome This slideshow presentation is designed to introduce you to the basics of HTML. It is the first of three HTML workshops.
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Chapter 1 Understanding the Web Design Environment
Creating your website Using Plain HTML. What is HTML? ► Web pages are authored in HyperText Markup Language (HTML) ► Plain text is marked up with tags,
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
How can basic HTML sites be improved?. The Difference Between Hyper Text Markup Language Is a markup language for describing web pages Is used to create.
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®
Basics of HTML.
Chapter 1 Variables in the Web Design Environment.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Creating a Basic Web Page
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
DIY Web Development Hand Code Your Own Page (For Free!) by Bryan Brown, Indiana University Bloomington SLIS.
With your friendly Web Developer, Chris.. Terminology  HTML - > Hypertext Markup Language  CSS -> Cascading Style Sheet  open tag  close tag  HTTP->Hypertext.
Webpage design for researchers Dr Jim Briggs 1.
Web Design: HTML & CSS Lauren Lewis Mauricio Gomez.
NetTech Solutions Working with Web Elements Lesson 6.
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
Website Development with Dreamweaver
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
WRT235: Writing in Electronic Environments Session 1 Getting Started.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure
IT204 - Web Scripting and Authoring I Introduction to Dreamweaver Unit 6.
Introduction to web development and HTML MGMT 230 LAB.
HTML Primer for Technical Communicators TECM 5191 Dr. Lam.
Web Page Design Introduction. The ________________ is a large collection of pages stored on computers, or ______________ around the world. Hypertext ________.
WRT235: Writing in Electronic Environments Session 2 Basic XHTML.
 Computer use language to communicate  A web browser will read these tags and translate it into what you actually see  Viewing Code of ESPN WebsiteESPN.
Topic-based Authoring/ Technology Options for Building a Knowledge Base TECM 4180 Dr. Lam.
HTML Concepts and Techniques Fourth Edition Project 1 Introduction to HTML.
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
University of South Asia Course Name: Web Application Prepared By: Md Rezaul Huda Reza
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
HTML HyperText Markup Language Victoria E. Kozlek.
HTML-I Basic HTML Elements. HTML (Hyper Text Markup Language) HTML is a document layout and hyperlink- specification language. i.e. a language used to.
TECM 4180 Dr. Lam.  What a knowledge base is…  How to conduct interviews…  The difference between data, information, and knowledge…  What information.
Basic Steps to create a Website using HTML5. Hypertext Markup Language.
Welcome to Snap! Below the Line Decal Facilitated By: Zachary McPherson and Bao Xie.
Web Design – Week 2 Introduction to website basics Website basics: How the Web Works Client / server architecture Packet switching URL components.
Adding markup instructions to documents is not new. Before computers, authors would make annotations by hand in their written or typed documents. These.
1 ITEC 4830 Graphics Design Chapter 1 Dreamweaver MX 2004 Basics.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®
Introduction. Internet Worldwide collection of computers and computer networks that link people to businesses, governmental agencies, educational institutions,
Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.
Project 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Chapter 1 Introduction to HTML.
Unit 2, Lesson 5 Website Development Tools
Objective % Select and utilize tools to design and develop websites.
INTRODUCTION TO HTML5.
Unit 2, Lesson 5 Website Development Tools
Web Page Development Tools
HTML HYPERTEXT MARKUP LANGUAGE.
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Intro to Web Development Links
Web Page Development Tools
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Presentation transcript:

Editing for the Web TECM 4190 Dr. Lam

What makes a website “good” Write down some characteristics that you consider define a “good” website.

Components of editing for the web As an editor, there are several components you must consider (beyond copyediting, of course): 1.Technical considerations 2.Visual display and architecture 3.Alternative editing process

Technical Considerations Sometimes clients will want you to edit directly on their websites or demo servers This requires knowledge of technology WYSIWYG vs. HTML/CSS

How do you author/edit in print? Create a document cover page with the following: Title: “Recommendation Report for TECM 4190” “Name” “Date”

Now let’s try something else Visit unt.edu and click on the news article Right-click and select “view page source” Copy and paste into Notepad++ Save file as test.html on your desktop

What is HTML? Hypertext Markup Language Systems of descriptive tags (tag is a fancy word for a word inside of carats; e.g., Tags describe the semantic content of document, but do NOT describe any visual or design elements As an editor, you don’t necessarily need to know how to author in HTML

What is CSS? Cascading style sheets A system that allows a user to alter all visual elements on a website (from font choices to layout) Want to learn HTML/CSS? (BTW, I think EVERYONE should be literate in it) Go to

What is a WYSIWYG editor? “What you see is what you get” An interface that allows a user to edit the content (HTML) and the design (CSS) without knowing the languages Think Wordpress, Wix, Dreamweaver

So, what does this mean for those editing websites? You have several options: 1.Edit the actual HTML and CSS files (best option) 2.Copy the text from the website into a Word file to edit the language. Provide a written summary of design changes and a design style guide.

Visual Display and Architecture Last week, we talked about CRAP While CRAP principles are generally applied to print documents, they also apply to websites There’s more to web design than just design principles though. There’s single page and multi-page architecture

Single Page Architecture (Wireframe)

Multi-page Architecture

What to give to client 1.Provide the client with your language and design changes (as described in previous slides) 2.Provide client with a wireframe 3.Provide client with a sitemap