Note 02 HTML PDF

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>
First row -> two columns Second row -> one column <table> <tr> <td>. . .</td> <td> . . . </td> </tr> <tr> <td> . . . </td></tr> </table>
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
There are two rows (max): <table> <tr> . . .</tr> <tr> . . .</tr> </table>
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
Span two rows for column:
<table> <tr> <td rowspan=2>. . .</td> <td>. . .</td> </tr> <tr> <td>. . .</td> </tr> </table>
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=???>

TextArea <textarea name=??? rows=??? cols=???> Default textarea value </textarea>

List Box (single) <select name=???> <option value=???>Text 1 <option value=??? selected>Text 2 ... </select>

List Box (multiple selection) <select name=??? multiple size=???> <option value=???>Text 1 ... </select>

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 ...

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

Note 02 HTML PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Note 02 HTML PDF

Cargado por

Copyright:

Formatos disponibles

Basic HTML

Preparation for HTML

Guide to HTML code

Very simple HTML code

The Most Important Elements

More complex code

<p align="justify"> <p align="center"> <p align="right">

Image wrap around activity 07 Thumbnail activity 08

Link cont (Activity 09)

<a href="image01.html">Link to outside page same website</a>

Table (Activity 10)

Spanning /merging cell

Cell bgcolor: <td bgcolor="#990000">&nbsp;</td>

More complex table #1

More complex table #1

More complex table #1

More complex table #2

More complex table #2

Column: Column: Column:

More complex table #2

Span two rows for column:

More complex table #3

Its your turn ??? Activity 13

Form object components

Form object components

Form object components

Form object components

Form object components

Form object components

Some hate frame

Frame Object (A.15)

Other important HTML

Other important HTML

Other important HTML - color

HTML color - hexadecimal

También podría gustarte

Cell bgcolor: <td bgcolor="#990000"> </td>