Wednesday - Basic Webpage Structure

To revisit "computer coding" from yesterday's discussion, I need you to understand that coding is a way of writing messages so that computers know what to do for us. There are dozens of different computer coding languages we can use; HTML and CSS are the two languages we will use in this class.

Now that we have that out of the way, open up Atom. Once it is open, use the control-comma key combination to launch the settings menu. In the settings menu, click on the "+ Install" option on the left. In the search bar, search for the package "less than slash." This package will automatically close tags as you type, which will speed up your coding quite a bit.

While that is installing, we need to map Google Drive to Atom and set up our project folders. You will need the following folders:

• css
• html
• img

Those folders sit in what is called the root directory. The root is the bottom-most layer of your Website file structure; it is the foundation of your entire Website. The only loose file that should sit in the root alongside those directories is a file we're calling "index.html" and every Website in the entire world has that file name as its Home Page. You will, too.

As a quick review of what we learned yesterday, every HTML document has some required lines of code. In simple form, that structure looked like this:

‹!DOCTYPE html›
‹html›
 ‹head›
 ‹/head›
 ‹body›
 ‹/body›
‹/html›

In addition, I wanted to show you some of the special terms computer programmers use for the unusual characters that are frequently included in computer code. I've put them in a handy reference table, below:

Today, we're going to spend some time at Codecademy, an online tutorial Website that will let you play around with HTML and CSS in an easy, straightforward environment. Don't worry too much about learning what Codecademy is trying to teach you - this class will take care of that day by day. But it is helpful for you to get a quick, up-front sense of what kind of stuff is involved in Web design, so you can better see where this class is headed.

As a reminder, use your school Google account to sign in to Codecademy. That will not only simplify things for you when you log in, but it will also make it easier for everything we do to track through our Google accounts.

Notes

1. The first line of any HTML5 document must be ‹!DOCTYPE html›. This line informs the browser that every subsequent line in the document should be understood using HTML5 standards.
2. The second line of any HTML5 document marks the start of formal HTML code and it should include a language designation for the primary language being used in the document below. For example, ‹html lang="en"› opens HTML coding and specifies English as the main language of the document. English doesn't really need this help because it is the default language of the Internet. Accented languages or those with characters not shared by English are most likely to benefit from being specified on line 2 of your HTML documents. Even if you are writing exclusively in English, however, I will require you to specify your language on this line. It is a useful reminder that there are many options out there and not every Web surfer is fluent in your language. Raised consciousness is a Good Thing™. To find a list of codes for other languages, go to W3Schools to use their reference, or simply do a Google search for "html language codes."
3. The last line of your HTML document should be ‹/html›, which formally stops reading HTML code at the end of the document. Browsers will assume you meant to put it in even if you leave it out, but you should never rely on a browser to compensate for breaks in your coding. Be precise and smart with your coding at all times. Sloppiness is for less employable coders. Don't be one of those.
4. In between the start and stop HTML tags, you will have two main chunks of code: the head and the body. These provide the foundation of structure for your HTML document.
5. The most common attribute used in HTML is the class attribute. It is used to group together tags against which you wish to apply a single style in CSS. For example, if you want the unordered lists in your navigation to have no bullet points but you want all other unordered lists in your documents to have those bullet points, you could assign a value to the class attribute of your unordered lists like this: ‹ul class="unbulleted"›. In your CSS you would then have to select that class and set list-style-type to none.

Below this text you will find a glossary of terms specific to HTML. Most of these you will memorize as the class runs its normal course, but along the way you should feel free to reference this glossary. Do not let yourself get confused! Read the definitions and know the lingo I am using to explain how to do things in this class.

HTML documents are where all of your content will be structured. Content, in this context, means all the writing, pictures, and sounds you want to share with others through the Web. All of this content will be organized using HTML tags, which are identified by angle brackets that look like this: ‹ ›. Atom will display your textual content in white and it will use a variety of colors to represent the tags, along with any detailed attributes and values.

The Internet is different from the Web. The Internet began life as a US military project called ARPANET that was built so that a handful of computer centers could talk to one another across the country in case of war. Any two or more computers that are connected and can share information are said to be "networked" together. The combination of these networked computers along with the routers and switches used to connect them is called the Internet.

The Web was an idea put forth by Tim Berners-Lee. Tim decided that the Internet would be more powerful if it could be used by people around the world to share their work and ideas. His focus was on sharing research findings and archiving them, but to do that he had to invent Web pages and Websites and the addressing protocols we use to identify each computer in the network and each file location. It was a massive undertaking and it took him 10 years to take it from an idea to the point where Websites were a real thing people could look at, in 1990. I was in college at the time, meaning that I was in the first generation of people who had computers, email addresses, and who surfed the Web. I did not start writing my own HTML code until 1994, but I have always been a tech enthusiast, and I am grateful to Tim Burners-Lee for establishing the basic set of standards that enabled the World-Wide Web (WWW) to come into existence.

Sometimes online you will see references to XHTML; what we're using in this class (and what has been the global standard now since 2014) is HTML5. If you see a site talking about XTML or XHTML, you're looking at a site that is old by Web standards, and it may well have advice that no longer works on the modern Web. Be wary of old reference materials!

agile development

this is a catch phrase in coding circles; it just means that you should expect to radically change the structure of a coding project multiple times during development, as the client develops his/her vision and capacity to explain it to you

attribute

modifies a tag by adding a feature to it, like a URL or a class name; attributes must be paired with values

class

classes define a subgroup of a tag (or even of multiple tags) to allow for them to be styled one group at a time in CSS

HTML

Hyper Text Markup Language refers to the fact that HTML documents are linked to other HTML documents (that's the hyper part) and that the text itself is structured to accept styling (that's the markup part).

id

these work like classes but each id can only exist once per HTML document

tag

the required start of any line of HTML code, it is the first word following the ‹ and it is the only element in HTML that can be used by itself

value

this should be written in quotes (single or double; doesn't matter which), though browsers will typically be able to read it as a value regardless; values define how an attribute should be applied to a tag