CHAPTER 2 MARKUP LANGUAGE Madam Hazwani binti Rahmat http://fsktm2.uthm.edu.my/hazwani/v2/
HTML HISTORY In 1994, Tim Berners Lee founded the World Wide Web Consortium (W3C) in an effort to encourage the universality and interoperability of HTML and to promote an open forum for discussion among web developers. W3C is an industry consortium that seeks to promote standards for the evolution of the web and web technologies. Although no one organization dictates the rules or standards for HTML, W3C is regarded as the de facto organization to govern HTML. WHATWG (Web Hypertext Application Technology Working Group) was formed in response to the slow development of web standards monitored by the W3C. W3C and WHATWG are in charge of developing HTML 5 which is the latest HTML version.
ENTERING HTML TAGS AND TEXT (1) Web pages structures are defined by <!DOCTYPE> tag and 4 sets of tags (<html>, <head>, <title> and <body>) which divide the HTML file into basic sections such as the header information and body of the page that contains text and graphics. <!DOCTYPE> tag is used to tell the browser which HTML or XHTML version and type the document uses. <html> and </html> tags indicates the start and end of an HTML document.
ENTERING HTML TAGS AND TEXT (2) <head> and </head> tags contains the web page title and other document header information such as <title> and </title> tags which indicates the title of the web page displayed in browser title bar. <body> and </body> tags holds web page content (text, images, links, and other content) .
ENTERING HEADINGS (1) Headings serves to separate text and introduce new topics on web pages. The heading used for this purpose vary in sizes range from <h1> through <h6>, with <h1> being the largest. The <h1> tag is used to apply Heading 1 style to the main heading on a web page because it is the largest heading size. The main heading often presents the most important message on a web page or contains the name of business, school, or organization.
Font size and relative importance ENTERING HEADINGS (2) A web page usually has only one main heading; the HTML file for that web page thus usually has only one set of <h1></h1> tags. Example : <h1>This is a Heading</h1> INCREASE DECREASE Font size and relative importance
ENTERING PARAGRAPH OF TEXT (1) Web pages generally contain a significant amount of text. Breaking the text into paragraph helps to separate key ideas and make the text easier to read. The <p> start tag is used to indicate the start of a new paragraph. When the browser finds a <p> tag in an HTML file, it starts a new line and insert a blank line above the new paragraph. The </p> end tag indicates the end of the paragraph.
ENTERING PARAGRAPH OF TEXT (2) Example : <p>This is a sentence of text.</p>
CREATING A LIST (1) Lists is used to structure text into an itemized format. Typically, lists are: bulleted (unordered) or numbered (ordered). The <ul> or <ol> tag is entered to define the type of list, Each item in a list must have the <li> tag at the start and the </li> tag at the end. These tags are used to define list item in an ordered and unordered list.
CREATING A LIST (Unordered List) An Unordered List, which is also called a bulleted list, format information using small images called bullets. The <ul> and </ul> tags must be at the start and end of an unordered or bulleted list. Example : <ul> <li>Printer</li> <li>Mouse</li> </ul> Printer Mouse Unordered List
CREATING A LIST (Ordered List) An Ordered List, which is also called a numbered list, formats information in a series using numbers or letters. An ordered list works well to organize items where order must be emphasized, such as a series of steps. The <ol> and </ol> tags are used at the start and end of an ordered or numbered list. Example : <ol> <li>Printer</li> <li>Mouse</li> </ol> Printer Mouse Ordered List
ADDING AN IMAGE Images are used in many ways to enhance the look of a web page and make it more interesting and colorful. The <img> tag is used to include an image in a web page. The src attribute is used to define the URL of the image to load. Example : <img src=“http://www.mySite.com/images/pic.gif”>
ADDING LINKS WITHIN A WEBPAGE The <a> and </a> tags are used to create links in a web page. It is also called the anchor tag because it is used to create anchors for links in a web page. The href (hypertext reference) attribute is used to define the URL of linked page or file. Example : <a href="http://www.mySite.com/nextpage.html”>Next page</a>
CREATING TABLES IN A WEBSITE (1) The <table> and </ table > tags are used to indicates table. Table consist of rows, columns, and cell, much like spreadsheets. The <tr> and </tr> tags indicates table row. A row is a horizontal line of information. A column is a vertical line of information. The <td> and </td> tags are used to specify the contents of a cell. A cell is the intersection of a row and column. Example : <img src=“http://www.mySite.com/images/pic.gif”>
CREATING TABLES IN A WEBSITE (2) Example : <table> <tr> <td>Product</td> <td>Quantity</td> </tr> <tr> <td>Printer</td> <td>5</td> </tr> </table> Product Quantity Printer 5
CREATING FORM ON A WEBSITE (1) Form is used to gather information from web site visitors for a number of purposes. Few of commonly used forms include: Feedback form : to gather visitor’s comments on the web site Guestbook : to allow user to sign in as visitors to the site Registration form : for visitor to create an account, including username and password. Survey form : to gather information on any number of topics. Search form: for users to initiate a search for a word, a phrase, or other information. Order form : to select product and enter shipping and payment information.
CREATING FORM ON A WEBSITE (2) A web page form has 3 main components: Input controls, which provide input mechanism on form <form> tag, which contains the information necessary to process the form, and Submit button, which sends data to be processed Example : <form name="input" action=“action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
CREATING FORM ON A WEBSITE (3) Input controls can be classified as: data input control or text input control. Data input control can either be a radio button, checkbox, or selection menu. Text input control is either a text box, textarea box or a password box.
CREATING FORM ON A WEBSITE (4) Form statement start with the <form> tag and end with the </form> tag. Input controls in a form are created using either: HTML tags or The select and text area controls are created using HTML tags, <select> and <textarea> respectively. attributes of HTML tags. The text boxes, check boxes, radio buttons, and Submit and Reset buttons are all created using the type attribute of the <input> tag.
CREATING FORM ON A WEBSITE (5) Form controls are useless unless the information entered in the form can be submitted for processing. When a user clicks the submit button, all data currently entered in the form is sent to the appropriate location for processing. The submit button is created by using the attribute, type=“submit” in an <input> tag. Example: <input type="submit" value="Submit">
ADDING TEXT BOXES Text box allows for a single line of input. The <input> tag is used to create a text box. The attribute and value; type=“textbox” , specifies that the input control is a text box. The name attribute is used to describe the information to be entered in the text box. Example: <input type="text" name="lastname">
ADDING CHECKBOXES Checkboxes allows multiple options to be selected. The <input> tag is used to create an input control. The attribute and value; type=“checkbox” , specifies that the input control is a checkbox. The name attribute is used to distinguish the values associated between multiple checkboxes. The value attribute indicates the value which will be submitted if the checkbox is selected. Example: <input type="checkbox" name="vehicle" value="Car">I have a car
ADDING SELECTION MENU (1) The <select> tag is used to start a selection menu and the end </select> tag indicates the end of the selection menu. It is used when limited number of choices are available for users. The name attribute is used to assign name to the selection menu. All choices or options are contained within the <select> and </select> tags. The start <option> and end </option> tags define the text options that are available and appear in the list.
ADDING SELECTION MENU (2) Example: <select name=“brands"> <option value=“acer">Acer</option> <option value=“hp">Hp</option> </select>
ADDING RADIO BUTTON The <input> tag is used to create an input control like radio button. Radio buttons are appropriate when user can select only one choice from a set of two or more choices. Questions with a Yes or No answer are perfect for the use of radio buttons. The attribute and value; type=“radio” , specifies that the input control is a radio button. The name attribute limits the user to select only one of the options since all radio button will have the same name assigned. The value attribute defines value for each radio button. Example: <input type="radio" name="sex" value="female">