LESSON 1 WK 5/12
CHAPTER 1 Preparing for the web
Web vs. the Internet/differences
Internet-is a network of connected computers that spans the globe. These computers are connected together to share information. However, there are a number of ways to get the job done, including emailing, instant messaging this is transferring files through FTP which is short for File transfer Protocol. Also, for downloading MP3 songs through peer-to-peer applications.
The World Wide Web- is one of many ways to exchange information across the internet. People use special programs called Web browsers to visit Web sites and Web pages spread across the globe.
Web browser- is a piece of software that you use to navigate through Web pages. Without browsers, the Web would still exist,
there just wouldn’t be any way for you to turn on your computer and take a look at it.
Web servers- receives browser requests and sends back the correct Web page. Web serves intend to be industrial-strength computers. Even though the average Windows PC with the right setup can host a Web site.
Planning a Web Site-Types of Sites
Personal sites-all about you and sharing picture with others
Online diaries or blogs-the typical diary Web site provides a list of entries in reverse chronological order, which means whenever you surf the site you see the latest news at the top of the page.
Resume sites-career building tool
Topical sites-a favorite subject that interest you
Event sites-revolve around a particular event
Promotion sites- are ideal when you have a personally produced CD or have something to sale
Small business-show off the most successful use of the modern Web, selling everything from portable music players to
prescription drugs.
CHAPTER 2 Creating your First Page
The Anatomy of a Web Page
Web pages are written in HTML (Hyper Text Markup Language), which is the language of the Web.
HTML plays two key roles
1. HTML tells a Web browser hot to format a page which includes specifications about color, headings, text alignment and etc.
2. HTML links different documents together by using hyper links for people to surf from one web page to another and to call up pictures and other web pages and combined them together.
Cracking Open an HTML Document
On the inside an HTML page is actually nothing more than a plain vanilla text file. To take a look at an HTML document, all you need is an ordinary text editor, like a notepad which is included on all Windows computers. To run a Notepad, click the start
button and select Programs-Accessories-Notepad. Then choose file-open and begin hunting around for the HTML file you
want.
Creating Your Own HTML Files
You don’t need a live Web site to start creating your own Web pages. That’s because you can easily build and test Web pages using only your own computer.
The basic approach is simple:
1. Fie up your favorite text editor
2. Start writing HTML content
3. When you finished your Web page, save the document, a simple file usually does it.
4. To take a look at you work, open the file in a Web browser
The HTML Tag
This is formatting instructions that tell the browser how to transform ordinary text into something that’s visually appealing.
If you were to take all the tags of of an HTML document, you will be left with nothing more than plain unformatted text.
What’s In a Tag
You can recognize a tag by looking for the angle brackets, which are two special characters that look like this:<>. The angle
bracket contain a code. This code is for the browser’s eye only and it’s never shown to Web surfers.
Container tags
This tag is always applying some type of formatting that affects only the content that’s nestled in between the start and the
end tags. The tag is a container tag and should always be accompanied by a .
Standalone tags
There are some tags that don’t come in pairs. These standalone tags don’t turn formatting on or off. Instead they insert something on the page, like an image. Example
are often called empty tags because there's no way to put any text inside them.
Nesting tags
Nesting allows you to apply more detailed formatting for example, bold, underlined, italicized text tag and the tag,
which tag, which lets you italicize text.
The HTML Doucment
To create a true HTML document you need a minimum of three container tags: ,
tags work together to describe the basic structure of your page.
LESSON 2 WK 5/19
CHAPTER 3 Putting Your Page on the Web
How Web Hosting Works
The internet is just a set of standards that let independent computers talk to each other.
Understanding the URL
A URL ( Uniform Resource Locater) consist of four pieces. The first part (the protocol) indicates how the page is going to
be retrieved. The second part (the domain) indicates the Web server you’re accessing. The third and fourth parts indicate the
path and file on the Web server where the Web page is located.
The bookmark is an optional part of a URL that identifies a specific position in a page.
The query string is an optional part of the URL that some Web sites use to send extra instructions from one Web page to another.
Domain Names
Short, snappy domain addresses attract attention and easier to remember.
Domain parking
This is just another name for domain registration. You haven’t purchased any other services, like renting Web storage space.
Your ISP (Internet Service Provider)
The company that provides your access to the internet may have its own Web hosting services.
Transferring Files
Once you signed up for Web hosting, you’re ready to transfer some files to your Web space.
CHAPTER 4 Power Tools
1. Nobody’s perfect-text editor it’s just a matter of time before you make a mistake, like typing instead of .
2. Edit-Save-Refresh. Repeat 1,000 times.
3. Help, I’m drowning in HTML! One of the nicest little frills in as HTML editor is color coding. Color coding helps make sure those pesky HTML tags stand out against a sea of text.
Types of HTML Editors
1.Text-based editors- require you to work with the text and tags of raw HTML.
2. Split window editors-to make you write HTML by hand. The difference is that a separate window shows the results of your
work as you type.
3. WYSIWYG(What You See Is What You Get) editor work more like word processors. That means you don’t need to write
the HTML tags. Instead, you type in some text, format it, and insert pictures just like you would in a word-processing program. Behind the scenes, the editor generates the HTML markup you need.
*Comments on Websites
W3 Consortium-this website appears to be very complex and informal. However, some of the important topics are not somewhat visual to users to have easy access.
W3Schools-this HTML and CSS tutorial clear column headers, readable subject headings and well layout for users.
USF Tutorials-this was very helpful with a lot navigating to links and guidance to locating information.
LESSON 3 WK 5/26
CHAPTER 5 HTML Text Tags
Understanding Text and the Web
Web site creator discovers that designing for the Web is pretty different than designing something that’s going to be printed out.
Before you can unleash our inner graphics designer, there are a few conceptual hurdles to clear. It helps to consider the difference between an HTML page and a document you might create in a program like Microsoft Word.
The Problem of Layout
Is one of the important considerations in print design is the physical size of the document. For example you need to use much
larger text on a poster than a business card.
Logical vs Physical Formatting
Logical tags-( sometimes called idiomatic tags) identify headings, paragraphs, quotations, code snippets, and emphasized text.
Physical Tags-( sometimes called typographic tags) tags that apply italics, boldface underlining, and different fonts.
CSS (Cascading Styles Sheets)
The style sheet defines how every type of element in your HTML document should be formatted.
Basic Text Tags-these tags are used to create block elements chunks of content that are separated on a Web page.
Paragraphs
When you put several paragraphs in a row, each paragraph is separated with a space of about one and a half lines.
Browsers ignore empty paragraph tags completely and don’t add any extra space for them.
Line Breaks-are exceedingly simple they simply tell the browser to move to the start of the following line.
Line breaks aren’t block elements so they should always be placed inside of a block element, like a paragraph.
Headings-section title should be in bold letters
Horizontal Line-that stretches form one side of is container to the other, separating everything above and below it.
CHAPTER 6 Style Sheets
When you surf to a page that uses a style sheet, the following things happen.
1. Your browser requests the HTML page from the Web server.
2. The browser finds an instruction in the HTML page that indicates that the page uses a style sheet. The browser then grabs that style sheet with a separate request.
3. The browser chews through the HTML in the Web page, and uses the rules in the style sheet to adjust its appearance.
Browser Support for CSS
Before you embrace style sheets you need to make sure that they work on all the browsers your visitors are using.
The Anatomy of a Rule
Style sheet contain one thing: rules. Each rule is a formatting instruction that applies to a part of your Web page. A style sheet
can contain a single rule, or it can hold dozens of them.
CSS rules don’t look like anything you’ve seen in HTML. You’ll have no trouble with them once you realize all rules are built out of three ingredients: selectors, properties, and values.
1. selector-identifies what you want to format.
2. The property-identifies the type of formatting you’re applying .
3. The values-sets the property is color, the value could be light blue or dead-salmon pink.
the cascade
This refers to the way the browser decides which rules take precedence in case you’ve got multiple sets of rules.
1. Browser default
2. External Style sheet
3. Internal Style sheet (inside the
4. In line style (inside an HTML element)
Inheritance
When you apply formatting to an element that contains other elements, the rule is applied to everything.
Class selectors-are one of the most practical style sheet tricks around. They allow you to separate your rules from your tags, and use them whenever you please. The basic idea is that you separate your Web page content into conceptual groups, or classes.
Creating Class Rules
Classes begin mentally dividing your page into different kinds of content. In this case it makes sense to create a specialized
class for book reviews and the author byline.
WEBSITES
Internet Traffic Report: Great layout for easy to read and access info. Exciting identifiers and formatting of web design.
CAIDA Internet Infrastructure: The website very visual and detailed tagging. However, could be rated as too much info.
PEW: Very interesting web page with style and good instructions.