Skip to content

Latest commit

 

History

History
129 lines (88 loc) · 5.74 KB

README.md

File metadata and controls

129 lines (88 loc) · 5.74 KB

Introduction to HTML

Let's start at the basics. If we want to build a website, we first need to get familiar with HTML. Every webpage you look at is written in a language called HTML.

HTML is a simple code that is interpreted by your web browser – such as Chrome, Firefox or Safari - to display a webpage for the user.

HTML stands for "HyperText Markup Language". HyperText means it's a type of text that supports hyperlinks between pages. Markup means we have taken a document and marked it up with code to tell something (in this case, a browser) how to interpret the page. HTML code is built with tags, each one starting with < and ending with >. These tags represent markup elements.

If you're not familiar with programming it can be hard to grasp HTML at first, but your web browsers (like Chrome, Safari, Firefox, etc.) love it. Web browsers are designed to understand this code, follow its instructions, and present these files that your website is made of, exactly the way you want.

To start, lets create an HTML file that will contain our resumé.

Create a new directory djangogirls in your home directory, where we will put everything we will work on in this tutorial.

Open your favorite code editor and create a new file. Add the following to this file:

<html>
    <p>Hi there!</p>
    <p>It works!</p>
</html>

Save it as index.html inside your djangogirls directory. Find it in your finder, right click on it and click Open in browser.

Your browser will open your newly created website.

TODO: Update the images (shouldn't have localhost at this point)

Figure 11.2

It worked! Nice work there :)

See what we meant that your web browser will interpret your HTML code? But wait, this is only the beginning.

Let's look into some basic elements of HTML.

  • The most basic tag, <html>, is always the beginning of any webpage and </html> is always the end. As you can see, the whole content of the website goes between the beginning tag <html> and closing tag </html>
  • <p> is a tag for paragraph elements; </p> closes each paragraph

Head and body

Each HTML page is also divided into two elements: head and body.

  • head is an element that contains information about the document that is not displayed on the screen.

  • body is an element that contains everything else that is displayed as part of the web page.

We use <head> to tell the browser about the configuration of the page, and <body> to tell it what's actually on the page.

For example, you can put a web page title element inside the <head>, like this:

<html>
    <head>
        <title>Ola's blog</title>
    </head>
    <body>
        <p>Hi there!</p>
        <p>It works!</p>
    </body>
</html>

Save the file and refresh your page.

Figure 11.3

Notice how the browser has understood that "Ola's blog" is the title of your page? It has interpreted <title>Ola's blog</title> and placed the text in the title bar of your browser (it will also be used for bookmarks and so on).

Probably you have also noticed that each opening tag is matched by a closing tag, with a /, and that elements are nested (i.e. you can't close a particular tag until all the ones that were inside it have been closed too).

It's like putting things into boxes. You have one big box, <html></html>; inside it there is <body></body>, and that contains still smaller boxes: <p></p>.

You need to follow these rules of closing tags, and of nesting elements – if you don't, the browser may not be able to interpret them properly and your page will display incorrectly.

Customize your webpage

You can now have a little fun and try to customize your webpage! Here are a few useful tags for that:

  • <h1>A heading</h1> for your most important heading
  • <h2>A sub-heading</h2> for a heading at the next level
  • <h3>A sub-sub-heading</h3> …and so on, up to <h6>
  • <p>A paragraph of text</p>
  • <em>text</em> emphasizes your text
  • <strong>text</strong> strongly emphasizes your text
  • <br /> goes to another line (you can't put anything inside br)
  • <a href="https://djangogirls.org">link</a> creates a link
  • <ul><li>first item</li><li>second item</li></ul> makes a list, just like this one!
  • <div></div> defines a section of the page

Here's an example of a full webpage:

<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="">Django Girls Blog</a></h1>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My second post</a></h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.</p>
        </div>
    </body>
</html>

We've created three div sections here.

  • The first div element contains the title of our blog – it's a heading and a link
  • Another two div elements contain our blogposts with a published date, h2 with a post title that is clickable and two ps (paragraph) of text, one for the date and one for our blogpost.

It gives us this effect:

Figure 11.4

Yaaay! But so far, our webpage looks quite dry. We can do something about that. Head to the next chapter to learn about styling a webpage.