Web Designer London – severinu

To start your jurney with web design, you have to learn html. When I was doing my first steps in web design , about 12-13 years ago, websites wasn’t so good looking like they are now. I’ve never hear anything about CSS those days. It was a big fun to see something going on on the browser window. That day I had just IE … version … I don’t know which one. A bit old I have to say. It was magic for me as I had no access to anything about web design , html, css , cgi,php et. Back the old days , I thought like I’ll never use HTML or websites are not for me. I am saying that with a hand on my chest. I was dreaming that day about cool Borland C++ Builder 5.0 Relational Database Management systems and I thought I should focus my mind on C++. And somehow I did that. I was doing my C++ programming until … I’ve started to feel love to web design again. I’ve decided to learn some PHP and automatically I’ve learned XHTML and CSS as I couldn’t make my PHP websites without it. That day HTML 4 was on the top shelf. I’ve made my certificate in W3Scools and now I am Certified HTML Developer . You don’t need to learn all those old versions of HTML, you can jump straight in to HTML5 !

Ok , lets do some HTML5 codding here !

If you want, you can install a local web server to have more fun with web design , you can find article here : How make a local web server ? It is short article with video that will show you how to install local web server and become good web designer. I started my fun with WAMP many years ago and now I am workig as London web designer , so … try your best !

But first, create on your hdd a folder with name FreshFruits, and inside a file name index.html and place inside that basic page structure in HTML5 :

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Fresh Fruits</title>
   </head>

<body>
</body>
</html>

As You can maybe see , if you know XHTML in older version than HTML5 , we don’t need to write that much here like we did the preview version of XHTML.

Hre is the same content written in preview version - XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title>Fresh Fruits</title>
   </head>

<body>
</body>
</html>

`<!DOCTYPE html>`

Like any other language, HTML has it’s own dictionary (tags) . Doctype goes on the top of every HTML5 page and you must to place it there ! Don’t forget. By declaring Doctype, your browser knows what type of file is it. You want your file be treated as HTML5 , not any other language, isn’t it ?

<html>

Here is our first serious HTML tag. What is a tag in HTML ?TAG is a kind of ‘word’ in HTML language that is created to do some task. It is not visible in a browser directly but it’s content is. Every tag (almost every tag) has its own opening part with a name inside brackets , example <html> , and closing tag in brackets as well but with a slash before tag name , example </html>. What it does ? HTML tag says to a browser , that between those two tags is a HTML content and ‘html translator’ should be used to understand that content and display it properly in a browser window. So … all our page content will be created between those 2 tags.

<head>

That is our header. Header is not visible in a browser (except a <title> tag as it is displayed on title bar in browser or is added as link title while adding a link to favorites) . Not visible doesn’t mean not important ! Head tag is very important. We are creating websites for people. That is a true. No doubts. But there is one more type of visitors on every website in internet. A robots ! Yes, yes ! Robots ! Robots are a special programs that are traveling over the entire internet and are visiting every website and reading page by page to index its content to a search engines . Every search engine is using a special robot/program which is called a crawler (the most popular is Google’s crawler named Googlebot). If you ever used a Google to find any information, results you saw was effect of Googlebot work. He is doing a hard work for Google, working day and night to travel all internet for new information about every single indexed to Google page.

First thing to check by a crawler is a page header. There are very important information for him. One of them is a web page title placed between <title></title> tags. In my example above , I’ve used a Fresh Fruits as a title for my page. It is not a static title for every page in my website. Title for each page should differ ! Remember that. You shouldn’t have a two pages with the same title (or description tag). It is not very good idea to do so. Every page should be unique as search engines can treat other pages with the same title and description tags (I will say about description tag i a while) as a duplicate and will not pay attention on those pages. So be careful. Different titles will give you a better result in search engines.

<head> is a home for a meta tags. Meta tags contain those important information for robots (crawlers) . The other important meta tags are

<description> : Is a short description for each page . It should contain a real information as search engines will take a look on that part and compare it to page content. You will see text from description tag in search engine results. It is important to place here all essence in couple lines of text. Example

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Fresh Fruits</title>
      <meta name="description" content="The best juice in entire London. Buy one juice and get one free. Lowest price in UK" >
      <meta description=”keywords” content=”fresh juice, fruit juice, cheap juice, best quality juice”>
  </head>

<body>
</body>
</html>

<body>

So, this are basics of header in your HTML5 page. Now we can start talking about content, that is visible for a user.
Content visible for a user is placed between <body> opening tag and </body> closing tag.
What we place here , will be displayed to a browser window as our page.

In body section we will place other tags that are responsible for displaying page content. There are many tags that we can use and the most important and common are

Headers

We have many headers to use. By default we have 6 basic headers starting form h1 and finishing on h6. H1 is the most important header , h2 less important that h1, h3 less important than h2 and so on. We are declaring headers like that :

<h1></h1> – Header 1, opening and closing tag.

To place content in our header we will do like that

<h1>Fresh Juices</h1>

Results of using tags should be like those:

<h1>Header 1</h1>

<h2>Header 1</h2>

<h3>Header 1</h3>

<h4>Header 1</h4>

<h5>Header 1</h5>

<h6>Header 1</h6>

We can place as much headers as we want but we shouldn’t go crazy as crawlers will organize our page via those headers as well. We know that H1 is the most important header , it is like a book title that describes in general content of a page . So for a crawler and human , headers will organize a page in some kind of structure. Structure of your page should looks a bit like a book and all headers should create something similar to a book index where each level of paragraph has it’s own indentation and one level smaller font etc. You will see it when we will start adding a content to our Fresh Fruits example website.

So lets do that ! Update body section of your index.html file like that :

<body>
   <h1>Fresh Juices</h1>
   <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
       et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
       aliquip ex ea commodo consequat.
   </p>
   <h2>Who we are</h2>
   <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
     totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
     vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
     sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
      qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore
   </p>
  <h2>What we do</h2>
  <p>
     Nor again is there anyone who loves or pursues or desires to obtain pain of
    itself, because it is pain, but because occasionally circumstances occur in which
    toil and pain can procure him some great pleasure.
  </p> 

  <ul>
     <li>Strawberry Juice</li>
     <li>Banana Juice</li>
     <li>Orange Juice</li>
     <li>Coconut Juice</li>
  </ul>
</body>

If now you will try to open index.html file in a browser by clicking it twice, you will see something like that:

Paragraph

Paragraph tag is the most commonly used tag in HTML and is a wrapper for any text content, descriptions or other inline tags.

Opening tag for a paragraph <p> , closing tag </p>

Example:

<p>
     Nor again is there anyone who loves or pursues or desires to obtain pain of
    itself, because it is pain, but because occasionally circumstances occur in which
    toil and pain can procure him some great pleasure.
</p>
<p>
     Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,.
</p>

Related content:

Better Related Posts Plugin