HTMLSE Myanmar

8/14/2019 HTMLSE Myanmar

1/58


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


3/58

Page

HTML By Saturngod

2


. 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


4/58

Page

HTML By Saturngod

3


. 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


5/58

Page

HTML By Saturngod

4


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


6/58

Page

HTML By Saturngod

5


H3H4H5H6

html

page bold

italic underline

Line BreakLine BreakLine BreakLine Break

HTML
close tag

Example

First LineSecond Line
Third Line

BoldBoldBoldBold,,,, ItalicItalicItalicItalic ,,,, Underline TagUnderline TagUnderline TagUnderline Tag

bold italic Underline

notepad run

This is boldThis is italicThis is underline


7/58

Page

HTML By Saturngod

6


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/58

Page

HTML By Saturngod

7


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.


9/58

Page

HTML By Saturngod

8


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


10/58

Page

HTML By Saturngod

9


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


11/58

Page

HTML By Saturngod

10


Attribute color attribute tag

tag attribute

Hr AttributeHr AttributeHr AttributeHr Attribute

tag attribute tag attribute

hr

ExampleDefault HR


12/58

Page

HTML By Saturngod

11


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


13/58

Page

HTML By Saturngod

12


unorder list list list 1 12 code run list List attribute

Unorder ListDisc


Square


Circle


Unorder list disc, square, circle default disc

Ordered ListOrdered ListOrdered ListOrdered List


14/58

Page

HTML By Saturngod

13


Example

Ordered List


order list code run attribute

ExampleOrdered List


Type A


Type a

First ItemSecond Item

Third Item


15/58

Page

HTML By Saturngod

14


Type a

First Item

Second ItemThird Item

Type i


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


16/58

Page

HTML By Saturngod

15


Defination List List defination term defination dl

defination term defination list

tag

... HTML


17/58

Page

HTML By Saturngod

16


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


18/58

Page

HTML By Saturngod

17


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


19/58

Page

HTML By Saturngod

18


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


20/58

Page

HTML By Saturngod

19


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


21/58

Page

HTML By Saturngod

20


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


22/58

Page

HTML By Saturngod

21


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


23/58

Page

HTML By Saturngod

22


( ) 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


24/58

Page

HTML By Saturngod

23


: img top

: img bottom

: img middle

: img left

: img right

Image

size width height attribute

Photo size


25/58

Page

HTML By Saturngod

24


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


26/58

Page

HTML By Saturngod

25


Table HTML web site

Gallery Page

Page Layout CSS Table CSS CSS

Cascading Style Sheets CSS Web Page

HTML HTML CSS site HTML


27/58

Page

HTML By Saturngod

26


table cell cell

... code

Example Table

Row

Row


28/58

Page

HTML By Saturngod

27


Table

Row row

column

column column

... row column

row column row row table

123

456


29/58

Page

HTML By Saturngod

28


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


30/58

Page

HTML By Saturngod

29


% broswer width pixel

% broswer pixel

browser ..

Example

123

345

67

8

width 100% browser table

first row

12


31/58

Page

HTML By Saturngod

30


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


32/58

Page

HTML By Saturngod

31


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


33/58

Page

HTML By Saturngod

32


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


34/58

Page

HTML By Saturngod

33


Example

Cell 1Cell 2Cell 3

Cell 1Cell 3

code Cell cell code

Untitled Document


35/58

Page

HTML By Saturngod

34


Cell 1

Cell 2Cell 3

Cell 1

column column

... example

Untitled Document

List Of Adboe Software


36/58

Page

HTML By Saturngod

35


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


37/58

Page

HTML By Saturngod

36


Cell LeftCell 2

Cell 3

Column Column Row

column Column

First Column First Column Column

example

Example


38/58

Page

HTML By Saturngod

37


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


39/58

Page

HTML By Saturngod

38


BLUE

Red

Hex Color

bgcolor background background font

color CSS CSS

bg color

row bgcolor attribute

Example

BLUE

Red


40/58

Page

HTML By Saturngod

39


Hex Color

ab

c

row

table table HTML

Dreamweaver software table table

merge dreamweaver dreamweaver

HTML

frame

Frame

Frame HTML Page


41/58

Page

HTML By Saturngod

40


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


42/58

Page

HTML By Saturngod

41


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


43/58

Page

HTML By Saturngod

42


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


44/58

Page

HTML By Saturngod

43


frameset cols rows cols rows

frame rows column

Untitled Document


45/58

Page

HTML By Saturngod

44


rows cols rows columns

rows colums code

Untitled Document


46/58

Page

HTML By Saturngod

45


rows rows frameset columns

rows rows cols cols rows


47/58

Page

HTML By Saturngod

46


Link And Frame Frame Link

frame Web

HTML ..

Link AndLink AndLink AndLink And FrameFrameFrameFrame

Link Page

frame frame Page

frame index.html

Menu


48/58

Page

HTML By Saturngod

47


.. name="main" menu frame

.. menu.html ...

Menu

Home
Download
Link

link target index.html name="main" frame download frame download.html

page Home home.html frame


49/58

Page

HTML By Saturngod

48


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


50/58

Page

HTML By Saturngod

49


menu.html page home.html Home Page

news

Menu

code src page width height

web page

form


51/58

Page

HTML By Saturngod

50


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


52/58

Page

HTML By Saturngod

51


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


53/58

Page

HTML By Saturngod

52


checkbox radio button name

group name group

FFFFieldsetieldsetieldsetieldset TagTagTagTag

code

Form SampleName:Phone:

Service Yearly Monthly DailyPay method Paypal Master Visa


54/58

Page

HTML By Saturngod

53


fieldset fieldset legend tag

Combobox And ListboxCombobox And ListboxCombobox And ListboxCombobox And Listbox

HTML combobox listbox register date combo box

Form Sample1234567


55/58

Page

HTML By Saturngod

54


default select option selected 4

default select

4

Listbox select size attribute code

Form Sample

1234567

code


56/58

Page

HTML By Saturngod

55


Form Sample

Name:Phone:Service Yearly

Monthly DailyPay method Paypal Master Visa

Month :JanFebMarAprCategory(press Ctrl for Multiselect):

Free For Personal UseFree For commercialcommercial


57/58

Page

HTML By Saturngod

56


code code listbox multiselect

multiple attribute

multiple


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

HTMLSE Myanmar

Documents

Transcript of HTMLSE Myanmar