HTML - basic - Lesson nr. 1
Introduction
This lesson will show us how the structure of a basic website looks like and what kind of applications, files we need to start our project.
• The files of a website must be placed into one folder, also called the root folder, because they “need” each other to function properly.
• A website is built up from multiple files and document.
• In a website’s root folder we may find files with .html, .css, .js extensions and additional folders, which may contain images, documents, sound files, all used and shown in the website’s content.
On the picture above, we can see an example for the content of a website’s folder.
The files folder contains the images, documents or sound files.
The functions.js file contains JavaScript code, which is used to manipulate or animate the HTML and the CSS of the website, therefore making it interactive and more interesting.
The index.html file contains the content of the website and its structure/skeleton, made up with HTML tags. A website may have more HTML files, but when it’s opened in a browser, the file which is always shown first, it’s the index.html file.
The style.css file contains the formatting applied to the content: colors, sizes etc.
The .css and .js files are written in separate files, because of reusability. That way, they can be used in multiple places and on any change, you’ll have to modify only in one place, not in all of them.
• When creating a website, the first thing we need to learn is the HTML markup language. We need the HTML language to organize, build a structure for the content of the website. It is an abbreviation of HyperText Markup Language.
• The HTML language uses tags that appear mostly in pairs: before and after of a text. The tags affect this text according to their “meaning”.
Ex: the <p> marks the beginning of a paragraph, the </p> marks the end of it,
the <h1>, </h1> marks the main title, the heading.
• HTML documents can be modified, created with simple word processing applications like Notepad or Notepad++. It’s suggested using Notepad++, because it’s free and made specially for web development, as it has syntax highlighting.
• The interpretation of HTML tags and visualization of websites is the role of a browser.
Example: Mozilla Firefox, Internet Explorer, Google Chrome, Opera
Downloadable files
Exercises
1. Search for Notepad++ on your computer. If there is no such program, download and install it from the following site: https://notepad-plus-plus.org/
2. Download the basic website, which you will need in the following lessons. The files are compressed, you have to extract them.
Questionnaire
1. Which file contains the structure of a website?
2. What does hypertext mean?
3. Which program is a browser?
4. Which symbol is used in the closing tags of the HTML language?
5. Which one of the files from the list below must necessary exist in a website’s folder?
Supplementary information
