Scribd
Upload
60 views

Note 02 HTML PDF

- HTML is a markup language used to define the structure and layout of web pages. It was created by Tim Berners-Lee in 1990 and he was later knighted for his contributions. - Basic HTML elements include tags, attributes, and elements. Tags specify regions for the browser to interpret. Attributes customize HTML elements. Elements are complete tags with opening and closing parts. - To use HTML, you need a simple text editor and web browser. Common elements include <html>, <head>, <title>, and <body> which define the overall page structure. Other elements like <p>, <img>, <a> add text, images, and links.

Uploaded by

Juliza Mohamad
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
60 views

Note 02 HTML PDF

- HTML is a markup language used to define the structure and layout of web pages. It was created by Tim Berners-Lee in 1990 and he was later knighted for his contributions. - Basic HTML elements include tags, attributes, and elements. Tags specify regions for the browser to interpret. Attributes customize HTML elements. Elements are complete tags with opening and closing parts. - To use HTML, you need a simple text editor and web browser. Common elements include <html>, <head>, <title>, and <body> which define the overall page structure. Other elements like <p>, <img>, <a> add text, images, and links.

Uploaded by

Juliza Mohamad
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

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">&nbsp;</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

You might also like