Embed Size (px)
Citation preview
HTML Primer for Technical
Communicators
TECM 5191Dr. 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/examples/instruxx2b.pdf
