Link Search Menu Expand Document
HTML&CSS

Introduction to HTML and CSS

Class Agenda

  1. Introduction to HTML
  2. Introduction to CSS
  3. Comparison between HTML and CSS (could also be homework)
  4. Difference between Static and Dynamic Web Pages
  5. How does the World Wide Web work?

1. Introduction to HTML

This section covers the introduction to HTML and should give understanding of basic questions such as:

  • What is HTML?
  • What does HTML stand for?
  • Why do we need HTML?
  • Who and when created HTML?
  • Who maintains HTML?
  • What is the latest HTML version?
  • What is the difference between a Programming Language and a Markup Language?
  • What is the meaning of the word Hyper Text in the context of HTML
  • How do HTML rules and language look like?

Moreover, this section mentions basic HTML characteristics. HTML is an easy-to-use markup language that is platform independent and can be integrated with other web languages such as CSS and JavaScript.

A good linker between sections 1. and 2. is the question What cannot be done by HTML?

ETA: ~40min

2. Introduction to CSS

This sections introduces CSS and it’s purpose is also to give a solid foundational understanding of the following questions around CSS:

  • What is CSS?
  • Who created CSS, and when was CSS created?
  • Who maintains CSS?
  • What is CSS used for? See example explanation below.
  • What is the latest CSS version?
  • What does Style Sheet in CSS stand for?
  • What does Cascading in CSS stand for?
  • How does CSS rules and language looks like?

Furthermore, this section shows examples of how CSS can be used to apply different type of styling - apply colors, increasing font sizes, changing positioning.

Special attention is given to the CSS characteristics.

  • separation of concern - Allowing for different teams and people to write HTML / CSS
  • ease of use - saves time
  • reusability - One style rule or sheet can be used on multiple websites. Useful for company branding.

Also this section shortly mentions the topic of Browser compatibility, describing that one piece of CSS might not work on all browser and devices. A useful example is the MDN browser compatibility table.

ETA: ~45min

3. Comparison between HTML / CSS

This section is a natural follower to section 1 and 2. This sections does not contain extra information but is is used as a summary of the previous ones. Therefore, it is a good candidate for homework

Homework: Create a table in which you compare HTML and CSS. The table should contain the similarities and differences between HTML and CSS.

4. Difference between Static and Dynamic Web Pages

This section teaches students the difference between static and dynamic web pages without going into too many details such as server rendering, database usage, etc. The idea behind is that students understand the difference between a static HTML website which always remains the same and a website which changes during execution time or is different from user to user (e.g. Facebook). The goal of the section is to set the right expectation to students about what they are going to learn about and about the Project CV website that their going to build.

ETA: ~1-2min

5. How does the world wide web work?

This section reveals the “magic” behind the world wide web. Students should get familiar with how browsers get information from servers and turn it into websites.

ETA: ~15min

Glossary & Terminology

  • Browser compatibility - Browser compatibility is the ability of a certain website to work on different browser types and versions. In other words, when asking the following question, for example: “Is this CSS rule compatible with Internet Explorer 9?” we want to know whether the CSS rule will work on the Internet Explorer 9 browser
  • Cascading - The term “cascading” in the context of CSS describes the process of combining several style sheets and resolving conflicts between them.
  • CSS - Cascading Style Sheets is a language for styling web pages
  • Dynamic web page - A dynamic web page is a web page that can change its content when running in the browsers or show different content to different users.
  • HTML - Hyper Text Markup Language is a language for creating web pages
  • Hyper Text - Hyper text is a special text that just forms a link, that allows a user to click on it and get redirected to a new page referenced by that link. So it is a special text that just forms a link
  • Markup language - A Markup language is a simple human-readable language which is used to make the so-called “notes” to the computer program (e.g. the browser)
  • MDN Web Docs - MDN stands for Mozilla Developer Network. The MDN Web Docs is a website which provides information and documentation about Open Web technologies such as HTML and CSS.
  • Programming language - A Programming language is language in which we have set of instructions that are combined together in different ways in order to create a certain software program, for example. When we start this program it will follow our instructions and will receive input and compute some output.
  • Specification - A specification is a collection of rules and requirements that form a certain technical standard. For example, W3C maintains the specification of HTML. In other words, W3C defines how HTML looks like and what its rules are.
  • Static web page - A static web page is a web page that always remains the same. All users in all browsers will see the same page and the functionality of the page cannot be changed when the web page is running in the browser.
  • W3C - W3C stands for World Wide Web Consortium, which is the main international standards organization for the World Wide Web. It maintains HTML and CSS specification (i.e. rules)
  • W3Schools - W3Schools is another useful website which provides documentation for HTML and CSS

Homework

  1. Reach checkpoint2 if you haven’t done so in class. Please use your own website title including your own name.
  2. For next session please create a table in which you compare HTML and CSS. The table should contain the similarities and differences between HTML and CSS. It could be in written form or in digital form.
  3. Make yourself familiar with the MDN Web Docs website and with the W3Schools website as they are good source of documentation
  4. (Optional) Read the story behind creating CSS at https://www.w3.org/Style/CSS20/history.html

Resources

The following articles are good starting point for reading about HTML and CSS. Please keep in mind that some of the articles might go too much into details and cover topics that you would learn in upcoming sessions: