https://github.com/mcalthrop/html-basics
Practical explanation and examples of some HTML basics
https://github.com/mcalthrop/html-basics
html html5 learning learning-materials teaching teaching-materials
Last synced: 3 months ago
JSON representation
Practical explanation and examples of some HTML basics
- Host: GitHub
- URL: https://github.com/mcalthrop/html-basics
- Owner: mcalthrop
- License: mit
- Created: 2017-06-11T14:00:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-22T09:04:30.000Z (over 8 years ago)
- Last Synced: 2025-03-22T19:47:31.733Z (7 months ago)
- Topics: html, html5, learning, learning-materials, teaching, teaching-materials
- Homepage:
- Size: 12.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
1. Ascribes **meaning** to the content (headings, paragraphs, etc).
> The acronym stands for **H**yper**t**ext **M**arkup **L**anguage.
### 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:
```html
Pack my box with five dozen liquor jugs.
Exploring the zoo, we saw every kangaroo jump and quite a few carried babies.
```
In this example, we can see the following for each paragraph:
- the `
` tag: this means that a paragraph (in this instance) is about to begin – referred to as an _opening tag_
- the `
` tag: means that the paragraph that was started by the `` tag now finishes here – referred to as a _closing tag_
- the words inside the `
` and `
` 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 `
- ` tag:
- alpha
- beta
- gamma
- ` elements
- the ` - ` elements will then be referred to as **child** elements of the `
- ` element
- ` element is a **sibling** element of the other `
- ` 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 `
`, the HTML element that allows us to insert an image:
```html
```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 `` 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:
```html
```
You can see that `` is the _root_ element: all other elements will be added as a child elements, in a hierarchical manner.
We can now add the `` and `` elements:
```html
HTML basics
This is the day your life will surely change.
```
Note the following:
- the `` tag contains the text that is displayed in the tab in your browser
- the syntax of a comment in HTML: it begins 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:
```html
HTML basicsThe basics of HTML
Several paragraphs
This is the day your life will surely change.
Pack my box with five dozen liquor jugs.
Exploring the zoo, we saw every kangaroo jump and quite a few carried babies.
A form
Your first name:
Your age:
Add me!Lists
Unordered
- alpha
- beta
- gamma
Ordered
- break eggs
- add flour
- add sugar
- shove in the oven
- hope for the best
Images
```
> 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
- https://www.w3schools.com/html/html_elements.asp
- https://www.w3schools.com/html/html_attributes.asp
- https://en.wikipedia.org/wiki/HTML5
- http://www.evolutionoftheweb.com/
- https://en.wikipedia.org/wiki/XML## License
[MIT](LICENSE)
- each `
```html
```
So now that we have the start and end of the list, we can add _list items_ inside:
```html
```
Note the following about the above example:
- the `
- ` element can be referred to as the **parent** element of the `