Getting to grips with HTML

We are using CodeCademy to learn HTML (Hypertext Markup Language) – the basic coding required for websites.

Introduction
Lesson: Introduction to HTML
Lesson: HTML Document Standards
Project: Fashion Blog (pro)
Cheat sheet download – Elements and Structure PDF

Tables
Lesson: HTML
Quiz: HTML Tables (pro)
Project: Wine Festival Schedule (pro)
Cheat sheet download– Tables PDF

Forms
Lesson: HTML Forms
Lesson Form Validation
Quiz: HTML Forms (pro)
Project: Forma story (pro)
Cheat sheet attached – Forms PDF

Semantic HTML
Lesson: Semantic HTML
Quiz: Semantic HTML (pro)
Project: New York City Blog (pro)
Cheat sheet attached – Semantic HTML PDF

HTML is the language used to create webpages. HTML stands for Hypertext Markup Language. HTML documents written with this text (or coding) tell browsers how to interpret and display the data.

HTML documents can be identified by the file extension .htm or .html. HTML standards are set and maintained by an international group of industry leaders such as Microsoft and Apple, called The World Wide Web Consortium (W3C). The rules that govern how HTML is written are called syntax. As new Web technologies emerge, HTML evolves through the W3C with newer versions such as 5.0 that introduced new standards.

HTML is the skeleton of all web pages. It’s often the first language learned by marketers and designers and is core to front-end development work.

So what exactly is HTML?

HTML provides structure to the content appearing on a website, such as images, text, or videos.
Right-click on any page on the internet, choose “Inspect” – or Ctrl+Shift+I – and you’ll see HTML in a panel of your screen.

HTML stands for HyperText Markup Language:

• A markup language is a computer language that defines the structure and presentation of raw text.
• In HTML, the computer can interpret raw text that is wrapped in HTML elements.
• Hypertext is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks.

Learning HTML is the first step in creating websites. but even a bit of knowledge can help you inject code snippets into newsletters, blog or website templates. As you continue learning, you can layer HTML with CSS and JavaScript to create visually compelling and dynamic websites.

HTML Anatomy

HTML is composed of elements. These elements structure the webpage and define its content.

The diagram to the left displays an HTML paragraph element.

As we can see, the paragraph element is made up of one opening tag (<), the content (“Hello World!” text), and a closing tag (>).

A tag and the content between it is called an HTML element.

There are many tags that we can use to organise and display text and other types of content.

Let’s quickly review each part of the element pictured above:

• HTML element (or simply, element) — a unit of content in an HTML document formed by HTML tags and the text or media it contains.
• HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.
• Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
• Content — the information (text or other elements) contained between the opening and closing tags of an HTML element – visible to your audience.
• Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.

Just to clarify:

• Tags are read by the computer and if formatted correctly will not be visible to your human audience.
• Content is visible to your audience.

The “Markup Language” component of HTML refers to the insertion of instructions, called tags. Tags tell the Web browser how to interpret the data. Tags follow a standard format. Each tag begins with a “less than” symbol (<), immediately followed by the tag text, and ending in a “greater than” symbol (>). Spelling is critical, as tags not recognised by a Web browser are ignored. Tags in HTML can be written in either upper or lowercase. However, it is considered generally good practice to type your tags in lower case.

Please note that HTML uses American spelling.

Tag Example: <body>

Most tags have a similar counterpart, called an “end tag” which stops the effect of the tag. An end tag is identical to the start tag counterpart, but also includes a forward slash “/”immediately before the tag text. Some tags do not have a closing counterpart, such as the Image tag (<img>). A closing tag must always include the forward slash “/”.

End Tag Example: </body>

Elements are simply the different components or pieces of your webpage (text, images, etc.). For example, <body>…</body> are tags that identify the body text on a webpage.

Once you have identified the element, you can then apply attributes such as colour and alignment to the element. Many attributes require that you also set a value, such as a measurement or specification. For example, if you wanted to center a paragraph on your webpage, the code would read:

Attribute Example: <p style=“text-align:center”>Your paragraph text.</p>

In this example, STYLE is the attribute for the paragraph’s text and text-align:center is the value. Values are always surrounded by quotation marks. You can apply multiple attributes, separating them with space between.

Entities are special characters you can add to a page such as a copyright or trademark symbol. Entities begin with an ampersand (&) and end with a semicolon. For example, the code to insert a registration mark (®) looks like:

Entity Example: &reg;

As HTML became more prevalent and the need increased for additional structure for HTML documents, the W3C introduced XML (Extensible Markup Language), a meta-markup language used to create other languages and allow developers to define their own tags. XML isn’t quite as flexible as HTML, so the W3C rewrote HTML in XML, creating XHTML.

With the advent of HTML5, the W3C recommends using HTML5, as its inclusion of the extensive use of Cascading Style Sheets (CSS) and JavaScript (JS) has eradicated the need for XHTML. While XHTML is still being supported by browsers, its similarity to the latest iteration of HTML makes it redundant.

HTML isn’t the only language we learn during this module ‘Principles of Coding’ – we will also be covering CSS and JavaScript. To understand better why we need three languages – I’ll pass over to Danielle Thé who will provide a precis of the three: