410 likes | 512 Views
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
E N D
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 • 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
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
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
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.
How to create a Hyperlink • Under Link to, click Place in This Document.
How to create a Hyperlink • Under Select a place in this document, click the slide that you want to use as the hyperlink destination.
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
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
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
Have you ever seen a Web page and wondered "Hey! How did they do that?"
Right-click in the page and select "View Page Source" (Firefox)
This will open a window in Notepad containing the HTML (Markup code) that created the page
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”
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
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
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
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.
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
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
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
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
Where do I get Notepad ? (Screen will vary according on the OS)
How to turn a regular text file into an HTML file • From the File menu in Notepad choose Save As
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)
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.
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)
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.
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
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
Double click mypage.html and it will launch in your default browser