Introduction to basic HTML [Librarian edition]

5,428 views

Published on

For a two-hour workshop meant to introduce librarians to the basic concepts of HTML.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,428
On SlideShare
0
From Embeds
0
Number of Embeds
145
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Kosie EloffDepartment of Information Science (UP)
  • This workshop covers the very basics of HTML. HTML is only part of the EPUB (.epub) standard, but a significant one. Ensure that you understand the basics of HTML before delving into the basics of the EPUB standard. CSS is the language used to style HTML. We won’t have time to cover CSS formally, so any references to CSS (if needed) will be made during the practical exercise
  • Kosie EloffDepartment of Information Science (UP)
  • Kosie EloffDepartment of Information Science (UP)
  • Linking to other texts makes reading hyper.
  • http://grupo20hypertext.files.wordpress.com/2010/04/dsc_00016.jpg
  • Kosie EloffDepartment of Information Science (UP)
  • http://creativeservices.iu.edu/resources/guide/img/example.gif
  • Kosie EloffDepartment of Information Science (UP)
  • * That can be understood by humans as well as by a computer. ** Called tags (or elements – in either case, note the term instructions).*** A document in both the concrete as well as abstract sense (see examples)
  • http://creativeservices.iu.edu/resources/guide/img/example.gif
  • Kosie EloffDepartment of Information Science (UP)
  • http://2.bp.blogspot.com/-dkhXbIT3IGY/TYo7vGKR1HI/AAAAAAAAAbk/CCNioNd2w-E/s1600/bricklayer.jpg
  • http://www.annuairedubusiness.com/medias/images/dom-tree.png
  • http://tips4pc.com/wp-content/uploads/2010/05/file-types.png
  • You can view the HTML of the web page you’re currently on. Depending on the browser, there will be some “view source” function available. If you can’t find it, do a web search for the terms “view source” and your browser name. http://static.flickr.com/180/462575017_f992e9b159_o.png
  • * And other information.** Mostly.
  • To understand the document type declaration, you need to understand the role that XML plays in the digital environment. This is beyond the scope of the workshop. If you’re familiar with XML, try this article:- http://webdesign.about.com/od/dtds/a/aa101700a.htm
  • HTML is also great as a tool to introduce students to markup languages in general. Other markup languages, such as SGML, RTF, XML and TEX, are useful in other information systems. For instance, XML is a markup language that can be used to create other markup languages.
  • Note the[citation needed] tag in the source. Nonetheless, I believe this statement is an apt way to describe the usefulness of HTML as a markup language to audiences that are familiar with working in a print environment. http://en.wikipedia.org/wiki/Markup_language
  • http://media02.hongkiat.com/css-back-to-basics/css-back-to-basic.jpg
  • http://99points.info/wp-content/uploads/2010/03/css_html_javascript.jpg
  • Introduction to basic HTML [Librarian edition]

    1. 1. <HTML>Kosie EloffDepartment of Information Science (UP)
    2. 2. HTML✖ CSS✖ EPUB
    3. 3. <SECTION> 1: THEORYA] What is HTML? Why HTML?B] Definitions and concepts
    4. 4. HTML =Hypertext Markup Language
    5. 5. HyperText Markup Language
    6. 6. HyperText Markup Language
    7. 7. HyperText Markup Language
    8. 8. 1. What is Hypertext?<HTML>
    9. 9. HypertextText that contains links* to other texts.*a.k.a. hyperlinks
    10. 10. 2. What is Markup?<HTML>
    11. 11. MarkupInstructions written on a manuscript.
    12. 12. 3. What is aMarkup Language?<HTML>
    13. 13. Markup languageA language* that uses instructions** todescribe the nature of a document***
    14. 14. Editor’s markup instructions
    15. 15. Markup instructions in .doc¶
    16. 16. Markup instructions in HTML<h1>Pynstiller, 2012</h1><p>Op Twitter twiet Henry dieagtste boodskappe aan diepubliek (@KngHnryVIII, 2012).Koning Henry se interaksie metgebruikers is beide opvoedkundigen speels:</p>
    17. 17. HTML =Hypertext Markup Language
    18. 18. HTML: main markup language forcreating web pages and otherinformation that can be displayed in aweb browser.
    19. 19. Important concepts1. HTML as a structure2. HTML as a computer file3. HTML as plain text4. HTML and web browsers
    20. 20. 1. HTML as a structure
    21. 21. 2. HTML as a computer file
    22. 22. 3. HTML as plain text
    23. 23. 4. HTML and web browsers
    24. 24. SummaryHypertext: links between texts.Markup language: instructionsthat describe the nature of adocument.
    25. 25. SummaryMain WWW markup languageFor web pages*Displayed in web browser**
    26. 26. SummaryHTML is a structureHTML instructions: <tags>HTML is plain text.html is a computer file
    27. 27. <SECTION> 2: PRACTICALHow to create and use HTML.
    28. 28. Instructionshttp://bit.ly/htmlpdfPrint these out, or keep the PDF open duringyour work.
    29. 29. 1. Using a plain text editorConfirm with instructor or colleague that youhave a text editor installed and that you cansave files as .html files.
    30. 30. 2. Using the browserConfirm with instructor or colleague that youcan open a .html file with your web browser.
    31. 31. 3. Writing HTMLConfirm with instructor or colleague that youhave typed the following content into your .htmldocument, using your text editor:
    32. 32. <!DOCTYPE html><html><h1>Hello world!</h1></html>
    33. 33. 4. Save and previewConfirm with instructor or colleague that A) youhave saved your work (Ctrl+S) and B) that youcan view your .html in your web browser.
    34. 34. Memorandumhttp://bit.ly/htmlmemoContains the solution to steps 1-4.
    35. 35. What we practised1. Using a plain text editor2. Using a browser3. Writing HTML4. Saving and viewing your web page
    36. 36. HTML syntax (symbols): grammarHTML elements (tags): vocabularyPlease note
    37. 37. <h1>What is HTML?</h1><p>HTML is the main markuplanguage of the web.</p><p>...for creating web pagesand <strong>otherinformation</strong> that canbe displayed in a <strong>webbrowser</strong>.</p>What is HTML?HTML is the main markuplanguage of the web.… for creating web pages andother information that can bedisplayed in a web browser.HTML’s structure: tags
    38. 38. <h1>What is HTML?</h1><p>HTML is the main markuplanguage of the web.</p><p>...for creating web pagesand <strong>otherinformation</strong> that canbe displayed in a <strong>webbrowser</strong>.</p>What is HTML?HTML is the main markuplanguage of the web.… for creating web pages andother information that can bedisplayed in a web browser.HTML’s structure: tags
    39. 39. A simple HTML document1. <!DOCTYPE html>2. <html>3. <h1>4. Hello world!5. </h1>6. </html>
    40. 40. <!DOCTYPE html>Document type declaration.Memorise (or check slide notes).
    41. 41. <html>Opening tagThe < and > symbols: syntax“This is the start of the html.”
    42. 42. <h1>Opening tagThe < and > symbols: syntax“This is the start of a first-level heading.”
    43. 43. Hello world!The information being marked up.
    44. 44. Hello world!<!DOCTYPE html><html><h1>Hello world!</h1></html>
    45. 45. </h1>Closing tagThe < and > and / symbols: syntax“This is where the first-level heading stops.”
    46. 46. </html>Closing tagThe < and > and / symbols: syntax“This is where the html document stops.”
    47. 47. Line-by-line1. <!DOCTYPE html>2. <html>3. <h1>4. Hello world!5. </h1>6. </html>
    48. 48. When viewed in browser
    49. 49. Revision: what we practised1. Using a plain text editor2. Using a browser3. Writing HTML4. Saving and viewing your web page5. Some HTML tags6. How to mark up a heading
    50. 50. <SECTION> 3: EXERCISEDo this exercise after ensuring that you’refamiliar with the outcomes of <section> 2.
    51. 51. Download index.htmlhttp://bit.ly/saoughtmlA clean .html file for you to work onSave as …
    52. 52. Consider the meaning of:<head><meta><style><body>What kind of instruction might each tag deliver?
    53. 53. Customise the following content<title><h1><h2><p>
    54. 54. Add the following content<em><strong><ol><ul><li>
    55. 55. Class exercise@kosieeloffhttp://bit.ly/saoughtml
    56. 56. ClarificationsIn case I need to clarify a few things — and ifthere’s time.
    57. 57. The main markup languageof the web.One of manymarkup languages
    58. 58. Why should I understand HTML?“…follows markup conventions inpublishing industry in thecommunication of printed workbetween authors, editors, andprinters.”
    59. 59. Plain text =interoperability
    60. 60. What about CSS?
    61. 61. </html>

    ×