Code Monkey home page Code Monkey logo

html-basics's Introduction

html-basics

Practical explanation and examples of some HTML basics

Overview

Objectives

  • understand the basics of how HTML works
  • construct a simple web page using HTML

Prerequisites

  • access to a text editor or IDE and a web browser

HTML essentials

Purpose

HTML is the standard markup language for creating web pages.

It has two primary purposes:

  1. Defines what content (words, images, etc) that are displayed on a web page.
  2. Ascribes meaning to the content (headings, paragraphs, etc).

The acronym stands for Hypertext Markup Language.

Constructs

Open your editor or IDE, create a new and empty file called index.html, and be ready to add some text to it.

Elements/Tags

The basic construct of HTML is an element (also referred to as a tag).

The HTML element ascribes meaning, and the value inside the tag is the content.

Let's take a very simple example of how to mark up two paragraphs:

<p>Pack my box with five dozen liquor jugs.</p>
<p>Exploring the zoo, we saw every kangaroo jump and quite a few carried babies.</p>

In this example, we can see the following for each paragraph:

  • the <p> tag: this means that a paragraph (in this instance) is about to begin – referred to as an opening tag
  • the </p> tag: means that the paragraph that was started by the <p> tag now finishes here – referred to as a closing tag
  • the words inside the <p> and </p> tags are the content of each paragraph.

Now save the above code, and view the index.html file in your browser.

Nesting elements

It is also possible to nest elements, which means having one element contain one or more other elements.

A useful example is a bulleted list. When structuring the list, we need to know a couple of things:

  • where the whole list starts and ends
  • where each item in the list starts and ends

In HTML, we define the list with what is called an unordered list, which is represented by the <ul> tag:

<ul>
</ul>

So now that we have the start and end of the list, we can add list items inside:

<ul>
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
</ul>

Note the following about the above example:

  • the <ul> element can be referred to as the parent element of the <li> elements
  • the <li> elements will then be referred to as child elements of the <ul> element
  • each <li> element is a sibling element of the other <li> elements

Save and view in your browser.

Attributes

There is one final aspect of HTML elements that we need to cover: attributes.

Attributes essentially provide additional information about an element.

A useful example is <img>, the HTML element that allows us to insert an image:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" />

Note the following about the above HTML snippet:

  • src is the attribute name
  • which is followed by the = sign
  • which is followed by the attribute value: "http://vignette1.wikia.nocookie.net/suburgatory/images/5/52/Happy_face.jpg" – the browser knows to interpret this as the location of the image
  • there is no </img> element – this is known as a self-closing tag (in the case of an image, there is no need for the element to have any content)
  • HTML attributes are always specified in the starting tag.

Save and view in your browser.

Constructing a web page

Basic structure

Using what we have learned so far, we'll now look at the basic structure of an HTML web page.

An HTML document will start off looking like this:

<!DOCTYPE html>
<html>
</html>

You can see that <html> is the root element: all other elements will be added as a child elements, in a hierarchical manner.

We can now add the <head> and <body> elements:

<!DOCTYPE html>
<html>
  <head>
    <!-- this section contains information about the HTML document -->
    <title>HTML basics</title>
  </head>
  <body>
    <!-- and this section contains the main body of the HTML document -->
    <p>This is the day your life will surely change.</p>
  </body>
</html>

Note the following:

  • the <title> tag contains the text that is displayed in the tab in your browser
  • the syntax of a comment in HTML: it begins with <!-- and ends with -->.

Save and view in your browser.

Putting it all together

We can now incorporate all the HTML we have done so far, plus introduce some more HTML tags that are commonly used.

Replace everything that is in your index.html file with the following:

<!DOCTYPE html>
<html>
<head>
    <!-- this section contains information about the HTML document -->
    <title>HTML basics</title>
</head>
<body>
<!-- and this section contains the main body of the HTML document -->
<h1>The basics of HTML</h1>

<h2>Several paragraphs</h2>

<p>This is the day your life will surely change.</p>
<p>Pack my box with five dozen liquor jugs.</p>
<p>Exploring the zoo, we saw every kangaroo jump and quite a few carried babies.</p>

<h2>A form</h2>

<form>
    <label>
        Your first name:
        <input type="text" name="firstName" />
    </label>
    <label>
        Your age:
        <input type="number" name="age" />
    </label>
    <button type="button">Add me!</button>
</form>

<h2>Lists</h2>

<h3>Unordered</h3>
<ul>
    <li>alpha</li>
    <li>beta</li>
    <li>gamma</li>
</ul>

<h3>Ordered</h3>

<ol>
    <li>break eggs</li>
    <li>add flour</li>
    <li>add sugar</li>
    <li>shove in the oven</li>
    <li>hope for the best</li>
</ol>

<h2>Images</h2>

<img width="400" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" />
<img width="400" src="http://i.ytimg.com/vi/VQtbKGzI9SE/hqdefault.jpg" />

</body>
</html>

Save and view in your browser.

Conclusion

What we've covered

  • explained the purpose and use of HTML
  • put together a simple HTML page that containing several commonly-used HTML elements

Further reading

License

MIT

html-basics's People

Contributors

mcalthrop avatar

Watchers

 avatar  avatar  avatar

html-basics's Issues

Enhancements

Trying to keep this repo minimal, yet having the essentials.

The following should probably be added:

  • add a section for anchors (essential!)
  • describe the concept of block and inline element, and give examples
  • pretty much every website will have <div> and <span> elements, so describe these (follows on naturally from the previous point)
  • also worth observing that the browser ignores whitespace between elements – and that block elements that are on the same line will still be displayed on the next line
  • add a section for tables (keep it simple)
  • note that the next step after understanding HTML is to add styling (but out of scope of this lesson)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.