11.07.2015 Views

A Short HTML Tutorial

A Short HTML Tutorial

A Short HTML Tutorial

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Introduction to <strong>HTML</strong>Basic <strong>HTML</strong>TablesFormsAdapted from W3Schools <strong>HTML</strong> <strong>Tutorial</strong>


Basic <strong>HTML</strong>From w3Schools.com <strong>HTML</strong> stands for Hyper Text MarkupLanguage An <strong>HTML</strong> file is a text file containing smallmarkup tags (e.g. , etc.) The markup tags tell the Web browser howto display the page


HelloWorld.htmlHello WorldHello World!!!


Hello World tag (not really a tag) defines thetype of the document and which version of<strong>HTML</strong> the document is in. - This tag tells your browser thatthis is the start of an <strong>HTML</strong> document. Thelast tag in your document is . This tagtells your browser that this is the end of the<strong>HTML</strong> document. start of the <strong>HTML</strong>document


Hello World - any header data (e.g. ,, ). Header information is notdisplayed in the browser window. - document body, all data, tables,forms go here. Tags is the text that will bedisplayed in your browser.


<strong>HTML</strong> Tags <strong>HTML</strong> tags are used to mark-up <strong>HTML</strong> elements <strong>HTML</strong> tags are surrounded by the two characters < and > The surrounding characters are called angle brackets <strong>HTML</strong> tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the endtag The text between the start and end tags is the element content <strong>HTML</strong> tags are not case sensitive, means the same as


<strong>HTML</strong> Tables Tables are defined with the tag. Atable is divided into rows (with the tag),and each row is divided into data cells (withthe tag). The letters td stands for "tabledata," which is the content of a data cell. Adata cell can contain text, images, lists,paragraphs, forms, horizontal rules, tables,etc.


Table Examplerow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2


Row and Cols span Name Telephone Bill Gates 555 77 854 555 77 855 First Name: Bill Gates Telephone: 555 77 854 555 77 855


<strong>HTML</strong> Forms A form is an area that can contain formelements. Form elements are elements that allow theuser to enter information (like text fields,textarea fields, drop-down menus, radiobuttons, checkboxes, etc.) in a form. A form is defined with the tag.


<strong>HTML</strong> Forms The most used form tag is the tag.The type of input is specified with the typeattribute. E.G. textbox, button, radio … You can access all input variables throughthe request object in JSP pages Can have multiple forms in one <strong>HTML</strong>document. But don’t do it unless you have to.


<strong>HTML</strong> FormsFirst name:


Submitting an <strong>HTML</strong> form forprocessingSubmit using a special button type called “submit”or submit the page through script.When the user clicks on the "Submit" button, thecontent of the form is sent to another file.The form's action attribute defines the name of thefile to send the content to.The file defined in the action attribute usually doessomething with the received input. Your JSP file


<strong>HTML</strong> Form


References Lots of resources on Web (ViewPageSource any interesting page) http://www.w3schools.com/html/default.asp http://www.w3.org/MarkUp/ CSS and JavaScript tutorial onhttp://www.w3schools.com/ could come inhandy.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!