Intro to Coding Websites

1. Intro to Coding Websites

2. The Internet explained: http://www.youtube.com/v/qv0XCaUkfNk How the Internet Works in 5 Minutes: http://www.youtube.com/watch?v=7_LPdttKXPc

3. To summarize: Aserver is a computer or software application that provides a specific kind of service to client software running on other computers. The term can refer to a particular piece of software or to the computer on which the software is running. A single computer may have several different server software applications running on it, (for example, the computers that you connect to when using the Writing Studio are running both a version of Windows Server and Microsoft SQL Server). Servers send files across the network where your computer (the "client") receives and interprets them. Web servers answer requests from the web browser on your computer and retrieve the specified file, returning to your web browser the requested document. Web browsers and servers communicate using Hypertext Transfer Protocol (HTTP). Entering a URL into your web browser tells the server where to locate the document you are looking for.

4. Browser makes resource/data request Server responds with resource/data Browser renders data and content (styled, or dynamic content, such as a video)

5. URL: uniform resource locator, internet address Web protocol http = hypertext transfer protocol https = secure hypertext transfer protocol ftp = file transfer protocol

6. FTP is when you upload HTML documents, graphics and other media files to a server. Files are transferred between your computer and the server using FTP (File Transfer Protocol). This process is what will ultimately make your web project “live” on the web. In our classroom, there is already a FTP program loaded on your computers.

7. Domain name, Server location (IP Address is numeric) www.google.com or google.com Domain extension .com, .net, .org, .edu, .ca, .me Resource, name and type index.html (or index.htm)main page file dog.jpg, dog.wav, song.mp3 (file naming conventions: Karl’s book, pg. 45-46) Folder: http://www.google.com/tutorials/index.cfm

8. Hypertext: Generally, any text that contains links to other documents, usually in the form of words or phrases in the text that can be selected by a reader causing another document to be retrieved and displayed. HTML: Hypertext Markup Language, the language used to create web documents. Tells web browsers how to display the document’s content. Hypertext is a way of creating multimedia documents and making links between them. Markup Language is a method of embedding special tags (elements) that describe the structure and behavior of a document.

9. “Hypertext is the presentation of information as a linked network of nodes which readers are free to navigate in a non-linear fashion. It allows for multiple authors, a blurring of the author and reader functions, extended works with diffuse boundaries, and multiple reading paths…The term ‘hypertext’ was coined by Ted Nelson, who defined it in his self-published Literary Machines as ‘non-sequential writing’…[George] Landow defines hypertext as ‘the use of the computer to transcend the linear, bounded and fixed qualities of the traditional written text’.” The Electronic Labyrinth at http://www.iath.virginia.edu/elab/elab.html

10. HTML 4.01 has been the standard for coding web pages since 1999, but the web has changed a lot since then. HTML 5 (as well as XHTML) is the evolving standard—but is not yet the standard, but we certainly will be coding in that direction.

11. Key HTML terms are: • Elements • Tags • Attributes • Attribute values • Styles • Style properties • Style values

12. HTML documents are defined by HTML elements. An HTML element is an individual component of an HTML document. • An HTML element starts with a start tag / opening tag which uses an opening and closing bracket <element> • An HTML element ends with an end tag / closing tag which also uses an opening and closing bracket <element> • 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 <br /> • Most HTML elements can have attributes or styles

13. Tags are the directions that tell a web browser how to display the content of your HTML document. The first word in a tag (often times, this "word" is only a letter) is its official name, and this name usually describes the tag's function. For example, <p> is the tag which defines a paragraph. However, in order to modify the tag to something beyond the default, you must add an attribute and assign it a value, such as <p align=“center”> (however, most attributes are being depreciated in the move from HTML 4.01 to 5) or more commonly, give it a style. <element attribute=“value”>Content</element> Everything between < and > is the tag Inline style example: <element style=“property: value;”>

14. Best practice for tags = all lowercase. !DOCTYPE is the one exception. Anode is what any single document or page of HTML content is called in the web environment. For our class, we are beginning by learning to code by hand. This is done using Notepad ++, which can be found in the Start Menu on the computers in this classroom (and can be downloaded for free to your home machine). The reason we use Notepad is because it is a "clean" page.

15. Code for a basic html page: <!DOCTYPE html> <html> <title>Document Title</title> <body> Document Contents </body> </html>

16. All HTML documents include the !DOCTYPE and tag for <HTML>, which tell a browser reading the file that everything contained within is written in HTML language (and which version) and should be displayed as such. Also, all HTML documents have a <head>, which you should give a <title>, and a <body>, which is where you will do most of your work, put most of your content. Coding trick: “View source”

17. Tags always have a start tag, <p>, and an end tag, </p>. This turns the function of the tag on and off. End tags always have a backslash, but never include attributes because in turning off the tag, you automatically are turning off its specific modifications—for example, <p align=“center”>This is the paragraph.</p> Most tags require a mirror end tag, but some don't. For example, a horizontal rule or < hr /> or a line break <br /> or an image tag, doesn't require an end tag.

18. One other important thing to remember about HTML code is the concept of nesting. Nesting means that if you are using multiple tags, the closing tags must mirror the opening tags. For example, if I wanted text to be both bolded and italicized, I would code it like this: <em><strong>Hello</strong></em>, which would look like this: Hello Some information in an HTML document will be ignored when the document is viewed in a web browser. Line breaks, tabs and multiple spaces, multiple paragraph tags <p>, unrecognized tags, and text in comments.

19. So, with so many HTML editors available, why are we learning to hand code? The following is from Web Design in a Nutshell by Jennifer Niederst, one of the best discussions I have found about the pros and cons of using and HTML editor. • Pros of HTML editors • They are good for beginners. They can even be useful for teaching HTML because you can lay out the page the way you want, then view the resulting HTML. • They are good for quick prototyping. Design ideas can be tried out on the fly. • They provide a good head start for creating complex layouts and other advanced functions such as JavaScript and DHTML functions.

20. Cons • They are infamous for not generating clean HTML documents. They add proprietary or redundant tags and often take circuitous routes to produce a desired effect. Some may even produce HTML that is incorrect. • Some editors automatically change an HTML document when you open it in the program. They add their own tags and may strip out any tags they do not recognize. • The built-in graphics-generating features do not offer much control over the quality of the file size of resulting graphics. • Software releases tend to lag behind the quickly changing HTML standards, so the HTML you create using the tool may not be completely up-to-date. • They are expensive. The more powerful packages cost hundreds of dollars up front and additional costs to upgrade. • My own additional con is that if you learn to create web documents using only HTML editors, you don't develop a fundamental understanding of how tags work and what tags perform what functions, so if there is an error or problem in your document, it is likely that you won't be able to diagnose or fix it. (See also page xv in Karl’s book)

21. Resources for learning to code: • Karl’s list: http://sustainablewebdesign.com/book/resources/ • http://htmldog.com/reference/htmltags/and http://reference.sitepoint.com/html (which are both on Karl’s list) • HTML beginner tutorial: http://htmldog.com/guides/htmlbeginner/ • http://sixrevisions.com/web-standards/20-html-best-practices-you-should-follow/