Download presentation
Presentation is loading. Please wait.
1
Basic HTML
2
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
3
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.
4
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.
5
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
6
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>
7
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
8
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 viewer's browser <body></body> The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc)
9
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> Please set me to bold, italic, font = Arial, size = 3, color = Red <pre> This is a preformatted text </pre> </body> </html> [Activity 02/03]
10
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">
11
Image <img src=“image file name” . . . > Activity 04 Activity 05
<img src="sunset.gif" width="96" height="63" alt="This is an image of sunset" /> Activity 05
12
Image (cont.) Alternative Attribute Image wrap around – activity 07
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
13
Link <a href=“reference object” . . . >linked object</a>
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
14
Link – cont (Activity 09) Inside document Outside 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=" homepage)</a> Image link <a href=" src="utm-scale.gif" width="230" height="230" border="0" /></a>
15
Table Begin table Begin row Column1, Column2, . . . End row . . .
End table
16
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.
17
Table (Activity 10) 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"> </td>
18
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>
19
More complex table #1 There are two rows: <table>
<tr> . . .</tr> </table>
20
More complex table #1 First row -> two columns
Second row -> one column <table> <tr> <td>. . .</td> <td> </td> </tr> <tr> <td> </td></tr> </table>
21
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
22
More complex table #2 There are two rows (max): <table>
<tr> . . .</tr> </table>
23
More complex table #2 Column: is the first column in the first row
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> Activity 12
24
More complex table #2 Span two rows for column: <table>
<tr> <td rowspan=“2”>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table>
25
More complex table #3 It’s your turn ??? Activity 13
26
Form Begin form Form object components End form
27
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>
28
Form – Activity 14 <form method=“?” action=“?” …>
Form object components </form>
29
Form object components
Textfield <input type=“text” name=“???” size=“???”> Password <input type=“password” name=“???” size=“???”> Hidden <input type=“hidden” name=“???”>
30
Form object components
TextArea <textarea name=“???” rows=“???” cols=“???”> Default textarea value </textarea>
31
Form object components
List Box (single) <select name=“???”> <option value=“???”>Text 1 <option value=“???” selected>Text 2 . . . </select>
32
Form object components
List Box (multiple selection) <select name=“???” multiple size=“???”> <option value=“???”>Text 1 . . . </select>
33
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
34
Form object components
Button, Submit, Reset <input type=“button/submit/reset” value=“???”>
35
Frame Object display multiple HTML doccument simultaneously in the same browser window Why use frame ? provide permanent navigation menu
36
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
37
Frame Object General Implementation Begin set of frame frame1 frame2
End set of frame
38
Frame Object Begin set of frame: <frameset rows / cols =“?, ?">
<frame src=“?" name=“?"> End set of frame: </frameset>
39
Frame Object (A.15) Example <frameset rows = “20%, *”>
<frame src=“?” name=“top”> <frame src=“?” name=“bottom”> </frameset>
40
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>
41
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)
42
Other important HTML
43
Other important HTML - color
44
HTML – color - hexadecimal
Similar presentations
