Slide
advertisement
Introduction to HTML Dr. Afnizanfaizal Abdullah afnizanfaizal@utm.my http://comp.utm.my/afnizanfaizal Before we start… A11CS0084 --- index.html --- xxxx.html --- yyyy.html --- zzzz.html --- audio1.wav audio --- pic01.jpg --- pic02.gif images HTML Background • November 1990, first created by Tim Berners Lee, the father/inventor of WWW • Knighted by Queen Victoria in 2004 • Hypertext is text which is not constrained to be linear. • Hypermedia is a term used for hypertext which is not constrained to be text: for example, it can include graphics, video and sound Words To Know • Tag -­‐ Used to specify ("mark-­‐up") regions of HTML documents for the web browser to interpret. Tags look like this: <tag> • Element -­‐ A complete tag, having an opening <tag> and a closing </tag>. • Attribute -­‐ Used to modify the value of the HTML element. Elements will often have multiple attributes. Simple Meaning • For now just know that: – a tag is a command the web browser interpreter, – an element is a complete tag, – and an attribute customizes or modifies HTML elements. Preparation for HTML • To begin coding and using HTML you need only two things: – a simple-­‐text editor (Notepad, Textpad) – A browser (IE, Netscape, Firefox) • WYSIWYG – Dreamweaver – let you create pages quickly but you can only spicing up or polishing up HTML effects manually – can’t do that if doesn’t know HTML Guide to HTML code • Is not a programming language, it’s a mark-­‐up language • HTML – Hypertext Mark-­‐up Language • Not case sensitive • Use tag for formatting output: new line, paragraph, text size, color, font type, etc. • Can be a single or coupled tag • Tag general format: Single: <tag_format> Double: <tag_format> . . . </ tag_format> Start Tags and End Tags • HTML5 documents delimit most elements with a start tag and end tag. • A start tag consists of the element name in angle brackets – For example, <html> • An end tag consists of the element name preceded by a forward slash (/) in angle brackets – For example, </html> • There are several so-­‐called “void elements” that do not have end tags. • Many start tags have attributes that provide additional information about an element, which browsers use to determine how to process the element. • Each attribute has a name and a value separated by an equals sign (=). Comments • Insert comments in your HTML markup to improve readability and describe the content of a document. • The browser ignores comments when your document is rendered. • Comments start with <!--and end with--> <!-­‐-­‐ This is comments in HTML -­‐-­‐> [Activity 01] Very simple HTML code <html> <head> <title>Simple HTML</title> </head> <body> Hello World! All my content goes here! </body> </html> The Most Important Elements • <html></html> – begins and ends each and every web page • <head></head> – The head functions "behind the scenes." – Tags placed within the head element are not directly displayed by web browsers – JavaScript and CSS elements is place here The Most Important Elements (cont.) • <title></title> – The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser • <body></body> – The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc) More complex code [Activity 02] <html> <head> <title>More about HTML Text</title> </head> <body> This is a normal text<br><b>This is a text (bold)</b> <br> <i>This is a text (italic)</i> <p> <font face=“Arial” color=“#FF0000” size=+3> This is a text with font = Arial, size = 3, color = Red </font> More complex code(cont) <p> Please set me to bold, italic, font = Arial, size = 3, color = Red <p> <pre> This is a preformatted text </pre> </body> </html> HTML attributes [Activity 03] • Attributes are properties of tags. • For example – <font face=“Arial” color=“#FF0000” size=+3> – The tag is <font> and the properties are: • Face • Color • Size – <p align="justify"> ………..</p> – <p align="center"> ……….</p> – <p align="right"> ………… </p> HTML Lists • To create a bulleted list you need to add a <ul> and a </ul> tag at the beginning and the end of the list. • Numbered lists have <ol> tags instead of <ul> tags. • To separate single list items use <li> and </li> tags. • You have the following bullet options: – Disc – Circle – square HTML Bullet Lists HTML Lists • You have the following number options: – Plain numbers – Capital Letters – Small Letters – Capital Roman Numbers – Small Roman Numbers HTML Lists HTML Lists Image • <img src=“image file name” . . . > – <img src="sunset.gif" width="96" height="63" alt="This is an image of sunset" /> Image (cont.) • Alternative Attribute – The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, – or if a user has image files disabled. – Text only browsers also depend on the alt attribute since they cannot display pictures. <img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" align="left" /> Image (cont.) [Activity 04] • Wrap text around the image • Add align="left" or align="right" to the <img> tag Link <a href=“reference object” . . . >linked object</a> reference object : Part of text in the same document Other document Image / animation / audio / video Application logic (CGI script) Client script (JavaScript / VBScript) linked object : Text Image Link(cont.) • Inside document – Declare anchor: <a name="top" id="top"> – Link to anchor: <a href="#top">[go to top]</a> • Outside document – Same website – only directory/filename. Without full url/http <a href="image01.html">Link to outside page in a same website</a> – Different website – full http url <a href="http://www.utm.my">Link-­‐( UTM homepage)</a> Link(cont.) [Activity 05] • Text as a link <a href="http://www.utm.my">This is a link</a> • Link text to an email – <a href="mailto:youremailaddress">Email Me</a> • allow your visitor to send email with the address, subject and text already entered. – <a href="mailto:email@echoecho.com?subject=Sweet Words &body=Please send me a copy of your new program!">Email Me</a> Link(cont.) • Image as a link – <a href="http://www.utm.my"><img src="utm-­‐ scale.gif" width="230" height="230" border="0" /></a> • Thumbnails – Thumbnails are small size (Kilobytes) pictures that link to the larger, high quality picture. – To make a thumbnail save a low-­‐quality version of a picture and make it have smaller dimensions. – Now make this low-­‐quality picture into an image link and have it point to the high-­‐quality picture. Link(cont.) • Link Targets <a href="http://www.yahoo.com" target="_blank"> – Predefined targets are: _blank loads the page into a new browser window. _self loads the page into the current window. _parent loads the page into the frame that is superior to the frame the hyperlink is in. _top cancels all frames, and loads in full browser window. Table Begin table Begin row Column1, Column2, . . . End row . . . End table Table(cont) Begin table = <table . . . > End table = </table> Begin row = <tr . . . > End row = </tr> Column = <td . . . > column content </td> column content : text, image, linked object, etc Table(cont) • Table tags Table(cont) Row/Cell Tags Table(cont) Row/Cell Tags • Valid for <td> tag only! Table(cont) • Attributes: – Sizing using pixel size – Table border & bg col: • <table border="1“bgcolor="#990000"> – Spanning /merging cell • <td rowspan="2"> • <td colspan="3"> – Cell pading: distance between cell borders and content: <table cellpadding="10“> – Cell spacing: width of cell border: • <table cellspacing="10“> – Cell bgcolor: <td bgcolor="#990000">&nbsp;</td> Table(cont) [Activity 05] Table with 2 rows & 3 columns for each row: <table border cols=3 rows=2 width=“100%”> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> </table> Table(cont) More complex table#1 there are two rows <table> <tr> . . .</tr> <tr> . . .</tr> </table> [Activity 06] Table(cont) • First row – two column • Second row – one column <table> <tr> <td>. . .</td> <td> . . . </td> </tr> <tr> <td> . . . </td></tr> </table> Table(cont) • Span two columns for the single column in the second row: <table> <tr> <td>. . .</td> <td> . . . </td> </tr> <tr> <td colspan=“2”> . . . </td></tr> </table> Table(cont) • More complex table#2 • There are two rows (max) <table> <tr> . . .</tr> <tr> . . .</tr> </table> [Activity 07] Table(cont) • Column -­‐ is the first column in the first row • Column -­‐ is the second column in the first row • Column -­‐ is the second column in the second row <table> <tr> <td>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table> Table(cont) • Span two rows for column: <table> <tr> <td rowspan=“2”>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table> Table(cont) • More complex table#3 • It’s your turn….. [Activity 08] Form Begin form Form object components End form Form(cont) • Begin form = <form . . . > • Form object components = Textfiled, Password, Hidden, TextArea, List Box (single/multiple), Radio Button, Check Box, Submit Button, Reset Button, Buttons • End form = </form> Form(cont) <form method=“?” action=“?” …> Form object components </form> Form(cont) • Action = address • Method = post/get <html> <head><title>My Page</title> </head> <body> <!-­‐-­‐ Here goes HTML -­‐-­‐> <form method="post" action="http://gmm.fsksm.utm.my/~isrozaidi/welcome.php"> <!-­‐-­‐ Here goes form fields and HTML -­‐-­‐> </form> <!-­‐-­‐ Here goes HTML -­‐-­‐> </body> </html> Form object components • Textfield <input type= "text" name="???" size="???"> • Password <input type="password" name="?? " size="?? "> • Hidden <input type="hidden" name="??? "> Form object components • TextArea <textarea name=“???” rows=“???” cols=“???”> Default textarea value </textarea> Form object components • List Box (single) <select name="???"> <option value="???">Text 1 <option value="???" selected>Text 2 . . . </select> Form object components • List Box (multiple selection) <select name="??" multiple size="??"> <option value="???">Text 1 . . . </select> Form object components • Radio Button <input type="radio" name="r1" value="v1">Text 1 <input type="radio" name="r1" value="v2" checked>Text 2 <input type="radio" name="r1" value="v3">Text 3 . . . • Check Box <input type="checkbox" name="c1" value="v1">Text 1 <input type="checkbox" name="c2" value="v2" checked>Text 2 <input type="checkbox" name="c3" value="v3">Text 3 . . . Form object components • Button, Submit, Reset <input type="button" value="??? "> <input type="submit" value="??? "> <input type="reset" value="??? "> Sample Form [Activity 09] <form name="myform" action=“?????" method="POST"> <div align="center"> </ br></ br> Name: </br><input type="text" name ="fname" size="25" value=""></br> Age: </br><input type="text" name ="age" size="5" value=""></br> <br><input type="submit" value="Show my name and age!"> <input type="reset" value="Reset!"><br> </div> </form> Frame Object • Display multiple HTML document simultaneously in the same browser window • Why use frame ? • Provide permanent navigation menu Navigation Banner Navigation Content Content Some hate frame • Frames modify the browser interface, which results in no consistency in how operating systems and individual browsers display the results. • Frames are difficult for both blind and mobility-­‐ impaired users. – Screen reader software has a hard time managing the altered interface. – Mobility-­‐impaired users also encounter difficulty moving from frame to frame. • Hard to bookmark – older browser • Ignore if still possible – last choice Frame Object • General Implementation – 1 main page (combine frame 1 and frame 2) – 1 page refer to frame 1 banner.html – 1 page refer to frame 2 content.html Begin set of frame frame1 frame2 End set of frame index.html Frame Object Begin set of frame: <frameset rows/cols ="?, ?"> Frame: <frame src="?" name="?"> End set of frame: </frameset> Frame Object • Example <frameset rows = "20%, *"> <frame src="?" name="top"> <frame src="? " name="bottom"> </frameset> Frame Object • Example <frameset cols = "20%, *"> <frame src="?" name="left"> <frame src="?" name="right"> </frameset> Frame Object • Nested frame Frame Object • Nested frame Basic Example • A frameset is simply an HTML document that tells the browser how to divide the screen into split windows. Basic Example <html> <head> <title>My Frames Page</title> </head> <frameset cols="120,*"> <frame src="menupage.htm" name="menu"> <frameset rows="*,50"> <frame src="welcomepage.html" name="main"> <frame src="bottombanner.html" name="bottom"> </frameset> </frameset> </html> Creating a frameset 1 • A frameset is simply an HTML document that tells the browser how to divide the screen into split windows. • If the frameset looked like this: • The code would be: <frameset cols="120,*"> </frameset> • The left being 120 pixels and the right using the rest of the screen (indicated by the *). Default pages 2 • You can add default pages to frame windows with the ”src” setting. • Default pages are the pages that will be loaded when the frameset is opened the first time. • Furthermore, we can add names to each frame window using the name setting. • This will allow us to make a link in one frame window, open a page in another frame window. <frameset cols="120,*" > <frame src="menu.html" name="menu" > <frame src= "main.html" name= "main" > </frameset> Default pages <html> <head> <title>My Frames Page</title> </head> <body> PLEASE PUT YOUR CONTENT HERE! </body> </html> Default pages • The entire frameset will look like this: – We also have told the browser that the left frame window should load an HTML page called menu.html and that the right window should load an HTML document called main.html. – In addition we have assigned the names menu and main to the two frame windows, so now we're even able to link to specific windows. m e n u main Borders 3 • To make frame borders invisible you simply need to add the parameters "cols-­‐line" to the frameset : <frameset cols="120,*" frameborder="0" border="0" framespacing="0"> <frame src="menu.html" name="menu" > <frame src="main.html" name="main" > </frameset> Resizable windows • If you don’t want the frame windows to be resizeable, you should add the parameter "noresize" to the frame src lines: <frameset cols="120,*" frameborder="0" border="0" framespacing="0"> <frame src="menu.html" name="menu" noresize> <frame src="main.html" name="main" noresize> </frameset> 4 Scrollbars 5 • Lets say you don’t want a scroll bar in the menu window. • Then the code should look like this: <frameset cols="120,*" frameborder="0" border="0" framespacing="0"> <frame src="menu.html" name="menu" noresize scrolling=no> <frame src="main.html" name="main" noresize scrolling=auto> </frameset> • If you leave out the setting for scrolling, a scrollbar will appear if needed -­‐ otherwise not. Links within • If you have an HTML document with a hyperlink on the text "Analysis" for instance, that links to a page called "analysis.htm" then it appears in the document as: Jump to the <a href="analysis.html"> Analysis</a> of the project • Now if the link was in the menu window of our example, and we wanted it to load a page in the main window, the HTML code would be: Jump to the <a href="analysis.html" target="main"> Analysis </a> of the project Links within • Previously, we simply added the parameter target="main" to the parameter <a href> tag. • Four target names are reserved, and will be interpreted by the browser in this way: – _blank loads the page into a new browser window – _self loads the page into the current window. – _parent loads the page into the frame that is superior to the frame the hyperlink is in. – _top cancels all frames, loads in full browser window. Links within <ul> Menu <li><a href=“main.html" <li><a href=“main.html" <li><a href=“main.html" <li><a href=“main.html" <li><a href=“main.html" </ul> target="main“>Home</a></li> target=“_blank“>Blank</a></li> target=“_self">Self</a></li> target=“_parent">Parent</a></li> target=“_top">Top</a></li> Examples Examples Examples 6 Can you do this? BANNER Menu Content Footer Right Widget Summary • Hierarchical Structure of XHTML/HTML Summary • Resulting Hierarchy Other important HTML • Paragraph Justification -­‐ <p align="justify"> (double tag) • Heading <h1> … <h6> (double tag) • Line breaks -­‐ <br> (single tag) • Horizontal rule -­‐ <hr> (single tag) • List – ordered <ol> & <li> (double tag) • List – unordered <ul> & <li> (double tag) • Definition: <dl> start, <dt> term, <dd> definition; (double tag) Other important HTML Other important HTML -­‐ color HTML – color -­‐ hexadecimal Free resources/tutorials • HTML Tutorial (complete) – http://www.echoecho.com/html.htm • HTML Form Tutorial – http://www.echoecho.com/htmlforms.htm • Frame Tutorial – http://www.echoecho.com/htmlframes.htm
