External Website Session 1

Add to Favourites

Post to:

Comments

Presentation Transcript

Creating best awareness online- Understanding the basics : 1 1 Creating best awareness online- Understanding the basics

Contents : 2 2 What is HTML ?? (What is the relationship with website??) HTML Codes Question and Answer time Contents

What is HTML??? : 3 What is HTML??? 3

What is HTML?? : 4 What is HTML?? Full: HyperText Markup Language 4

What is HTML?? : 5 What is HTML?? Full: HyperText Markup Language 5 Usage Create structured documents. Create interactive forms of text with images and objects. Written in HTML elements. Ways in delivering HTML World Wide Web. Like what we see at web browsers. HTML e-mail. Newsletters with images.

What is HTML?? : 6 What is HTML?? Relationship with website HTML is one of the language you can create with website. Other language including: PHP (Personal Home Page), ASP (Active Server Pages), etc. Extension on website = what language they are writing. Examples http://www.aiesecaustralia.org <--- Written in HTML http://www.facebook.com <--- Written in PHP http://msdn.microsoft.com/en-us/library/aa286483.aspx <-- Written in ASP In general, all other language will have HTML component as basis. 6

Pre-requisite : 7 Pre-requisite Web browsers Choose the best web browser for testing Popular =/= standard Best browsers Apple Safari Mozilla Firefox Opera Google Chrome Why not IE Series??? Traditionally Internet Explorer not using standard layout Will need a lot of fix to make website work smoothly More reason will disclose from time to time 7

How to create Website?? : 8 How to create Website?? 8 *Not recommend to use Word Processors

WYSIWYG Editor : 9 WYSIWYG Editor Best assistant for Begineers You only need minimum knowledge of programming language. Better than Word Processors at producing highly graphical and interactive pages. Examples: Microsoft Expression Web (Windows only, US$149, Free Studio version as member of Dreamspark) http://www.dreamspark.com Adobe Dreamweaver (Windows and Mac, US$399) http://www.adobe.com/products/dreamweaver Apple iWeb (Mac only, bundle with iLife / new machine) http://www.apple.com/ilife/iweb Weakness of these editors: May not understand HTML code Software might not available for corporate environment 9

Slide 10 : 10 10

Intermediate Level : 11 Intermediate Level Source code editors - Long website’s saviour Colours making things easier to look at. If you don’t think your code works well, you can still change to Design view to alter it graphically (like WYSIWYG editors). Examples: Microsoft Expression Web (Windows only, US$149, Free Studio version as member of Dreamspark) http://www.dreamspark.com Adobe Dreamweaver (Windows and Mac, US$399) http://www.adobe.com/products/dreamweaver KompoZer (Windows and Mac, Donate-ware) http://kompozer.net/ Weakness of these editors: Software might not available at corporate environment 11

Slide 12 : 12 12

Professional / Expert : 13 Professional / Expert Text editor - Real professional experience What you see is just code... Anywhere can use it.... Examples: Notepad (Free, included with all Windows) Text Edit (Free, included with all Mac) Notepad++ (Free, Windows only) http://notepad-plus.sourceforge.net/ Aptana Studio (Free, Windows and Mac) http://www.aptana.com/ Weakness of these editors: Might give you a hard time to do alignment Need assist with web browsers to preview the layout 13

Slide 14 : 14 14

Recommendations? : 15 Recommendations? Depends on skills level Depends how lazy you want to be or how quickly you want things done Bling’s preference: Source Code Editor !! Painful to look at text without colours Make sure you are helping others to read the code easily Code hinting complete job faster 15

Now we have the tools... : 16 16 Now we have the tools... Now is the time to create the first webpage!!

HTML 101(Convert from Mac 101) : 17 HTML 101(Convert from Mac 101) 17

Magic 1: Hello World! : 18 Magic 1: Hello World! “Hello World!” is the easiest website you can ever create It contains minimum codes Ingredients: Your pair of hands Notepad / Text Edit (depends Windows / Mac) Careful mindset Explanation of Code After completion of Hello World! 18

Procedure : 19 Procedure Open Notepad / Text Edit Type following things Save it as “world.html”, make sure choose “All Files” for type 19

Procedure : 20 Procedure Now you have 2 minutes to create this If you are ready, please type “ok” or “ready” 20

Procedure : 21 Procedure Open “world.html” with any web browsers. You should see result like this: If you cannot see something like this, check your typing, should be a typo. 21

Congratulations !!! : 22 Congratulations !!! That is the first webpage you have ever create How simple, how cool it is to have your first step out to the world!! But... What did you do !? Is it Magic?? Is it Bling hack into your computer to make it happen?? Is it a dream ?? What exactly happen !? That is the magic of HTML codes 22

Code explanation : 23 Code explanation <= this tells web browser, the following things are HTML codes <= Header <= What you mainly see at the top of browser <body> <= Start of the body, where that sentences shown 23</p><p><strong>Reminder!! : </strong>24 Reminder!! When you start something, you have to close it When you start to cook, you have to close the stove to prevent error happens (e.g. burn your place?) Same as real life, HTML Code need to be closed if certain job has finished Adding “/” in front of the code </html> <-- End of HTML file </body> <-- End of Body <-- End of title 24

Magic 2: Single photo can be fun : 25 Magic 2: Single photo can be fun “Photo fun” is nice to play around with Photo seems easy to put on website, but actually way more things can do about it Ingredients: Your pair of hands Notepad / Text Edit (depends Windows / Mac) Careful mindset (Same thing, make sure don’t have typing error) Explanation of Code After completion of Photo fun! 25

Procedure : 26 Procedure Open Notepad / Text Edit Type following things 26

Procedure : 27 Procedure Save it as “photofun.html”, make sure choose “All Files” for type 27

Procedure : 28 Procedure Now you have 3 minutes to create this If you are ready, please type “ok” or “ready” 28

Procedure : 29 Procedure Open “PhotoFun.html” with any web browsers. You should see result like this: If you cannot see something like this, check your typing, should be a typo. 29

Congratulations !!! : 30 Congratulations !!! That is how commonly people play around with images That’s how Bling play around with images on @Aus website Now you are starting to familiar with the basic code Is it Magic?? Obviously NO Is it Bling hack into your computer to make it happen?? NO Is it a dream ?? NO What exactly happen !? You use HTML codes to make it happen That is the how HTML codes work!! 30

Code explanation : 31 Code explanation Introducing “Image” family This is an image img: telling the browser following things is image src: tell browser where to find it alt: when browser can’t find the image, that is what it will shown 31

Code explanation : 32 Code explanation
border: set up a border around the image width & height: you can set the width of the image (default: auto) align: decide where the image should be (not always apply) br: Break => line break 32

Code explanation : 33 Code explanation img tag inside html code Seems something new??? Not really!!! This is just saying we are using this image to be a button So when you click on the image, you will jump to another site (e.g. this link I’ve set to jump to @Aus website) Similar situation as what you saw on @Aus website 33

Magic 3: Link Mania : 34 Magic 3: Link Mania “Link Mania” can be something insane Links are terrible things (can make you go crazy) Different way of link creations Ingredients: Your pair of hands Notepad / Text Edit (depends Windows / Mac) Careful mindset (Same thing, make sure don’t have typing error) Explanation of Code After completion of Link Mania! 34

Procedure : 35 Procedure Open Notepad / Text Edit Type following things 35

Procedure : 36 Procedure Save it as “linkmania.html”, make sure choose “All Files” for type 36

Procedure : 37 Procedure Now you have 3 minutes to create this If you are ready, please type “ok” or “ready” 37

Procedure : 38 Procedure Open “linkmania.html” with any web browsers. You should see result like this: If you cannot see something like this, check your typing, should be a typo. 38

Congratulations !!! : 39 Congratulations !!! This is just a tiny part of links Complication appear when heaps of links appear at the same time You are starting to build a website now... Is it Magic?? Obviously NO Is it Bling hack into your computer to make it happen?? NO Is it a dream ?? NO What exactly happen !? You use HTML codes to make it happen Once you know what are those things Everything will be quite easy 39

Code explanation : 40 Code explanation Introducing “anchor” family This is AIESEC Australia website href: telling the browser this is the hyperlink When u open hyperlink, you need to close it Between both codes, word are important to guide people Remember the photo from last exercise 40

Code explanation : 41 Code explanation This is AIESEC Australia Website style: as what it means, Style. How you want the link to look like e.g. we have text-decoration here Text-decoration: none = no underline at links Many more style decorations, usually will see this one, we can change colour as well (color:#00FF99) 41

Code explanation : 42 Code explanation Click me will have a pop up of AIESEC Australia website target: where you want to open the page, attribute as follows _blank: in new browser window _self: in the same frame as it was clicked _parent: in parent frameset _top: full body of the window 42

Code explanation : 43 Code explanation Example of target: e.g. AIESEC Australia student entry page: http://www.aiesecaustralia.org/states.html _parent are using here People should see the website in full browser, not in that tiny frame e.g. HTML tutorial page: http://www.htmlcodetutorial.com/linking/selftop.html _self are using here This website cut into various frames Clearly show _self as other parts of the page remain silent 43

Code explanation : 44 Code explanation This should go back to upper level (Windows explorer might pop up) Where is the link !? This is an easier way to get links to work Unix command (Most server base on Linux) Convenient way to create website, always work However, hardest way to maintain e.g. ACT website 44

Magic 4: Animation : 45 Magic 4: Animation “Flashy” itself is not hard... Major things are browser compatibilities Ingredients: Your pair of hands Notepad / Text Edit (depends Windows / Mac) Careful mindset (Same thing, make sure don’t have typing error) Explanation of Code After completion of Flashy! 45

Procedure : 46 Procedure Open Notepad / Text Edit Type following things Save it as “Flashy.html”, make sure choose “All Files” for type 46

Procedure : 47 Procedure Now you have 2 minutes to create this If you are ready, please type “ok” or “ready” 47

Procedure : 48 Procedure Open “Flashy.html” with any web browsers. You should see result like this: If you cannot see something like this, check your typing, should be a typo. 48

Congratulations !!! : 49 Congratulations !!! This is how easy to make a flash onto website Complication appear when heaps of links appear at the same time You are closer than ever to complete a decent website... But I don’t see any compatibility problem?? Some web browsers will have problem Have you see this?? 49

Code explanation : 50 Code explanation Introducing “object” family object: as what it means, is an object... param: Parameter name: Define the name to use in script value: value of parameter, so I want that windows mode to be transparent 50

Code explanation : 51 Code explanation Usage of embed embed: defines embedded objects (either flash or video, etc) Width: object’s width Height: object’s height wmode: we define it before, to make sure it will be transparent 51

Final Magic: Tables : 52 Final Magic: Tables “Table” means the same as table in excel That’s how you draw table at HTML Ingredients: Your pair of hands Notepad / Text Edit (depends Windows / Mac) Careful mindset (Same thing, make sure don’t have typing error) Explanation of Code After completion of Table! 52

Procedure : 53 Procedure Open Notepad / Text Edit Type following things 53

Procedure : 54 Procedure Now you have 5 minutes to create this 54

Congratulations !!! : 55 Congratulations !!! This is pretty much the ending part of common component Of course there are more simple things But not all of them you will see it everyday You are closer than ever to complete a decent website... What if I say you have more than enough skills to create @Aus main index page?? 55

Code explanation : 56 Code explanation Introducing “table” family

Table: As what it means... Border: border of the table (so you see differences between 2 tables) Cellspacing: space between each cell tr: Table row, you can add attribute like width, height, etc into it td: standard cell, between open and close, you can put whatever into it (links, words, images, just like examples) 56

Test: @Aus Website : 57 Test: @Aus Website As I mention, you know majority of things to write this website... Some of the things I didn’t teach you guys Simple version can be done Ingredients: Your pair of hands Notepad / Text Edit (depends Windows / Mac) Careful mindset (Same thing, make sure don’t have typing error) Explanation of Code There won’t be any... Because you know all of it... 57

How is the test going to work? : 58 How is the test going to work? This test fully examine on how you can create this website Better not copy and paste from @Aus website (I knew it if you copy it) What I will provide: An html file with all the links you need I will mark down certain things which you don’t need to change (Or else you won’t have something look similar to it) This powerpoint will be included in the link here: http://www.aiesecunsw.org/external1.zip Deadline: 1 week 1 week is maximum time... Send the HTML file back to my e-mail account (samuel.chan@aiesec.net) 58

This should be what you look like : 59 This should be what you look like 59

QnA TimeAny questions other than asking me how to do the test???? : 60 QnA TimeAny questions other than asking me how to do the test???? 60

Thank you for your time!!If you have questions, feel free to e-mail me (samuel.chan@aiesec.net) : 61 Thank you for your time!!If you have questions, feel free to e-mail me (samuel.chan@aiesec.net) 61