Coding foundation

Submitted by sylvia.wong@up… on Wed, 02/09/2022 - 23:35
Sub Topics

HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) are the building blocks of websites. The arrival of HTML5 and CSS3 represents a dynamic and powerful evolutionary stage in the development of web design.

HTML5 and CSS3 make it possible to apply styling and formatting, present audio and video, and create animation and interactivity in ways that have were not previously possible without stringing together plugins, image files, and JavaScript.1

HTML, CSS, and JavaScript are the core languages for building webpages and web-based applications.

An easy way to remember their functions is by thinking of them like a whole person:

  • HTML is the body's bones
  • CSS is the skin that covers it
  • JavaScript would make it move.

Watch the video for a short intro to the three code languages.

To recap, HTML, CSS, and JavaScript are code languages and are used in front end web development – what you see when you land on a page. Back-end development (or server-side development) is what makes a website work – databases, backend logic, APIs, and servers.

These languages are translated by web browsers into visual webpages. Different browsers translate code differently, which is why it is important to check how your website looks in different browsers.

Conventions used

A monospaced font is used to format any code examples in the learning materials to differentiate it from other content.

<p>This is an example of a piece of code.</p>

What is it?

HTML stands for Hypertext Markup Language.

HTML is computer language used to define the content and structure of most webpages and online applications. HTML is used to clearly identify titles, headings, paragraphs, images, links, and navigation elements. Correctly formatted HTML ensures that a browser will present and display the content as intended.

HTML is not considered a programming language as it cannot create dynamic functionality on its own.

HTML5 is the latest version of the HTML standard. It has been widely adopted and is supported by all modern browsers, offering a consistent viewing experience across platforms and devices.

The advantages of HTML5 include:

  • Cleaner more semantically meaningful code. Making it neater and easier to read.
  • Better form design using different input types.
  • Audio and video support. Multimedia elements can be included without having to install third party plugins.
An example of a dedicated code editor

HTML is most commonly written in a text editor like Atom or Sublime text. These types of text editors are perfect for editing code documents because they offer syntax highlighting and code completion features, helping to speed up the development process.

What makes up a HTML code?

Elements

Each individual markup code is referred to as an element or tag.

The purpose of the HTML element is to indicate that the document is HTML formatted. The HTML element tells the browser how to interpret the document. The opening <html> tag is placed on a line below the Document Type Definition (DTD). The closing </html> tag indicates the end of the web page and is placed after all other HTML elements in the document.

The HTML element also needs to indicate the spoken language, such as English, of the text in the document. This additional information is added to the <html> tag in the form of an attribute, which modifies or further describes the function of an element. The lang attribute specifies the spoken language of the document. For example, lang="en" indicates the English language. Search engines and screen readers may access this attribute.

HTML elements are divided into two categories: inline and block.

Block
  • Block elements always start with a new line.
  • Block elements use all available width.
  • There is always a line before and after a block HTML element.
  • Examples include <div>, <p>, <h1>, <h6>, <form>, <ol>, <ul> and <li>        2

The following example code explains block elements.

Inline elements are the opposite of block elements.

Inline
  • Inline elements are contained within block elements
  • Inline does not start with a new line, it sits within an existing line.
  • Inline elements only take the amount of width that is necessary.
  • They include <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input> and <button> among others.2

The following example code explains inline elements.

A close up of HTML code on a developers IDE

Tags

Each tag has a purpose. Tags are enclosed in angle brackets, the < and > symbols. Most tags come in pairs: an opening tag and a closing tag. These tags act as containers and are sometimes referred to as container tags.

For example, the text that is between the <title> and </title> tags on a web page would display in the title bar on the browser window. Some tags are used alone and are not part of a pair. For example, <br> tag that configures a line break on a web page is a stand-alone, or self-contained, tag and does not have a closing tag. Most tags can be modified with attributes that further describe their purpose.

A diagram depicting the anatomy of an HTML element
  1. Start or Opening tag
  2. End or Closing tag
  3. An attribute and its value
  4. Enclosed text content

What is it?

CSS stands for Cascading Style Sheets. For years, style sheets have been used in desktop publishing to apply typographic styles and spacing instructions to printed media. CSS provides this functionality (and much more) for web developers. CSS allows web developers to apply typographic styles (typeface, font size, and so on) and page layout instructions to a web page. Remember earlier when we explained CSS is the skin that covers the bones (HTML).

Advantages of CSS:

Typography and page layout can be better controlled. These features include font size, line spacing, letter spacing, indents, margins, and element positioning.

  • Style is separate from structure. The format of the text and colours used on the page can be configured and stored separately from the body section of the web page document.
  • Styles can be stored. You can store styles in a separate document and associate them with the web page. When the styles are modified, the HTML code remains intact. This means, for example, that if your client decides to change the background colour of a set of web pages from red to white, you only need to change one file that contains the styles, instead of modifying each web page document.
  • Documents are potentially smaller. The formatting is separate from the document; therefore, the actual documents should be smaller.
  • Site maintenance is easier. Again, if the styles need to be changed, then it is possible to complete the modifications by changing the style sheet only.

Configuring CSS

There are four methods for incorporating CSS technology: inline, embedded, external, and imported.

  • Inline styles are coded in the body of the web pages as an attribute of an HTML tag. The style applies only to the specific element that contains it as an attribute.
  • Embedded styles (also referred to as internal styles) are defined within a style element in the head section of a web page. These style instructions apply to the entire web page document.
  • External styles are coded in a separate text file. This text file is associated with the web page by configuring a link element in the head section.
  • Imported styles are similar to external styles in that they can connect styles coded in a separate text file with a web page document. An external style sheet can be imported into embedded styles or into another external style sheet by using the @import directive.
A close up of CSS code on a developers computer screen.

CSS selectors and declarations

Style sheets are composed of style rules that describe the styling to be applied. Each rule has two parts: a selector and a declaration:

  • CSS Style Rule Selector. The selector can be an HTML element name, a class name, or an id name. In this section, we will focus on applying styles to element name selectors.
  • CSS Style Rule Declaration. The declaration indicates the CSS property you are setting (such as color) and the value you are assigning to the property.

For example, the CSS rule shown in the image below would set the color of the text used by <h1></h1> tags on a web page to red, and the font-size to 12px. The selector is the h1 element, and the declarations set the color and font-size properties to the value of red and 12px, respectively.

A diagram depicting the anatomy of CSS
  1. Selector
  2. Declaration
  3. Declaration
  4. Property
  5. Value
  6. Property
  7. Value

The background-color property

The CSS background-color property configures the background color of an element. The following style rule will configure the background-color of a web page to be yellow. Notice how the declaration is enclosed within braces and how the colon symbol (:) separates the declaration property and the declaration value.

The color property

The CSS color property configures the text (foreground) color of an element. The following CSS style rule will configure the text color of a web page to be blue:

Configure background and text color

The image below, displays a web page with a white text and an orchid background. To configure more than one property for a selector, use a semicolon (;) to separate the declarations as follows:

The spaces in these declarations are optional. The ending semicolon (;) is also optional, but useful in case you need to add additional style rules at a later time. The following code samples are also valid:

body{background-color:orchid;color:white}

body { background-color: orchid;
  color: white; }

body { background-color: orchid; color: white; }

CSS Properties

Property Description Values 
background-color
 Background color of an element Any valid color 
color
 Foregound (text) color of an element Any valid color 
font-family
 Name of a font or font family Any valid font or a font family such as serif, sans-serif, fantasy, monospace, or cursive 
font-size
 Size of the font Varies; a numeric value with pt (standard font point sizes) or px (pixels) units or the unit em (which corresponds to the width of the uppercase M of the current font); a numeric percentage; and the text values xx-small, x-small, small, medium, large, x-large, and xx-large 
font-style
 Style of the font normal, italic, or oblique 
font-weight
 The "boldness" or weight of the font Varies; the text values normal, bold, bolder, and lighter and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900 
letter-spacing
 The space between characters A numeric value (px or em) or normal (default) 
line-height
 The spacing allowed for the line of text It is most common to use a percentage for this value; for example, a value of 200% would correspond to double-spacing. 
margin
 Shorthand notation to configure the margin surrounding an element A numeric value (px or em); for example, px or body { margin: 10px; } will set the page margins in the document to 10px. When eliminating the margin, do not use the px or em unit—for example, body { margin: 0; } 
margin-left
 Configures the space in the left margin of the element A numeric value (px or em), auto, or 0 
margin-right
 Configures the space in the right margin of the element A numeric value (px or em), auto, or 0 
text-align
 The alignment of text center, justify, left, or right 
text-decoration
 Determins whether text is underlined; this style is most often applied to hyperlinks The value none will cause a hyperlink not to be underlined in a browser that normally processes in this manner 
text-indent
 Configures the indentation of the first line of text Numeric value (px or em) or percentage 
text-shadow
 Configures a drop shadow on the text displayed within an element. This CSS3 property is not supported in all browsers. Two to four numerical values (px or em) to indicate horizontal offset, vertical offset, blur radius (optional), and spread distance (optional), and a valid color value 
text-transform
 Configures the capitalisation of text none (default), capitalize, uppercase, or lowercase 
whitespace
 Configures the display of whitespace normal (default), nowrap, pre, pre-line, pre-wrap 
width
 The width of the content of an element A numeric value (px or em), numeric percentage, or auto (default) 
word-spacing
 The space between words A numeric value (px or em) or normal (default)

Every single web page you create will include the DTD and the <html>, <head>, <title>, <meta>, and <body> elements.

We will follow the coding style to use lowercase letters and place quotes around attribute values.

A basic HTML5 web page template is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Page title goes here</title>
</head>

<body>
  ...body text and more HTML tags go here...
</body>

</html>

With the exception of the specific page title, the first seven lines will usually be the same on every web page that you create. Review the code above and notice that the document type definition statement has its own formatting and that the HTML tags all use lowercase letters.

There are two sections on a web page: the head and the body.

  • The head section contains information that describes the web page document.
  • The body section contains the actual tags, text, images, and other objects that are displayed by the browser as a web page.

The head section

Elements that are located in the head section include the title of the web page, meta tags that describe the document (such as the character encoding used and information that may be accessed by search engines), and references to scripts and styles. Many of these features do not show directly on the web page.

The head element contains the head section, which begins with the <head> tag and ends with the </head> tag.

You will always code at least two other elements in the head section: a title element and a meta element.

The first element in the head section, the title element, configures the text that will appear in the title bar of the browser window. The text between the <title> and </title> tags is called the title of the web page and is accessed when web pages are bookmarked and printed.

Popular search engines, such as Google, use the title text to help determine keyword relevance and even display the title text on the results page of a search. A descriptive title that includes the website or organisation name is a crucial component for establishing a brand or presence on the Web.

The meta element describes a characteristic of a web page, such as the character encoding. Character encoding is the internal representation of letters, numbers, and symbols in a file such as a web page or other file that is stored on a computer and may be transmitted over the Internet. There are many different character-encoding sets. However, it is common practice to use a character-encoding set that is widely supported, such as utf-8, which is a form of Unicode (unicode.org).

The <meta> tag is not used as a pair of opening and closing tags. It is considered to be a standalone, or self-contained, tag (referred to as a void element in HTML5). The meta tag uses the charset attribute to indicate the character encoding.

An example is as follows:

<meta charset="utf-8">

The body section

The body section contains text and elements that display directly on the web page in the browser window, also referred to as the browser viewport.

The purpose of the body section is to configure the contents of the web page. The body element contains the body section, which begins with the <body> tag and ends with the </body> tag.

You will spend most of your time writing code in the body of a web page.

Text and elements typed between <body></body> tags will display on the web page in the browser viewport.

Your first web page

Now you are ready to launch your first web page. Using the codepen application below, retype the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My First HTML5 Web Page</title>
</head>

<body>
  Hello World
</body>

</html>

Notice that the first line in the file contains the doctype. The HTML code begins with an opening <html> tag and ends with a closing </html> tag.

The purpose of these tags is to indicate that the content between them makes up a web page.

The head section is delimited by the <head></head> tags and contains a pair of <title></title> tags with the words "My First HTML5 Web Page" in between them, along with a <meta> tag to indicate the character encoding.

The body section is delimited by the <body></body> tags. The words "Hello World" are typed on a line in between the tags.

You have just created the source code for a web page document.

HTML's formatting capabilities are limited by design. Style sheets allow you to have tight control over the display of your web pages. CSS styling is the added layer on top of the HTML code.

To write a CSS style page, you need to know about selectors. Selectors are used to select or find the HTML elements you want to style.

There are five categories of CSS selectors:

  • Simple selectors: select elements based on name, id, class.
  • Combinator selectors: select elements based on a specific relationship between them.
  • Pseudo-class selectors: select elements based on a certain state.
  • Pseudo-elements selectors: select and style a part of an element.
  • Attribute selectors: select elements based on an attribute or attribute value.

Structure

Before jumping into the five categories of CSS selectors. Shall we explore style definitions?

Every individual style within a style sheet is a selector. Each selector has a set of properties called declarations. Declarations consist of a property and a value (or set of values).

body {
  padding: 0;
  margin: 0;
  background-color: black;
  font-family: Verdana, Geneva, Arial, sans-serif;
}

You can see in the above example how this works.

  • The body element is the selector.
  • The four declarations for this style are background-color, font-family, padding, and margin.

TIP: Selectors and declarations never have spaces within them. A widely used technique to separate words is by using underscore characters (_) or dashes (-) instead of spaces.

Now back to the five types of selectors.

Simple selectors

Simple selectors select the HTML elements based on:

  1. Name
  2. Id
  3. Class.
Name

The element selector selects HTML elements based on the element name.

Below is an example of all the <p> elements on the page being center aligned with a red text color.

Id

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select a unique element.

Id selector names begin with #, and class selector names begin with a period (.).

Class

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

In the example below, all HTML elements with class="center" will be red and center aligned.

You can also specify that only specific HTML elements should be affected by a class.

In the example below, only <p> elements with class="center" will be red and center aligned.

HTML elements can also refer to more than one class.

In the below example the <p> element will be styled according to class="center" and to class="large".

Pseudo-class selectors

Pseudo-class selectors are created by placing a colon (:) after a class name followed by a state:

.box:hover {
  border-bottom: 2px solid black;
  background-color: #f2b544;
}

The above example indicates the .box:hover selector defines how the box looks when a user hovers over the box with a cursor or when the box is tapped in a mobile device. Pseudo-classes define link states and also define different properties for any element acted on by a user.

States include:

  • :link: A unvisited link
  • :visited: A visited link
  • :hover: A hovered link (as above)
  • :focus: An element "in focus", such as a form field in which a user has inserted a cursor
  • :active: A style for an active element: for example, a link in the process of being opened.

Pseudo-elements selectors

A CSS pseudo-element is used to style specified parts of an element.

It can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after the content of an element.

The structure of pseudo-elements:

selector::pseudo-element {
  property: value;
}

The ::first-line pseudo-element is used to add a special style to the first line of a text.

Below, formats the first line of the text in all <p> elements:

p::first-line {
  color: #f00;
  font-variant: small-caps;
}

Tip: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

  • Font properties
  • Colour properties
  • Background properties
  • Word-spacing
  • Letter-spacing
  • Text-decoration
  • Vertical-align
  • Text-transform
  • Line-height
  • Clear.

Combinator selectors

Style definitions can be combined. Style definitions for sets of selectors that are separated by commas apply to every selector in the list:

h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
  margin-left: 15px;
}

Conversely, style definitions for sets of selectors not separated by commas apply only a specific set of circumstances, where the last element in the list is enclosed in every previous element in the list:

h1 {
  padding-top: 15px;
}

#right-column h1 {
  padding-top: 5px;
  color: darkred;
  font-size: 36px;
}

Above, the #right-column h1 style applies only to h1 elements that are inside the element with an id of #right-column.

Observe that the h1 style applies to the <h1> content differently in the right column. The color in the right column is darkred instead of orange which applies to normal <h1> elements, and the sizing is different as well:

An example of contextualised h1 styles

Reminder:

Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class element.intro Selects only

elements with class="intro"
* * Selects all elements
element p Selects all

elements
element, element, ... div, p Selects all
elements and all

elements
An open laptop showing Javascript on its screen

Basic text editing

When creating or editing code, the software you use matters. If you are copying code from a word document into a content management system, the code will have prescribed formatting.

When creating or editing code there are some editing tools that will eliminate the risk of copying over code that is tampered with.

Notepad++

Notepad++ is a free source code editor for HTML5, CSS3 and JavaScript, and it runs in Windows only.

How to format or prettify XML in Notepad++ ©Code2care 2012-2022

Notepad++ comes with a set of features that make it easy to work with and organise multiple files, catch errors as you code, and speed up coding by completing tags.

Some of the tools useful in Notepad++:

  • The ability to have multiple files open in separate tabs
  • Line numbering to simplify error tracking
  • Auto-completion for words, functions and parameters hinting.

Notepad++ has a growing number of plugins available. One of them being TextFX.

TextFX includes W3C validation to check HTML and CSS files for errors.

Sublime Text

Sublime Text comes with 23 different graphic themes and can download and customise custom themes using third-party plugins. In the top-right corner of the screen, the minimap feature displays a reduced overview of the whole file. Watch the following video on how to use some of the Sublime functions.

Visual Studio Code

Microsoft released Visual Studio Code in 2015 as an open-source code editor. On all main platforms, VS Code is accessible. This means that developers may use this highly powerful tool on Mac, Windows, and Linux. TypeScript, JavaScript, and Node.js are all supported natively. Its IntelliSense-enabled autocomplete delivers intelligent completions based on variable types, crucial modules, and function definitions.

Ultimately, the most significant text editor is the one that allows you to work most efficiently. As a beginner, try a few to find which one you like most. Finally, all text editors assist in achieving the same end goal. All that is left to do now is to find the editor who will get the job done in the quickest time.

Visual Studio Code is a free IDE that allows for code writing and looking for errors in the code. Learning to code can be intimidating, but this software is relatively easy to use. Visual Studio Code comes with basic HTML programming functionality out of the box. Syntax highlighting, IntelliSense smart completions, and custom formatting are all available.

Watch the following video that explains how Visual Studio Code is used.

Finding errors

Everyone in this country should learn to program a computer because it teaches you to think
Steve Jobs

When working with HTML5 and CSS3, there are certain rules that if not followed, can break a code.

That means that the computer will not understand the command you are making, and it can appear in different types of ways.

For example, when browsers encounter minor errors in HTML5 coding, a user could see an error message on the screen.

There are two main types of HTML errors:

  • Syntax error
  • Logic error.

1. Syntax errors

A syntax error is where the code has not followed specific rules. Basically, there are spelling or punctuation errors.

For example, if there is a missing comma, quotation mark or misspelling of a word.

HTML code in browsers will usually still work and not suffer because of a syntax error.

2. Logic errors

Logic errors are tricky to find. Logic errors might look like everything is working, but you have programmed the computer to do something wrong. So, the syntax is correct however, the code is not what you intended it to be.

You can avoid common errors for both CSS3 and HTML5 if best practice is applied. Take note of the information below. You can use it as a checklist to troubleshoot your code when an error occurs.

1. Missing out the Doctype Declaration.
<!DOCTYPE html>

The Doctype! Declaration is one of the most important tags of HTML code which specifies the browser that the document which is written is in HTML.

2. Not closing a tag.

Not closing a tag can often lead to broken or not properly running codes. There are some self-closing tags which may be left without closing. These are:

<html>
<head>
<body>
<p>
<option>
<dt>
<dd>
<li>
<thead>
<tbody>
<tr>
<th>
<td>
<tfoot>
<colgroup>
3. Placing the block elements within the inline elements.

The block elements in HTML generally consist of <div> tags or the paragraphs that collectively comprise the HTML elements' structure. Inline elements consist of elements which are placed inside of these blocks. Never put the blocks inside the inline elements of an HTML code.

For example, instead of placing the block inside inline:

<a href="#"><h2>Not correct</h2></a>

Always place inline elements inside the block elements:

<h2><a href="#">Correct</a></h2>
CSS

1. Adding "responsiveness" to the content, rather than the container.

If you add responsiveness to each piece of content separately, the content will be shuffled in the right order in the <body> tag.

2. Missing quotation marks.

This is important when creating font-family line of code.

.p1 {
  font-family: "Times New Roman", Times, serif;
}

3. Comments in a stylesheet.

You can add brief comments to your document as you create it. This will help break large set of styles into easy parts that can be searched, moved around and deleted when no longer needed.

Comments are denoted by slashes and asterisks both before and after the comment itself.

/* This is a comment and will not be displayed by the browser. */

Validator

Validation is the process of testing your pages with a special application that searches for errors. Validation makes sure the pages adhere to the current HTML and CSS standards.

Please remember that if the text editor or validator warns you that anything is wrong with the code, the problem may not be in the line of code that is being highlighted; it could, however, be in the line(s) above it. Because the site scans HTML and CSS from top to bottom, an error higher up in the stylesheet, for example, may cause parts further down to fail.

The following video will show how to look for errors by using a validator.

When unsure how to solve coding challenges, remember that code problem-solving is a talent that everyone can improve with time and practice. Fundamentals, data structures, algorithms, design patterns, and how things function is more vital information to acquire when it comes to programming because they can be applied in any programming language and environment.

Most code editors have a level of in-built validation. Another site that is useful to clean code is – Dirty Mark Up.

This website allows you to copy your code into the system, it will then clean the code.

Beans Coffee Shop is a local attraction, where Auckland locals have been getting their coffee for the last 23 years. The website should extend their in-shop look experience where clients can buy products, for instance, branded coffee mugs and different flavoured coffee beans.

You are asked to create the Our Story page for The Beans Coffee Shop website. Use the code pen application to create the page. On the page, you need to include the following:

  • Define document type
  • Page title in the Header
  • Paragraph element- telling the story of Beans Coffee Shop

Share your HTML file with others on the student forum to get some feedback from your peers.

Module Linking
M00194A
Main Topic Image
A digital nomad, seated outside, writing some code to deliver the feature they've committed to in their current dev sprint
Is Study Guide?
Off
Is Assessment Consultation?
Off