CMT111-01/-M1: HTML & Dreamweaver. Creating an HTML Document (Continued)

Size: px

Start display at page:

Download "CMT111-01/-M1: HTML & Dreamweaver. Creating an HTML Document (Continued)"

Claud Hunter
6 years ago
Views:

1 CMT111-01/-M1: HTML & Dreamweaver Bunker Hill Community College Spring 2011 Instructor: Lawrence G. Piper Creating an HTML Document (Continued) 31 January to 3 February 2011

2 Where You Should Be Everyone should have a USB stick (aka thumb drive) CMT111-01/M1 44Jan11 2 Everyone should have some portable apps loaded on USB stick Notepad++ at least two browsers Google Chrome Opera FireFox Everyone should have sexyfilemanager Account working we made a starter web page [I want to see them] Who is missing what? We ll fix first thing, then go on

3 Portable Apps on USB Memory Sticks or Thumb Drives In case you missed it last time, here are the instructions CMT111-01/M1 44Jan11 3 Install in USB port in computer (1 GB stick likely large enough) Will probably get a pop-up with a list of choices Choose open folder to view file Click OK Create a folder called portableapps Right click in Explorer and choose New/Folder Rename folder portableapps In browser, download installation file to portableapps folder can find all necessary links on docpiper.com Back in portableapps folder, double click the installation file Follow prompts to install Opera-USB is slightly different Extract to a sub-folder in portableapps folder Run portable app by double clicking program icon in Explorer

4 Why Do We Learn to Code? CMT111-01/M1 44Jan11 4 Coding is the only 100% reliable way to make web pages Dreamweaver is easy to implement BUT also much easier to screw up the only 100% reliable way to fix DW bugs is to delve into code You might find yourself w/o access to DW, but needing to fix something on the road; client calls in a panic; portable Notepad++ to rescue! Learning to code provides necessary background to success in later classes JavaScript, XML, PHP/MySQL are all code classes

5 Summary from Last Time Web page is plain text file all content in file is labeled with tags, e.g. paragraphs, headers, etc Tag is enclosed in brackets: <tag> CMT111-01/M1 44Jan11 5 Most tags come in pairs, an opening and closing tag surrounds each part of the content closing tag denoted by slash, / e.g. <p> sundry paragraph text </p> Some tags have attributes: adds information to specific tag <tag attribute-property= attribute-value > e.g. <div id= navigation > sundry content </div> Three essential tag pairs every page needs <html> </html> [First and Last tags on page; identifies the document as being html] <head> </head> [contains title, information about page and processing instructions] <body> </body> [contains visible page content] [but also need DOCTYPE for completeness/safety] We logged into sexyfilemanager accounts used the text editor in sfm to create a simple projects page

The Basic Web Page CMT111-01/M1 44Jan11 6 The code on the left produces the web page below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

6 The Basic Web Page CMT111-01/M1 44Jan11 6 The code on the left produces the web page below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" lang="en"> <head> <title>welcome to Bianca's Page</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1>bianca's CMT Web Pages</h1> <p>welcome to Bianca's page of student projects. I hope you're as edified in viewing these as I was in making them</p> </body> </html>

7 Basic Instructions for Text Editor and Browser Text editor We will be using Notepad++ on our thumb drives File/New to create a new file SaveAs All Files so you can ensure.html extension Indent lines for clarity browsers ignore white space, so ok to have in your code CMT111-01/M1 44Jan11 7 Browsers Windows Internet Explorer is on computer; Opera, FireFox or Chrome on our thumb drives View files in browser File/Open/Browse/Open [use ctrl^o in Chrome] Refresh after editing text file click double-green-arrow button, View/Refresh or hit F5

web standards ~8% share of browser market Last semester, we changed text books because former textbook

8 Why We Check in Multiple Browsers CMT111-01/M1 44Jan11 8 Different browsers interpret HTML differently More of a problem in the past today, most browsers follow web standards >90% of browsers in use Only IE6 defies web standards ~8% share of browser market Last semester, we changed text books because former textbook coded to IE6 and was broken in all other, standards-compliant browsers Internet Explorer 6 IE 8 and everyone else

9 Activities for Today Make sure we re ready to go text editor browsers CMT111-01/M1 44Jan11 9 NB: when you read, old browsers in a book, they mean IE6 sexyfilemanager Extract tutorial files to thumb drive Beginning today, we re going to start to zoom. Make sure you re ready!

10 The <head> </head> Element CMT111-01/M1 44Jan11 10 the <head> </head> element contains info not visible on the web page It provides information about the page title (shows up in browser bar) character encoding meta information author, key words, description linked info css file, external scripts, favicon can have embedded css info (avoid if possible) <head> <title>doc Piper's CMT Lectures and Assignments</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta name="author" content="larry Piper" /> <meta name="keywords" content="docpiper, web-site design, Bunker Hill Community College, CMT 111" /> <meta name="description" content="contains resources for CMT 111 students at BHCC" /> <link rel="stylesheet" href="../css/docp.css" type="text/css" /> </head> <script src="../js/docp.js" type="text/javascript" > </script>

11 Basics of an HTML Tag [reminder] A tag is a label contained in angle brackets <p> labels paragraphs </p> <h1> labels major headlines</h1> <img where to find picture /> labels pictures etc. All tags must be well formed lower case [I will mark down your using upper case tags] closed [every tag must be closed no exceptions!] attributes quoted [again no exceptions!] properly nested Good tags label the function of what they are labeling CMT111-01/M1 44Jan11 11 labeling the function is known as semantic mark up In olden tymes, some people used tags for presentation. Doing so now dooms you to obsolescence and unemployment.

12 Three Kinds of Tags CMT111-01/M1 44Jan11 12 Block-level tags are paired around content and define a box of some sort block-level tags begin on a new line some block-level tags can be nested inside other block-level tags <p> this is a paragraph with some text!</p> the box can be styled and positioned as one sees fit e.g. you can style the font, colors, etc inside the box you can add borders or not around the box you can position the box as you see fit all this positioning and styling should be done via CSS [will cover soon] In-line tags are pared around content, but do not define a box, they only label something inside a containing box content inside in-line tags follow immediately after what preceeded it, i.e. same line <a href= docpiper.com >My website</a> let me <em>emphasize</em> one thing This is a paragraph with some text! let me emphasize one thing Empty tags are single tags that don t themselves contain content. They must, however, still be closed <br />: a line break <hr />: a horizontal rule <img src= pics/somepic.jpg />

13 More on Tags Most tags have an opening and a closing <p> opening paragraph tag </p> closing paragraph tag NOTE the slash, / the slash is the tag closer CMT111-01/M1 44Jan11 13 Some tags have attributes an attribute is like an internal label on a tag In ancient times, attributes gave information about formatting the tag We don t do this if we can avoid it, which is / 100 % of the time An attribute has a property and a value <div id= content > id is property content is the value of the property the value must be enclosed in quotation marks

14 Character Entities or References CMT111-01/M1 44Jan11 14 How do you put non-keyboard characters on your page? things like [copyright], [registered trade mark], [degree sign] use character entities or references Two kinds of character references HTML references: &name; must begin with & and end with ; makes a bullet: makes copyright: numerical references: &#nnnn; must begin with &# and end with ; much more extensive can add Kanji, Sanskrit, etc makes a bullet: makes copyright: Partial list: More extensive discussions: Jukka Korpela: Alan Wood: Simple chart on Evolt.org:

15 Special Tags <div> and <span> <div> is the block-level generic tag it doesn t have semantic meaning itself it is used for page structure wrap around related elements very helpful with positioning and formatting <span> is the in-line generic tag it doesn t have semantic meaning itself it is used for formatting duties CMT111-01/M1 44Jan11 15 mostly not needed in olden days, people used it copiously, thereby showing that they were hacks occasionally can be useful only on rare occasion generally give <div> and <span> id or class attributes for formatting <div id= content > all your page content </div> We want this text colored, but not this. We want this <span class= somecolor >text colored</span>, but not this.

16 Core Attributes Attributes that can be used with almost all tags id gives an element a unique identifyer an id can be used only once on a given page use for primary or unique structures class CMT111-01/M1 44Jan11 16 can be used multiple times most often used if several elements on a page need a common formatting often abused by developers title provides pop-up tool tip describing an element <div id= header > <img class= right title= picture of brewster />

17 The Basics of Hyperlinks There are four basic kinds of hyperlinks CMT111-01/M1 44Jan11 17 internal: takes you from page to page within a web site External: takes you away from your web site to another one Jump (or named anchor): takes you to another spot on a given page mail: allegedly opens up your program with the link target s e- mail address in the To: field mail links often don t work, either because you haven t set up your browser and program correctly (like my brother) or because you are using someone else s computer (library, internet café, school, friend s house, etc.) The basic link syntax is the same for all <a href= url >text you click</a> url means where you re going text you click url = universal resource locator It is the address where you find the linked material

18 Creating Links CMT111-01/M1 44Jan11 18 An anchor tag or link tag surrounds information that users click to navigate to another location try to use semantic links, i.e. ones that say where you re going The New York Times said today, Attributes and values specify the tag s behavior or function href [required: address of hyperlink] target [optional: window or frame in which to open link] title [optional: tells where and why you are linking the text (tool tip)] a stands for anchor Tag pattern: href stands for Hypertext Reference <a href= url >text related to url</a> url must be enclosed in quotation marks url is link to another page another part of the page another website program (e.g. Thunderbird, Outlook, etc.)

19 External Links Link to an external web page CMT111-01/M1 44Jan11 19 href will be url or address of that page protocol subdomain or server domain directory or path file name id of specific element on page only protocol and domain name are essential if no file name given, index.html (or index.php) is assumed also true with subdirectories, e.g. will search for a file named index.html in the lgpiper if index.html is not found, get an error page

20 Internal Links Links to one of the other pages on the web site CMT111-01/M1 44Jan11 20 These are links to other files or directories on the server, so put in the directory path name To move to a file in same directory as the one you re linking from, just put the name of the file To move to a file in a different directory, need to add the directory path See next slides for summary of relative path naming

21 Directory Structure To Design web site Navigation Must understand directory structure which files are in which directory Top directory of site called root Subdirectories are children of directory above them Directories above where you are are called parent Directories on same level called siblings CMT111-01/M1 44Jan11 21 root directory Home parent of Projects, Songs and Shows children of Home (or root) Siblings Projects Songs Shows parent of Music and Art Siblings Music Art children of Shows

22 Paths to Directories Going Down the Chain root directory Home parent of Projects, Songs and Shows CMT111-01/M1 44Jan11 22 children of Home (or root) Siblings Projects Songs Shows parent of Music and Art Siblings Music Art children of Shows From home Projects/fileName or Projects/ Shows/Music/fileName or Shows/Music/ second option is when filename=index.html From Shows Music/fileName or Music/ second option is when filename=index.html

23 Paths to Directories Going Up the Chain root directory Home parent of Projects, Songs and Shows CMT111-01/M1 44Jan11 23 children of Home (or root) Siblings Projects Songs Shows parent of Music and Art Siblings Music Art children of Shows From Art../fileName or../ [Projects, Songs, Shows]../../fileName or../../ [Home] second option is when filename=index.html From Shows../fileName or../ [Home] second option is when filename=index.html Yes, it s confusing. You need to name directory going down, but just do../ going up. Essentially../ means parent directory../../ means parent of your parent

24 Lists CMT111-01/M1 44Jan11 24 Three kinds of lists ordered list list items in numerical order unordered list bullet list definition list a definition term followed by one or several definitions Ordered list <ol> <li>item one</li> <li>item two</li> <li>item three</li> </ol> Un-ordered list <ul> <li>item one</li> <li>item two</li> <li>item three</li> </ul> 1. item one 2. item two 3. item three item one item two item three

25 How to Add Images to Web Page Use the <img /> tag A single tag, so must be closed at back end One required attribute The file source (src) In images we use src In links we use href In css, we use url One semi-required attribute alt: it provides a description for screen readers CMT111-01/M1 44Jan11 25 Several useful attributes height=, width= : dimensions of figure (in px); use improves load times vspace=, hspace= : add space (in px) around the picture align= : describe how text flows around picture Whether or not there is a border around the picture This useful to keep image links from having ugly blue borders title= some title text provides a tool-tip caption for the figure [alt no longer works for this]

26 More about Image Tags and their Attributes CMT111-01/M1 44Jan11 26 Because pictures differ one from another, often need to specify attributes for each img tag Could make up standard sizing and then use css for all images Can still use css for some attributes, like space around the figure Attributes in a tag use old-style coding property= value don t need to separate property/value pairs with commas don t need to specify px for attributes with units, pixels are assumed Basic format <img src= images/brewster.jpg width= 350 height= 263 alt= Picture of Brewster, the mighty frog hunter />

27 Essential Parts of a Visible Web Page Header logo page title do not confuse this with <head> element Navigation should be on every page always have a link to home Main Content text pictures etc Footer copyright contact info CMT111-01/M1 44Jan11 27

28 Standard Schematics of Visible Web Pages CMT111-01/M1 44Jan11 28 Header Header Nav. Main Content Navigation Main Content Footer Footer

29 Can Create Structure Using <div> Tags Nav. Header Main Content Footer CMT111-01/M1 44Jan11 29 <div id= header > Header </div> <div id= nav > Nav <div> <div id= content > Main Content </div> <div id= footer > Footer </div> mark up is simpler than for table Styling is simpler than table style everything in external style sheet with #id selectors Often wrap nav and main content in another <div> to make centering/symmetry easier

30 Creating a Web Page: Mike s Bait & Tackle Shop 1. Sketch out what you envision called storyboarding or wireframing 2. Identify the major structural components of the page header main content footer 3. Identify the various elements on the page headings <hn> paragraphs <p> address <address> lists <ul>, <ol>, <dl> <img /> etc 4. Make skeleton page DTD plus 3 essential tags easiest if begin with skeleton template 5. then add elements structural elements <div>s for major sections tags for content the content itself CMT111-01/M1 44Jan11 30

31 Creating a Web Page: Mike s Bait & Tackle Shop CMT111-01/M1 44Jan11 31 title <img /> <h1> Header <p> <h2> <p> <a> <ul> <address> Main Content Footer

32 First set up the Block-level Elements Block-level tags describe a box of some kind CMT111-01/M1 44Jan11 32 You will be subject to great ridicule if you use the ones I ve crossed out! We ll be using the starred ones in this tutorial

33 In-line Elements Describe Discrete Parts of a Block Use semantic (descriptive) tags CMT111-01/M1 44Jan11 33 use <strong> use <em> or <cite> use <del> use <ins>, or better, make up style rule

34 Empty Elements Stand Alone Formatting help <br /> for line break <hr /> for horizontal rule Insert objects into document CMT111-01/M1 44Jan11 34 <img /> to place an image on a page <input /> to place an input control on a page, e.g. radio button, text box, etc. Provide specific information <meta /> information about document in the <head> section <link /> links to supporting documents, like style sheets, also in <head> Empty elements must be closed place a space after the tag, then />

35 Looking Forward CMT111-01/M1 44Jan11 35 We ll begin our series of short quizes next week, at the end of class either on Monday or on Thursday. Some of these key points are bound to show up Will be at end of class Will take about 10 minutes Key points taken from the in-class presentations and homework exercises. (they re all on line)

36 CMT111-01/M1 44Jan11 36

CMT111-01/M1: HTML & Dreamweaver. Creating an HTML Document

CMT111-01/M1: HTML & Dreamweaver Bunker Hill Community College Spring 2011 Instructor: Lawrence G. Piper Creating an HTML Document 24 January 2011 Goals for Today Be sure we have essential tools text editor