Summary for Week 1

– It is better to use JPEGs for photographs on websites, but GIFs and PNGs are better for Graphic images.

– Learned about the relationship between clients and servers in how the internet functions. (Client types in a URL (Uniform Resource Locator) which is a request to the Domain Name Server. The DNS translates the URL into an IP address which it sends back to the client. The Client uses the IP address to locate the host server. The host server sends the website’s content to the Client.)

– A web browser is the client which renders the website so that it displays on your computer. Reads the HTML/XHTML/CSS code, etc. (Examples are Internet Explorer, Mozillia Firefox, Safari, Opera, etc.)

– Breaking down a URL: (Protocol)://(subdomain).(domain).(top level domain)
(The subdomain is often not required, the address will usually still work even if you leave off the www.)

– An absolute URL contains all components of the file path with nothing omitted. It is used to link to a page from outside the website.

– A Relative URL is used to link inside the same domain as a site, so some of the URL information may be left off.

HTTP (Hypertext Transfer Protocol) is the most standard protocol for websites. HTTP is a stateless protocol, which means it retains no memory of the requests it sends and receives. This is why cookies and java script are necessary to retain info like remembering logins, etc.

FTP (File Transfer Protocol) is best for transferring large files (uploading/downloading).

SMTP (Simple Mail Transfer Protocol) Standard protocol for mail.

RTP (Real Time Transfer Protocol) Standard protocol for sharing audio/video/streaming media on the internet.

– Not all script is compatible with all browsers, although browsers have been gaining compatibility as time goes on. When you design a website you should test it in as many different browsers as possible (as well as multiple versions of each browser, including out of date ones) to make sure your script is as compatible as possible and your website will display properly regardless of where it is viewed.

– The W3C (World Wide Web Consortium) has issued web standards which create guidelines so that browsers and developers stay consistent.

HTML (HyperText Markup Language) uses tags to identify elements. A tag is contained within brackets. A tag with content and an ending is a container. A tag that stands alone without content must have a / before the bracket closes (after the letter(s), unlike before in an end tag). Although it is also ok to just have a beginning tag and end tag right next to each other with no content in between.

– HTML is currently in version 4.01 although a version 5 has been in development for a long time. HTML5 is unfinished though and not supported by most browsers.

XHTML (eXtensible HyperText Markup Language) is based on HTML but has stricter rules and thus is more browser compatible. (One thing I had not known previously is that it is okay to use both lower case and upper case letters in HTML tags. I thought they must always be lowercase, but that is actually a rule of XHTML. HTML is more forgiving of rule breaking.)

– The first 2 versions of XHTML (1.0 and 1.1) are compatible with HTML but XHTML 2.0 is not (but its development was cancelled and is obsolete now.) XHTML 1.0 is the best format to use.

– When writing code, always use a text editor, not a word processor. (Good free text editors are Notepad ++ for a PC or Textwrangler for a Mac.)

– HTML and XHTML code should consist of a Head tag and a Body tag. The head tag contains important information that makes the site work and be searchable (like meta tags, links, etc.) The body tag contains the visual content.

– In the required beginning code of an XHTML document: encoding=”utf-8″, the “utf-8” is specifying the language of your website. 8 is the default, and is usually okay for most Western languages.

– In XHTML, it does not matter how many spaces are in your code. All spaces get condensed into a single space when the browser renders your website. Because of this you may write the content of a paragraph tag either in one single line, or break it into several lines to improve readability in your text editor. The end result will look the same in the browser.

– There are 3 types of lists which you can create with code: unordered lists, ordered lists, and a definition list.

– An unordered list is a list with bullet points. You can change the appearance of the bullets to open circles or squares by adding type=”circle” or type=”square” to the ul tag.

– You can nest lists. If you do not specify the appearance of the bullets, the nested list will automatically be a different style than the default of the list it is nested in. It will cycle through the 3 bullet styles.

– An ordered list has numbers or letters. The default is numbers. You can change to letters by adding type=”A”/ type=”upper-alpha” (or type=”a”/type=”lower-alpha” for lower case). You can change to roman numerals by adding type=”I”/type=”upper-roman” (or type=”i”/type=”lower-roman” for lower case).

– A definition list is all text, it has a term with a definition below it; the definition is indented from the element above.

CSS (Cascading Style Sheets) are instructions that can be used to enhance HTML, and defines the appearance of elements. It is better to develop an understanding of HTML first and use CSS to build on top of that instead of relying only on CSS.

– When building a website you first create a root folder on your hard drive. The home page of your site is a file in this root folder, usually named ‘index’ or ‘default’. You make subcategory folders for the different components of the website within the root folder.

– You must follow rules when naming the files that make up your site: No space (use underscores or hyphens), keep names short, no special characters or punctuation, numbers can be used but not at the beginning fo the name, don’t use uppercase letters. All file names must be unique, don’t repeat any.

– Include extension to file names (like .jpeg or .htm)

– Reference 25 Useful WYSIWYG Editors Reviewed for lots of different site-building programs and details on what they offer, which types of computers they are compatible with, etc. (WYSIWYG stands for “What You See Is What You Get” and refers to editors which allow for you to create the presentation of your site without coding knowledge (the software generates the code for you…it is an alternative to creating a website by writing all code from scratch yourself in a text editor only). Dreamweaver is a good WYSIWYG and what we’ll be using for class.

– Reference A Brief History of Markup for more background on the history of HTML and XHTML.

– Reference FTP Frequently Asked Questions for more background on how FTPs work.

Good Websites for further HTML reference:

Bulletproof HTML: 37 steps to perfect Markup

XHTML Web Design for Beginners: Introduction

Getting Started with HTML

This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s