COM1000 Beginning HTML Overview

HTML (Hypertext Markup Language, CSS (Cascading Style Sheets), and JS (Javascript) are the three primary languages that are used to create web pages. Every time you consume content on the web, those languages were used to create what you are seeing, hearing, reading, or watching.  If you’ve wanted to learn about basic web coding, now’s your chance.

Nashville State Community College has a a 13 week course on basic web coding this semester. It is being offered through the Visual Communications department. No coding experience is required. Classes begin on January 19, 2016,  so if you’re not a current student of NSCC you need to apply to the school and be admitted before you can enroll in the class.

Details:

Course Name: COM1000 Beginning HTML
Day/time: Thursday 6-9 PM
Location: Nashville State Community College, Main Campus (White Bridge Rd), Clement Building (C-108)

For more information contact:

Dale Rogers, M.Ed.
Assistant Professor, Web & Multimedia Design
Nashville State Community College
dale.rogers@nscc.edu
ofc: 615-353-3504

Overview

Anyone who creates content to be consumed on the World-Wide Web will at some point be face to face with the technologies that govern how that content is presented. Nashville State’s COM1000 Beginning HTML course covers that process.

We consume web content through an application called a “user-agent”. A user agent is some tool (an agent) that allows you (the user) to see, hear, read, watch, listen, or somehow consume content. Most typically, the user-agent is a web browser. The Web browser is the key to everything. As designers, podcasters, bloggers, marketers, trainers, salespeople, writers, illustrator, videographers, filmmakers, etc, we want to engage with our audience through the web browser. Therefore, we need to know a little something about how to get the browser to display our content as we intended it.

The three main languages that the browser uses to accomplish that are:

  1. HTML (Hypertext Markup Language)
  2. CSS (Cascading Style Sheets)
  3. JS (Javascript)

HTML allows us to put a structured object (an element), say a heading, paragraph, video, or an image, on a page. HTML contains tags that tell the browser what it can do with that element.

Every element has properties. When we want to determine the type of font, size, color, or location of a heading… when we want to determine the dimensions of a video, how it will be placed on the page, we use CSS to control an elements properties.

If we want to control an element’s properties based on some criteria, for example, when a button or link gets clicked, or a link is hovered, then we need to use scripting. That’s where Javascript comes in. It allows us to manipulate an object’s properties dynamically.

In COM1000 you will be introduced to the underlying languages that affect how content is displayed on a web page according to current best practices. It will give you the solid foundations for further exploration.

The course is part of Nashville State Community College’s Web Design concentration in the Visual Communications Associate in Applied Science degree. While the course is part of a degree, anyone from the community can enroll as a non-degree seeking student.

Video in HTML files

Hosting and streaming video requires a lot of storage and bandwidth. Many shared hosting plans will allow you to host your video. In this instance, you would use the <video> tag to provide that content to your users. However the performance can sometimes be terrible because shared hosting can contain many web sites and are not optimized for media streaming. Streaming services like youTube, Vimeo, Blip, and other commercial solutions exist to provide the infrastructure to deliver your videos with good data throughput and buffering (i.e. without pauses). When using those services to deliver media, they will provide you with the necessary code to use to get the media content to play on your web site.

Example

On the Youtube page there will be an option to share.

Share button
Share button

Under the share option are several options:

 

Share Options
Share Options

One of those options is an embed option which will provide a line of code (usually an iframe).

Embed Code
Embed Code

Just copy and paste the iframe code where the video tag code would normally be and you’re good to go. The iframe points to a resource that makes heavy use of javascript to play the video.

Note: Youtube utilizes both Flash technology and HTML5 technology. Flash technology is not mobile compatible; at least, not on iOS devices (which have a huge market share). To ensure your YouTube embedded videos are mobile compatible see the following article on Stack Overflow:  http://stackoverflow.com/questions/13516345/howto-play-youtube-videos-via-html5-video-tag. The article explains how to ensure your videos are being streamed from YouTube using HTML5 technology and therefore mobile compatible.

In Summary

There is more than one way to get video content onto your web site. The video tag is the method of choice if you happen to know the exact URI of your video content. However, many streaming services have their own infrastructure and will provide a block of code that you can use to deliver the content onto your page.

Q&A: Plain text and HTML

Student question:

Is plain text the same as txt? I’m still having a problem with it.

Answer:

Beginning students learning how to code with web standards are sometimes confused about what plain text is and how it applies to HTML.

Plain text refers to simple character set, like ASCII, or Unicode. It is the set of characters that allow us to put alpha-numeric characters on a page. They are the symbols that make up certain languages. ASCII (American Standard Code for Information Interchange) is a character set of  128 characters that make up the English language. Since the web is a global network of documents, the ASCII character set is insufficient to represent many of the languages that use it. That’s why in most HTML documents you find a tag like…

<meta charset=”UTF-8″ />

” (UCS Transformation Format—8-bit[1]) is a variable-width encoding that can represent every character in the Unicode character set. It was designed for backward compatibility with ASCII and to avoid the complications of endianness and byte order marks in UTF-16 and UTF-32.”

Wikipedia

Plain text refers to characters without any regard to formatting; i.e. font, size, color, justification, weight, style, etc. Many applications are capable of reading plain text information. We normally use plain text editors like Notepad (PC) and TextEdit (Mac), vi, or emacs to create the documents so that we don’t introduce formatting codes into our documents. As web designers, we  introduce the formatting into our web documents through Cascading Style Sheets.

When we use a program like Microsoft Word, OpenOffice, Google Write, or a host of other word processing packages, we are putting simple characters onto a page and then use the programs to add the formatting to change the characters appearance. While you normally don’t see the formatting codes that the software uses to make that happen, they are there, in the background, invisible to us. When we format a web page, we see all those codes in the form of HTML and CSS and have minute control over them. It is the browser that takes those codes and uses them to transform the plain text into formatted text.

Plain text files can have more than one extension but usually  have a .txt extension. An HTML document is created using plain text. We create tags with the plain text characters that communicate specific things to a browser. So in HTML you could say that we are giving instructions to a browser (or user agent) using the Unicode plain text character set. The HTML tags, CSS, and Javascript code that we write needs a program that understands how to interpret those tags and code. We give HTML files  an extension of .html so the Operating system knows to open it up with a browser instead of TextEdit or Notepad. The browser knows what to do with the codes and show us what the content looks like when the codes are rendered. We call that interpreting the code, or rendering the page. A text editor just shows us the characters, it does not interpret them.

For a list of Text editors see the following wikipedia article, http://en.wikipedia.org/wiki/List_of_text_editors