Course Outline Session 1 Course Registration Course Overview and Objectives Welcome and Sharing of Expectations. Class Schedule What do YOU need to learn?
Mar 31, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Course OutlineSession 1 Course RegistrationCourse Overview and ObjectivesWelcome 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 <H1> Tag <H1> Tag in Firefox
Session 2 Let’s Create a Web Page (con’t) Additional Head Tags Adding an <H2> Tag Paragraph Tags <P> </P> More Text in Paragraph Tag <P> </P> 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
Course OutlineSession 3 Resources Using a Tools to Create WebsitesToolbars 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
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
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.
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.
W3C Standardswww.w3.org
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.
Types of Websites
Type of WebsiteAffiliateAffiliate AgencyArchive siteAttack siteBlog (web log)Brand building siteCelebrity websiteClick-to-donate siteCommunity siteContent siteCorporate websiteDating websiteE-commerce siteForum websiteGallery WebsiteGovernment SiteGripe siteGaming website
Gambling websiteHumor siteInformation siteMedia sharing siteMirror siteMicroblog siteNews sitePersonal websitePhishing sitep2p/Torrents websitePolitical sitePorn siteQuestion and Answer (Q&A) Site
Rating siteReligious siteReview siteSchool siteScraper siteSearch engine siteShock siteSocial bookmarking siteSocial networking siteWarezWebmailWeb portalWiki site
Types of Websites
Types of Websites
Static Versus Dynamic Sites
StaticOnly test and markup, with no “active” content. (HTML only)
DynamicAutomated content using a programming language, such as ASP, PHP, PERL or others.
Stylesheets:Cascading Stylesheets (CSS)
Adobe Dreamweaver CS5 opens a new world of tools and abilities to make coding easier and more efficient.
FireFox Web Developer Toolbar is one of the most valuable tools in analyzing and designing web sites.
Getting StartedWhat 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)
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.
Hosting(Optional, but encouraged)
Hosting: Web Space provided by a server owner, usually for a monthly or annual fee.
Domain Name Registrationwww……… .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).
Try it at www.godaddy.com
Best Deals at www.siteground.com
$3.95 /mo. ($47.40 per year)
Best Deals at www.siteground.comAcademic Deal$9.95 per year + $14.95 Domain
Total $24.90 per year
http://www.siteground.com/friends.htm?referrer_id=60165
My First HTMLBasic Markup
http://www.w3schools.com/html/
What is HTML?HTML is a language for describing web pages.HTML stands for Hyper Text Markup LanguageHTML is not a programming language, it is a markup languageA markup language is a set of markup tagsHTML uses markup tags to describe web pages
HTML TagsHTML markup tags are usually called HTML tagsHTML tags are keywords surrounded by angle brackets like <html>HTML tags normally come in pairs like <b> and </b>The first tag in a pair is the start tag, the second tag is the end tagStart and end tags are also called opening tags and closing tags
My First HTMLBasic Markup
http://www.w3schools.com/html/
What is HTML?HTML is a language for describing web pages.HTML stands for Hyper Text Markup LanguageHTML is not a programming language, it is a markup languageA markup language is a set of markup tagsHTML uses markup tags to describe web pages
HTML TagsHTML markup tags are usually called HTML tagsHTML tags are keywords surrounded by angle brackets like <html>HTML tags normally come in pairs like <b> and </b>The first tag in a pair is the start tag, the second tag is the end tagStart and end tags are also called opening tags and closing tags
My First HTMLBasic Markup
http://www.w3schools.com/html/
HTML Documents = Web PagesHTML documents describe web pagesHTML documents contain only HTML tags and plain text ***HTML documents are also called web pagesThe 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:
The Parts of an HTML DocumentViewing Source Code
Example:<html><head><title>My Page Title</title></head><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
The Parts of an HTML DocumentViewing Source Code
Example:<html><head><title>My Page Title</title><meta>Some Info</meta></head><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
Explanation:<html><html> Tells browser that code is HTML<head> </head> ‘invisible’ header section<meta></meta> Tags to help index your page<title></title> The Page title (in menu bar)<body> The page content<h1></h1> A heading<p></p> A paragraph
Map of HTML Document
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.
<font size="3" color="red">This is some text!</font><font size="2" color="blue">This is some text!</font><font face="verdana" color="green">This is some text!</font>
HTML Syntax
HTML Element Syntax
An HTML element starts with a start tag / opening tagAn HTML element ends with an end tag / closing tagThe element content is everything between the start and the end tagSome HTML elements have empty contentEmpty elements are closed in the start tagMost HTML elements can have attributes
Required Elements
Required elementsHTML 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:
<html><head><title>TITLE OF WINDOW</title></head><body></body></html>
The Basics: Headings
HTML HeadingsHTML headings are defined with the <h1> to <h6> tags.Example
<h1>This is a heading</h1> This is a heading<h2>This is a heading</h2> This is a heading<h3>This is a heading</h3> This is a heading
The Basics: Paragraphs
HTML ParagraphsHTML paragraphs are defined with the <p> tag.Example<p>This is a paragraph.</p><p>This is another paragraph.</p>
HTML Linebreaks<br>
Non-Breaking Space
The Basics: HTML Links
HTML LinksHTML links are defined with the <a> tag.
Example<a href="http://www.w3schools.com">This is a link</a>
Another Example: Email Links<a href=“mailto:[email protected]">This is a link</a>
Link Attributes: Target= _blank: _self; _top; _parent
The Basics: Images
HTML ImagesHTML images are defined with the <img> tag.
Example<img src="w3schools.jpg" width="104" height="142" />
The Basics: Images
HTML Image AttributesAttribute Value Description
alt text Specifies an alternate text for an image
src URL Specifies the URL of an image
Attribute Value Description DTD
align
topbottommiddleleftright
Deprecated. Use styles instead.Specifies the alignment of an image according to surrounding elements TF
border pixels Deprecated. Use styles instead.Specifies the width of the border around an image TF
height pixels% Specifies the height of an image STF
hspace pixels Deprecated. Use styles instead.Specifies the whitespace on left and right side of an image TF
ismap ismap Specifies an image as a server-side image-map STF
longdesc URL Specifies the URL to a document that contains a long description of an image STF
usemap #mapname Specifies an image as a client-side image-map STF
vspace pixels Deprecated. Use styles instead.Specifies the whitespace on top and bottom of an image TF
width pixels% Specifies the width of an image STF
The Basics: Special Characters
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered trademark ® ®
™ trademark ™ ™
The Basics: Font
Font Attributes: Face, Size, & Color
Example:<font face="Mistral" size="6" color="navy"> font face: Mistral, size: 6, color: navy</font>
*Use a font family or a font type<font face="cursive">cursiv (f.ex. Comic Sans MS)</font><br><font face="monospace">monospace (f.ex. Courier New)</font><br><font face="fantasy">fantasy (f.ex. Western)</font><br><font face="sans-serif">sans-serif (f.ex. Helvetica)</font><br><font face="serif">serif (f.ex. Times)</font>
The Basics: Font
Font Attributes: Face, Size, & Color
Font Color16 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" color="green"> Font size 5, green color </font><br><font size="2" color="#FFFF00"> Font size 2, yellow color </font>
The Basics: Font
Hexadecimal colors
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:
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
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.
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).
Related Documents
