iCodeAcademy - HTML & CSS For Beginners: Your Step by Step Guide to Easily HTML & CSS Programming in 7 Days

HTML & CSS for Beginners

Your Step By Step Guide To Easily Learn HTML & CSS Programming In 7 Days

I n no way is it legal to reproduce, duplicate, or transmit any part of this document in either electronic means or in printed format. Recording of this publication is strictly prohibited and any storage of this document is not allowed unless with written permission from the publisher. All rights reserved.

The information provided herein is stated to be truthful and consistent, in that any liability, in terms of inattention or otherwise, by any usage or abuse of any policies, processes, or directions contained within is the solitary and utter responsibility of the recipient reader. Under no circumstances will any legal responsibility or blame be held against the publisher for any reparation, damages, or monetary loss due to the information herein, either directly or indirectly. Respective authors own all copyrights not held by the publisher.

Legal Notice:

This eBook is copyright protected. This is only for personal use. You cannot amend, distribute, sell, use, quote or paraphrase any part or the content within this eBook without the consent of the author or copyright owner. Legal action will be pursued if this is breached.

Disclaimer Notice:

Please note the information contained within this document is for educational and entertainment purposes only. Every attempt has been made to provide accurate, up to date and reliable complete information. No warranties of any kind are expressed or implied. Readers acknowledge that the author is not engaging in the rendering of legal, financial, medical or professional advice.

By reading this document, the reader agrees that under no circumstances are we responsible for any losses, direct or indirect, which are incurred as a result of the use of information contained within this document, including, but not limited to, errors, omissions, or inaccuracies.

HTML is an acronym for Hyper Text Mark-Up Language. It is the main programming language used to develop websites. It acts as a framework of sorts where different elements like color, video, images, flash animation, etc. could be added later on.

This book will help you understand HTML's syntax and semantics, which will allow you to create a website completely from scratch. We'll teach you how to lay down the foundationsthe backboneof a website and then add aesthetic elements later on using Cascading Style Sheets or whats commonly known as CSS.

Back in the day, website creation and development would only go as far as one's imagination. Website developers of yesteryears had to get specialized education just to be able to learn a programming language and start developing websites, applications, etc. This was an extremely grueling process and would often times become the deterring factor for students. However, when HTML was introduced, website creation and develop got a whole lot easier.

Because of HTML's simplistic syntax and semantics, it significantly reduced a website's creation time by a considerable amount of time. In addition, most developers of today make use of HTML editors that have features like predictive input, which lessens coding and debugging time significantly. Helpful as these HTML editors may be, keep in mind that these programs are not foolproof and their effective still solely depends on the person wielding them.

This why knowing and fully understanding HTML is still crucial in being an effective and efficient website builder. HTML editors usually offer an auto-correct feature which saves you the trouble of looking through long lines of code just to find the syntax error. However, there may be times when it'll perceive something as an error even though its actually not. This is what most programmers call a false-positive. To prevent any false-positive changes made by an HTML editor, you may have to implement your desired changes manually. Doing this will obviously require an intermediate level of understanding of HTML.

If you're planning to create, develop and host your own website. Prudence requires you, the website owner, to at least have an intermediate level of understanding of HTML. Having a firm grasp of HTML's syntax and semantics allows you to effectively translate your vision of how you want your website to look like into code. Also, as a website owner who understands HTML, you have two advantages. The first advantage is that you won't be restricted to just whatever an HTML editor dishes out. Second, since you understand HTML yourself, you won't have to call and hire a web developer just to apply some minor changes into your website.

With that in mind, let's go ahead and start your HTML journey.

H TML describes itself as a mark-up language. In fact, it is an acronym for Hyper Text Mark-up Language. What does it mark-up and what does it use to mark-up elements? In HTML, marking up website elements such as video, images, and text-based content are done with the use of tags.

Tags are basically markers that distinguish particular content from others within an HTML file. Marking content with tags usually involve enclosing the content within an opening tag and a closing tag. HTML makes use of a variety of tags to distinguish different kinds of content in a website; all of which we will be discussing in detail in the preceding chapters of this book.

Back in the day, about 90% of a website's core is written in HTML. Aesthetic elements such as colors, shapes, forms, etc. were also handled by HTML. Everything was put in one basket, so to speak. This made debugging tedious and confusing, since the number of tags and attributes that a programmer must look into are overwhelming. This led the powers that be to create an HTML sub-component that would solely deal with the aesthetics of a website, while HTML exclusively handled the laying of a website's framework. This is how CSS or Cascading Style Sheet came to be.

Think of HTML as a website's skeleton and muscles, while CSS is a website's skin. CSS per se is a sub-component of HTML. However, CSS may also be regarded as a separate entity. It is separate in a sense that it has its own syntax and its core code is not entirely included in the main HTML document.

Incorporation of CSS in an HTML document is done through the use of CSS descriptors. How to use HTML and CSS together will also be discussed in the later chapters of this book. So, without further ado, lets get started in making an HTML document.

To start making a basic HTML file or document, you must first create a file type declaration tag at the top. Look at our basic HTML document below:

2This is how to start an HTML document!

Before we proceed, keep in mind that the number that precedes each line of our HTML code are put in place to serve only as a guide when pertaining to a specific line of code. It is not included in the actual HTML code.

Moving forward and looking at our HTML code above, we started our HTML file with the tag in line one. This tag's sole purpose is to tell the browser that the programming language that it's about to read is HTML.

Mozilla Firefox, Google Chrome, Microsoft Edge, Microsoft Internet Explorer, and Opera are just a few examples of browsers that can interpret HTML code. The tag is what's called as an all-encompassing tag. It doesn't require any closing tags since it encompasses the entirety of the HTML document regardless of its size.

In line two of our code, we started the main body of our HTML file with the tag. As what was previously mentioned, tags usually involve enclosing website elements within an opening and closing tag. In our HTML code's case, We've enclosed a simple text-based content between an opening tag and a closing