From 8674d9632c1e36588d76edc6412f841844814f85 Mon Sep 17 00:00:00 2001 From: Despo Pentara Date: Wed, 23 Oct 2013 05:41:57 +0100 Subject: [PATCH] the first tutorial --- html/1/tutorial.md | 321 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 321 insertions(+) create mode 100644 html/1/tutorial.md diff --git a/html/1/tutorial.md b/html/1/tutorial.md new file mode 100644 index 00000000..b97f67ea --- /dev/null +++ b/html/1/tutorial.md @@ -0,0 +1,321 @@ +# HTML - Lesson 1 + +### What is HTML? + +HTML is the code that allows us to build websites + + +### What it stands for + +HTML - **H**yper **T**ext **M**arkup **L**anguage + + +### What makes a website + +HTML : structure of a website +CSS: presentation + +_The styling of a website, is not part of the HTML_ + + +## Today we’ll be focusing on fundamental HTML concepts + +_We will be building this [example page](http://codebar.github.io/tutorial/html/1/tutorial/example.html "I love owls")_ + +## But before we start... + +### HTML element anatomy + +An **element** is an HTML component _eg. paragraph, heading, table, list etc_ + +**Tags**, mark the opening and closing of an element. They contain elements that indicate their purpose + + some content + +Example +```html +

I am a paragraph

+

I am a heading

+``` + +Some elements are standalone, as they cannot contain anything else + +```html +
+ +``` + +### DOCTYPE and HTML tags + +The doctype is the first thing that must be defined in an HTML page. +It tells the browser which version of HTML the the page is using. + +```html + +``` + +We will only be using html for now, but you can find more about doctypes [here](http://www.w3.org/wiki/Doctypes_and_markup_styles). + +The doctype is always followed by the `` tag, which itself contains the contents of the page. + +```html + + + + +``` + +### HEAD and BODY tags + +An HTML page is split into two parts. The **head** and the **body**. + +The **head** is where information like the page title, stylesheets, scripts and meta information is contained. + +The **body** contains what is visible to the user. + + +# Let's get started! + +Let’s start by defining the basic structure of our website. + +`` + + + + I love owls + + + + + +`` + +## Element: Heading + +Headings come in a number of sizes + +# `

Heading

` +## `

Heading

` +### `

Heading

` +#### `

Heading

` +##### `
Heading
` +###### `
Heading
` + +Add a heading to your page + +```html +

Owls!

+``` + +> Did you remember to add the heading to the body? + +> Don't forget to save your changes before refreshing the browser! + +## Nesting elements + +Elements can be nested inside each other. For example, by putting the `

` inside the body tags you are nesting a heading inside the `` of a page. + +> You must always close any element that you open. The first element you open, you close last! + +## Element: Paragraph

+ +Putting content into a `

` will make it look like a paragraph structure. This helps make the content of a page easier to read. + +Add the following to your page, after the title + +```html +

+ Most birds of prey sport eyes on the sides of their heads, + but the stereoscopic nature of + the owl's forward-facing eyes permits the greater + sense of depth perception necessary for low-light hunting. +

+``` + +## Line break
+As you've noticed, despite the new lines there are no line breaks in our paragraph. +To achieve that we must use the `
` tag. + +```html +

+ Most birds of prey sport eyes on the sides of their heads,
+ but the stereoscopic nature of
+ the owl's forward-facing eyes permits the greater
+ sense of depth perception necessary for low-light hunting. +

+``` + +## Formatting text + +We can also **emphasise** or make text *important* +For emphasis we use `` and for importance `` + +Let's emphasise some of the content of our paragraph + +```html +

+ Most birds of prey sport eyes on the sides of their heads,
+ but the stereoscopic nature of
+ the owl's forward-facing eyes permits the greater
+ sense of depth perception necessary for low-light hunting. +

+``` + +## Element: Link `` + +The most important attribute of a link is **href**, which indicates the path or url that is accessed through it. + +Let's add a link to the bottom of our paragraph + +```html +
+ More information about owls... +``` + +## Element: Div `
` + +Div stands for _division_. It creates sections in an HTML document. +We can use a div to contain out paragraph. + +Wrap your paragraph in a div and add a heading to it + +```html +
+

Owls

+

+ Most birds of prey sport eyes on the sides of their heads,
+ but the stereoscopic nature of
+ the owl's forward-facing eyes permits the greater
+ sense of depth perception necessary for low-light hunting. +
+ More information about owls... +

+
+``` + +## Element: List `
  • ` + +There are two types of lists, **ordered** and **unordered**. +An unordered list `
      ` is defined with bullets whilst an ordered list `
        ` uses a sequence. + +Let's list the reasons we like owls so much under the main heading of the page (the `

        ` element we added earlier on) + +```html +

        Why do I like owls so much?

        + +
          +
        1. they are adorable
          2. +
        2. and lovely>
          3. +
        3. and cuddly
          4. +
        +``` + +## Element: Image `` + +So far we've learned a lot about how to add text to our page. But how about some media? + +Let's add some images! + +Image are primarily made up of three attributes +- the `` tag +- the `src` attribute, which lets the page know what image we want to view +- the `alt` attribute, where we describe our image + +Before the main heading of the page, add the following + +```html +
        + codebar.io +
        +``` + +> Can you see the codebar logo? What happens when you change logo to logo1? + +Let's add some more, this time, contained in a list. +Do this underneath `

        Why do I like owls so much?

        ` + +```html +
          +
        • adorable
          • +
        • lovely
          • +
        • cuddly
          • +
        +``` + +So a list can not only contain text, but other elements as well. + +## Adding a link on multiple elements + +Links can contain not just text, but images or even a number of elements within. + +Let's link some pictures and text to a video. It can be handy when we want the user to get to where we want them without needing to click on text. + +Add that underneath the ordered list we defined previously. + +```html + +``` + +> Click any of the images. Can you get to the link's page? + +## ASCII and more formatting + +**ASCII** code is a way to represent text in ways that all computers can understand. +[Here](http://htmlandcssbook.com/extras/html-escape-codes/) is a list with codes, their representation and HTML number. + +Add a small rhyme to your page, wrapped with quotes using ASCII code. + +```html +
    • +

    + + "A wise old owl sat on an oak; The more he saw the less he spoke;
    + The less he spoke the more he heard; Why aren't we like that wise old bird?" +     +

    + + - nursery rhyme + +``` + +**small* is another html formatting element you can use. + +> Have you noticed how the character `"A` renders on the page? + +## mailto links `` + +Links can also be used to open up a user's email client and share content. +The difference between links and mailto links, is the content defined in the **href** attribute. + +```html + +``` + +> What happens when you click the first link? + +> What happens when you click the second link? + +> What happens when you add `&body=Owls are amazing` to the second link? + + +## Bonus + +Add a share on twitter link along with your other sharing links. + +```html + Share your love of owls on twitter +```