Scribd
Upload
174 views4 pages

Tutorial Amaya

This document is a tutorial for using the Amaya browser/editor. It provides instructions on how to get started using Amaya, including opening and modifying example pages, examining HTML source code, inserting text, headings, images and links. It also explains how to use CSS stylesheets to format elements and view applied styles. The tutorial encourages the user to experiment with the different functions in Amaya to learn how to build and style basic web pages.

Uploaded by

Mul Adi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
174 views4 pages

Tutorial Amaya

This document is a tutorial for using the Amaya browser/editor. It provides instructions on how to get started using Amaya, including opening and modifying example pages, examining HTML source code, inserting text, headings, images and links. It also explains how to use CSS stylesheets to format elements and view applied styles. The tutorial encourages the user to experiment with the different functions in Amaya to learn how to build and style basic web pages.

Uploaded by

Mul Adi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

6/7/13

Amaya browser / editor tutorial1

WelcometotheAmaya
GettingStartedTutorial
Thefilecalledstyle.cssmustbeinthe
samedirectoryastut1.htmlthroughto
tut5.html.Soshouldthepictures.See
gettingthispagebelow.
Amayaisunderconstantdevelopment.
Runyourpageonanotherbrowserasyou
testit.Seetheleftnavigationcolumnfor
instructionstoaccessthestyle.css.
Thispageis
introduction1

LastUpdated:2010
0623

Pagestructure2
htmland
escaping3
Help&lists4
Help&lists5
Thiscolumnisa
dividentifiedas
id="nav"

WelcomeThispageassumesyouare
usingAmayaBrowser/Editor

Clickon
somethinginthis
column.Goto
thebottomlefton
thestatusbar

Beginningasitefromnothingishard.Youneedalayoutplan
andsomeknowedgeofAmaya,CSSandHTMLbeforeyoucan
begin.
Thebestwaytolearnistouseotherpeople'spagesandmodify
them

Modifythispagetosuityourself,andlearnAmayawhileyoudo.
Lookatthesourcecodeoccasionallytolearnfromwhatyouhave
lastdivintheline justdone.
ofdivsandthis
Gettingthispage:
columnwillturn
Openthispage(tut1.html)anditsCSSinAmaya.Togetstyle.css
justchangetut1.htmltostyle.cssinAmaya'snavigationlineatthetop
blue.Gotothe
andpressEnterOrclickFormat>Stylesheets>Open,andchoose
andclickonthe

dnwfriends.nzl.org/amayaproject/tut1.html

1/4

6/7/13

Amaya browser / editor tutorial1

topmenubar
andclickFormat
>ShowApplied
Styleand
doubleclickon
oneofthelines.
Youwillopena
newtabshowing
thestylesheet
whichwillshow
thestyleforthis
column.
Trytochange
somethingand
clickonFile>
Saveandcheck
toseethegreen
buttonatthe
bottomrightis
stillgreen
meaningthe
codeisvalid.
Hasyourchange
madeany
differencetothis
page?

it.DoaFile>Save_Asintoadirectoryonyourcomputer.Towork
correctlyyouneedallthepagesincludingstyle.cssandthepictures
withtheiroriginalnamesinthesamedirectoryonyourcomputer.
YoucangetthepictureswithFirefoxorInternetExplorer(butnot
Amaya)byrightclickingonthemandselectingSaveImageAs.
Makeabackupofthewholesiteandthenyoucanchangethings
whileyoulearnAmaya,CSS,andHTML.Youcanusethisasa
modelforyourownsiteortakeanyofthethousandsofpagesoffthe
internet.Respectcopyright.Veryfewinternetpagesarevalidcode.
Thestylesheetisattachedbythestatement<linkhref="style.css"
rel="stylesheet"type="text/css">intheinvisible<head>sectionof
thethehtml.Callyourstylesheetsomething_imaginative.css.Iuse
style.cssasanexample.
ExaminingtheSource:
AtanytimeyoucanexaminethecodebypressingCTRLUO.That
isholddownthecontrolbuttonandpushuthenoonthekeyboard
andthesourcecodewillopen.CtrlUHwillclosethewindowagain.
Doubleclickingonthe(pink?)lineatthebottomopensandcloses
thesourcecodealsoandyoucanusetheViewmenu.Lookatthe
bottomleft(html>body>div>div>p)totellyoustructure.Youcanclick
onthestructureitems.
Getstartedbytyping:
Clickhereandaddsometexttothisparagraphasifyouareusinga
wordprocessor.EntergivesanewparagraphandCtrlEntergivesa
newline.Edit>UndoorCTRLZwillremovemistakes.
Selectapieceofyourtext.GotoInsert>InformationTypeand
chooseone.Experiment.
Selectapieceofyourtext.GotoInsert>CharacterElementand
chooseone.Experiment.
Getstartedwithaheading:
Selectsometextbydraggingacrossit.GotoInsert>Headingand
chooseone.Youshouldgetaheading.Workonimprovedformatting
later.
Getstartedwithanimage:
WiththecursorsomewhereonthepagegototheMenuBar.Click
Insert>Image.Clickthepictureofthefolderandselectanimageas
usualforothersoftware.TypesomethingintotheAlternateText.

dnwfriends.nzl.org/amayaproject/tut1.html

2/4

6/7/13

Amaya browser / editor tutorial1

ClickConfirm.
Youshouldnow
haveanimage.Dragthemouseacrosstheimagetoselectitand
resizeasifyouareinawordprocessor.Worryaboutlayoutlater.
Makealink
Typesomethinganddragacrossittoselectit.Alink.GototheMenu
Bar.Links>CreateorChangeaLink.Typeinthenameofapage.
eghttp://www.gmail.comortut3.htmlandclickonConfirm.
TheViewMenu
TakeaminutetotryeachoftheoptionsintheViewMenu.Theyare
fairlyselfevident.Usetheonesthatyouarecomfortablewith,but
theyallhavevalue.
TheInsertMenu
TakesometimetofindwhatisintheInsertMenu.Someyouwill
neveruse,andsomeyouwillwantoften.Giveyourselfsomeblank
spacetoexperiment(EnterEnterEnter)anduseCtrlZ(Edit>Undo)
toreversemistakes.
Thisisa<divclass="caption">withacoloredborder.Click
insideitandpressF2.Youshouldhavethewholediv
selected.GotoFormat>ShowAppliedStyleandyouwillbe
abletoclicktoopenthestylesheettoseewhyitiscentered
withcoloredbordersandspacearoundit.

Thisisthesameasthedivabove
This<divclass="caption">containstheheadingaboveand
anotherdivcalled<divclass="pictureright">whichallowstext
likethistofloatpastitontheleft.Notethatwhenadivfloatsit
isotherthingsthatmove.Thefloatingdivstaysput.
Confusing.

dnwfriends.nzl.org/amayaproject/tut1.html

3/4

6/7/13

Amaya browser / editor tutorial1

Selectthe
pictureby
draggingonit
andpressF2to
selectthediv
thengoto
Format>Show
AppliedStyle
andclickona
linetothe
stylesheetto
findoutwhyit
floatsonthe
rightside.
Replacetheimagebydraggingonitandpressdelete.Then
withoutmovingtheinsertiionpointgotothemenuitemInsert
>Image.Clickontheyellowfolderandinsertanimageof
yourown.Dragtosize.Imagesontheinternetdonotneedto
belargerthan100kandoften30kwilldo.

Nextpage>
ThispageiswrittenonAmaya11.3runningonUbuntu10.04.
PicturesaretakeninWellington,NewZealand.
IhavechangedmyNZlocalEnglishtoAmericanwhereitis
alsousedascode(color&center).
Anycomments,Amayaexperiencesandextramaterialvery
welcome.
[email protected]

dnwfriends.nzl.org/amayaproject/tut1.html

4/4

You might also like