Institute for Satellite & Software Applications

Transcription

1 Visual Programming 1 Section 2 Institute for Satellite and Software Applications HTML Tutorial Phase I Training Manual Compiled by the Website Development Team Institute for Satellite & Software Applications

2 Table of Contents Section Page 1. Objectives 3 2. Programs to start with HTML Getting started with HTML Four Basic HTML Tags Creating your first web page 6 6. Headings Paragraphs and Line breaks Comments in HTML Text Formatting Fonts Images Background Images and background color Lists Hyperlinks Tables Design Templates 27 2

3 1. Objectives This skills transfer is aimed at beginners, or people completely new to HTML. The aim is to deliver a concise course from which to derive a basic grounding in HTML. The following is some of the aspects that will be covered: What is HTML? Formatting our text Changing the color and appearance of text Including comments in our code Changing the background of the page Using images Using links Using lists Using tables What is HTML? HTML is a computer language used to allow website creation. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create HTML stands for Hyper Text Markup Language An HTML file is a text file containing small mark-up tags The mark-up tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor How does it work? HTML consists of a series of short codes typed into a text-file by the site author these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Mozilla Firefox 3

4 2. Programs required to start with HTML 1. You will need a text editor of your choice. If you re using Windows it ll be Notepad or WordPad How to Open Notepad: Click on Start Programs Accessories Notepad 2. You will need a web browser. A browser is the program that makes it possible to browse and open websites i.e Internet Explorer or Mozilla Firefox. It is not important which browser you use. The most common is Microsoft Internet Explorer. But there are others such as Opera and Mozilla Firefox and they can all be used or 4

5 3. Getting started HTML code consists of "tags" that look like this: <html> All of the tags use the angle brackets "<" and ">" ("less than" and "greater than") and have some name or letter inside of the brackets. Most HTML tags also have a "closing tag" </> You can use either upper case or lower case in HTML. What is HTML Tags? The tags are what separate normal text from HTML code. You might know them as the words between the <triangle-brackets>. They allow things like images and tables to be inserted on your page. Different tags will perform different functions. The tags themselves don t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this: <b>these words will be bold</b>, and these will not. In the example above, the <b> tags were wrapped around some text, and their effect will be that the contained text will be bolded when viewed through a web browser. HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B> 4. The Four BASIC HTML Tags Explained <html> this tag identifies a html document, all web pages (html documents are web pages) must have this tag first (or almost first). <head> this signifies the start of a section of the html document called the "head". This section doesn't show up in the browser but can contain info that the browser can use. In our example the head section will contain the title only. Header information is not displayed in the browser window. <title> this is the name of the web page. It doesn't show up in the page itself but in the title bar of the window that holds the web page, <body> this is the beginning of the section that shows up in the web page. Inside this section we will write the web page. 5

6 5. Creating your First Web page. Open Notepad (or your text editor).you should see a completely blank page. Type in the text below. Example HTML code: Type in the following text: <html> <head> <title>title of page</title> </head> <body> <h1>this is my first homepage.</h1> <b>this text is bold</b> </body> </html> 6

7 Saving the file Once you have finished, go to the "File" menu and click on "Save As". This will prompt you to create a name for your file. In the box, type in mypage.html. At the bottom of the prompt you should see a space that says "Save as Type". The default is.txt, so you will need to change it. Click on the down arrow on the right side of the input box. You should be able to highlight All Files(*.*). Click on this to make the change. You should see something similar to the picture below: Save the file as "mypage.html". Remember to select the All Files option Open your file in a Browser Now you will want to use your web browser to view the file you just created. 1. Start your Internet browser 2. Go to the "File" menu in your web browser. 3. Look for an option that says "Open", "Open Page", "Open File", or a similar phrase. 4. Click this option, a dialog box will appear and you will be able to browse for your file and open it from there 5. Locate the HTML file you just created - "mypage.html" - select it and click "Open". 6. Click OK, and the browser will display the page. 7

8 Alternatively, Using the file explorer, go to the directory were the mypage.html file was saved and double click on that file. (Its much easier this way) This is how your page will be displayed in your browser. 8

9 Example Explained The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font. HTML element: <b>this text is bold</b> The HTML element starts with a start tag: <b> The content of the HTML element is: This text is bold The HTML element ends with an end tag: </b> The purpose of the <b> tag is to define an HTML element that should be displayed as bold.!" # 9

10 Your name should appear on the title bar of the page Basic HTML Tags Tag Description <html> Defines an HTML document <body> Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule <!--> Defines a comment 6. Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading. <h1>this is a heading1</h1> <h2>this is a heading2</h2> <h3>this is a heading3</h3> <h4>this is a heading4</h4> <h5>this is a heading5</h5> <h6>this is a heading6</h6> 10

11 $ %& " # '! "!!% (!! ) This is what your file should look like when opening it in a Browser 7. Paragraphs & Line Breaks. Paragraphs are defined with the <p> tag. <p>this is a paragraph</p> <p>this is another paragraph</p> HTML automatically adds an extra blank line before and after a paragraph. 11

12 The Line Break (<br>) tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. <p>this <br> is a para<br>graph with line breaks</p> The <br> tag is an empty tag. It has no closing tag. $ *& % +, -,.-!* 8. Comments in HTML The comment tag is used to insert a comment in the HTML source code. The browser will ignore a comment. You can use comments to explain your code, which can help you when you edit the source code at a later date.  Note that you need an exclamation point after the opening bracket, but not before the closing bracket. Example <!- -My comments will be inserted here--> 12

13 This example demonstrates how to write an address in an HTML document. <html> <body> PO Box 88<br> Highrising<br> Grabouw<br> 7160 </body> </html> $ /& #! /!! 0!!, -, - ) 9. Text Formatting Tags Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <strike> <u> Description Defines bold text Defines big text Defines emphasized text / italics Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Strike through underline 13

14 Special Characters: Result Description Entity Name Entity Number non-breaking space < less than < < > greater than > > & ampersand & & " quotation mark " " ' apostrophe ' (does not work in IE) ' Other Commonly used Special Characters : Result Description Entity Name Entity Number cent pound yen copyright registered trademark multiplication division &divide $ 1& 2!/ " * % /!1 Tag Attributes Tags can have attributes. Attributes provide additional information to an HTML element. The following tag defines an HTML font: <font>. With an added size attribute, you can tell the browser that the text should have a specified size: <font size="2"> Attributes always come in name/value pairs like this: name="value". Attributes are always specified in the start tag of an HTML element. Attributes and attribute values are also caseinsensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values. 14

15 10. Fonts 10.1 Size attribute Font sizes range from 1 the smallest to 7 the largest. The default font size is 3. To change the font size <font size = 6 > This is font size six </font> 10.2 Color attribute. The color attribute for the <font> tag sets the colour of the enclosed text. The value for the font colour can be expressed in 2 ways. 1) RGB components with the colour value expressed as a 6 digit hexadecimal number ranging from # being black to #FFFFFF which is white. 2 digits for each colour. 2) Alternatively, you can set the font colour using any one of the standard colour names <font color = red > This is red </font> $ 3& 2!1 " *!4 %% /!4/! 3 15

16 $ 5& "! 4 8 *! 2 9! : 9!! 11. Images. The <img> tag lets you reference and insert a graphics image into an HTML document. The src attribute The src attribute indicates the source / location of the image. For example, <img src = "pics/tux.gif"> inserts an image tux.jpg from the pics directory. Image alignment attribute Method I There are two image alignment attributes: left and right, 16

17 <img src = "pics/isa.jpg" align = right > aligns the image to the middle of the base line text. Method II <center > <img src = "pics/isa.jpg"></center> Method III <div align= center ><img src = "pics/isa.jpg"></div> Border attribute Use the border attribute to create a border around the image. <img src = "pics/issa.jpg" align = middle border = 4 > Border = 0 removes the border from the image. Height and width attributes These specify the height and width of the image. Used often to resize images <img src = "pics/issa.jpg" align=middle" border= 4 width="200" height="150"> 12. Background color and background Images The attributes that control the document background colour, text colour and the document margins are used with the body tag. <body bgcolor="#ff0000"> sets the background colour to red <body bgcolor= green > sets the background colour to green. <body background="pics/coat.jpg"> inserts image logo.jpg from the pics directory as the background image. 17

18 To set the text colour of the document to blue < body text ="blue"> To set a background image and text <body background = "pics/coat.jpg" text ="blue"> $ ;&!"# $%&# # ' " & ( "%")" *+, )- 18

19 13. Lists Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul> <li>nelspruit</li> <li>skukuza</li> <li>witbank</li> <li>bushbuckridge </li> </ul> Here is how it looks in a browser: Nelspruit Skukuza Witbank Bushbuckridge Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol> <li>nelspruit</li> <li>skukuza</li> <li>witbank</li> <li>bushbuckridge </li></ol> Here is how it looks in a browser: 1. Nelspruit 2. Skukuza 3. Witbank 4. Bushbuckridge Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. $ < = &">? 0 *! < 19

20 Identify at least 4 HTML elements used in the below picture. E.g. images, formatting tags etc. 20

21 14. HYPERLINKS They're what made the web The Web. The ability to link from one document to another is one of the most central features of HTML. Hypertext can link to: A place in your current page, Another WWW website - anywhere! and may be comprised of text or images. Hypertext links are enclosed within the tagset : <a href="location">insert a name for your link here</a>. Between the anchor open/close tags, place any text or image which is to be "hyper"...that is, which when clicked will cause the browser to jump to the linked location. The text between the tags will automatically be underlined To define a location name within a web page, use the form: <a name="location"></a>... with no space or text between the tag and its closing. Place the tag just above any line in your html to which you'd like to go to. HTML <a> tag The <a> tag defines an anchor. An anchor can be used in two ways: 1. To create a link to another document by using the href attribute 2. To create a bookmark inside a document, by using the name or id attribute Example Source <p>linking to New Page: <a href="newpage.html">new Page</a> </p> <p> Opening New Page in a new browser window: <a href="newpage.html" target="_blank">new Page</a> </p> Output Linking to New Page: New Page Opening New Page in a new browser window: New Page 21

22 $ "> = &%>? %" 0 9 # 9 9 %% When you create a link you can target a page by a name you have assigned it. TARGET has four predefined values, which can be used as if certain windows and frames already have names without you having to assign them: Target Explained "_blank" "_parent" "_self" opens the new document in a new window. used in the situation where a frameset file is nested inside another frameset puts the new document in the same window and frame as the current document Links From Your Page This is what's known as a mailto: command. It follows the same coding as the hyperlink. What this format does is place a link on your page on which people can click to send you an . Example <a href="mailto:edwina@domain.com">click here to send an </a> Links to websites / documents Government website : <a href= > Government Website </a> Acrobat Documents : <a href= filename.pdf > HTML Manual </a> Word Documents: <a href= filename.doc > HTML Manual </a> Excel Documents: <a href= filename.xsl > HTML Manual </a> 22

23 Images as a link Example <html> <body> <p> You can also use an image as a link: <p></p> <a href="red.html"> <img border="0" src="pics/button.jpg" > </a> </p> </body> </html> This is how it will look in your Browser: $ ">! # 8 9! # 99 $ "" 5 # 8 9; ; #

24 15. Tables To design professional looking pages, you ll need to organize your information in tables. Tables are basically boxes that can contain text, colors, and graphics. Most often you cant see the tables themselves; you can only see their contents. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Table Tags Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <caption> Defines a table caption <colgroup> Defines groups of table columns <col> Defines the attribute values for one or more columns in a table <thead> Defines a table head <tbody> Defines a table body <tfoot> Defines a table footer 24

25 CREATING A TABLE Let's begin with a simple and common use for tables, i.e. a list of staff members. Suppose we have four people whose names we want on the list. The data could be arranged in a table like this: <table> <tr> <td>1</td> <td>ivy Dibakoane</td> </tr> </table> Which gives us this table: 1 Ivy Dibakoane This table uses the basic three tags all tables must have: <TABLE> creates the table. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color. <TR > (Table Row) defines each row of the table. <TD> (Table Data) defines each cell of the table. The first modification we'll make to this table is to add borders. Borders will help us see how the table is laid out. <table width="100%" border="1"> <tr> <td> </td> </tr> </table> $ "% = &%1? 0 " % A "> > B A " 8" # 4A*% 0!! "% Your table should look like this: Name Surname 25

26 $ "* = &%1? 0 % " A "> > B A " 8" 7 % 0!! "% Your table should look like this: Home About us CCCC0!! )CCCC 16.DESIGN TEMPLATES Tables are mostly used to create design templates for formatting menu s, placing LOGO s and web information in a controllable and structured manner. Below are examples for horizontal and vertical menu s that can be placed in a table to make a template. $ "/ 4! 9 Example for horizontal menu Table: <html> <head> <title>horizontal Table</title> </head> <body> <table width="100%" border="1"> <tr> <td>menu 1</td> <td>menu 2</td> <td>menu 3</td> <td>menu 4</td> <td>menu 5</td> </tr> </table> </body> </html> This is what your Table should look like. Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 26

27 $ "1 ' 0 " 1 A "> > B A " 8 2 ":2 % "1./ %!! ) Example for vertical menu Table: <html> <head> <title>vertical Table</title> </head> <body> <table width="50%" border="1"> <tr> <td><img src= pics/logo.jpg > </td> </tr> <tr> <td>menu 1</td> </tr> <tr> <td>><a href= ex2.html > <img src= pics/exer2.jpg > </a> </td> </tr> <tr> <td>menu 3</td> </tr> <tr> <td>menu 4</td> </tr> <tr> <td>>><a href= ex5.html > Menu 5</a></td> </tr> <tr> <td><p>picture</p> <p> </p> <p> </p></td> </tr> </table> </body> </html> This is what your Table should look like: Menu 1 Menu 3 Menu 4 Menu 5 Picture $ "3 ' 0 3 " A "> > B A " "3 8", % ) 8!!! 9, % )./ %!! ) 27

28 $ "5 ' 0 * " A "> > B A " 8" * =,-DE,.-? 8% 4 "1 8* 3 =,-DE,.-? "5 This is what your Table should look like Menu 1 Menu 2 Menu 3 Menu 4 $ "; = &">? 0 " % A "> > B A " " A%>B % A;>B 8" "3!"; This is what your Table should look like Menu 1 Menu 3 Menu 4 Menu 5 Picture 28

29 $ "< ' 9 :9 9! "; =?!! 7 9 % : 1 5 ; ">.! 8 "< $ %> 2 9!"<! 0)"0!% % "! % "< 9 %( 9)! 1:3:;"> Having completed all the exercises successfully, you are now ready to create your own website. 29

30 $ %" 0! F / F 4!! :$ :# : : :$ :2 :@ :0 ( :G :: HH / # ")%%%" + # ""% 30

31 17. Additional Enhancements Scripting languages, marquees and Java Applets were invented specifically for use in web browsers to make websites more dynamic. On its own, HTML is capable of outputting moreor-less static pages. Once you load them up your view doesn't change much until you click a link to go to a new page. Adding Scripts to your code allows you to change how the document looks completely, from changing text, to changing colours, to changing the options available in a drop-down list 17.1 Marquee <MARQUEE...> creates a scrolling display. It can work well for announcements. <marquee> Welcome to my webpage </marquee> The basic use of <MARQUEE...> is simple. Put most any kind of markup between <MARQUEE...> and </MARQUEE>. You can even use an image in the marquee <marquee> Hi There! <img src="pics/mountain.jpg" height=33 width=82 > </ marquee > By default <MARQUEE...> has a WIDTH of 100%, so it might appear as a block level. However, if you set the width to something smaller than 100%, you might notice that the marquee is in line with the surrounding text. <MARQUEE WIDTH="20%"> Welcome to my webpage </MARQUEE> WIDTH: how wide the marquee is HEIGHT: how tall the marquee is DIRECTION: which direction the marquee should scroll BEHAVIOR: what type of scrolling SCROLLAMOUNT: how far to jump SCROLLDELAY: how long to delay between each jump BGCOLOR: background color HSPACE: horizontal space around the marquee VSPACE: vertical space around the marquee Exercise 22: open any webpage of your preivous exercises and add a marquee. 31