[B1-L1] From Code to Content

HTML Code


RTB106-B Block Summary:
In the 21st century, the broadcast media industry requires students to be proficient with many types of media content and the content creation tools used to make them.
In this block, students will develop basic skills in web design and learn software used to create digital content (text, images, audio, video, etc.). Students are taught basic elements of Hypertext Markup Language (HTML), the underlying code that provides website functionality.

Particular emphasis is devoted to creating proper links (both incoming and outgoing) to other text and multimedia content on the Internet. Students are taught the primary use for each type of web page element, including stories, polls, chats, photo galleries, as well as the use and management of social networking links such as Facebook and Twitter. Students learn copyright law as applied to various elements of website content, learning proper attribution rules and guidelines for avoiding copyright infringement.

HTML

HTML elements form the building blocks of all websites.

Long ago, in the days of the web design ancients (roughly 20 years ago), web pages were written in a text editor (like Notepad) using thousands of lines of Hyper-Text Markup Language (HTML), a programming language designed to display the content of a web page in a browser window. The browser translates the code into the visual elements (text, images, colors, video, etc.) that compose the page.

HTML provides a means to create structured web documents by using headings, paragraphs, lists, links, quotes and other items. It can also embed scripts written in other programming languages (such as JavaScript) which affect the behavior of HTML web pages.

HTML is written in the form of “tags” or keywords that represent an element of a page. They appear as enclosed angle brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1> although some tags are unpaired such as the <img> tag. The first tag in a pair is the “opening tag” and the second tag (with the backslash) is the “closing tag”.

The opening tag tells the browser when to begin an effect (such as causing certain words to be bold/italic or be a clickable link) and the closing tag tells it when to stop. The web browser reads the tags, interprets the content of the page, and (hopefully) renders it as the designer intended.

In addition, each tag may have one or more modifiers (also called an attribute). For example, the <img> tag, used to display images on a web page, has both an “src” attribute (the source or location of the image file to be displayed) as well as “height” and “width” attributes for more control on how the image looks. The “alt” attribute allows the blind to understand what the image is even if they can’t see it thanks to modern screen readers. For the same reason, it is also used by search engines to understand the content of the image.

Example: <img src=”anamazingpicture.jpg” width=”600″ height=”60″ alt=”The Grand Canyon at Sunset”>

As mentioned above, the “img” tag is one of the few tags that does not require a closing tag. This is because it is “self-encapsulated” or “self-closing”. It’s only purpose is to find the selected image, display it, and then then stop.

COMMON TAGS: <B> <I> <IMG> <EM> <STRONG> <A HREF> <HR> <BR> <P> <OL> <UL> <HTML><BODY>

CSS

Cascading Style Sheets (CSS) define the look and layout of a website.

Instead of “hard-coding” the styling elements like color, font type, font size, etc. into the HTML code where it might become buried and hard to find, a separate file called a style sheet (e.g. “theme.css”) can contain all the information that is specific to that element or page. CSS allows for rapid and dramatic changes to a website’s look, layout, and behavior without affecting pre-existing content.

TL;DR: HTML is for Content, CSS is for Style.

The World Wide Web Consortium (W3C) is the maintainer of both HTML and CSS and decides as a group how HTML and CSS will evolve.


Assignment: Visit w3schools.com and study the HTML 5 web tutorial. Stop at the chapter called “HTML Tables” and take the test quiz at the beginning of the lesson.


cms

CMS

Over the last two decades there have been many improvements to web-authoring and design. The first of these came in the form of simple computer programs called “text editors” (e.g. Hot Dog, HoTMetaL, BlueFish) and then more visually-advanced computer programs called “What You See Is What You Get” (WYSIWYG) editors (e.g. Dreamweaver, Adobe Muse, KompoZer, CoffeeCup, BlueGriffon, Amaya).

These days, all of this has been replaced by Content Management Systems (CMS) such as WordPress, Joomla, Drupal, and Magento which are website authoring systems that allow the user to focus more on content than design once the initial design is complete. CMS’s use templates, are database-driven, use plug-ins for added functionality, and generate HTML and CSS on the fly, requiring little or no coding by the author. This allows a much wider range of people from all skill levels to maintain and update their websites.

CMS’s are usually written in PHP, a server-side scripting language, and are composed of hundreds to thousands of files that are “hosted” (stored) on a server (i.e. they are uploaded to a computer that is dedicated to serving up websites online to visitors around the world 24/7/365). Theses servers typically run a special operating system (usually a flavor/version of Linux), and are maintained by a third-party company such as GoDaddy or HostGator. Some CMS creators, such as WordPress, offer limited free hosting so you don’t need a separate server.

wordpress logo

Q. What is WordPress?

A. WordPress is a blogging-based CMS. Like other CMS’s, its features include a plug-in architecture and a template system. Currently, WordPress has a dominant market share of 58.8% (20.5M active websites). The 2nd runner up, Joomla, has 6.5% of the market (2.5M), Drupal has 4.8% (1.2M), and SquareSpace has 1% (233k). There are hundreds of other CMS’s out in the wild but few command more than a couple of percentage points of the market.

Q. What are the biggest differences between WordPress.com and WordPress.org?

A. WordPress.com offers a free version of WordPress that is hosted on the company’s own servers. The free version does not allow the upload of templates or plugins and there is no access to the file editor. Any additional features or the removal of WordPress ads requires a fee. There is a storage limit of 3GB for the free version.

WordPress.org provides a free version of WordPress that can be downloaded and installed on a third-party web hosting server. This version is unrestricted, contains no ads, and can use uploaded templates and plug-ins.

Assignment: Start your WordPress website at wordpress.com and create your first 3 blog posts.


IS YOUR PASSWORD SECURE? VISIT HOWSECUREISMYPASSWORD.NET TO FIND OUT HOW EASY IT CAN BE TO CRACK YOUR PASSWORD. VISIT HAVEIBEENPWNED.COM TO SEE IF YOU’VE ALREADY BEEN THE VICTIM OF A DATA BREACH.