Introduction to basic HTML [Librarian edition]
8 likes5,898 views
HTML is the main markup language used to create web pages and display information in web browsers. It uses tags (<tag>text</tag>) to structure documents and describe their nature. Key points about HTML include: - It stands for Hypertext Markup Language and is used to structure documents with hyperlinks to other texts. - HTML pages are written as plain text files that use tags to describe text formatting and structure. The files end with .html. - Web browsers are used to open and display HTML files, interpreting the tags and displaying the structured content.
![<SECTION> 1: THEORY
A] What is HTML? Why HTML?
B] Definitions and concepts](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-3-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-10-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-11-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-14-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-22-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-28-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-29-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-33-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-68-320.jpg)
![Introduction to basic HTML [Librarian edition]](https://image.slidesharecdn.com/introductiontohtmllibrarianedition-130605110026-phpapp02/85/Introduction-to-basic-HTML-Librarian-edition-69-320.jpg)
Introduction to basic HTML [Librarian edition]
- 1. <HTML> Kosie Eloff Department of Information Science (UP)
- 3. <SECTION> 1: THEORY A] What is HTML? Why HTML? B] Definitions and concepts
- 4. HTML = Hypertext Markup Language
- 8. 1. What is Hypertext? <HTML>
- 9. Hypertext Text that contains links* to other texts. *a.k.a. hyperlinks
- 12. 2. What is Markup? <HTML>
- 13. Markup Instructions written on a manuscript.
- 15. 3. What is a Markup Language? <HTML>
- 16. Markup language A language* that uses instructions** to describe the nature of a document***
- 18. Markup instructions in .doc ¶
- 19. Markup instructions in HTML <h1>Pynstiller, 2012</h1> <p>Op Twitter twiet Henry die agtste boodskappe aan die publiek (@KngHnryVIII, 2012). Koning Henry se interaksie met gebruikers is beide opvoedkundig en speels:</p>
- 20. HTML = Hypertext Markup Language
- 21. HTML: main markup language for creating web pages and other information that can be displayed in a web browser.
- 23. Important concepts 1. HTML as a structure 2. HTML as a computer file 3. HTML as plain text 4. HTML and web browsers
- 24. 1. HTML as a structure
- 25. 2. HTML as a computer file
- 26. 3. HTML as plain text
- 27. 4. HTML and web browsers
- 30. Summary Hypertext: links between texts. Markup language: instructions that describe the nature of a document.
- 31. Summary Main WWW markup language For web pages* Displayed in web browser**
- 32. Summary HTML is a structure HTML instructions: <tags> HTML is plain text .html is a computer file
- 34. <SECTION> 2: PRACTICAL How to create and use HTML.
- 35. Instructions http://bit.ly/htmlpdf Print these out, or keep the PDF open during your work.
- 36. 1. Using a plain text editor Confirm with instructor or colleague that you have a text editor installed and that you can save files as .html files.
- 37. 2. Using the browser Confirm with instructor or colleague that you can open a .html file with your web browser.
- 38. 3. Writing HTML Confirm with instructor or colleague that you have typed the following content into your .html document, using your text editor:
- 40. 4. Save and preview Confirm with instructor or colleague that A) you have saved your work (Ctrl+S) and B) that you can view your .html in your web browser.
- 41. Memorandum http://bit.ly/htmlmemo Contains the solution to steps 1-4.
- 42. What we practised 1. Using a plain text editor 2. Using a browser 3. Writing HTML 4. Saving and viewing your web page
- 43. HTML syntax (symbols): grammar HTML elements (tags): vocabulary Please note
- 44. <h1>What is HTML?</h1> <p>HTML is the main markup language of the web.</p> <p>...for creating web pages and <strong>other information</strong> that can be displayed in a <strong>web browser</strong>.</p> What is HTML? HTML is the main markup language of the web. … for creating web pages and other information that can be displayed in a web browser. HTML’s structure: tags
- 45. <h1>What is HTML?</h1> <p>HTML is the main markup language of the web.</p> <p>...for creating web pages and <strong>other information</strong> that can be displayed in a <strong>web browser</strong>.</p> What is HTML? HTML is the main markup language of the web. … for creating web pages and other information that can be displayed in a web browser. HTML’s structure: tags
- 46. A simple HTML document 1. <!DOCTYPE html> 2. <html> 3. <h1> 4. Hello world! 5. </h1> 6. </html>
- 47. <!DOCTYPE html> Document type declaration. Memorise (or check slide notes).
- 48. <html> Opening tag The < and > symbols: syntax “This is the start of the html.”
- 49. <h1> Opening tag The < and > symbols: syntax “This is the start of a first-level heading.”
- 50. Hello world! The information being marked up.
- 51. Hello world! <!DOCTYPE html> <html> <h1> Hello world! </h1> </html>
- 52. </h1> Closing tag The < and > and / symbols: syntax “This is where the first-level heading stops.”
- 53. </html> Closing tag The < and > and / symbols: syntax “This is where the html document stops.”
- 54. Line-by-line 1. <!DOCTYPE html> 2. <html> 3. <h1> 4. Hello world! 5. </h1> 6. </html>
- 55. When viewed in browser
- 56. Revision: what we practised 1. Using a plain text editor 2. Using a browser 3. Writing HTML 4. Saving and viewing your web page 5. Some HTML tags 6. How to mark up a heading
- 57. <SECTION> 3: EXERCISE Do this exercise after ensuring that you’re familiar with the outcomes of <section> 2.
- 58. Download index.html http://bit.ly/saoughtml A clean .html file for you to work on Save as …
- 59. Consider the meaning of: <head> <meta> <style> <body> What kind of instruction might each tag deliver?
- 60. Customise the following content <title> <h1> <h2> <p>
- 61. Add the following content <em> <strong> <ol> <ul> <li>
- 62. Class exercise @kosieeloff http://bit.ly/saoughtml
- 63. Clarifications In case I need to clarify a few things — and if there’s time.
- 64. The main markup language of the web. One of many markup languages
- 65. Why should I understand HTML? “…follows markup conventions in publishing industry in the communication of printed work between authors, editors, and printers.”
- 67. What about CSS?
- 70. </html>
Editor's Notes
- #2: Kosie EloffDepartment of Information Science (UP)
- #3: 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
- #5: Kosie EloffDepartment of Information Science (UP)
- #9: Kosie EloffDepartment of Information Science (UP)
- #10: Linking to other texts makes reading hyper.
- #11: http://grupo20hypertext.files.wordpress.com/2010/04/dsc_00016.jpg
- #13: Kosie EloffDepartment of Information Science (UP)
- #15: http://creativeservices.iu.edu/resources/guide/img/example.gif
- #16: Kosie EloffDepartment of Information Science (UP)
- #17: * 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)
- #18: http://creativeservices.iu.edu/resources/guide/img/example.gif
- #21: Kosie EloffDepartment of Information Science (UP)
- #23: http://2.bp.blogspot.com/-dkhXbIT3IGY/TYo7vGKR1HI/AAAAAAAAAbk/CCNioNd2w-E/s1600/bricklayer.jpg
- #25: http://www.annuairedubusiness.com/medias/images/dom-tree.png
- #26: http://tips4pc.com/wp-content/uploads/2010/05/file-types.png
- #30: 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
- #32: * And other information.** Mostly.
- #48: 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
- #65: 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.
- #66: 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
- #69: http://media02.hongkiat.com/css-back-to-basics/css-back-to-basic.jpg
- #70: http://99points.info/wp-content/uploads/2010/03/css_html_javascript.jpg