HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 1: What Is HTML? A Brief Overview

Hyper Text Markup Language or HTML is in the simplest terms the standard language that web browsers read and render into visible and audible web pages. HTML is not a complex programming language and can be learned considerable fast. Pretty much everything you see on the internet is a .html file. And these files contain tags and elements. For now think of tags and elements as the building blocks of your web page. In order to create a website you link your .html files to one another. So when you click on a home button on a web page you are actually clicking on a link to another .html file in their website directory. HTML and CSS is basically a giant toolbox at your disposal that you can use as much or as little of as you like. And it is always evolving. So there are more and more tools added to your toolbox all the time. HTML is just a text document. Before we move on I'd like to point out that if you are reading this book on a tablet it is best viewed in landscape mode. It will be a little easier to read the code sections.

This is just a visual example of an HTML document so you can get an idea of what your work will look like before we start.

<!doctype html>

<html>

<head>

</head>

<body>

<h1>Welcome to my web page!<h1>

<p>This is an example of a few tags and elements inside of a basic web page.</p>

<h2>Header 2<h2>

<p>This is how you would make a paragraph element</p>

</body>

</html>

Above is a very basic example of an HTML document just to give you a visual before we dive into other things. But as you can see it's nothing but a text document. This example is basically the framework of any web page. We will go over all of this and what each of these lines of code mean later. But just so you have an idea if you have never seen HTML before. This is all it is. Pretty simple right? It is just plain text instructions for your browser to read. No Greek. But before we actually get into the coding I'd like to explain to you what the individual parts of the code are. And one important thing that I want to touch on here real quick is the first line. <!doctype html> This line here is not an HTML tag. All this line does is tell the web browser about what version of HTML the web page needs to use. This is specifying HTML5. But this isn't something you really have to worry about anymore. In the past, because there are multiple versions of HTML you had to specify what version you were using. They eventually made this universal with this one code. You just have to make sure that you put it in as the first line of every HTML page that you create. The only time that an issue might arise from not specifying the HTML version is if a user is trying to view your page in a really old version of their browser. For example if someone hasn't updated their browser in years and their running Internet Explorer 7, your page might not display the way you wanted it to. But I wouldn't worry about this. As long as you have this line you should be fine. By the way the different versions of HTML basically are the same thing with updates or add ons. Like we talked about above HTML is like a giant toolbox for you that keeps getting more stuff added to it with new and improved tools to make your life easier.

What You Need To Start Coding In HTML And CSS

All that you need is a text editor. So you can simply use Notepad for PC or TextEdit for mac users. But I recommend downloading notepad++. It is a quick download and will give you a ton of benefits for writing your code like syntax highlighting. And that is basically just coloring you text in a way that makes your code much more readable. This is especially helpful for whenever you want to go back and edit you code. If you are a mac user, textwrangler is a good choice. But this is up to you.

Tags And Elements

Here is an example of an HTML element: <p>Welcome to my web page!</p>

·-The <p> is called the starting or opening tag.

·-The text Welcome to my web page! is called the content of the element.

·-The </p> is called the ending or closing tag. (Notice the addition of the forward slash / ). This is what tells the browser that this is an ending tag and to move on to the next element.

·-This entire code, the opening tag, the content, and the closing tag is called an element.

Also tags are not case sensitive. So <body> means the exact same thing to the browser as <BODY>. It is good practice to use lowercase characters in your tags. And when your going to create an element write both the opening and closing tags first, then fill in the content. This way you won't forget to close it. Your browser will read your HTML from top to bottom so you don't want to have your tags crisscrossing each other. Indenting is a good way to organize your code and we will get into that later. Another benefit to notepad++ is if you click on a tag it will highlight the other tag that it's connected too. Again this will make more sense when we get into the actual coding. There are a few different types of tags as well. But this is the most common.

Tag Attributes

An HTML tag can have attributes. An attribute is a modifier of the tag it is in. They are always put in the opening tag and generally have a name and a "value". For example:

<p align="center">The text in this paragraph is center aligned.</p>.

·-The name of this attribute is align. Then we add an equals = sign.

·-The value is "center". And the value is always put inside of double quotes.

·-This attribute will center the text in between the tags when it is displayed on your web page.

·-So you are telling the browser when it displays this text that you want it centered in the middle of your page.

Take note that the closing tag does not contain any part of the attribute. Attributes only go in the opening tag. Never in the closing tag. And tags can have multiple attributes as you will see later in this book.

Quiz Chapter 1

1.What is HTML?

2.What is a tag and an element?

3.What is the difference between an opening tag and a closing tag?

4.What is the first line that you write in any HTML document?

5.What does a tag attribute do?