1 / 26

HTML tags

HTML tags. Skills : adding HTML tags, text editor IT concepts : plain text, computer components – storage versus memory, separation of content and format. This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. . HTML tags. What is HTML?

wattan
Download Presentation

HTML tags

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML tags Skills: adding HTML tags, text editor IT concepts: plain text, computer components – storage versus memory, separation of content and format This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

  2. HTML tags • What is HTML? • The Notepad text editor • Create an HTML document • Tim Berners-Lee

  3. What is HTML? • Hypertext Markup Language • HTML tags are added to Web documents to control their layout and appearance. Hypertext is non-linear – the reader can follow links, jumping from page to page. Linear text is read from start to finish. Hypertext systems predate the Web, but the Web caught on.

  4. Same content, different layout and appearance

  5. There are tools for creating Web sites that generate HTML for you – why learn HTML? • Every user • To be able to modify pages – for example adding a feature to a blog • To understand how the technology works in order to feel empowered and in control • Developers • To be able to write programs that generate HTML We will not use an HTML generating tool, we will compose HTML documents using a plain text editor.

  6. HTML tags • What is HTML? • The Notepad text editor • Create an HTML document • Tim Berners-Lee

  7. The Notepad text editor • Notepad is included with Windows. • Notepad is in the Accessories program group. • Start > All programs > Accessories > Notepad

  8. Notepad versus Word Notepad – a plain text editor Word – a full word processor

  9. Notepad versus Word

  10. An ASCII example My first name, Larry, would be encoded as follows: It requires only five bytes of memory or storage: Only the character codes are recorded.

  11. Extra information in a .doc file This requires more memory or storage.

  12. HTML tags • What is HTML? • The Notepad text editor • Create an HTML document • Tim Berners-Lee

  13. Before starting, turn off extension hiding start > computer > tools > folder options ... > view Uncheck You only have to do this one time.

  14. Type in the text, then …

  15. Add the basic HTML tags …

  16. Save the file on your hard drive

  17. Naming your HTML file Use the extension htm or html. Be careful to select All Files as the type.

  18. Check to see the file was saved in the directory you selected Be sure the file has the extension .htm, not .txt.

  19. Display the page using a Web client View the page by double clicking on the file name or using the File > Open command in the Web client. But, I do not like the formatting – I want to add a heading and a paragraph break, so I must add some more HTML tags.

  20. Add the <h2> … </h2> and <p> tags

  21. Save it on the hard drive then refresh using the Web client

  22. Note that it re-wraps the text if the window is re-sized

  23. Notepad and a Web client side by side Simple debugging -- change the HTML, save it, and refresh the client.

  24. HTML tags • What is HTML? • The Notepad text editor • Create an HTML document • Tim Berners-Lee

  25. Tim Berners-Lee invented HTML Tim Berners-Lee was knighted by Queen Elizabeth for his invention of the World Wide Web. He is shown here, along with the first picture posted on the Web and a screen shot from an early version of his Web browser.

  26. Reference links • A dozen tags to get started • HTML tutorials with executable examples • The original ASCII code

More Related