{"id":17028575,"url":"https://github.com/mcalthrop/html-basics","last_synced_at":"2026-02-04T16:08:19.944Z","repository":{"id":150164821,"uuid":"94008033","full_name":"mcalthrop/html-basics","owner":"mcalthrop","description":"Practical explanation and examples of some HTML basics","archived":false,"fork":false,"pushed_at":"2017-06-22T09:04:30.000Z","size":13,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-04T03:05:58.108Z","etag":null,"topics":["html","html5","learning","learning-materials","teaching","teaching-materials"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mcalthrop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-11T14:00:27.000Z","updated_at":"2017-06-11T14:11:42.000Z","dependencies_parsed_at":"2023-08-26T13:45:23.733Z","dependency_job_id":null,"html_url":"https://github.com/mcalthrop/html-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mcalthrop/html-basics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcalthrop%2Fhtml-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcalthrop%2Fhtml-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcalthrop%2Fhtml-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcalthrop%2Fhtml-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mcalthrop","download_url":"https://codeload.github.com/mcalthrop/html-basics/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcalthrop%2Fhtml-basics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29089921,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T03:31:03.593Z","status":"ssl_error","status_checked_at":"2026-02-04T03:29:50.742Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","html5","learning","learning-materials","teaching","teaching-materials"],"created_at":"2024-10-14T07:55:11.637Z","updated_at":"2026-02-04T16:08:19.928Z","avatar_url":"https://github.com/mcalthrop.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-basics\n\n_Practical explanation and examples of some HTML basics_\n\n## Overview\n\n### Objectives\n\n- understand the basics of how HTML works\n- construct a simple web page using HTML\n\n### Prerequisites\n\n- access to a text editor or IDE and a web browser\n\n\n## HTML essentials\n\n### Purpose\n\nHTML is the standard markup language for creating web pages. \n\nIt has two primary purposes:\n\n1. Defines what **content** (words, images, etc) that are displayed on a web page.\n1. Ascribes **meaning** to the content (headings, paragraphs, etc).\n\n\u003e The acronym stands for **H**yper**t**ext **M**arkup **L**anguage.\n\n### Constructs\n\n\u003e Open your editor or IDE, create a new and empty file called `index.html`, and be ready to add some text to it.\n\n#### Elements/Tags\n\nThe basic construct of HTML is an **element** (also referred to as a **tag**).\n\nThe HTML element ascribes _meaning_, and the value inside the tag is the _content_.\n\nLet's take a very simple example of how to mark up two paragraphs:\n\n```html\n\u003cp\u003ePack my box with five dozen liquor jugs.\u003c/p\u003e\n\u003cp\u003eExploring the zoo, we saw every kangaroo jump and quite a few carried babies.\u003c/p\u003e\n```\n\nIn this example, we can see the following for each paragraph:\n\n- the `\u003cp\u003e` tag: this means that a paragraph (in this instance) is about to begin \u0026ndash; referred to as an _opening tag_\n- the `\u003c/p\u003e` tag: means that the paragraph that was started by the `\u003cp\u003e` tag now finishes here \u0026ndash; referred to as a _closing tag_\n- the words inside the `\u003cp\u003e` and `\u003c/p\u003e` tags are the _content_ of each paragraph.\n\n\u003e Now save the above code, and view the `index.html` file in your browser.\n\n#### Nesting elements\n\nIt is also possible to _nest_ elements, which means having one element contain one or more other elements.\n\nA useful example is a bulleted list. When structuring the list, we need to know a couple of things:\n\n- where the whole list starts and ends\n- where each item in the list starts and ends\n\nIn HTML, we define the list with what is called an _unordered list_, which is represented by the `\u003cul\u003e` tag:\n\n```html\n\u003cul\u003e\n\u003c/ul\u003e\n```\n\nSo now that we have the start and end of the list, we can add _list items_ inside:\n\n```html\n\u003cul\u003e\n  \u003cli\u003ealpha\u003c/li\u003e\n  \u003cli\u003ebeta\u003c/li\u003e\n  \u003cli\u003egamma\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nNote the following about the above example:\n\n- the `\u003cul\u003e` element can be referred to as the **parent** element of the `\u003cli\u003e` elements\n- the `\u003cli\u003e` elements will then be referred to as **child** elements of the `\u003cul\u003e` element\n- each `\u003cli\u003e` element is a **sibling** element of the other `\u003cli\u003e` elements\n\n\u003e Save and view in your browser.\n\n#### Attributes\n\nThere is one final aspect of HTML elements that we need to cover: **attributes**.\n\nAttributes essentially provide additional information about an element.\n\nA useful example is `\u003cimg\u003e`, the HTML element that allows us to insert an image:\n\n```html\n\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png\" /\u003e\n```\n\nNote the following about the above HTML snippet:\n\n- `src` is the _attribute name_\n- which is followed by the `=` sign\n- which is followed by the _attribute value_: `\"http://vignette1.wikia.nocookie.net/suburgatory/images/5/52/Happy_face.jpg\"` \u0026ndash; the browser knows to interpret this as the location of the image \n- there is no `\u003c/img\u003e` element \u0026ndash; 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)\n- HTML attributes are always specified in the _starting tag_.\n\n\u003e Save and view in your browser.\n\n\n## Constructing a web page\n\n### Basic structure\n\nUsing what we have learned so far, we'll now look at the basic structure of an HTML web page.\n\nAn HTML document will start off looking like this:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003c/html\u003e\n```\n\nYou can see that `\u003chtml\u003e` is the _root_ element: all other elements will be added as a child elements, in a hierarchical manner.\n\nWe can now add the `\u003chead\u003e` and `\u003cbody\u003e` elements:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- this section contains information about the HTML document --\u003e\n    \u003ctitle\u003eHTML basics\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- and this section contains the main body of the HTML document --\u003e\n    \u003cp\u003eThis is the day your life will surely change.\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nNote the following:\n\n- the `\u003ctitle\u003e` tag contains the text that is displayed in the tab in your browser\n- the syntax of a comment in HTML: it begins with `\u003c!--` and ends with `--\u003e`.\n\n\u003e Save and view in your browser.\n\n### Putting it all together\n\nWe can now incorporate all the HTML we have done so far, plus introduce some more HTML tags that are commonly used.\n\nReplace everything that is in your `index.html` file with the following:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003c!-- this section contains information about the HTML document --\u003e\n    \u003ctitle\u003eHTML basics\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003c!-- and this section contains the main body of the HTML document --\u003e\n\u003ch1\u003eThe basics of HTML\u003c/h1\u003e\n\n\u003ch2\u003eSeveral paragraphs\u003c/h2\u003e\n\n\u003cp\u003eThis is the day your life will surely change.\u003c/p\u003e\n\u003cp\u003ePack my box with five dozen liquor jugs.\u003c/p\u003e\n\u003cp\u003eExploring the zoo, we saw every kangaroo jump and quite a few carried babies.\u003c/p\u003e\n\n\u003ch2\u003eA form\u003c/h2\u003e\n\n\u003cform\u003e\n    \u003clabel\u003e\n        Your first name:\n        \u003cinput type=\"text\" name=\"firstName\" /\u003e\n    \u003c/label\u003e\n    \u003clabel\u003e\n        Your age:\n        \u003cinput type=\"number\" name=\"age\" /\u003e\n    \u003c/label\u003e\n    \u003cbutton type=\"button\"\u003eAdd me!\u003c/button\u003e\n\u003c/form\u003e\n\n\u003ch2\u003eLists\u003c/h2\u003e\n\n\u003ch3\u003eUnordered\u003c/h3\u003e\n\u003cul\u003e\n    \u003cli\u003ealpha\u003c/li\u003e\n    \u003cli\u003ebeta\u003c/li\u003e\n    \u003cli\u003egamma\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003eOrdered\u003c/h3\u003e\n\n\u003col\u003e\n    \u003cli\u003ebreak eggs\u003c/li\u003e\n    \u003cli\u003eadd flour\u003c/li\u003e\n    \u003cli\u003eadd sugar\u003c/li\u003e\n    \u003cli\u003eshove in the oven\u003c/li\u003e\n    \u003cli\u003ehope for the best\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2\u003eImages\u003c/h2\u003e\n\n\u003cimg width=\"400\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png\" /\u003e\n\u003cimg width=\"400\" src=\"http://i.ytimg.com/vi/VQtbKGzI9SE/hqdefault.jpg\" /\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e Save and view in your browser.\n\n## Conclusion\n\n### What we've covered\n\n- explained the purpose and use of HTML\n- put together a simple HTML page that containing several commonly-used HTML elements\n\n### Further reading\n\n- https://www.w3schools.com/html/html_elements.asp\n- https://www.w3schools.com/html/html_attributes.asp\n- https://en.wikipedia.org/wiki/HTML5\n- http://www.evolutionoftheweb.com/\n- https://en.wikipedia.org/wiki/XML\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcalthrop%2Fhtml-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmcalthrop%2Fhtml-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcalthrop%2Fhtml-basics/lists"}