Week 1
What came first the Internet or the web?
what do we make of Free Basics?

First, follow this link to set up your space on the school's server. This can take a while, so do it now.
Terminology
Remember, the web is nebulous, and ever changing and there are a lot of conflicting interests with very deep pockets that want it to be one way or another. So terms describing the software you need to work on the web are also changing too. Hello World
HTML stands for Hypertext Markup Language. A markup language means that most of the heavy lifting is done behind the scenes by separate program, in this case the browser. We "mark up" our text with special tags that the browser interprets, displaying the correct information on the screen. This is good and bad. Good because it's pretty easy and does not require hard-core programming skills. Bad because
  1. The HTML standards are constantly changing and evolving.
  2. There are a bunch of different browsers and each interprets the HTML code slightly (or completely) differently.
  3. every person has a different computer, screen size, color balance, resolution, dirty screen, ect.
Upshot – you have to create your page as best you can, but understand that it is not an exact art. There are so many variables, that it is best to have a holistic attitude towards web design.

A note about Sublime Text - Sublime is an amazing text editor, but it takes a little getting used to. The default may be set so that it does not wrap the text to the window width like most programs. Here's how you change it. Go under the header "View" and select "Word Wrap"

Tags
The text between a < and a > is a tag. Tags will not appear on your page. You need to close most tags by repeating the tag and putting a / in it.
For example if the html looks like this

joe <b>is</b> good

the results will look like this

joe is good

every web page has this basic structure;

<!DOCTYPE html> This tells the browser what version of HTML to run. (In this case HTML5)
<html> tells the browser that this is a web page
<head> a section at the start where you put stuff like the title
<meta charset="UTF-8"> Tells the browser what character set we are using
<title> this puts the title at the top of the window
Title of the Page
</title> close the title tag
</head> ends the head section
<body> starts the main body of the website
the main guts of the page .... bla bla bla.
</body> end the main body of the website
</html> closes the HTML page

copy the following and paste it into a new TextWrangler document.
		<!DOCTYPE html>
		<html> 
		<head> 
		<meta charset="UTF-8"> 
		<title> 
		Title of the Page
		</title> 
		</head> 
		<body> 
		</body> 
		</html> 
	
Write something profound between the <body> </body> tags, and make your own title. Save your file to the desktop as "helloworld.html". Notice that the Sublime now formats your code with colors because you have "told" it what language you are writing. Open the file in a browser window (safari, Firefox or chrome). Note that while the website is awesome it is not yet online - we will cover that next week. You can open websites "locally", test and update them, then "publish" to the server when you are ready. This way you can ensure that mistakes and tests don't make it online.

The life of a web element

  1. Cutting edge and new

    - only the newest versions of a browser will utilize it. You may need to use a browser-specific extension to get it to work. You need to build your site understanding that some people will not be able to utalize the new code.
  2. Mainstream

    - all browsers will use it except for really odd/old browsers. You can usually drop the browser extension and assume that everyone has the ability to see the content the way you intend.
  3. Getting old

    - there's a new better way (or sometimes competing ways) to do it, but your way still works. Understanding when to make the change is tricky.
  4. Really old

    - Everyone's adopted the new way of doing it but your way still mostly works in most browsers.
  5. Depreciated

    - might still work in some browsers but you really 100% need to stop using it.

Small list of important tags

<br/> makes a line break (note that breag tag does not need to be closed, but it does have the extra / in the tag that sort of does the same thing.
<p> </p>makes a paragraph break
<b> </b> bold
<em> </em> emphasis
<i> </i> italics
<a> </a> anchors (for links)
<hr> makes a horizontal line

<h1> </h1> makes text really big
<h2> </h2> makes text slightly big
<s> </s> strikethrough! <underline> </underline> underlines the text - but links are generally underlined so it's rare that you'll want to use this tag

<span> </span> separate a section of text to apply formatting - span does nothing on its own
<div> </div> for creating boxes that structures the page

Note - all tags need to be closed, but there are a couple "self closing" tags, the most common of which is <br/>. The backslash after br closes this tag, although technically the tag will still work without it.

Depreciated tags

There are a lot of tags that used to work, and may actually still work, but you shouldn't get into the habit of using them because there are new better ways to do it now. Remember, HTML is a big evolving animal - there some trick we will learn in this semester that are brand new.

<marquee> </marquee>moves text across the screen.
I can't believe this still works! <blink> </blink> makes text blink. Dang, this one's really gone!
<font> </font> is the old way of styling text.
<center> </center> is the old way of centering text before CSS.


Comments
"Commented" text will not show up on your site, and it will be ignored by the browser. It's a way to leave notes to yourself, or turn on and off different lines of code to see which you like better. Don't forget that anyone who views the source code of your page will be able to see your comments too - so it's a bad place to store your pin number.
<!-- this text would
be commented -->

COOL! In Sublime there is a shortcut for commenting sections of text. Highlight the section of code you wish to comment, then press: command + "/" (or Edit - comment - toggle comment. This will comment or uncomment the selection.

Changing the font size and color.
There are many ways to do this, but for now here's a simple way to change font attributes that will not conflict too much with how we will do it in the future. First you need to use the <span> tag. Span does nothing to the text itself, but you can add the style tag with modifiers to change the text. For example:

<span style="color:red;"> This text is red </span>
should produce: This text is red

your can also use the style attribute within a <p style="color:purple;> tag </p>
Just remember to close your paragraph tag!

<span style="color:white; background:black; font-size:16pt;"> This text is white and large on a black background </span>
This text is white and large on a black background

Notice the new syntax in the sytle tag? The first part is the "property", (in this case color, background, and font-size) the second element is the "value" (white, black, 1.5em). The property and value are always separated by a colon, and ended with a semi-colon. This code you are writing in the style tag is different from the rest of the HTML because it is actually CSS! Hooray! Why not Zoidberg?

But what if you have several sections of blue text and you decide you need to change all the blue text to red. Doing this for each section would be a drag, so we separate the style tag into it's own section in the head and make a separate class called "bluetext". Classes in CSS are defined by the "." before their name. Note that "bluetext" is my word and it could be anything we want as long as you spell it the same way in the HTML.

	<!DOCTYPE html>
	<html>
	<head>
	<title>
	</title>
	<style>
	.bluetext{
	   color: blue; 
	}
	</style> 
	</head>

	<body>
	<span class="bluetext"> This text is blue</span> 
	This is not Blue
	<span class="bluetext"> This text is blue again</span> 
	</div> 
	</body> 
	</html> 
Color in HTML There are 3 ways to do color in html;

Stealing Code.

presentation and links
a little webhistory

Lab 1
Rewrite my game profile so that it's YOUR game profile. Incorporate the tags we went over today into your html. Yes, for this week ONLY you can use the annoying depreciated tags. Save your page as profile.html and upload it to the moodle page

Go to this site that CTS has set up and follow the instructions so that next week we can begin uploading websites.

Reading
Read "Is Google Making us Stupid?" and write a short response. Does this apply to your own experience at all? Is the Internet effecting out brains? email me your writing - 250 words or more.

Yes, this article is about attention spans on the Internet and YES it is a little long - the irony does not escape me but you have to think of something ELSE to say about it.