PART 1: Introduction to HTML & CSS

Lecture 1: HTML 5 Basic Structure

How to get started There are full-featured text-editing tools and website creation programs that can be used to speed up the process of writing web pages. But we won’t be using them. We will be writing our own programs using a text- editor. Wondering why? The reason is, to be a good programmer and to learn good programming practices, doing your own coding is the best way. When you eventually learn all that makes you a professional, you can choose to use these website creation tools to make your work faster as you can drag and drop and edit their HTML/CSS to get your desired result. To pass related certification exams, you have to be able to write programs yourself and understand the proper syntax, rules, dos and don’ts of each programming language. Most of the senior developers and programmers are the ones that understand how to write their own programs. Because HTML is the underlying markup language of the world wide web, taking this course and learning programming using a text- editor is the best start.

Its slower, but more understandable and fun. Eventually, you are going to be able to not just compete favorably in the development market but understand and use other web programming languages without much struggles. In this course, we are going to start learning from the very basic foundation. So if you have no prior programming experience, you are in the right place. We will be coding in HTML 5. because it is the latest and the future. Make sure you have a modern higher version of your browser.

HTML Basics The tools we will be needing for this course are a text-editor and a browser. In this class, I will be using notepad. Every file on the computer has an extension. When you see the.pdf extension, you know it’s a pdf file. The extension for an HTML file is either.htm or.html

The structure of HTML 5 HTML stands for Hypertext Markup Language. html documents are made up of elements and the elements are represented by tags. All tags begins with a less than sign ( ). The Start tag Every element has a start or opening tag. Its starts with the less than sign followed by the name of the element and ends with a greater than sign like this if the element has attributes that we want to use, we specify them in the start tag.

The End tag It is also known as the closing tag. It starts with a less than sign, followed immediately by a forward slash then the name of the element and the greater than sign. It is written like this Not all elements have end tags. Elements without end tags are called void elements.

Practical Open your text editor and write the following: Hello

Notice the first line of the code This should be the first line on each web page. it indicates the standard that the page complies with. Doctype declaration indicates that the code is compliant with HTML 5 and for older browsers that lack html5 parsers, the indication of doctype declaration triggers standard mode. The second line of the code is the element. It is between the start and end tag of the html element that all other codes are written. So the html element starts on the second line and is closed on the last line of the page.

the next tag is the tag. It holds special instructions for the browser. elements that are placed between the head tags are not printed on the page. One special instruction is the tag. The text you type between the opening and closing title tag is the text that will appear on your browser window. The final and most important part of the html is the tag. In between the body tag is where you write everything you want displayed on the webpage.

Saving a web page To save a web page, go to the file menu at the top of notepad, click on the save as option, set the save as type to “all files”. then type a name for your file. Remember to add.html or.htm extension to the name of the file you choose. Note that if the save as type is left on text document, then you won’t get a web page. you'll get a text file. if you also forget to put an extension, you will get a text file.

testing your web page Close the file and go to the location where you saved it. Right click on the file and select the “open with” option. Select your browser to open your file. And that’s it. You have your first web page.