Presentation is loading. Please wait.

Presentation is loading. Please wait.

Course Outline Session 1 Course Registration Course Overview and Objectives Welcome and Sharing of Expectations. Class Schedule What do YOU need to learn?

Similar presentations


Presentation on theme: "Course Outline Session 1 Course Registration Course Overview and Objectives Welcome and Sharing of Expectations. Class Schedule What do YOU need to learn?"— Presentation transcript:

1

2 Course Outline Session 1 Course Registration Course Overview and Objectives Welcome and Sharing of Expectations. Class Schedule What do YOU need to learn? The World Wide Web and the Internet What is HTML? Free vs. Paid Let’s Create a Web Page Saving Web Files Open the file locally in Firefox Files in Firefox Opening Tag Tag in Firefox Session 2 Let’s Create a Web Page (con’t) Additional Head Tags Adding an Tag Paragraph Tags More Text in Paragraph Tag Additional Tags - Lists Additional Tags - Images Local files vs. WWW Using a Tool - Dreamweaver What is Adobe Dreamweaver - overview World Wide Web (WWW) Domain Name Extensions Country Codes Domain Names File Name Extensions A VERY Brief History

3 Course Outline Session 3 Resources Using a Tools to Create Websites Toolbars Task Panes Moving Around Creating a Web Page Session 4 Templates and Master Pages Dreamweaver Templates Cascading Style Sheets (CSS) Usability Session 5 Anchors Metadata Building a Website Session 6 Hosting and Domain Names More on Usability Tables Just Browse Around Dreamweaver Speeding up Your Website load

4 Course Outline Session 7 Graphics Pixels and Resolution Formats and Sizing Sizing Photoshop Sizing Erasing the Background Increase Image Size Crop an Image Session 8 Microsoft Office Picture Manager Additional Free Graphics Products To Flash or not to Flash? A Controversy. Miscellaneous Delete Your Files Recap and Student evaluations

5 What is a Website? A website, also written as Web site, web site, or simply site, is a set of related webpages containing content (media), including text, video, music, audio, images, etc. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator. All publicly accessible websites collectively constitute the World Wide Web. A webpage is a document, typically written in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML). A webpage may incorporate elements from other websites with suitable markup anchors.

6 History of the Web… The World Wide Web (WWW) was created in 1990 by CERN (European Organization for Nuclear Research) physicist Tim Berners-Lee. On 30 April 1993, CERN announced that the World Wide Web would be free to use for anyone. Before the introduction of HTML and HTTP, other protocols such as File Transfer Protocol and the gopher protocol were used to retrieve individual files from a server. These protocols offer a simple directory structure which the user navigates and chooses files to download. Documents were most often presented as plain text files without formatting, or were encoded in word processor formats.

7 W3C Standards Most W3C work revolves around the standardization of Web technologies. To accomplish this work, W3C follows processes that promote the development of high-quality standards based on the consensus of the community. W3C processes promote fairness, responsiveness, and progress, all facets of the W3C mission.processesW3C mission

8 Types of Websites Type of Website Affiliate Affiliate Agency Archive site Attack site Blog (web log) Brand building site Celebrity website Click-to-donate site Community site Content site Corporate website Dating website E-commerce site Forum website Gallery Website Government Site Gripe site Gaming website Gambling website Humor site Information site Media sharing site Mirror site Microblog site News site Personal website Phishing site p2p/Torrents website Political site Porn site Question and Answer (Q&A) Site Rating site Religious site Review site School site Scraper site Search engine site Shock site Social bookmarking site Social networking site Warez Webmail Web portal Wiki site

9 Types of Websites

10

11

12 Static Versus Dynamic Sites Static Only test and markup, with no “active” content. (HTML only) Dynamic Automated content using a programming language, such as ASP, PHP, PERL or others. Stylesheets: Cascading Stylesheets (CSS)

13 Adobe Dreamweaver CS5 opens a new world of tools and abilities to make coding easier and more efficient.

14

15 FireFox Web Developer Toolbar is one of the most valuable tools in analyzing and designing web sites.

16 Getting Started What you will need for this lesson A Browser A Plain Text Word processor (i.e. Windows Notepad) (Later we will use a GUI processor for code)

17

18 Web Servers (Don’t worry, you don’t need one yet) A Web Server: i.e. Linux or Windows 2003/2008 are most common The primary function of a web server is to deliver web pages on the request to clients. This means delivery of HTML documents and any additional content that may be included by a document, such as images, style sheets and scripts.

19 Hosting (Optional, but encouraged) Hosting: Web Space provided by a server owner, usually for a monthly or annual fee.

20 Domain Name Registration www……….com Domain Names: This is your “.com” (or.edu,.org, etc.) address Think of this as your sites “mailing address” -- its how others can send and receive information from your site. Each domain can be used ONLY ONCE, but they can be bought, sold, and traded online. A domain name is an identification string that defines a realm of administrative autonomy, authority, or control in the Internet. Domain names are formed by the rules and procedures of the Domain Name System (DNS).

21 Try it at

22 Best Deals at $3.95 /mo. ($47.40 per year)

23 Best Deals at Academic Deal $9.95 per year + $14.95 Domain Total $24.90 per year

24 My First HTML Basic Markup What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags

25 My First HTML Basic Markup What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags

26 My First HTML Basic Markup HTML Documents = Web Pages HTML documents describe web pages HTML documents contain only HTML tags and plain text *** HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

27 The Parts of an HTML Document Viewing Source Code Example: My Page Title My First Heading My first paragraph.

28 The Parts of an HTML Document Viewing Source Code Example: My Page Title Some Info My First Heading My first paragraph. Explanation: Tells browser that code is HTML ‘invisible’ header section Tags to help index your page The Page title (in menu bar) The page content A heading A paragraph

29 Map of HTML Document

30 Elements vs. Attributes Web Elements: Parts of the page (i.e. content, fonts, paragraphs, links) Web Attributes: Special properties of elements (i.e. borders, styles, alignment, size, color) i.e. Fonts are an element that have multiple attributes. This is some text! This is some text! This is some text!

31 HTML Syntax HTML Element Syntax An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes

32 Required Elements Required elements HTML files are just plain text files - they can be prepared using any plain text editor (such as Notepad on the PC or SimpleText on the Mac). HTML files have some required elements. Every HTML file must begin with: TITLE OF WINDOW

33 The Basics: Headings HTML Headings HTML headings are defined with the to tags. Example This is a heading This is a heading This is a heading This is a heading This is a heading This is a heading

34 The Basics: Paragraphs HTML Paragraphs HTML paragraphs are defined with the tag. Example This is a paragraph. This is another paragraph. HTML Linebreaks Non-Breaking Space

35 The Basics: HTML Links HTML Links HTML links are defined with the tag. Example This is a link Another Example: Links This is a link Link Attributes: Target= _blank: _self; _top; _parent

36 The Basics: Images HTML Images HTML images are defined with the tag. Example

37 The Basics: Images HTML Image Attributes AttributeValueDescription alttextSpecifies an alternate text for an image srcURLSpecifies the URL of an image AttributeValueDescriptionDTD align top bottom middle left right Deprecated. Use styles instead. Specifies the alignment of an image according to surrounding elements TF borderpixels Deprecated. Use styles instead. Specifies the width of the border around an image TF height pixels % Specifies the height of an imageSTF hspacepixels Deprecated. Use styles instead. Specifies the whitespace on left and right side of an image TF ismap Specifies an image as a server-side image-mapSTF longdescURL Specifies the URL to a document that contains a long description of an image STF usemap#mapnameSpecifies an image as a client-side image-mapSTF vspacepixels Deprecated. Use styles instead. Specifies the whitespace on top and bottom of an image TF width pixels % Specifies the width of an imageSTF

38 The Basics: Special Characters ResultDescriptionEntity NameEntity Number non-breaking space   greater than>> &ersand&& ¢cent¢¢ £pound££ ¥yen¥¥ €euro€€ §section§§ ©copyright©© ® registered trademark ®® ™trademark™™

39 The Basics: Font Font Attributes: Face, Size, & Color Example: font face: Mistral, size: 6, color: navy *Use a font family or a font type cursiv (f.ex. Comic Sans MS) monospace (f.ex. Courier New) fantasy (f.ex. Western) sans-serif (f.ex. Helvetica) serif (f.ex. Times)

40 The Basics: Font Font Attributes: Face, Size, & Color Font Color 16 color names: black, silver, white, gray, maroon, red, blue, green, yellow, purple, fuchsia, cyan, lime, olive, navy, teal, aqua. Instead of the color names, you can also use the hexadecimal numbers for the colors. Font size 5, green color Font size 2, yellow color

41 The Basics: Font Hexadecimal colors

42 WebSite Mapping: Organizing and Planning your Website When designing a website, organizing the site content BEFORE you start building can save time and resources. A good way to do this is by building a flow-chart called a Site Map:

43

44 Site Map Build a Site Map for your site that contains: A Homepage *One the homepage create a link to each lesson (Lesson 1-8) You can call the files lesson1.html, lesson2.html, etc. One or more secondary pages (daughter pages) *One must be an “About Me” Page One or more tertiary pages *One must be a “Contact Me” Page

45 Quick Note About File Names Spaces will be interpreted by the web server as “%20”: My First Page.html becomes My%20First%20Page.html On certain servers (i.e. older Linux Servers) capital letters can be changed to lower case: MyFirstPage.html becomes myfirstpage.html Generally use lower case file names and no spaces in web files in order to ensure that the files work properly on all web servers.

46 HTML vs CSS In modern web design, HTML is used ONLY for the framework of the site. Cascading Style Sheets (CSS) is used for many of the attributes we have discussed in this lesson (font characteristics, layout, and more).


Download ppt "Course Outline Session 1 Course Registration Course Overview and Objectives Welcome and Sharing of Expectations. Class Schedule What do YOU need to learn?"

Similar presentations


Ads by Google