How-To(s) Beginner Web Development

Learn HTML and CSS – An Unconventional Guide – How To Make A Website (Part 3)

The topic Learn HTML and CSS is no rocket science and can be quickly learned even without programming knowledge. The previous articles of “How to Make a Website” dealt less with the technical implementation of creating a web-page. Now the time has come closer to sit down with the technical implementation apart. This guide is meant to show how HTML and CSS is working in a practical way. This counts the motto “Learning By Doing”. To perform the instructions, you need no server or other Hosting Provider. A browser (preferably Chrome or Firefox) and an HTML document is needed only.

The roadmap to learn HTML and CSS quickly and easily is as follows:

  1. What is HTML and CSS
  2. Learn HTML and CSS on a practical way – The quick and easy way
  3. The structure of HTML
  4. CSS rules – The construction

What is HTML and CSS

Often it is said that for HTML and CSS skills in programming are required. This is absolute nonsense. Why? Because HTML and CSS are no programming languages, but markup languages.

Building HTML is as easy as creating a well-structured text

What has HTML to do with a well-structured text? Now, HTML give the content a structure and a semantically sense, nothing else. The only difference between content created by a desktop software and creating text in html is: You need to know the semantically meaning of each HTML element. Of course, you have to know which elements are available, but this is another task. Second you have to know how to place content between the HTML elements.

The only task of CSS is to adjust the display settings of HTML elements. Thus, it is only necessary to know the syntax of CSS statements and the possibilities of changing it. Due to the number of css statements it will not be discussed here. However, at the end of the article references are stored in which all options are described (for HTML and CSS).

The guide also does not address all the elements, since it is first necessary to know the basic features of HTML and CSS and how to practice it easily with current visual effects. Therefore, in the first field it is important to know how to learn HTML and CSS and practice it quickly and easily. The following described technique give you visual results immediately.

Learn HTML and CSS – Preparations

Before one explores the topic CSS, HTML should be understood this first. Therefore, HTML is the first part we are looking at. Only then CSS is considered in more detail. As discussed, the focus is on the basics of both. Because without understanding the basics it makes no sense to go in the details.

As already mentioned, HTML is used to structure content and distinguish semantically (semantic). The following code shows the basic structure of an HTML document and is used in the guide for the presented the technique:

 







The (Main) Headline Of The Document

An Introduction

Paste the code in a text-file using an editor, and save the document as [your_file_name].html. For getting more convenience for creating HTML and CSS, I would recommend to an editor that helps you at this issue. For beginners I would recommend Notepad++. The editor provides suggestions to HTML, stylesheet commands and other languages, which can save time.
Then open the file in a browser (Firefox or Chrome; double-click or open with…). You will see a page with the text “The (Main) Headline Of The Document” and “An Introduction”. So, it is the document you have just saved.

Learn HTML and CSS on a practical way – The quick and easy way

Now, before the individual elements of an HTML document will be described I want to show one way in which changes can be made directly in the browser without making any changes to a document. This technique can be applied to both, HTML elements, as well as for CSS rules. Personally, I prefer Chrome for this technology and for this guide the browser is also used. Of course you can also use Firefox or Oprera.

Although I strongly assume that you want to know how HTML and CSS work, but the method presented here is really important. Finally, you should know how to move ahead more quickly. With the featured technique you can also manipulate other websites in the browser. For example, you could make hidden elements visible which would be hidden in the normal case. Of course, all changes are only in your browser available, so reloading of the page would make the changes to not. However, the technique is especially helpful for debugging. Therefore, the technique is preferred before the description of HTML and CSS. You can of course use other techniques to learn HTML and CSS. In my opinion, the method “Learning By Doing” is much more effective, whether you learn HTML and CSS or another technical language.

Once the document is opened in the browser, make a right-click with the mouse in the document and select the item Inspect Element, also called Examine.

1.) Learn HTML and CSS - Investigation of HTML and CSS by Chrome
1.) Learn HTML and CSS – Investigation of HTML and CSS by Chrome

By selecting “Inspect element” the lower layer will be open. Here are various areas classified. Figure 1 show the important elements to access HTML elements and CSS rules of the current document. Now three things can be done with HTML elements. It is possible to insert new elements into the document (1), items can be moved (2) and elements can be visually adapted to (3).

Add, move and delete HTML

First new text should be inserted in the current document. For this, a Lorem Ipsum Generator is used which generates text automatically.

2.) Learn HTML and CSS - Add new html elements
2.) Learn HTML and CSS – Add new html elements

By right-clicking with the mouse the item “Edit as HTML” should be selected, which makes the element and its child elements editable (as text field). Do not worry, the topic child elements will be described later in more details. In the text field you can edit each element, add new text or delete it. The following code is added after the item

An Introduction

:

An Awesome Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

It can be seen clearly that it is relatively easy to make changes to the HTML structure in the browser. Of course, it would also be possible to make changes in the document to carry out. For this purpose, however, after every change the page in the browser has to be reloaded to see the changes. Otherwise, if the entire document in the browser should be replaced after many changes, the first element () should be marked as edited. Then highlight everything, copy the contents in the document and replace it (do not overwrite  ).

The action of deleting and moving is also an easy procedure. To move an HTML element, the element has to be selected with the mouse. Press the left mouse button and push it to the desired location. Elements can be removed by pressing the Delete key on the keyboard (Del).

How to make CSS changes

Changes of so-called stylesheet rules on items are also relatively easy to set. The defined styles one HTML element can be found on the right side of the lower layer (see Fig. 1). Changes can now be addressed in different ways:

  1. creating new css statements
  2. editing a previously existing css statements
3.) Learn HTML and CSS - New style rules
3.) Learn HTML and CSS – New style rules

Figure 3 shows the possibilities to adapt stylesheet rules for all elements. Again, there are the changes only in the browser. Desired changes must be added to the HTML document. There are two possibilities, either the statement could be placed in the document (between), or it could be put in a separate file and loaded in the document (suffix of the file is .css).

The technique which is presented here, is particularly helpful to learn HTML and CSS, as well as to practice it. But it also helps to check changes quick and easy and thus to check all existing CSS rules of an element. So troubleshooting rules could be found very quickly. I suggest you really to take advantage of this great way.
Now it is time to get a little closer to HTML.

The structure of HTML

By looking at the structure of HTML you will quickly find the general structure: HTML elements are nested. This means that HTML elements can be integrated into another HTML element. Thus, almost any HTML element have a father element, but it can also have equivalent HTML elements (so-called siblings – all the elements are in the same plane) and can have child elements. The elements

and

in our document are siblings to each other. All elements which are enclosed by these elements are their child elements. It should also be noticed that an element generally gets closed by . Thus, a

element (stands for paragraph) is closed over

closed. Stopping or closing of elements is very important, so that the browser, search engines, etc. know that this element and its information are completed. There are still exceptions: elements that can not or may not contain any other elements. This includes the image element (), which is closed at the end of the tag by />.

In addition, HTML elements can still have attributes, where some attributes are required and others are not. The following example will explain the case in detail:
There should be a specific image displayed. The name of the tag is . An image may include any additional content, therefore, the an image element could look like this: My Caption. If the attribute alt is now missing, the image would be still displayed. However, if the attribute src is missing, the browser would not know which image should be loaded. Thus, the src attribute is really important for an image element and may not be missing.

How to mark HTML elements

Marking HTML elements is an important feature for websites. About flagging elements, an HTML element or, depending on the marking type, several elements can uniquely be identified. So, the question is: Why should elements be marked? Especially for defining style rules for specific HTML elements it is necessary. But for JavaScript, it can be very helpful, too.

A variant of the marker you have already learned, the allocation of classes, s.

. All elements can include the attribute class and could have multiple classes. Classes are separated by spaces. The attribute class=”main-content left-side” would have the class main-content and left-side. All elements may have the same class. That’s a big difference from the way and allocation of identifiers (id=”your-id-name”). The granting of an ID means that in a document the assigned ID occurs only once, or can occur only once. It is a marker for a unique element in the document.
Note that for this case, because otherwise it can cause CSS irritations or JavaScript does not work correctly (if you use JavaScript later, it is important). Maybe it would make more sense to mark the element

. Finally, there is normally only one main content in a webpage. However, it is always at the discretion of the “author or authors” of the documents how such elements are marked. For browsers the definition of classes and IDs are not important.

CSS rules – The construction

You have learned that HTML is not as difficult to understand as you thought before, isn’t it? Since a website is supposed to look after something you want to know how to create css rules and how they work. About the so-called CSS statements the appearance of elements may be affected. To know the general structure of CSS statements is important for beginners. Second, on which element has a css rule an effect and what happens when the same instructions are specified on the same item in different ways.

For answering it, three instructions are used:

  1. div, div p.left-side {font-size: 120%; color:blue;}
  2. .left-side {font-size:130%; color:green; float:left; width: 200px; border:solid thin black;}
  3. #main-content {font-size:150%; color:red;}

All three statements would fit to

. The general structure of an instruction begins with the definition of the elements, so-called selectors, which are to be affected by the statement. The first instruction change all

elements. Statement two has an effect on all the elements with the class left-side. The third statement changes the visual appearance of an element when it has the ID main-content. So, add the css-rules to the browser. At the same time, you can add other HTML elements with the class left-side to have a look on the changes.

The instruction to the selected items are enclosed by the so-called brackets. After the designation of a statement a colon has to be added, followed by the at the current value. The statement is finished by a semicolon. The same statement can be applied to several elements. Here, the selectors are separated by a comma.

Which CSS statement applies now?!?

If you have tried the instructions in the browser, then you will have noticed that instructions have different priorities. The instruction on simple elements has a lower impact than a statement of ID selectors. An even higher priority definitions have selectors with classes. If other elements are used as a selector (see point 1.: div p.left-side), the priorities are shifting again. The more elements a selector has, the higher is its priority. You should double-check the various options in the browser and look at the shifting priorities. If exactly the same selectors with the same instructions are existing, but different values are used, then the last defined instruction is used. It overwrite the previous rules. You should remember this every time. But with the technique described above, it is easy to find out, which statement has an effect and which not.

Learn HTML and CSS – The Next Steps

You have now understood how HTML and CSS work. To really get ahead now you should learn more about HTML and CSS. So it is necessary to know which HTML elements are all existing and when it makes sense to use them. The same applies to CSS. There are a high number of CSS commands. I recommend this HTML tutorial and CSS tutorial. In the left sidebar of the tutorials, the respective issues are cataloged. Take advantage of the above technique you have learned helps to practice all of it. Because it is in the field “Learn HTML and CSS” as well as with other things: “Practice makes perfect”.