htmlse myanmar
TRANSCRIPT
-
8/14/2019 HTMLSE Myanmar
1/58
-
8/14/2019 HTMLSE Myanmar
2/58
Page
HTML By Saturngod
1
http://wwww.saturngod.net
HTMLHTMLHTMLHTML Internet Internet
Homepage Internet
Internet Network Information Web Page
Web Page HTML Web Page Web Browser Software
Web Broswer Software Internet Explorer Firefox
HTML HistoryHTML HistoryHTML HistoryHTML History
1989 Tim Berners-Lee Rober Calliau Research Documents
Berners-Lee browser Tag
tage Hyper-Link
document tag Berners-Lee Hyber Text Markup
Language HTML
TagTagTagTag
Tag Text HTML code
This is bold web browser bold
tag tag /
HTMLHTMLHTMLHTML EditorEditorEditorEditor
HTML Editor IDE Dreamweaver HTML
Website Dreamweaver HTML code
website website
template HTML code Notepad
notepad++ HTML web site
web programming PHP,ASP.NET , JSP , Ruy On Rail
ChapterChapterChapterChapter 1:1:1:1: StartingStartingStartingStarting totototo Creat and Edit WebpageCreat and Edit WebpageCreat and Edit WebpageCreat and Edit Webpage
NotepadNotepadNotepadNotepad
. Windows Key + R Run Dailog Box notepad
OK notepad
-
8/14/2019 HTMLSE Myanmar
3/58
Page
HTML By Saturngod
2
http://wwww.saturngod.net
. Notepad Format word warp check Word Warp
Notepad
HTML
. Notepad
This is title
This is body
HTML HTML html code Head Tag Head Tag
Title Title Browser bar Body
-
8/14/2019 HTMLSE Myanmar
4/58
Page
HTML By Saturngod
3
http://wwww.saturngod.net
. save Save Dialog box filetype All file file name
firstrun.html firstrun .html file extension
HTML page .html .htm browser
. Save file first.html file
double click
page
File address bar
title tag This is tile Windos Title bar
Tab Title bar Body tag This is
body
IE7IE7IE7IE7
Page > View Source Notepad HTML
IE 6IE 6IE 6IE 6
View > Source Notepad HTML
-
8/14/2019 HTMLSE Myanmar
5/58
Page
HTML By Saturngod
4
http://wwww.saturngod.net
code page save
Internet Web site view > source save
Header TagHeader TagHeader TagHeader Tag
notepad
Example Of Header
This is HeaderThis is normal text
code notepad .. run Head Tag h1 h6
h6
notepad save
Example
H1H2
-
8/14/2019 HTMLSE Myanmar
6/58
Page
HTML By Saturngod
5
http://wwww.saturngod.net
H3H4H5H6
html
page bold
italic underline
Line BreakLine BreakLine BreakLine Break
HTML
close tagExample
First LineSecond Line
Third LineBoldBoldBoldBold,,,, ItalicItalicItalicItalic ,,,, Underline TagUnderline TagUnderline TagUnderline Tag
bold italic Underline
notepad run
This is boldThis is italicThis is underline
-
8/14/2019 HTMLSE Myanmar
7/58
Page
HTML By Saturngod
6
http://wwww.saturngod.net
Bold underline italic tag
tag
This is bold italic This is bold italic
This is bold italic tag
structure code
Pre TagPre TagPre TagPre Tag
Enter
dream weaver HTML
font font
tab
ExamplePre Tag, Now Enter
Now Tab Tab
Paragraph TagParagraph TagParagraph TagParagraph Tag
paragraph
tag
-
8/14/2019 HTMLSE Myanmar
8/58
Page
HTML By Saturngod
7
http://wwww.saturngod.net
Example
About Notepad
Notepad is a basic text editing program and it is most commonly used to view or edit
text files. A text file is a file type typically identified by the .txt file name extension.
How do I change the font style and size?Changes to the font style and size affect all the text in the document.Click the Format menu, and then click Font.Make your selections in the Font, Font style, and Size boxes.
An example of how your font will look appears under Sample.
When you are finished making font selections, click OK.
Horizonal LineHorizonal LineHorizonal LineHorizonal Line
horizonal close tag
Example
About Notepad
Notepad is a basic text editing program and it is most commonly used to view or edit
text files. A text file is a file type typically identified by the .txt file name extension.
-
8/14/2019 HTMLSE Myanmar
9/58
Page
HTML By Saturngod
8
http://wwww.saturngod.net
How do I change the font style and size?
Changes to the font style and size affect all the text in the document.Click the Format menu, and then click Font.Make your selections in the Font, Font style, and Size boxes.
An example of how your font will look appears under Sample.When you are finished making font selections, click OK.
code run line
AttribueAttribueAttribueAttribue
tag attribute attribute tag
properties tag attribute body color attribute
Body ColorBody ColorBody ColorBody Color
ExampleBody BGCOLOR
-
8/14/2019 HTMLSE Myanmar
10/58
Page
HTML By Saturngod
9
http://wwww.saturngod.net
code run background color Table color 16
Silver Gray Maroon Green Navy Purple Olive Teal
White Black Red Lime Blue Magenta Yellow Cyan
color code RGB color Hex codenumber #FF0000
color
photoshop
photoshop color
double click color dialog box color
hex code copy color #
ExampleBody BGCOLOR Hex code
-
8/14/2019 HTMLSE Myanmar
11/58
Page
HTML By Saturngod
10
http://wwww.saturngod.net
Attribute color attribute tag
tag attribute
Hr AttributeHr AttributeHr AttributeHr Attribute
tag attribute tag attribute
hr
ExampleDefault HR
-
8/14/2019 HTMLSE Myanmar
12/58
Page
HTML By Saturngod
11
http://wwww.saturngod.net
Hr with size=1Hr with size=5
Hr with size=10Hr with size=10 and noshadeHr with size=5 and color
size noshade shade color
ListListListList
List order list unorder list list list
defination list unorder list
Unorder listUnorder listUnorder listUnorder list
ExampleUnorder List
First ItemSecond ItemThird Item
-
8/14/2019 HTMLSE Myanmar
13/58
Page
HTML By Saturngod
12
http://wwww.saturngod.net
unorder list list list 1 12 code run list List attribute
Unorder ListDisc
First ItemSecond ItemThird Item
Square
First ItemSecond ItemThird Item
Circle
First ItemSecond ItemThird Item
Unorder list disc, square, circle default disc
Ordered ListOrdered ListOrdered ListOrdered List
-
8/14/2019 HTMLSE Myanmar
14/58
Page
HTML By Saturngod
13
http://wwww.saturngod.net
Example
Ordered List
First ItemSecond ItemThird Item
order list code run attribute
ExampleOrdered List
First ItemSecond ItemThird Item
Type A
First ItemSecond ItemThird Item
Type a
First ItemSecond Item
Third Item
-
8/14/2019 HTMLSE Myanmar
15/58
Page
HTML By Saturngod
14
http://wwww.saturngod.net
Type a
First Item
Second ItemThird Item
Type i
First ItemSecond ItemThird Item
Order List Unorder List type code order
list unorder list
start attribute
D HTML list web page
list definition list
Definition ListDefinition ListDefinition ListDefinition List
ExampleDefinition List
HTMLLanguage used to develop Web Pages
ImageAny graphic such as an icon,bullet, line, photo , or illustration
-
8/14/2019 HTMLSE Myanmar
16/58
Page
HTML By Saturngod
15
http://wwww.saturngod.net
Defination List List defination term defination dl
defination term defination list
tag
... HTML
-
8/14/2019 HTMLSE Myanmar
17/58
Page
HTML By Saturngod
16
http://wwww.saturngod.net
ChapterChapterChapterChapter 2:2:2:2: CreatingCreatingCreatingCreating Web PageWeb PageWeb PageWeb Page withwithwithwith ApperanceApperanceApperanceApperance andandandand LinkLinkLinkLink
bold,italic,underline font
font font size color page link
Optional TagOptional TagOptional TagOptional Tag
Move To CenterMove To CenterMove To CenterMove To Center
center
Example
This is center
This is center
ExampleTest
code header
MarqueeMarqueeMarqueeMarquee
Marquee
Example
-
8/14/2019 HTMLSE Myanmar
18/58
Page
HTML By Saturngod
17
http://wwww.saturngod.net
Im moving
code
Marquee attribute
Attribute NameAttribute NameAttribute Name Attribute Name PropertiesPropertiesPropertiesProperties DescriptonDescriptonDescriptonDescripton
behavior alternate I'm moving
scroll default value
I'm movingslide
I'm movingdirection left default value
I'm movingright
I'm movingup
I'm movingdown
I'm movingloop [number] marquee number
I'm moving
scrollamount [number] pixel I'm moving
scrolldelay [number] millisecond 1000 1 second I'm moving
Bgcolor [hex code] OR[Color Name]
marquee back color #009933 background color I'm moving
marquee
font
FontFontFontFont
-
8/14/2019 HTMLSE Myanmar
19/58
Page
HTML By Saturngod
18
http://wwww.saturngod.net
Font HTML Web Page font font tag
ExampleZawgyi Font
zawgyi-one font face="font name"
font tag attribute
NameNameNameName PropertiesPropertiesPropertiesProperties DescriptionDescriptionDescriptionDescription
color [hex code] OR[color name]
color Zawgyi Font
size [number] font size=3 size size=4 7 1 7 3 +1 +6 +2 3 5 -1 -6 -1 3
2 Zawgyi Font Zawgyi Font Zawgyi Font
text formatting tags
TagTagTagTag DescriptionDescriptionDescriptionDescription
font blod
bold tab
italic code enter tab H2
22 typing font typing underline
-
8/14/2019 HTMLSE Myanmar
20/58
Page
HTML By Saturngod
19
http://wwww.saturngod.net
Link Link Web Page Page
Link
Page Link And Image LinkPage Link And Image LinkPage Link And Image LinkPage Link And Image Link
Page Link page page example
Home Page Gallery Page Go To Home
Gallery Home Page Home Home page
File
index.html gallery.html C:\example\index.html C:\example\gallery.html
Index.htmlIndex.htmlIndex.htmlIndex.html
ExampleGallery
-
8/14/2019 HTMLSE Myanmar
21/58
Page
HTML By Saturngod
20
http://wwww.saturngod.net
Gallery.htmlGallery.htmlGallery.htmlGallery.html
ExampleHome
code
home page home.html index.html
comment
home page index.html web page page index.html
default.html www.example.com page
www.example.com/index.html index.html
Home Page index.html default.html
.. Link link Name
address page Name
Link
vistied click
body vlink attribute link attribute
link color
link file download
link address file
Pathpath link">Pathpath link">Pathpath link">Path
./file.html OR file.html C:\example\index.html C:\example\gallery.html ./ directory
./download/download.html OR download/download.html folder folder
-
8/14/2019 HTMLSE Myanmar
22/58
Page
HTML By Saturngod
21
http://wwww.saturngod.net
../file.html folder up C:\example\download\index.html C:\example\gallery.html download
folder file ../../file.html ../ folderdirectory up
http://www.mysteryzillion.com website ./download/file.zip OR download/file.zip download file image file
image
site site
structure Link
.. page
ImageImageImageImage
web page page
...
Example
Apple Logo
-
8/14/2019 HTMLSE Myanmar
23/58
Page
HTML By Saturngod
22
http://wwww.saturngod.net
( ) image
image extension image extension jpg gif png image
size
Example
Apple Logo
width height attribute size width
height size
Apple Logo
alt Mouse tool tip alt search engine image search
search engine
Image attribute text align
text align img code align attribute
AlignAlignAlign Align
top align bottom default
middle left page right Left
-
8/14/2019 HTMLSE Myanmar
24/58
Page
HTML By Saturngod
23
http://wwww.saturngod.net
: img top
: img bottom
: img middle
: img left
: img right
Image
size width height attribute
Photo size
-
8/14/2019 HTMLSE Myanmar
25/58
Page
HTML By Saturngod
24
http://wwww.saturngod.net
click size page
click
Example
code border
href image border Link
: border image : border
link page
sample
web page
table table frame
Chapter 3:Chapter 3:Chapter 3:Chapter 3: TableTableTableTable andandandand FrameFrameFrameFrame
Table web page table web page
frame professional stylesheet
div CSS page HTML
CSS Advance table
web page table
TTTTableableableable
Table roll column cell
-
8/14/2019 HTMLSE Myanmar
26/58
Page
HTML By Saturngod
25
http://wwww.saturngod.net
Table HTML web site
Gallery Page
Page Layout CSS Table CSS CSS
Cascading Style Sheets CSS Web Page
HTML HTML CSS site HTML
-
8/14/2019 HTMLSE Myanmar
27/58
Page
HTML By Saturngod
26
http://wwww.saturngod.net
table cell cell
... code
Example Table
Row
Row
-
8/14/2019 HTMLSE Myanmar
28/58
Page
HTML By Saturngod
27
http://wwww.saturngod.net
Table
Row row
column
column column
... row column
row column row row table
123
456
-
8/14/2019 HTMLSE Myanmar
29/58
Page
HTML By Saturngod
28
http://wwww.saturngod.net
Example row column table
table table
... example row column
table
row column
code
Example
123
3
45
678
...
table width table width % pixel
table width width % Pixel
-
8/14/2019 HTMLSE Myanmar
30/58
Page
HTML By Saturngod
29
http://wwww.saturngod.net
% broswer width pixel
% broswer pixel
browser ..
Example
123
345
67
8
width 100% browser table
first row
12
-
8/14/2019 HTMLSE Myanmar
31/58
Page
HTML By Saturngod
30
http://wwww.saturngod.net
3
column width 30px row row column px %
column
123
column width % colum width
... table time table
Example
DateTimeSubject
Oct 071:00 PM - 3:00 PMHardware
Oct 081:00 PM - 3:00 PMSoftware Install
Oct 081:00 PM - 3:00 PMWindows Install
-
8/14/2019 HTMLSE Myanmar
32/58
Page
HTML By Saturngod
31
http://wwww.saturngod.net
.. table border border attribute
BorBorBorBorder,der,der,der, Cellpadding, CellspacingCellpadding, CellspacingCellpadding, CellspacingCellpadding, Cellspacing
border border border bordercolordark bordercolorlight bordercolor
border cell padding cell padding cell spacing
cellpadding table border cellpadding
cellpadding 30 border
-
8/14/2019 HTMLSE Myanmar
33/58
Page
HTML By Saturngod
32
http://wwww.saturngod.net
cellspacing cell border
cellspacing 0
... cell merge
table
Cell MergeCell MergeCell MergeCell MergeCell Merge table Cell Merge Cell
Cell Cell Merge table row
cell
merge column
column cell
column merge row column merge
code
-
8/14/2019 HTMLSE Myanmar
34/58
Page
HTML By Saturngod
33
http://wwww.saturngod.net
Example
Cell 1Cell 2Cell 3
Cell 1Cell 3
code Cell cell code
Untitled Document
-
8/14/2019 HTMLSE Myanmar
35/58
Page
HTML By Saturngod
34
http://wwww.saturngod.net
Cell 1
Cell 2Cell 3
Cell 1
column column
... example
Untitled Document
List Of Adboe Software
-
8/14/2019 HTMLSE Myanmar
36/58
Page
HTML By Saturngod
35
http://wwww.saturngod.net
Adobe Acrobat
Adobe DreamweaverAdboe Flash
Adobe InDesign Adobe PhotoshopAdboe Bridge
code List Of Adboe Sofware Column merge
Column merge column
Column Merge Row Merge
Row Merge column merge code
Untitled Document
-
8/14/2019 HTMLSE Myanmar
37/58
Page
HTML By Saturngod
36
http://wwww.saturngod.net
Cell LeftCell 2
Cell 3
Column Column Row
column Column
First Column First Column Column
example
Example
-
8/14/2019 HTMLSE Myanmar
38/58
Page
HTML By Saturngod
37
http://wwww.saturngod.net
Row1 , Cell1
Row1 , Cell2
Row1 , Cell3
Left
Center
Right
Cell 1
example row span Left Right row
row column
AppearnceAppearnceAppearnceAppearnce
Table background color border
cell background
Example
-
8/14/2019 HTMLSE Myanmar
39/58
Page
HTML By Saturngod
38
http://wwww.saturngod.net
BLUE
Red
Hex Color
bgcolor background background font
color CSS CSS
bg color
row bgcolor attribute
Example
BLUE
Red
-
8/14/2019 HTMLSE Myanmar
40/58
Page
HTML By Saturngod
39
http://wwww.saturngod.net
Hex Color
ab
c
row
table table HTML
Dreamweaver software table table
merge dreamweaver dreamweaver
HTML
frame
Frame
Frame HTML Page
-
8/14/2019 HTMLSE Myanmar
41/58
Page
HTML By Saturngod
40
http://wwww.saturngod.net
Frame Page Frame AJAX Frame
menu menu
page Name .. frame
Frame1.htmlFrame1.htmlFrame1.htmlFrame1.html
Untitled DocumentThis is frame 1
Frame2.htmlFrame2.htmlFrame2.htmlFrame2.html
Untitled DocumentThis is frame 2
index.htmlindex.htmlindex.htmlindex.html
-
8/14/2019 HTMLSE Myanmar
42/58
Page
HTML By Saturngod
41
http://wwww.saturngod.net
Untitled Document
frame file index.html Frame1 Frame2
frame1 frame2
index.html frame Main Page
Body frameset HTML frame
IDE Dreamweaver frame
cols column column
cols="80,*" column 80 px
percentage cols="50%,*" 50% frame 50%
frameborder="no" frame boder border="0" framespacing="0"
border 0 frame spacing 0 column
src frame Link file Name ..
-
8/14/2019 HTMLSE Myanmar
43/58
Page
HTML By Saturngod
42
http://wwww.saturngod.net
Scrolling scrollbar Yes noresize frame resize
frame resize column
index.htmlindex.htmlindex.htmlindex.html
Untitled Document
Your Browser Dont SupportFrame
browser frame
support frame support
browser Message browser support ..
code
Untitled Document
-
8/14/2019 HTMLSE Myanmar
44/58
Page
HTML By Saturngod
43
http://wwww.saturngod.net
frameset cols rows cols rows
frame rows column
Untitled Document
-
8/14/2019 HTMLSE Myanmar
45/58
Page
HTML By Saturngod
44
http://wwww.saturngod.net
rows cols rows columns
rows colums code
Untitled Document
-
8/14/2019 HTMLSE Myanmar
46/58
Page
HTML By Saturngod
45
http://wwww.saturngod.net
rows rows frameset columns
rows rows cols cols rows
-
8/14/2019 HTMLSE Myanmar
47/58
Page
HTML By Saturngod
46
http://wwww.saturngod.net
Link And Frame Frame Link
frame Web
HTML ..
Link AndLink AndLink AndLink And FrameFrameFrameFrame
Link Page
frame frame Page
frame index.html
Menu
-
8/14/2019 HTMLSE Myanmar
48/58
Page
HTML By Saturngod
47
http://wwww.saturngod.net
.. name="main" menu frame
.. menu.html ...
Menu
Home
Download
Linklink target index.html name="main" frame download frame download.html
page Home home.html frame
-
8/14/2019 HTMLSE Myanmar
49/58
Page
HTML By Saturngod
48
http://wwww.saturngod.net
link page
frame frame addressbar
target="_parent" remove frame
header.html
Frame ExampleRemove Frame
main.html
Main Page
frame.html
frame.html run frame
remove frame frame
frame
page link
target="_parent" page
frame
page frame
iframe
-
8/14/2019 HTMLSE Myanmar
50/58
Page
HTML By Saturngod
49
http://wwww.saturngod.net
menu.html page home.html Home Page
news
Menu
code src page width height
web page
form
-
8/14/2019 HTMLSE Myanmar
51/58
Page
HTML By Saturngod
50
http://wwww.saturngod.net
CCCChhhhapterapterapterapter 4444:::: HTML formHTML formHTML formHTML form
FormFormFormForm
Form comment forum search google text box button
form HTML form design
action action ASP, PHP, JSP
server site javascript
javascript form
form tag action form
submit page page server side
method get post
InputInputInputInput TagTagTagTag
input tag textbox, button, checkbox, password, submit
Untitled Page
value
-
8/14/2019 HTMLSE Myanmar
52/58
Page
HTML By Saturngod
51
http://wwww.saturngod.net
typetypetypetype
text textboxpassword password box ( **** )button button
submit submit button submit form actionpage
file upload file dialog box reset form data clear radio radio button (option button)
checkbox checkbox
example
Form SampleName:Phone:Service: Yearly Monthly DailyPay With: Paypal Master Visa
-
8/14/2019 HTMLSE Myanmar
53/58
Page
HTML By Saturngod
52
http://wwww.saturngod.net
checkbox radio button name
group name group
FFFFieldsetieldsetieldsetieldset TagTagTagTag
code
Form SampleName:Phone:
Service Yearly Monthly DailyPay method Paypal Master Visa
-
8/14/2019 HTMLSE Myanmar
54/58
Page
HTML By Saturngod
53
http://wwww.saturngod.net
fieldset fieldset legend tag
Combobox And ListboxCombobox And ListboxCombobox And ListboxCombobox And Listbox
HTML combobox listbox register date combo box
Form Sample1234567
-
8/14/2019 HTMLSE Myanmar
55/58
Page
HTML By Saturngod
54
http://wwww.saturngod.net
default select option selected 4
default select
4
Listbox select size attribute code
Form Sample
1234567
code
-
8/14/2019 HTMLSE Myanmar
56/58
Page
HTML By Saturngod
55
http://wwww.saturngod.net
Form Sample
Name:Phone:Service Yearly
Monthly DailyPay method Paypal Master Visa
Month :JanFebMarAprCategory(press Ctrl for Multiselect):
Free For Personal UseFree For commercialcommercial
-
8/14/2019 HTMLSE Myanmar
57/58
Page
HTML By Saturngod
56
http://wwww.saturngod.net
code code listbox multiselect
multiple attribute
multiple
-
8/14/2019 HTMLSE Myanmar
58/58
Page
HTML By Saturngod
57
HTML code
".. code "
HTML
CSS
Dreamweaver Javascript photoshop
Flash Webdesigner web developer
CSS , Javascript, Phtoshop, Flash web
programming .NET ASP.NET Java JSP
php technology Ruby On
Rails python HTML