HTML & CSS

HTML & CSS Tutorial

July 16, 2018

In this tutorial you will learn the basics of HTML and CSS to create your own web projects. Instead of working through rather boring theory we will immediately start with a project.

The theory will be explained as soon as it is necessary for our project. This way you will quickly gain a solid foundation for web development. In various places I will provide links to other resources that dig deeper into specific subjects.

The Project

The project we will build is a personal web portfolio. The portfolio contains a start page, a blog, a page to show off your future web projects, and a contact page.

Basic Concept

The basic concept of this tutorial is to get you started with web programming and help you learn how to find further relevant information on your own. You will then be able to tackle web projects of increased complexity!

What are HTML and CSS?

HTML (Hypertext Markup Language) is responsible for the structure of a web page. For example, you can define headings, paragraphs, texts, and images in HTML.

CSS (Cascading Style Sheets) is responsible for the style and layout of a web page. You can define styles, such as colors, fonts, margins, and you can even create simple animations in CSS.

Both languages, HTML and CSS, are independent and should be saved in separate files.

Remember: HTML provides the content while CSS defines the styling of the content.

Website or Web Application

You can create very complex websites with just HTML and CSS. But those websites will be static, which means visitors can view the pages but don't have a way to interact with them (except by clicking on links).
To program dynamic websites that are interactive, we will need an additional language like JavaScript or Dart. With those languages you can develop entire web applications where visitors can do calculations, play a game, or use a chat, for example.
Once you have completed this HTML and CSS tutorial, you can start learning Dart or JavaScript. If you want, you can soon build your own dynamic web applications.

Mobile

Today, a large portion of website access is done through mobile devices like smartphones or tables. Therefore, it is essential that our website looks great on small displays. We will certainly take care of this during this tutorial.
Even in subsequent tutorials where we'll develop interactive web applications, we will make sure they run well on mobile devices!

Let's go

HTML & CSS Tutorial - Part 1: Your First Website

Apr 08, 2015

Let's dive right in and create our first web page.

Our Tools

For web development, you need two programs: an editor to create the files for the website and a browser to view and test your website.

Editor

For creating web pages, a normal text editor would be sufficient. But there are editors that greatly simplify your work as a programmer. Therefore, I recommend that you use a modern code editor.

My current favorite among the many editors is Atom (free). You may use an editor of your choice but I will occasionally refer to some functions of Atom. Good alternatives to Atom are Brackets or the slightly older but very good Notepad++.

Go ahead and install an editor. If you do not know which one, use Atom for now.

Atom Editor Packages

While we're at it we'll install two Atom packages that will give superpowers to our editor: atom-live-server and color-picker.

1. Open Atom.
   
2. Open the File menu and select Settings.
   
   
   
    3. Go to Install, enter atom-live-server in the search bar, hit enter and install the atom-live-server package.
   
   
   
   4.  Now enter color-picker in the search bar and also install the color-picker package.
   
   
   
   
   

 

Browser

Our website should, of course, run in all major browsers (Internet Explorer, Firefox, Chrome and Safari). However, for web development I recommend you use Chrome. Chrome includes very useful tools for developers which you will use often.

If you do not have Chrome on your computer, you can install it here.

Creating an HTML Document

Equipped with editor and browser, let's create the first HTML document for our website.

1. Create a folder on your computer for your project. Name the folder Portfolio (or anything you want).
   
2. Open Atom (or your code editor of choice).
   
3. Open the File menu and select Open Folder .... Browse for the folder you created and open it.
   
   
   4.  Right-click below the folder and select New File. Name the file index.html.
   
   
   
   5. Now you have a blank text file named index.html.    

Why index.html?

You could probably assume, the name index.html does have special meaning. If a website address is called, for example http://code.makery.ch, the index.html file is automatically displayed first, which in this case is http://code.makery.ch/index.html. For us, our first index.html will become our home page.

Viewing and Refreshing

Now you can fill the document with content. Type the following lines in your HTML.

To view the page, we'll use the live-server package that we installed above. Open the Packages menu, choose Live Server and click on one of the ports. A browser window should open up and show your first website. Now, whenever you save any changes they are automatically updated by the live server.

If the page is not updated automatically: Save all files and click F5 or cmd+R in the browser.

Congratulations! You have just created your first website!

Indentation

In order to keep your code clean, it is important that you correctly indent the lines with the tab key. Pay close attention to the example code and indent accordingly. It is important that you develop clean programming habits from the very beginning!

Tip 1: Use Shift+Tab keys to move indentation to the left.
Tip 2: You can indent multiple lines at once if you select them and click Tab or Shift+Tab.

HTML Elements

Tags

In the above example you have already seen the typical HTML characters with angle brackets. These are called tags.
HTML elements consist usually (but not always) of two tags, one opening and one closing. In our example, is an opening tag and

with the slash is a closing tag. The text between the opening and the closing tag is the content of the HTML element. With and
we tell the browser about the beginning and end of the HTML of our web page. The second tag we have seen is the tag. It states that all content between the opening and the closing
tags are to be shown in the main area of the browser.

Attributes

Attributes declare additional information for an item. Attributes are part of the opening tag of an element and always have a name and a value.
As an example, let's look at the HTML element for a link. It is probably one of the most important elements — what would the internet be without links?

 The element above includes an href attribute (short for "hypertext reference") with the value http://code.makery.ch. The browser knows that it must show the link as My Website.

Basic Structure of an HTML Page

We have already seen the two elements and . But the basic structure of an HTML page usually contains a few more. Adjust your website to the following code. Afterwards, we will discuss each element it.

HTML Structure

Web Portfolio of Marco Write anything you want to tell the world.
 
-->