Summary Time!

Time to rest a moment and reflect on what we’ve learned so far. By now, you’ve met many of the basic concepts required to create web pages.

We began by understanding how websites are built, with plain text that describes how individual parts work and compared them to how blocks are stacked one on top of the other.

With this analogy, we found that blocks correspond to HTML tags. All HTML tags are predefined and definitions, best uses, and synergies between other elements are standardized by the W3C organization. For example, if we need a paragraph of text, we use the <p> block. If we need an article, we use the <article> block. If we’re dealing with headers, we use hierarchies of <h1>, <h2>, <h3>, <h4>, <h5> or <h6> depending on the context. We know that the entire list of HTML tags can be found on the HTML specification.

We found that tags can be nested within one another. For example, the article for our page that consisted of a title, image, and paragraphs. These elements were denoted by <header>, <h1>, <figure> and <p>, which were then nested under the "parent" tag <article>. In HTML we try to think hierarchically. We build large blocks with smaller blocks and always put the most important blocks higher in the code than the less important blocks.

Then we found that websites with only this HTML code are visually unattractive. With CSS, we learned that we can target HTML tags and decorate them with special selectors. We know that if we wanted to get "all the paragraphs in an <article>, our CSS selector should be written as with properties and values that we want within the brackets.

article p {}

In addition, we learned that classes are a helpful component of CSS. Thanks to classes, we can modify HTML tags to be more robust so that we don’t always have to go to the CSS file and make changes when the HTML changes. Each tag in HTML can be given a class attribute, and these class names can be whatever you choose, but they should describe the function that it plays in the document. For example, in a press release, we can write this in HTML:

<article class="news">...</article>

The CSS code then should reflect those classes:

.news {}

In this way, we have learned the most important fundamentals of HTML and CSS. When building web pages, we always divide content into smaller parts and determine the function of elements. We try to be as specific as possible for even the smallest element, being able to code and describe things like menus, articles, titles, dates, paragraphs, quotes and pictures.

Always remember that HTML is a data layer while CSS is a presentation layer. It means, that HTML stores data information described by the use of proper tags, when CSS code has to visualize this data adding colors, fonts, borders and so on.

At this point you have probably asked yourself how one can publish a page on the web so your friends can see it. Being more precise, how does it happen that after typing functionite.com in a browser address bar, you actually see a website? It's simple. First off, you need to buy a domain which will be a virtual address of your own website. In above example, I had to register functionite.com. There are a lot of companies that make this process easy. All you need to know is a unique domain name that will be pointing to your website. After you have a unique id where your website is going to be available at, you need a web server to where you will upload your complete website. All images, CSS, HTML and other files must be first uploaded to that server, which is actually a special computer connected to the internet, that makes your website be accessible from any place in the world. Again, the web servers business is a huge market and you will certainly find a decent company that you can purchase a server space from. There are also companies that offer easy deals so you can purchase a domain and a web server access at once.