Website Development. What is Website Development. What is a web page? How does a site get on the web - PDF

Please download to get full document.

View again

of 19
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information Report
Category:

Art & Photos

Published:

Views: 12 | Pages: 19

Extension: PDF | Download: 0

Share
Related documents
Description
Website Development Introduction Instructor: Vanessa Cole What is Website Development A systematic approach to creating websites The website development process: Define - define topic, purpose, target
Transcript
Website Development Introduction Instructor: Vanessa Cole What is Website Development A systematic approach to creating websites The website development process: Define - define topic, purpose, target audience, technical aspects Plan - plan out the site Implement - build a prototype (smaller version of site) & add in additional elements & content Test - technical testing & evaluation of site Publish - post to a server & publicize Maintain - Update the site. Web development Cycle What is a website? A collection of interrelated, interlinked and interactive documents and other files accessible through the World Wide Web via a Uniform Resource Locator (URL). An organized set of information pages viewable through a web browser. Primarily consists of web pages, but other types of files may be also be present within a website PDF documents other document & files What is a web page? A single document created with web markup language for display with a web browser Can be created by people or may be automatically generated by computer Webpages are primarily text, but incorporate Multimedia elements Graphics Animation Video Sound Programming & Scripting How does a site get on the web Components are normally created offline. Unless you are using predefined online templates and wizards (which may not be used for this class) Components are uploaded to a web server Internet Service Provider (ISP) Web Hosting Service Business or organization server Access to site Web Server provided URL Registered domain name URL 1 What's a Markup Language? A way of marking text and other elements to specify how a web page is displayed by a browser. Web markup languages are crossplatform (can be read by many different kinds of computers) Windows computers Macs Mobile computers/smartphones More on Markup Cross browser - can be read by any web browser Internet Explorer Safari Opera Chrome Several markup languages exist. We will be working withhtml 5 Hypertext for structure HTML was developed to simply add some formatting to web pages and add in simple graphics Not meant as a way to make the pages look great. As the web developed and transfer speeds increased, the need for professional looking websites became apparent Cascading Style Sheet (CSS) capability was developed CSS for Visual Appeal & Design Add visual and layout design Allow content and page design to be separated as much as possible. Same content can be viewed in numerous ways Different style sheets can be loaded for different applications screens, printers, mobile devices, projection accessibility devices Braille and aural (voice). What Are Usability & Accessibility? Usability the ease in which a web site can be used. The design of a web site should make it obvious how to use the site. If it s not obvious people will move on to another site. Accessibility usability for everyone including those who have different abilities. May be required by law Website File Management Keep files organized Be observant of file names and file types Know where you save your files Be consistent in file naming conventions Be aware of that files are stored in two locations Locally (on your hard disk) On the web server Not on server until you upload Keep your files straight 2 Naming Files Be consistent in your file naming conventions. Avoid mixing upper and lower case unless there is a reason for upper case. Avoid spaces within the file names, some servers and some browsers have problems with these. Be consistent in the web page file extensions use either all.htm or.html, but not both Dreamweaver default is.html File Types Files have extensions or file types which tell the computer what kind of file it is. Some computers are set up so that you don't see the file types In web development, it's important to see these extensions so links are properly created, and you know which type of files you are working with. Folders Store all your web site files in one main folder Other folders may be in the main folder Organizes your work. Consider storing images in images folder If using a lot of other media, store those in separate folders also. As a site gets larger, consider organizing sections into folders. For instance my course site has folders for each of the courses I teach Each folder on a site should have it s own default file. Consistency on and off line If web pages, image files or other files are stored in a folder within your web folder on your computer then they must be in a folder with the same name online. Upload the whole folder so you don't forget a file. If files are changed offline, they must be uploaded to be online. Renaming files Changing content of files. 3 Web Page Building With a look at HTML Web pages in HTML Web pages created with HTML have codes placed around text such as show below. Creating Web Pages HTML codes Most codes have a beginning and an ending code The ending code has a slash in front of the code Some code are singular and may have a slash at the end. We will be working in HTML 5 which does not require this, but you may see this code in some webpages. HTML Defining Page!DOCTYPE Document type must be defined on the first line of the HTML document Specifies the version of HTML Used by browsers to determine how to interpret code html /html Encompasses entire page May have parameters defining version of HTML Sample codes. HTML 4.01 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/tr/html4/loose.dtd html lang= en XHTML !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml lang= en HTML 5 !DOCTYPE HTML html lang= en Recommended to have the language specified en specifies English. Web pages have two sections Head Hidden items do not display in browser window Used to define some parameters for the page HTML codes head /head Body Content of the page Displays in the browser window HTML codes body /body 1 Head Section Most important code in the head section is the Title Code: title /title Uses Appears in the title bar of a window Words placed in bookmarks/favorites Search engine use the title in the weighing of pages Keep your title meaningful and short Recommend using name of site & page heading in title. Each page in your site should have a unique title. Note: on title The title is NOT the first heading on your page. A page should have both a title and a heading. The same wording may be used in both, but the title is coding in your head section and a heading is within your body. The title usually has the site name also Other Head Elements Load in CSS styles Meta tags - numerous types of tags to define various items some of which deal with search engines Scripting Other page setup codes HTML Body Basics HTML was originally designed to display simple text within specific structures and with minimal formatting Everything stored within the web page is actually just text. Other media such as graphics, video, audio exist in separate files and can be displayed via coding to link to the files. The displayed web page looks like it has these items within the file Important to realize these are SEPARATE FILES Body Structure Text content must be in a structure Headings 6 levels Paragraphs Lists Unordered Numbered Definition Block quote Table data (we'll cover this later in the semester) Headings All pages should have at least one heading. Headings act as an outline for the page Heading 1 is the top level heading HTML: h1 /h1 Heading 2 is a sub heading to heading 1 HTML: h2 /h2 Each higher number heading is a subheading of the previous level. Up to 6 levels of headings Heading should always be used in proper order. The first heading on a page should ALWAYS be defined as heading 1. Allows for greater accessibility Search engines use as a weight 2 Heading codes & result h1 heading 1 /h1 h2 heading 2 /h2 h3 heading 3 /h3 h4 heading 4 /h4 h5 heading 5 /h5 h6 heading 6 /h6 Paragraphs & Quotes Paragraphs contain paragraphs and other items not contained in other structures HTML: p /p Block quotes are used for quotations. Often used when quoting from another source Quotes that are normally indented HTML: blockquote /blockquote Lists contain lists of items Unordered list - used for lists when order is not important, default is bulleted. ul /ul defines entire list li /li defines each item in the list Numbered list - used for lists when order is important, default is numbered ol /ol defines entire list li /li defines each item in the list Definition used for lists of words followed by definitions dl /dl defined entire list dt /dt defines term dd /dd defines definition for term Example of lists Other Body Codes Line break places a line break within a paragraph or other element. br Horizontal rule draws a line hr Abbreviation defines what an abbreviation stands for abbr title= words for the abbreviation abbreviation /abbr abbreviation is the letters of the abbreviation (For example: HTML) Words for the abbreviation are what the abbreviation stands for (For example (Hypertext Markup Language) Linking Linking creates a link to another page a href= webaddress wording /a web address is The file name for links within your site May include folder names for files in other folders The complete URL for links outside your site If I just put something like google.com, it won't work. The complete web address is needed Wording text or image for link Wording should be appropriate T 3 Text Formatting Simple text formatting of bold & italic with markup languages Use only for items that should always be bold or italic, such as italicizing the title of a book. Do not as a styling choice. HTML: Bold strong /strong Italic em /em All other formatting should be done with Cascading Style sheets (CSS) Our first assignments will be plain and not contain any styles Default formatting It s important to understand that there is default formatting. All default formatting can be changed with CSS Headings Default formatting is for heading 1 to be largest and each subsequent heading to be smaller. Do NOT use a smaller heading to make the font smaller for your heading. USE CSS instead Use the correct level heading. Default formatting (cont) Line spacing Most items have a line space before the items Headings Paragraphs Lists (not each line item, just the whole list.) Indented List items Blockquote Do not use to indent something that is not a quote. All default formatting can be changed with CSS Important Concept Structure and Styling should be kept separate. Use HTML tags as STRUCTURE Not as styling choices Use appropriate code for elements within your page All styling should be completed with CSS. Use to change from default formatting HTML and CSS are usually stored as separate files that the browser pulls together. This makes styling changes easy Allows for greater accessibility 4 More on HTML & Brief Look at CSS Separating Structure & Design More about HTML W3C oversees standardization of HTML and establishes rules Led by Tim Bernes Lee who first developed the web Current widely used version is HTML 4.01 (XHTML 1.0) Newest version is HTML 5 New elements Easier media integration More interactivity *W3C World Wide Web Consortium HTML Code Ordering Codes need to be closed in the proper order. The most recently used tag closes first. Correct order p this is strong text /strong /p Incorrect order p this is strong text /p /strong Validation If you are writing HTML code, consider using a validator to ensure your HTML is correct -W3C's Validator Finds tags that are not closed p this is my paragraph. p this is another paragraph both are missing /p Finds tags that are improperly closed p this is my em paragraph /p /em Tags contained within another tag must close first p this is my em paragraph /em /p And many other coding errors HTML Attributes Some HTML tags allow various attributes (also called parameters) which can effects the tag. Attributes are included after the tag name ol type= a a href= mypage.html More than one attribute can be included ol type= a start= 5 a href= mypage.html target= _blank List Attributes Ordered List type type= i (Large Roman numerals) type= a (Large alphabet ) type= i (small Roman numerals) type= a (small alphabet) type= 1 (default - numbers) 1 More list attributes Ordered list start attribute start= n (n can be any number and it starts the order with that number or corresponding letter, numerals) Start= 5 will yield 5 for number list E for large alpha V for roman numerals Anchor attributes Anchors (a tag) are used in two ways. Specifying which way is a attribute. One is to to name a point in the page name= anchorname (no spaces are allowed in the name of the anchor Another is to create a link href= link Another attribute used with links is target Specifies where link will open Links To link to an named spot on the page use # & anchor name a href= #tea Teas /a To link to page within same site & folder use filename only a href= pagename.html My page /a To link to another site use the full URL a href= Windward CC /a This methods can be combined to go to a specific spot on a specific page on another site Targets target= _self Opens a link in the same tab/window (default) target= _blank Opens a link in a new window or tab target= namedwindow Opens a page in a new tab/window and give the tab/window a name. Any other pages which specify that same name will open in that same tab/window (providing it hasn't been closed.) Example Special characters Special codes are needed to display certain characters which are also used as part of tags Left Bracket - Right Bracket - Quote - Copyright symbol Comments to add documentation to coding, but not to be displayed !-- -- Curly Quotes Note: Pasting curly quotesfrom word processing page into webpage text may result in odd codes displaying on the page. Single curly quote More codes Non breaking space Extra space - extra spaces that are typed in typed in the code are ignored. If you want extra spaces to display use the nonbreaking space code. This can also be used between words that shouldn't be split between lines. For instance, if I want my name to always appear on the same line instead of splitting the first and last names at the end of a line. To do this instead of typing a space between the words I can place the code between the names. The words stay together even if there is enough room on the line for the first name: Vanessa Cole 2 Structure vs Design As web developers we need to keep these two separate in our minds and in our coding. Our audience, however, sees a web page with the two tightly integrated into one. Keeping structure & visual design separate allows for Accessibility Ease of updating Quicker redesign Visual design can be changed without effecting the content within the site. In web construction Structure created with a markup language such as HTML defines structural elements such as paragraphs lists headings tables and more Visual design is added to the structure through the use of Cascading Style Sheets (CSS) to add color layout backgrounds margins spacing and other design elements Defining Page Structure Everything that displays on the page is within the body section of the HTML Within the body we may have layout structures. Organize the page Allow for layout Incorporate visual design through CSS Important to set an ID to identify each structure ID names should be MEANINGFUL Defining Page Structure (cont.) Within these layout structures we can have Additional layout structures Basic text and other elements Each layout structure can have different styles for elements. For instance on this page are different divisions The unordered list within the topic list on the side of this page is styled with no bullets and white text The unordered list within the slide area is styled with bullets and black text. Basic Page Areas For ease of design, divide pages into areas. Banner or Site identity Navigation Site navigation Search capability Contents Side bars Footer Technical info Copyright information Date of last update Contact info Areas can be placed in HTML layout structures. The whole page can be also be placed within a layout element, too. Helpful in limiting the width of the page in CSS. Layout Structures Previous versions of HTML had divisions div /div Divisions were often named with the ID attribute which made them easier to work with for styling purposes. HTML5 introduced new codes for layout of pages. article - main content area article /article aside - an aside or can be used as a sidebar aside /aside footer- usually at the bottom of a page footer /footer header - usually at the top of a page header /header nav - navigation nav /nav 3 Layout Structure (cont.) HTML 5 structureswhen working with coding, these make it easier to see where items begin & end. Div codes all end in /div and if you have multiple divisions, it's hard to see where each ends. Allows for greater accessibility and better SEO (search engine optimization) with consistency of identifying elements of a page. Element ID No matter which type of structural elements is used, it's a good idea to also to use the ID attribute which makes styling easier, particularly if used more than one on a page.id name should be unique for each element ID name should meaningful to help you and others involved in website construction to identify what a layout element contains. item1, item2 are probably not meaningful main-article, story, banner are meaningful as they describe what is in the layout structure. ID names should NOT contain spaces main article is not an acceptable ID name and will cause problems when styling the element main-article, mainarticle, main_article are acceptible names. The Beauty of CSS To understand the wonder of CSS we will look at a site called CSSZen Garden This site invites designers to take the same basic structure of a page and add design via a separate CSS style sheet. This site demonstrates why we separate structure from visual design. Hopefully you will begin to understand the beauty of keeping design & structure separate. First look at the structure Screen shot of structure no styles Next explore the designs All pages have the exact same structure. Changes are only to the external CSS style sheet. CSS Zen Garden then click on links to other pages This site demonstrates why we separate structure from visual design. Hopefully you will begin to understand the beauty of keeping design & structure separate. 4 Usability & Accessibility Develop for Usability & Accessibility Web pages for all Can the audience get the information they need? Readability Find-ability Alternatives Proper structural elements used Style sheets for design & layout Sizing gracefully Simplest solutions used See first lesson for definitions Usability: Readability Text should always be readable. Not readable - message not received Background and text colors should have high contrast. If using background graphics, they should not detract from readability of text. Usability: Readability (cont) Typography making it easier to read Typeface/font used Use decorative fonts only for short text, not full paragraphs Letter spacing proportional spacing Line spacing Extra space between lines increases readability Recommended120% line spacing Limit length of lines Text lines which stretch the entire width of a screen can be difficult to read Readability: Fonts on Web Fonts are copyrighted Can not be copied to audience's computers. HTML 5 allows downloading open source or public domain fonts Downloading of fonts slows the loading of the page No fonts = web browsers use default fonts Reader can specify one they prefer Defaults can be boring, though Use standard font sets for readability Standard fonts come with operat
Recommended
View more...
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks