Lập trình HTML cơ bản đến nâng cao html

• Forms and Input• New Form elements and attributes in HTML5 • CSS – Cascading Style Sheets in HTML • DIV and SPAN • HTML object and param • Reference... • Forms and Input• New Form elem

HTML

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

HTML Heading

Figure 1: HTML Heading

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

HTML Paragraph

Figure 2: HTML Paragraph

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Line break

Figure 3: Line break

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Horizontal rule

Figure 4: Horizontal rule

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Font element

• Attribute face:

– Syntax: <font face="typeface">text</font>

– Example: <font face=“Arial Black”>abc</font>

• Attribute size

– Syntax: <font size="value">text</font>

– Example: <font size=“1”>abc</font>

• Attribute color

– Syntax: <font color="a_color">text</font>

– Example: <font color=“red”>abc</font>

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Bold, italic, underline and other

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Other elements used for text

formatting

Figure 5: Pre, tt and cite tag

Other elements used for text

formatting

Figure 6: del, big, small, sub and sup tag

Other elements used for text formatting

Figure 7: dfn, code, samp, kbd and var tag

Other elements used for text formatting

Figure 8: q, blockquote and address tag.

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Unordered Lists

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Ordered Lists

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Definition Lists

Figure 11: Definition Lists

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Nested Lists

Figure 12: Nested Lists

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Adding images

• Image format: GIF, JPEG, PNG, BMP, TIFF, PCX

• Element: <img>…</img>

• Attribute:

src: Location of image file.

alt: alternate text.

align: Bottom, Middle, Top, Left, Right.

width: image length in pixels.

height: image height in pixels

hspace, vspace.

Adding images

Figure 13: Adding images

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

General syntax

<a href=“url” title=“Link title”>Link text</a>

• href : specifies the destination of a link

• url : the address of the link

• title : specifies a title for the hyperlink

• Link text : text that appears in the web page

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Internal link

• Allow to jump to another section on web page

• To create internal link:

• HTML Tables

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

• Image-map is image with clickable areas.

Figure 14: Image map 1

• HTML Tables

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Creating Image Map

Creating Image Map

• Example:

Figure 15: Example of creating image map

Creating Image Map

Creating Image Map

Figure 16: Code of creating image map 2

Creating Image Map

Figure 17: Displaying of code

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Creating table

<table> : create table.

<tr> : create row.

<td> : create column.

Creating table

Figure 18: Creating table

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Table structure

Table structure

Figure 20: Using <th> tag, “rowspan”,”colspan” attribute

Table structure

Figure 21: Using <thead> and <tfoot> tag

Table structure

Table structure

Figure 23: Table with caption, thead and tbody

– Table attributes

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Table attributes

Figure 24: Table attributes

Table attributes

Figure 25: Using “width”, “cellspacing”, “frame”, “rule”

• DIV and SPAN

• HTML object and param

• Reference

HTML Form

• Definition:

– HTML forms are used to pass data to server.

– HTML forms can be used with script language.

Figure 26: Attributes of <form> tag

– Form – Input Elements

– Other form elements

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Form – Input elements

Figure 27: Attribute of the <input> tag

Form – Input elements

• Text field

– Usage: define a one-line input field to enter text

– Syntax: <input type=“text” name=“t1”>

• Password field

– Usage: like text field, but characters are masked

– Syntax: <input type=“password” name=“p1”>

• Checkbox

– Usage: let a user select one or more options

– Syntax: <input type=“checkbox” name=“c1” value=“v1”>

Form – Input elements

• Radio

– Usage: let a user select only one option.

– Syntax: <input type=“radio” name=“r1” value=“v1”>

• File

– Usage: is used for file upload.

– Syntax: <input type=“file” name=“f1”>

• Simple button

– Usage: often used to active a JavaScript function.

– Syntax: <input type=“button” value=“Click here”>

Form – Input elements

• Submit button

– Usage: is used to send form data to server

– Syntax: <input type=“submit” value=“Send”>

• Image for submit button

– Usage: like submit button, but use image

– Syntax: <input type=“image” src=“p.jpg” alt=“submit”>

• Reset button

– Usage: reset all form fields

– Syntax: <input type=“reset” value=“Reset”>

– Other form elements

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Other form elements

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

New Form elements and attributes in

HTML5

• HTML5 new Input types

• New attributes for <form> added in HTML5

• New input attributes

• Other new Form elements in HTML5

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

– Inline style

– Internal Style Sheet – External Style Sheet – Special selectors

• DIV and SPAN

• HTML object and param

• Reference

Inline style

• Definition:

– Is CSS rule placed directly within HTML tag.

– It is placed in style attribute.

• Syntax:

<tag style="property1:value; property2:value; ">

Content

</tag>

Inline style

• Example:

– Set the color and alignment for <h2> heading

Figure 44: Style for <h2> heading

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

– The DIV tag

– The SPAN tag – The difference between DIV and SPAN

• HTML object and param

• Reference

The DIV tag

Figure 47: Example of DIV tag

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

– The DIV tag

– The SPAN tag

– The difference between DIV and SPAN

• HTML object and param

• Reference

The SPAN tag

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

– The DIV tag – The SPAN tag

– The difference between DIV and SPAN

• HTML object and param

• Reference

The difference between

DIV and SPAN

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

– HTML <object> embedding media

-– Attributes of the object tag – Attributes of the param tag

• Reference

HTML <object> - embedding media

• Used to embed media content on a web page.

• Partially supported in all major browsers.

• If the object is not displayed, the code in

<object> and </object> will be excuted.

HTML <object> - embedding media

HTML <object> - embedding media

• Embed a SWF file

<object type="application/x-shockwave-flash"

data="games/cubilus.swf" width="500" height="250">

<param name="src" value="games/cubilus.swf" />

<param name="bgcolor" value="#fbfbfe" />

Your browser not support SWF.

</object>

• Embed a WAV file

<object type="audio/x-wav" data="dir/test.wav" width="200"

height="20">

<param name="src" value="dir/test.wav" />

<param name="autoplay" value="false" />

<param name="autoStart" value="false" />

Alt : <a href="dir/test.wav" title="WAV file">test.wav</a>

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

– HTML <object> embedding media

-– Attributes of the object tag

– Attributes of the param tag

• Reference

Attributes of the HTML object tag

Figure 50: Attributes of HTML object tag

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

– HTML <object> embedding media – Attributes of the object tag

-– Attributes of the param tag

• Reference

Attributes of the param tag

Figure 51: Attributes of param tag

• Forms and Input

• New Form elements and attributes in HTML5

• CSS – Cascading Style Sheets in HTML

• DIV and SPAN

• HTML object and param

• Reference

Reference