HTML Introduction and Form PDF

2. Introduction to HTML and Form client side script : HTML Objectives, at the end of this lecture, students will be able to: – Define HTML and explain the use of HTML tags, table, form and frame – Create the simple HTML document – Create HTML document...

2. Introduction to HTML and Form client side script : HTML Objectives, at the end of this lecture, students will be able to: – Define HTML and explain the use of HTML tags, table, form and frame – Create the simple HTML document – Create HTML document with table Introduction HTML the main language of the WWW Web server is used to communicate the page structure to the browser Web Browser is used to render pages HTML defines only the structure of a page Cascading Style Sheet for the page styles Introduction (cont.) An HTML file is a text file containing small markup tags. The markup 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 such as notepad in Windows HTML TAGS HTML documents are text files made up of HTML elements. HTML elements are defined using HTML tags. HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > which are called angle brackets HTML tags normally come in pairs like and where the first 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, means the same as , but in HTML5, all tags must be in lower case Basic html tags Tag Description Defines an HTML document Defines the document's body to Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment HTML element HTML element is the root element of the document = contains all other elements HTML elements begin with and ends with : Untitled Page HTML document structure HTML documents have TWO parts: – Head : contains document title. – Body: contains the information. HTML document structure (cont.) Head Element your title Body Element your information HTML syntax An element in HTML represent a structure. Consists of a start tag, content and end tag Example: – = this is a sample start tag – = this is a sample start tag with an attribute. – = this is a sample end tag – Welcome = this is div element – = this is empty element. It uses a self-closing element Example of HTML codes Title of page This is my first homepage. This text is bold HTML headings Largest Heading h2 size h3 size h4 size h5 size Smallest Heading HTML text elements This is a paragraph (line break) (horizontal rule) This text is preformatted  Please take note… Contoh kenderaan : basikal, kereta dan motor Contoh kenderaan : basikal, kereta dan motor Contoh kenderaan : basikal, kereta dan motor HTML text elements Logical Styles This text is emphasized This text is strong This is some computer code HTML Text Elements Physical Styles This text is bold This text is italic  HTML Image HTML Links, Anchors, and Image Elements This is a Link Send e-mail A named anchor: Useful Tips Section Jump to the Useful Tips Section HTML Links, Anchors, and Image Elements The target Attribute The target attribute defines where the linked document will be opened. – The code below will open the document in a new browser window: Visit W3Schools! – The code below will open the document in the current active window Visit W3Schools! HTML Unordered List First item Next item HTML Ordered List First item Next item  HTML Definition list First term Definition Next term Definition Table Table – Organize data into rows and columns – All tags and text that apply to the table go inside … tags – TABLE element Attributes – BORDER lets you set the width of the table’s border in pixels – ALIGN: left, right or center – WIDTH: pixels (absolute) or a percentage Table TABLE element – …… Table row element used for formatting the cells of individual rows – …… column contents table.html Firstname Lastname Age Natasha Amin 20 Anne Jackson 44 Ravi Chandran 24 Sliced image in a borderless table Aligning with table  It’s easy to align web elements in a table.  Use table only for simple web layout.  However, making page layout with table is inappropriate  Tables are Inflexible  Nested Tables Load More Slowly  Tables Hurt Search Engine Optimization  Tables do not Always Print Well  Use CSS instead! Entities (Special Characters) &lt; is the same as < &gt; is the same as > &#169; is the same as ©  Other Elements Text quoted from some source. Address 1 Address 2 City Resources Forms : URL : http://www.cwru.edu/help/interHTML/ch8.html HTML http://www.w3schools.com/html/default.asp