1 / 41

HTML – Term 2 (CAPS p33)

HTML – Term 2 (CAPS p33). HTML – Term 3 ( CAPS p36). HTML. Reinforce the concepts of - Web sites - Web pages - Hyperlinks - URLs What is HTML? What is an HTML editor?. Web pages.  A web page is a document that shows up on the internet when you type in the web page's address

sammy
Télécharger la présentation

HTML – Term 2 (CAPS p33)

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 – Term 2 (CAPS p33)

  2. HTML – Term 3 (CAPS p36)

  3. HTML • Reinforce the concepts of - Web sites - Web pages - Hyperlinks - URLs • What is HTML? • What is an HTML editor?

  4. Web pages •  A web page is a document that shows up on the internet when you type in the web page's address • In other words: it's any page that you see when you surf the internet  • Every new screen you see is a new web page • Web pages are what make up the World Wide Web

  5. Web sites • Please note that a Web page is not the same thing as a Web site. • A Website is a collection of relatedWeb pages, for examplethe information provided by a particular business or organisation • E.g. on the NMMU website, clicking a hyperlink on one Web page “jumps” you to another page of the same organisation • The main page of a Web site is called a Homepage of that site

  6. Hyperlinks • A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new section (in whatever order you want) within the current document, or a new document, or to another website. • When you move the cursor over a link, the arrow will turn into a little hand • These other locations are called targets • The link is displayed as blue underlined text • This system of linked information is called hypertext, althoughhyperlinks are not limited to text

  7. How to create a Hyperlink in PowerPoint • In Normal view, select the text or the object that you want to use as a hyperlink. • On the Insert tab, in the Links group, click Hyperlink.

  8. How to create a Hyperlink • Under Link to, click Place in This Document.

  9. How to create a Hyperlink • Under Select a place in this document, click the slide that you want to use as the hyperlink destination.

  10. Unified Resource Locator, (URL) • A URL or Uniform Resource Locator specifies where you can find a resource on the web • You are probably most used to thinking of them as web addresses • As you move around the Web, you will see the URL of each web page in the address bar of your browser , e.g. http://www.nmmu.ac.za

  11. URLs

  12. In the URL http://www.nmmu.ac.za • http: - stands for HyperText Transfer Protocol, the method used for transmitting and formatting web pages on the World Wide Web

  13. Types of Organisations

  14. Geographical Abbreviations

  15. Secure URL • When an URL begins with https:// OR • a small closed lock is displayed somewhere on the page, often next to the URL, • it means that the site is encrypted for security

  16. Secure URL

  17. Have you ever seen a Web page and wondered "Hey! How did they do that?"

  18. Right-click in the page and select "View Page Source" (Firefox)

  19. Right-click in the page and select "View Source" (IE)

  20. This will open a window in Notepad containing the HTML (Markup code) that created the page

  21. Markup Language in every daylife • When creating a document using Microsoft Word , you can provide a structure that makes the document easier to read and to understand, e.g.: • Add styles • Change to larger font • Start a new paragraph • Insert tables • Create bulleted lists, etc. • If you saved it with the name “MyLetter”, the software would add .docxto the file name (.doc in older versions) • So your file name will be “MyLetter.docx” and not just “MyLetter”

  22. Marking up documents for the Web • When marking up documents for the Web, you are performing a very similar process, except you do it by adding special symbols and words called tags to the text • A saved web page comes with the extension .htm or .html • Browsers can recognise either extension

  23. What is HTML? • Hyper Text Mark-up Language is a set of coded instructions (markup code) that specifies the layout and appearances of web pages • Please note that HTMLis not a computer programming language, it is a language designed to improve the presentation of text • Therefore it has its own rules and conventions known as HTML syntax, whichinvolves the way HTML tags, and the text they control, are structured

  24. HTML Tags are not displayed • When the browser sees these Tags it goes to work, displaying whatever you typed and hidingthe Tags from your viewers

  25. Computer Programming Language • A computer programming languageis a language used to write computer programs, which involve a computer performing some kind of computation or algorithm and possibly control external devices such as printers, disk drives, robots, and so on.

  26. What is an HTML editor? • To create a web page, you use an HTML editor • We define an HTML editor as a software application that is used in making web pages • This can be: • a simple Text editor or • a What You See Is What You Get (WYSIWYG) editor

  27. What is a text editor? • A text editor is a program used for simple text documents to type and edit text • WordPad and NotePad for Windows and SimpleText and TextEdit for Mac are common text editors • You can write HTML code and create HTML pages with a simple text editor, as long as you know the correct HTML syntax

  28. What is a WYSIWYG editor? • WYSIWYG (What You See Is What You Get) • WYSIWYG editors provide an interface which allows web developers to create a page that is similar to how it will be displayed in the web browser • Examples include Microsoft Front Page and Adobe Dreamweaver

  29. Using text editor • All you need is a browser (e.g. Internet Explorer or Mozilla Firefox) and a simple text editor such as Notepad • Access Notepad by clicking Start > All Programs > Accessories > Notepad

  30. Where do I get Notepad ? (Screen will vary according on the OS)

  31. Notepad

  32. How to turn a regular text file into an HTML file • From the File menu in Notepad choose Save As

  33. How to turn a regular text file into an HTML file • Note the default extension at the bottom, under “Save as type” It says, Text Documents (*.txt)

  34. How to turn a regular text file into an HTML file • If you leave it on that then you won’t have a web page, you’ll have a text file.

  35. How to turn a regular text file into an HTML file • Click on the drop down list and change it to “All files” • In the File Name box, give your file a name, for example mypage, and add the .html extension (E.g.: mypage.html)

  36. How to turn a regular text file into an HTML file • .html only needs to be added at the time you create the file. • Once it's made you simply save it because Notepad will already know that it's an HTML file.

  37. Where do I save my .html file? • Click on Save and you’ll have a HTML page that can be displayed in a browser • It doesn't matter where you save the document on your hard drive - as long as you remember where you saved it so you can find it again 

  38. mypage.html saved on the desktop

  39. TIP: Use all lowercase • This is not strictly necessary, but is recommended. • Also, try not to add spaces to web page names as this can cause problems. You can use underscores or hyphens, though. • So these two are OK: first_web_page.html first-web-page.html • But these two should be avoided: first web page.html firstWebPage.html

  40. How to open and edit mypage.html in Notepad

  41. Double click mypage.html and it will launch in your default browser

More Related