HTML Primer for Technical Communicators

Download Report

Transcript HTML Primer for Technical Communicators 

HTML Primer for
Technical Communicators
TECM 5191
Dr. Lam
Poll
• Text ChrisLam138 to 22333
Agenda
We’ll answer the following questions today:
• Why are we learning HTML?
• What is HTML?
• How do you write HTML?
Why HTML?
“Sure writing, punctuation, grammar, and rhetoric are
important, but every college graduate is expected to
have mastered these basics. To be successful -- and to
differentiate yourself in this ultra-competitive global
market -- you have to step outside the traditional
'writing' role and master the concepts that are
important in all types of communication.”
– Scott Abel, content strategist/technical writer
Why HTML?
“Stay current with new technologies and methods.
Choose a secondary subject in which to develop
expertise, such as social media or usability. As far as
skills go, I would say to absolutely learn HTML/CSS
and XML. I’d also suggest basic database design.
Staying current is, to me, the most important
consideration.”
–Julie Norris, Technical Writer,
Why HTML?
“Remember that the technical part of technical writer is just as
important as the writer part. Sometimes, it can be even more
important. Writing isn't always enough. You need other skills to
succeed in this profession. Like what? Obviously, knowledge of the
tools of the trade. Don't forget knowledge of technologies -- ranging
from operating systems to the languages and processes what you're
documenting. Don't discount interviewing, either. You need to know
how to draw information out of sometimes tight-lipped subject
matter experts (SMEs). Having a knowledge of technologies helps;
you can speak the language of the SMEs, and by doing that they'll
take you a little more seriously.”
- Scott Nesbitt, Technical Communicator
OK, but really, why?
• Experts say so…but why else?
• Rhetorical argument: Writing on the web is for
humans. When a computer generates the content, it
doesn’t understand human needs the way you do.
• Functional argument: If you or your organization is
publishing on the web, then it is being published in
HTML. No exceptions.
What’s this?
WYSIWYG Pitfall Example
Better HTML
Both look the same(ish)
• So, what’s the problem?
So, what is HTML?
• Hypertext Markup Language
• It’s a way to mark up existing written language. It’s not
really a language, but is more a system of tags.
• HTML is the language of the web (all websites use
HTML to some degree) ALL. Of. Them.
• Tags serve to describe content
• <p> stands for paragraph, used to describe a paragraph
• HTML is the structure of the content, NOT the visual
layout or design of the content
Some HTML examples
• Web developer examples…
What makes a valid HTML
document?
1. <!doctype html> Doctype declaration
•
Tells the parser (translator) what type of document it
should be parsing
2. <html> tag
3. <head> tag
4. <title> tag
5. <body> tag
XHTML Rules
• Doctype is mandatory
• All tags that open must close
• Tags close in the opposite order that they open
• Elements must be lowercase
• Attributes must be lower case and quoted
Anatomy of HTML
• HTML is constructed of elements and attributes
• Elements have start tags and end tags. You put content in
between them.
• <p>This is content that goes in between a paragraph start tag
and a paragraph end tag.</p>
• All HTML elements can have attributes (but attributes are
optional).
• Attributes provide additional information about the element.
• Attributes are lowercase and placed in between quotations
• E.g., <img src=“images/logo.png” />
Most-Used Tags?
• Poll
Common Tags
•
Headings
• <h1> through <h6>
•
Main content
• Paragraphs
• <p>
• Bulleted lists
• <ul> to open the list
• <li> for each list item
• Numbered lists
• <ol> to open the list
• <li> for each list item
•
Images
• <img> but must have source of image file
• <img src =“images/logo.png” alt = “logo image” />
Tools for HTML
• Text editor or HTML editor
• Notepad++
• Sublime Text (mac)
• The difference between a proprietary file format and a
non-proprietary one is that the tool itself has nothing
to do with the production of the file.
• i.e., you need word to create a .docx file
Mark it up
• Mark up the first page of this document in valid
HTML
• https://www.prismnet.com/~hcexres/textbook/exa
mples/instruxx2b.pdf