Introduction

To write html code all you need is a simple text editor like notepad++ in windows or textWrangler in mac.


You can also use an IDE short for integrated development environment. An ide will makes things easier for you, because it provides code completion, code hint, debugging, and much more.


There are lots of ides from which you can choose from but I would recommend Netbeans, Eclipse, or Dreamweaver this one is not free.


HTML is a markup language used to structure web documents. HTML stands for hyper text markup language.


HTML files have a .html or .htm extension.


By the time this tutorials were made April 18, 2016 HTML5 was the latest version of html. The stable version was published on October 28 2014 by the World Wide Web Consortium (W3C)


HTML tags tell the browser about the structure and meaning of your content. HTML tags are always enclosed in angle brackets <> for example:


<tagname>


An html element consist of an opening tag, content, and a closing tag for example:


<tagname>HTML is easy</tagname>


There is also html void elements. This elements do not have closing tag for example:


<elementname>


Below is the global structure of an html document every web page is structured this way:


  • HTML
1
2
3
4
5
6
7
8
9
<!doctype html>
<html>
 <head>
  <title>Global Structure</title>
 </head>
 <body>

 </body>
</html>

Indenting your code is optional


<!doctype html> the doctype declaration tells the browser this is an html document, and the version of html that we are using which is html5.


You may also encountered the doctype declaration written like this <!DOCTYPE HTML> OR <!DOCTYPE html> and they are both valid because the doctype declaration is case insensitive.


<html> tells the browser this is the start of the html, and that your document is html.


<head> provides information about your web page, like the title of your page, styles, and scripts.


<title> defines the title of the document, usually appears at the top of the browser window.


<body> contains all the content and structure of your web page. The parts of the web page that you see in your browser.


Comments are notes for you or other developers. Comments are ignored by the browser, below is the syntax for a comment:


<!-- -->


An attribute defines a property or adjust the behavior of the element. Attributes are always written the same way: first comes the attribute name, followed by an equals sign, and then the attribute value surrounded in double quotes for example:


attributeName="attributeValue"


The <meta> tag element tells the browser additional information about your web page using attributes. <meta> tags are always placed inside the <head> element.


although this are html tutorials, you will also learn some basic css along the way. We are going to be using external css to keep our html code organized and separate from the css, using this approach makes your code easy to understand and maintain.


  • HTML
  • CSS
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="en-US">
 <head>
  <meta charset="utf-8">
  <title>First web page</title>
  <link rel="stylesheet" href="first_page.css">
 </head>
 <body>
  My first web page. The html journey is about to begin.
  <!-- I'm ignored by the browser, do you know why? -->
 </body>
</html>
1
2
3
body {
  background-color: green;
}

The <link> element is used to link in external information. The <link> element has no closing tag, because is a void element.


The rel attribute specifies the relationship between the HTML file and the thing you’re linking to.


The href attributes specifies the location of the css file.


The lang attribute specifies the language of the content of a web page


The charset attribute is used to specify the character encoding of a web page. utf-8 is one of the unicode encoding in unicode family of encodings. utf-8 is the default encoding for web pages.


The css background-color property specifies the background color.


In the css tab we select the body element and change the background-color to green.