Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Interactivity and the Internet
Document related concepts
Transcript
CO22007 Web Development Methods 2 Unit 3 : Introduction to HTML Today Introduction to Web Authoring and Web Authoring tools What is Hypertext Markup Language (HTML)? How HTML pages are structured Basic text formatting Browser Issues Intro to tutorial three (handing coding HTML) Learning Outcomes After completing this unit you will be able to Identify the purpose and nature of a variety of web authoring tools Create basic web pages using hand-coded HTML Further develop these pages to incorporate links and images In turn these outcomes assist ion the achievement of the following Module Learning outcomes Identify current and future application areas for the world wide web. Create simple web-sites combining text and graphics. Web Pages No matter how complex,all just basically HTML: a set of instructions for how to render (draw) a page in a browser You can see the HTML on any page by selecting View…(Page)Source on your browser menu bar Two ways of making them: authoring tools hand coding Introduction to Web Authoring Web sites are now composed of many elements: HTML pages (more on that shortly!) created in packages like Macromedia Dreamweaver Graphics created in packages like Macromedia Fireworks Animated sequences created in packages like Macromedia Flash Interactive ‘Shockwave’ elements created in Macromedia Authorware or Director Video and sound created using packages like SoundForge and Adobe Premiere Macromedia Dreamweaver Creates HTML pages (files end in .htm or .html) Manage web sites (i.e. collections of HTML pages and any other files such as graphics) Currently at version 4 (version 2 in labs) Macromedia Flash Creates Flash animation files that can be placed in web pages Files end in .swf Flash files usually composed of graphics and images created elsewhere (e.g. Fireworks, Photoshop) Can add text, interactive elements (buttons, text input boxes etc) Currently at version 5 (5 in labs) Macromedia Fireworks Web oriented graphics creation packages: create images that download well (a.k.a. ‘small ones’) create ‘rollovers’ (elements on that page that change appearance when the user rolls their mouse over them) Currently at version 4 (version 2 in labs) Macromedia Shockwave Flash allows you to create quite simple animations e.g. simple animations and games Shockwave technologies allow you to create highly interactive applications: create the application in Director or Authorware: then ‘Shock’ it for the web (now built in to the tools) Trends in Authoring Tools Trend now is towards integration of/with different tools E.G. Between Macromedia products: launch Fireworks from within Flash and Dreamweaver work on bitmap and vector graphics then use in a Dreamweaver site or a Flash presentation With other products: create a doc in Word, save as HTML Dreamweaver ‘cleans up’ the HTML for import Costs Macromedia’s (and main competitor Adobe’s) web authoring tools are not cheap: Flash: £300 Fireworks: £270 Dreamweaver: £270 Can but them in bundles which is cheaper e.g. Dreamweaver and Fireworks together = £410 Also student prices: e.g. Dreamweaver 4 = £175) NB all prices are approximate Community Macromedia site has: online forums: post messages and get answers quickly from Macromedia staffers and from other developers beta testing groups: get latest versions in their trial state showcases: see examples of applications created using the products and learn how they did it technical notes section go to http://www.macromedia.com Seeing Web Content Browsers allow you to ‘see’ web content All browsers can ‘see’ HTML pages although not always identically But might need plug-ins to ‘see’ Flash, Shockwave, video and sound files As designer: think about the audience (time to do download players etc) gratuitous elements Group Exercise Steven Spielberg has hired you to create a website for his new film ET: Got Home and They’d Left He wants: lots of graphics, video and sound from the film a home page telling people what the film is about and where it is playing locally (e.g. cinema location, times) pages with information about the cast an animation of ET saying ‘Home alone, home alone’ a game where the user gets to try and run ET over with a tank What tools do you think you would need to use (give reasons) to create the site? HTML - Why Bother? HTML authoring tools (e.g. Dreamweaver) were invented to make life easier: they automate a lot of HTML coding they have graphical user interfaces (GUI’s) But they can be: expensive, unpredictable, limited HTML coding is a very sellable skill E.G. latest version of Dreamweaver makes it easier to see and edit raw HTML: developers demanded this Example HTML authoring tools often add ‘redundant tags’ Each tag has to be read by the browser lots of redundant tags = slower to load pages in the age of media rich sites every nanosecond counts! designers often ‘tidy up’ code generated automatically by web authoring tools Okay, So What is HTML? A page mark-up language: i.e. it tells a web browser how to create a web page for the end user Invented by Tim Berners-Lee: specifically to do with creation of pages in a ‘hypertext’ structure like the Web Hypertext: non-linear information structure use hyperlinks to jump from one node (e.g. page, or place on a page) to another Who Controls HTML? W3C: World Wide Web Consortium Established in 1994: make sure that standards were adhered to in developing the language they vote on whether to accept proposed changes to the language they oversee the issuing of new versions of the HTML standard Most recent version of HTML is HTML 4 Example FRAMES tag is new to HTML 4 tag was originally a proprietary one implemented by Netscape browser only then Microsoft picked it up despite the fact that lots of people hate frames, the tag is now officially part of HTML language W3C thought better try and set a standard for how it should be used Many changes to HTML specification are driven by what browser manufacturers want Group Exercise - Describe a Page As we have already seen HTML is just a way of telling a browser how to draw a page The next slide shows a web page Working in groups come up with a set of instructions that would tell a human how to recreate the page assume all the elements (e.g. bits of text, lines, tables, images) are already available How HTML Pages Work HTML can try and tell a browser how parts of a page should appear (e.g. text) But how the browser interprets the instructions can vary (more later) Main elements of an HTML page: text you want to appear embedded TAGS (the instructions for controlling format and layout and telling the browser about the document) file management information (e.g. links to graphics files, or other web pages) HTML TAGS Are what you (or your authoring tool) code Are always enclosed in angle brackets (e.g. <H1> ) By convention are typed upper case because it is easier to read Can have attributes, e.g. <P ALIGN=“Left”> the “Left” bit is the attribute Most tags are opened then they are switched off, e.g.: <B>make this bold</B>but not this BASIC STRUCTURE All html pages should start with <HTML> and close with </HTML> HTML Pages comprise a HEAD and a BODY HEAD = info about the document not necessarily seen by user BODY = what the end user sees when it is interpreted by the browser Other elements (future lectures) = style sheets, framesets and scripts THE HEAD Where global settings are defined Starts with <HEAD> and ends with </HEAD> Usually contains: a title to be displayed in the top bar of the browser, e.g. <TITLE>This is My Web Page</TITLE> meta information such as the author’s name or a description of content e.g. <META NAME=author CONTENT=“Catriona Macaulay”(useful for search engines) ACTION Find out when and why you would use the following HEAD tag: <META http-equiv=“Refresh” content=8> THE BODY Main functions: break text in page into sections/chunks (e.g. by creating paragraph or line breaks) format text (e.g. appearance, alignment) add other elements to the page (e.g. tables, graphics, links, lines) ACTION Find out when and why you would use the following BODY tag: <CODE> … </CODE> Hand Coding an HTML Page You can create an html page in any text editor (Word,Notepad, etc) First signify it is an HTML page with <HTML> Then add your HEAD info Then your BODY info Then signify the HTML ends with </HTML> Then save the document in the style filename.htm or filename.html That’s it! Breaking Up Is Hard To Do Most documents display text in blocks, or chunks To do this in HTML there are 4 relevant tags: <P> starts a new paragraph (i.e. puts some white space between the last para and the new one <BR> causes a line to break and what follows to appear on a new line <DIV> allows you to group a bunch of paragraphs together (e.g. to Align them all at once) ACTION Find out when and where you would use the following text chunking tag: <SPAN> Basic Text Formatting Most HTML tags you will initially look at are concerned with the basics of text formatting: font type and styles text alignment line breaks and paragraph breaks defining text lists Aligning Text <P ALIGN=“Center”> means everything is centred until the next <P> <P ALIGN=“Left”> <P ALIGN=“Right”> <P ALIGN=“Justify”> To align more than one paragraph use: <DIV ALIGN=“Center”>…..</DIV> Note: American spelling of CENTRE (i.e. CENTER) Indent a section using: <BLOCKQUOTE>….</BLOCKQOUTE> CHARACTER FORMATTING <B> BOLD TEXT </B> <I> Italic </I> <STRONG>…</STRONG> usually same as bold <EM>…</EM> usually same as italic <SUP>…</SUP> superscript <SUB>…</SUB> subscript <STRIKE>…</STRIKE> struck through text <U>…</U> Underline (NB Don’t confuse with hyperlinks) <TT>…</TT> make everything teletype HEADING STYLE Got six levels of heading: <H1>….</H1> = largest size <H2>….</H2>….. Etc <H6>….</H6> = smallest size Headings always start a new line Anything after them starts a new paragraph Can use other TAGS inline with them (e.g. <EM> ) But, different browsers will use different settings for headings MAKING LISTS Another obvious feature of many documents are lists another useful way of organising information main kinds HTML allows are ordered (i.e. numbered), and unordered lists Ordered list: <OL> to start and then <LI> to signify each item in list then </OL> to end Unordered list: same format but <UL> … </UL> Styles of Ordered Lists Originally all ordered lists were just numbered Now can set an attribute for ordered lists Use <OL type=numberingsystem>… </OL> Where numberingsystem = 1 for 1, 2,3 style list A for A, B, C style list a for a, b, c style list I for I,II,III style list i for i, ii, iii style list Styles of Unordered Lists Main thing is what kind of bullet do you want? The <UL> tag has an attribute type that can have one of three values: circle square o disc ACTION Find out when you would use the following list tag and what other tags you would need to use with it: <DL> …. </DL> HYPERLINKING Anchor tag <A> allows you to link to other pages, or other parts of the same page, e.g. Link to a different file anywhere: <A HREF=“http://www.dcs.napier.ac.uk/>Napier Home Page</A> Link to another part of same file: create the anchor at point you want to be able to jump to with <A NAME=“JumpHere”>Jumps to Here</A> create a link at place you want to link from with The Bad News Web pages can display differently on: different browsers (e.g. Netscape ‘v’ Explorer Different versions of same browser Mac and PC platforms None 100% true to W3C HTML specification Which means? Work arounds: LCD (lowest common denominator): work to what you think the oldest widely used browser can handle lead from the front: work to latest browser versions on grounds that it will encourage users to update The Good News Dreamweaver can check to see if your code will cause problems on different browsers There are websites that also do this: try finding them via http://www.w3c.org Also places that have details of all the browser incompatibility issues: e.g. books on HTML like ‘HTML 4 Unleashed’ by Rik Darnell or web sites like: http://hotwired.lycos.com/webmonkey/reference/browser_chart/ Design Issues in Web Authoring Effective web page design requires: understanding the background to web browsing understanding the people who will use your site understanding what they will use your site for Also requires understanding current state of: HTML different browsers/platforms for viewing web pages (e.g. interactive TV, WAP phones) web authoring tools associated technologies (e.g. scripting languages) BASIC HCI HCI - human computer interaction Field tries to help designers build better products (e.g. web pages) Web design basic HCI: is text easy to read are all pages on the site consistent are links still functioning are slow to load elements (e.g. graphics) really necessary are interactive elements obvious/easy to use But…. Can you think of a case where the designer might not want the interactive elements to be obvious? What about a case where the designer might not care about slow to download elements? STAYING AWARE New technologies can change what we define by ‘too big for fast download’ Fashions change: frames go in and out of fashion last year everyone loved splash pages created in Flash, now everyone hates them (‘Skip Intro’ syndrome!) More and more websites are being targeted at specific ‘niche’ markets (Almost) The Best Design Advice (Ever) Do it on paper first!: sketch out how page should look sketch out how pages relate (e.g. navigation map) Good web design is hard Tools like Dreamweaver encourage us to start creating before planning: this is bad Save time, plan your site on paper first: this is good Directed Study In this weeks tutorial you will create a basic web page Once you have done this experiment with different tags: the great Webmonkey site has an online ‘cheat sheet’ of HTML tags you could investigate: http://hotwired.lycos.com/webmonkey/teachingtool/i ndex.html Also, see what happens when you nest tags Authoring in Dreamweaver <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> Welcome to my web page. This is my first attempt at creating my site. <P> (I should not apologise for this - it only puts the reader off!) <BR> Bye bye from me Thankyou </BODY> Authoring in Dreamweaver <html> <head> <title>My First Web Page </title> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1"> </head> <body bgcolor="#FFFFFF"> <p>Welcome to my web page</p> <p>This is my first attempt at creating my site. (I should not apologise for this it only puts the reader off!)<br> Byebye from me.Thankyou.</p> </body> </html> Suggested Reading Go to the W3C website and find out about the latest developments in HTML you will also find links to HTML ‘validators’ (for checking your code) here http://www.w3c.org Coming Attractions More than you ever wanted to know about: frames tables styles forms Plus: HCI Design Basics 2 Introduction to Web Authoring 2.1 Tools 2.2 Tags 2.3 End-user control of display Preview of tutorial 2.4 Adding a graphic 2.5 Text styles 2.6 Alignment 2.7 Heading Style 2.8 Margins 2.9 Character Formatting 2.10 Linking Pages End of unit summary
