1 / 47

tutorial #2: basic html cmpt100 : introduction to computing university of saskatchewan

tutorial #2: basic html cmpt100 : introduction to computing university of saskatchewan. By Wendy Sharpe. before we get going . . . . If this is your FIRST tutorial, please review the slides from Tutorial 1 http://homepage.usask.ca/~wls238/cmpt100Tutorial1.html

ata
Download Presentation

tutorial #2: basic html cmpt100 : introduction to computing university of saskatchewan

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. tutorial #2: basic htmlcmpt100 : introduction to computinguniversity of saskatchewan By Wendy Sharpe

  2. before we get going . . . • If this is your FIRST tutorial, please review the slides from Tutorial 1 http://homepage.usask.ca/~wls238/cmpt100Tutorial1.html • If you have not done so already . . . • Go to your H:/ drive and create a CMPT100 folder • Start – My Computer – Winhome on Samba …. • Then go to File – New – Folder to create your CMPT100 folder • Log into http://moodle.cs.usask.ca • Go to today’s tutorial and save one of the tutorial images to your CMPT100 folder. • Remember the Mad Serious Hugely Important Disclaimer from tutorial #1? • DO NOT SAVE FILES TO YOUR DESKTOP. • EVER. • SERIOUSLY. • Open Kompozer • Start – Course Specific Applications – CMPT-100 – Kompozer 0.7.10

  3. Overview of Tutorial #2 • Elements and tags (HTML lingo) • Creating and saving the Excellent Scuba Adventure • Headings and paragraphs • Horizontal rules and breaks • Creating hyperlinks • Inserting images • Using comment tags • RGB colour codes • Adding styles and formatting to index.html • Uploading web pages to Ehandin

  4. html lingo: tags vs. elements

  5. html terminology: tags vs. elements • Tags • the commands that give HTML documents their functionality • basic Tag structure: <tagName> • E.g., <p> indicates a new paragraph • Opening and Closing Tags • some tags need to be closed otherwise they won’t work • such as: text formatting tags, document formatting tags, graphics formatting tags, linking tags • Basic opening/closing tag structure: <openingTag> element </closingTag> • E.g., <i>My italic text</i>

  6. html terminology: tags vs. elements • Elements • an element is everything from the opening tag to the closing tag E.g., opening and closing tag (with element) for a link <a href=http://homepage.usask.ca/~wls238>Wendy’s Site</a>

  7. creating and saving files in kompozerhtml terminology: head vs. body

  8. creating & saving the scuba diving page in kompozer • Create a new page in Kompozer • File – New – Blank Doc • Save your new page • Name your page ‘index’ • Save the file to your CMPT100 folder • Save any files related to your webpage in the same folder • Remember the rule about naming files: NO SPACES

  9. html terminology: head vs. body • Head • if you click on the Source tab in Kompozer you can look at the source code for the scuba site • Kompozer automatically creates your website’s head section • indicated with an opening/closing tag • E.g., <head> head element </head> • a head element can be, for example, your webpage title • Body • defines the documents body • includes all the contents of an HTML document such as text, hyperlinks, images, tables, lists, etc. • indicated with opening and closing tags: • E.g., <body> HTML document content </body>

  10. headings & paragraphshtml terminology: headings vs. title

  11. headings in kompozer • Add a heading 1 to your index.html file • H1, h2, h3, h4, h5, h6 • smaller the number = the bigger/more important the heading

  12. html terminology: headings vs. title • Headings • search engines use headings to index the structure and content of web pages • show the structure of the document, allows users to skim content • don’t use headings to make text BIG or bold • syntax: open tag – element content – close tag • E.g., <h1>This is my most important header</h1>

  13. html terminology: headings vs. title • Title tag • defines the title of the document • title element is required in all HTML and XHTML documents • syntax: <title>Sep and Jerry’s Excellent Scuba Adventure</title> • Title attribute • completely unrelated to title tag • gives more information about an element • syntax: <element title=“value”> • I coded a title attribute into the index of my homepage, see if you can find it in the source code • go to http://homepage.usask.ca/~wls238 • in your web browser: View – Source • HINT: read the green comments!

  14. creating page2 of our scuba adventure webpage

  15. creating page2.html • we’re just going to reuse what we’ve done so far for index.html • File – Save As – page2.html • make sure you are saving to the same place as index.html and your image file • Modify the heading on page2.html to: My Scuba Adventure – Page 2 • FYI: Kompozer will be open to page2.html NOT index.html • but you can tell which page you’re working on by looking at the top of Kompozer • see next slide for details

  16. keeping track of which page you’re editing: index or page2

  17. and moving on . . . • close page2.html • open index.html • we’re going to add a paragraph of info to index.html • change Body Text to Paragraph • add some information about your unwavering love for scuba diving. • it can be anything

  18. two mad serious hugely important disclaimers • Always, always save your page after you are satisfied with a change • Small changes are easier to fix if you make a mistake • Always view new changes in a refreshed web browser to make sure they look okay • Force refresh of your web browser • Control+F5 is the keyboard shortcut • Forces a complete refresh of each and every file associated with your website. • A simple refresh on your browser WILL NOT force a refresh of every file associated with your website

  19. viewing your kompozer page in a browser • go to where you have your index.html file saved • right mouse click on the file, and select Open from the list of options • the file should now be opened in a browser • Note: nobody else can see your page, it is local

  20. inserting images

  21. inserting an image • pretty simple with Kompozer • click the Image icon, or • Insert – image – find the image on your file directory • NOTE: the image MUST be in the same folder as your index.html file • pretty easy to do by modifying source code too • just make sure the file names match exactly • images are defined with the <img> tag • to display an image on a page, you need the src tag (src = Source) • src lets a browser know the URL of where the image • The URL points to the location where the image is stored • for more info: http://www.w3schools.com/html/html_images.asp

  22. image alternate text • A note on the alternate text option • alt=“My image’s info” • always add alternate text to your images • provides additional information for people who have slow connections or who use a screen reader • Some information on screen readers if you’re interested: http://en.wikipedia.org/wiki/Screen_reader

  23. troubleshooting images • Troubleshooting image issues • make sure that your image file is in the same folder as the rest of your webpage • ALWAYS hand in your image files with your assignments into Ehandin • img style="width: 400px; height: 265px;“ alt="Fishes and corals" src="tutorial1_underwater2.jpg”>

  24. add another heading and paragraph to index.html

  25. adding more stuff to index.html • create a subheading of size h2 underneath the image • Call the new subheading Details • create a paragraph under the subheading • tell the world about your first scuba diving adventure

  26. creating horizontal rules & breaks

  27. horizontal rule a.k.a. horizontal line • Pretty straight forward in Kompozer • put the cursor where you want your line to go • Insert – Horizontal Line

  28. inserting a break • In Kompozer • just press the Enter key • HTML tag: <br> • inserts a single line break • <br> is an empty tag, meaning that it doesn’t have a closing tag • go to the Source tab in Kompozer and you can see the corresponding breaks

  29. creating hyperlinks

  30. adding links section to index.html • add a heading of size h2 called Links • add a paragraph describing the links • We’re going to add three types of links: • relative link to page2.html • absolute link to PADI website: www.padi.com • internal link to the top of the page • a.k.a. an anchor • needs two components to work • If you’re still confused after the tutorial is over, you can watch an online tutorial via Youtube • http://www.youtube.com/watch?v=ypJj2AIStjk

  31. using comment tags

  32. commenting your code • Why? • Indicate who created the HTML document, get easy marks, organize your source code • you won’t be able to see comments in the Kompozer Design tab • the browser will ignore any comments enclosed in the comments tag: <!-- this is my comment --> Commenting as explained by xkcd. The actual format with // is used in the C++ language, but all languages, including HTML have some form of commenting

  33. commenting in kompozer • Insert – Comment • type what you want your comment in the dialog box • click OK • your comment will appear as a question mark icon in Kompozer • you can view the details of your comment in the Source tab

  34. rgb colour codesAdding a background colour to index.html

  35. html colours • HTML colours are defined using a hexidecimal (HEX) notation • www.w3schools.com/Html/html_colors.asp • Colours are displayed by combining Red, Green, and Blue (RGB) colour values • The lowest value a colour can have is 0 (HEX: 00) • The highest value a colour can have is 255 (HEX: FF) • E.g., #99CCCC • Ever heard of web safe colours? • Not as big of an issue anymore because not very many computer users view the web in 256 colors anymore • But this is still an issue in some circles • http://www.lynda.com/resources/webpalette.aspx

  36. change the background colour of index.html • Changing HTML colours in Kompozer is easy • Format – Page colors and background . . . • Select the colour you want • What a background colour looks like in the source code: style="color: rgb(0, 0, 0); background-color: rgb(204, 255, 255);" alink="#000099" link="#000099" vlink="#990099">

  37. adding styles and formatting to index.htmlhtml terminology: CSS and Styles

  38. html terminology: cascading style sheets (css) • uses styles to define how to display HTML elements • CSS were added to HTML 4.0 so all formatting could be removed from the HTML document and stored in a CSS file • VERY useful, can save you a ton of work by allowing you to change the appearance/layout of your HTML document in one place • online demo of CSS and styles: www.w3schools.com/css/demo_default.htm

  39. html terminology: css • syntax of CSS • a CSS rule (a list of the formatting) has two main parts: • a selector • one or more declarations • E.g., h1 {colour:blue;font-size:12px;} • big arrow: selector (usually the HTML element you want to style) • medium arrow: value • small arrow: property • each property has a value associated with it

  40. using kompozer’s css editor to define a css class (.headings) and a css rule (linkHover)

  41. using kompozer’s css editor to create the .headings class • First, center the webpage text • we’ll select everything from the first heading to the horizontal rule • Click the CaScadeS button • Kompozer’s CSS editor • create a class .heading • set font to arial, italicize, • change font colour to #336666 • apply this class to the h1 and h2 headings

  42. creating the .headings class Click ‘Create Style Rule’

  43. creating the link hover rule • Click the CaScadeS button like before • This changes the state of the links on your page

  44. create text box class • Use CaScadeS the same was as with the .headings class • set Background to white • set text box border • set padding (5 pixels should be enough) • click ok • apply the class to your index.html file • highlight the areas you want in the text box, use the pull down menu to access the class

  45. uploading webpages to ehandin

  46. submitting assignments to ehandin • add each file one at a time • don’t forget to upload image files • make sure your file names don’t have spaces • double check that your webpage displays properly in a browser

  47. questions?

More Related