The Web is not the Internet. The Internet is a physical network of computers, initially developed for military reasons by the US in the late 60s. The Web came much later, in the early 90s, and is one of many applications of the Internet that provides and share content on the network. It simply consists of a *protocol* with which *clients* (browsers) can ask for resources stored into designated *servers* (websites).
While at its basics a website could consists of simple text files, modern complex websites typically use at least the following programming languages:
- **HTML**: structure, metadata, content
- **CSS**: style: typography, colours, background, images, layout, responsiveness
- **JAVASCRIPT**: interactivity, client side script
- **PHP** (or **ASP**, **Perl**, **Python**, **Ruby**): dynamics, database integration, server side script
Likewise, you can use a simple text editor to write down the code needed to support the website, but it's much more productive and enjoyable to use a dedicated tool, like the free, open-source editor called [Brackets](http://www.brackets.io).
---
## HTML
HTML stands for *HyperText Markup Language*. The basics of HTML all revolves around the concept of **tag**, keywords used to identify content on the page. Most HTML pages are content of some kind that is *marked up* using HTML *tags*, defining how the client should format and display the content it includes, or it points to.
The tags are HTML *keywords*, called **elements**, wrapped up into a less-than sign on the left and a greater-than sign on the right. Most tags support some type of content, and so need a closing tag which is that "less-than, slash, element, greater-than". Besides these container tags, there are *empty* tags, that have no content, so don't need a closing tag.
Inside the opening tag, there often are **attributes**, *name*:"*value*" pairs, that better qualifies the action of the tag itself. There are *global* attributes that are shared by most or evene all tags, while some are *specific" to one or a few tags only. Moreover, tags could be only *informative*, or *functional*.
Tags can be nested inside each other, but they can not overlap.
HTML is white space insensitive, every space one are completely ignored.
Neither the names of the files, nor the names of any of the folders within a website can contain spaces. The first letter of a file or folder name must be either a letter or an underscore character. Subsequent characters can be letters, underscores, numbers, or dashes. So if your file or folder name needs to be more than one word, you either need to squish it together as a single word, or separate the words with underscores or dashes. Your home page, the page that you want to show when a user first visits your site, must be saved as "index.html"
There are four *special* tags that are always needed, and in a predefined order, to form the basic structure for *every* HTML file:
- `` defines the document as a web page. It also identifies the beginning and end of the HTML document. All other tags must fall between the html tags.
- `` defines the header, that contains mostly *metadata*, information about the document that will not appear on the actual page, such as the title of the document, the author, the character encoding, which stylesheets or scripts to use.
- `` the text that will appear in the title bar of the web browser. The title must appear between the head tags.
- `<body>` includes all the visible content on the page.
There are two main types of *content models*, that help user agents know what type of content to expect within an element. The first, designed prior to HTML5, consists only of the following two levels:
- **block** elements take up their own line within the flow of the document, so they stack one on top of each other
- **inline** elements appear within the flow of other content.
The increased emphasis on semantics and structure in HTML5 has actually led to the expansion of content models into seven main models, help authors create more sophisticated document structures and to write more meaningful code:
- **flow**:
- **metadata**: content that's defined as setting up the presentation or the behavior of the rest of the content. You're going to primarily find these elements in the head of the document. And it's going to contain things like metatags, no-script tags, script tags, style tags, the title tag of pages
- **embedded**: any content that imports other resources into the document, like canvas and iFrame, object SVG, video, the embed tag.
- **interactive**: any content that's specifically intended for some type of user interaction, like the anchor or link tag that people would click on, or the button and any form control if the user can interact with. There are also audio and video if they had some controls enabled.
- **heading**: defines the header of sections, which can be either explicitly marked up with sectioning elements or it can be applied by the heading content itself. It only includes the heading tags.
- **phrasing**: the text of the document, as well as any elements that are used to mark up text within paragraph level structures. So in a lot of ways, phrasing content is really the same as what used to be inline level elements from the HTML4 specifications.
- **sectioning**:
It's worth noting that these new models haven't done away with the previous concepts of *block* and *inline* level elements. They've just moved that functionality inside of these new content models, so that some of them behave as block level, while others can behave as inline level elements.
Simple template:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="wahat's the page is about">
<title> Title text
```
### Main tags
- `` comment
- `