Exercise

Open up your index.html document and work through your content applying ids and classes to your divs where you see fit. Then move on to your other elements and continue to apply ids and classes where appropriate. Remember you can apply ids and classes to inline elements as well as block-level elements.

Putting it all together: creating your first website

Part 1 has seen us learn the core elements of the HTML language. We got to grips with the syntax of HTML and how we structure our content. We tackled text, images, links and lists. We saw the use and power of a web form before creating our own version. We now understand how divs help us to break up our content and how powerful giving divs an id and/or class can be. At this stage, you have learned enough to structure a full website complete with all the typical elements we see across the web today. You have understood the use of hyphens in class names and understood the importance of setting logical ids and classnames. This principle extends further than just HTML into other programming languages. You are now well on your way to creating your first fully functional website, and becoming a certified web developer.

We have learned a lot in this section, so let’s now consolidate what we know and use it to start to build our actual website. You can use the index.html document that you have created so far as a reference along with this book to help you through the exercises.

We will now run through each of the topics we have covered in this section and outline an exercise to be completed on that topic. You should download the source files from http://indigomelody.com/ABCDEFG to use in the exercises. Now is your chance to put everything we have learned into practice and create your first full HTML webpage. By the end of this you will have created the first of the three parts to your first fully functional website, as such.