Basic HTML
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: it can include graphics, video and sound , for example
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 interprets, 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 cant do that if doesnt know HTML
Guide to HTML code
Is not a programming language, its 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>
Very simple HTML code
<html> <head> <title>Simple HTML</title> </head> <body> Hello World! All my content goes here! </body> </html> Activity 01: activity01.doc
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 <title></title> The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewers browser <body></body> The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc)
More complex code
<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> <p> Please set me to bold, italic, font = Arial, size = 3, color = Red <p> <pre> This is a preformatted text </pre> </body> </html> [Activity 02/03]
HTML attributes
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 align="center"> <p align="right">
Image
<img src=image file name . . . > Activity 04
<img src="sunset.gif" width="96" height="63" alt="This is an image of sunset" />
Activity 05
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. Activity 06
Image wrap around activity 07 Thumbnail activity 08
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 (Activity 09)
Inside document
Declare anchor: <a name="top" id="top"> Link to anchor: <a href="#top">[go to top]</a>
Outside document
Same website only dir. Without full url/http
<a href="image01.html">Link to outside page same website</a>
Different website full http url
<a href="http://www.utm.my">Link-(UTM homepage)</a> Image link <a href="http://www.utm.my"><img src="utm-scale.gif" width="230" height="230" border="0" /></a>
Table
Begin table Begin row Column1, Column2, . . . End row ... End table
Table
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 (Activity 10)
Attributes:
Sizing using pixel size Table border & bg col:
<table border="1bgcolor="#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"> </td>
Table
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>
More complex table #1
There are two rows: <table> <tr> . . .</tr> <tr> . . .</tr> </table>
More complex table #1
First row -> two columns Second row -> one column <table> <tr> <td>. . .</td> <td> . . . </td> </tr> <tr> <td> . . . </td></tr> </table>
More complex table #1
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> Activiti 11
More complex table #2
There are two rows (max): <table> <tr> . . .</tr> <tr> . . .</tr> </table>
More complex table #2
Column: Column: Column:
is the first column in the first row is the second column in the first row is the second column in the second row
<table> <tr> <td>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table> Activity 12
More complex table #2
Span two rows for column:
<table> <tr> <td rowspan=2>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table>
More complex table #3
Its your turn ??? Activity 13
Form
Begin form Form object components End form
Form
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 Activity 14
<form method=? action=? > Form object components </form>
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/submit/reset value=???>
Frame Object
display multiple HTML documents simultaneously in the same browser window Why use frame ? provide permanent navigation menu
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 mobilityimpaired 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 Begin set of frame frame1 frame2 End set of frame
Frame Object
Begin set of frame: <frameset rows / cols =?, ?"> Frame: <frame src=?" name=?"> End set of frame: </frameset>
Frame Object (A.15)
Example <frameset rows = 20%, *> <frame src=? name=top> <frame src=? name=bottom> </frameset>
Frame Object
Nested frame <frameset rows = 20%, *> <frame src=? name=top> <frameset cols = 25%, *> <frame src=? name=bottom_left> <frame src=? name=bottom_right> </frameset> </frameset>
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
