{"id":24302835,"url":"https://github.com/thomasbnt/introduction-to-html-css","last_synced_at":"2026-03-09T02:31:22.516Z","repository":{"id":270715014,"uuid":"911237162","full_name":"thomasbnt/introduction-to-html-css","owner":"thomasbnt","description":"Introduction to HTML/CSS with an example.","archived":false,"fork":false,"pushed_at":"2025-01-02T15:20:59.000Z","size":22,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T14:31:25.175Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thomasbnt.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":"2025-01-02T14:54:48.000Z","updated_at":"2025-02-23T19:52:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"efc8f674-a7f0-41c0-a767-d68b1ed2da50","html_url":"https://github.com/thomasbnt/introduction-to-html-css","commit_stats":null,"previous_names":["thomasbnt/introduction-to-html-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thomasbnt/introduction-to-html-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasbnt%2Fintroduction-to-html-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasbnt%2Fintroduction-to-html-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasbnt%2Fintroduction-to-html-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasbnt%2Fintroduction-to-html-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomasbnt","download_url":"https://codeload.github.com/thomasbnt/introduction-to-html-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasbnt%2Fintroduction-to-html-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30280830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:23:26.802Z","status":"ssl_error","status_checked_at":"2026-03-09T02:22:46.175Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":[],"created_at":"2025-01-17T00:19:36.389Z","updated_at":"2026-03-09T02:31:22.496Z","avatar_url":"https://github.com/thomasbnt.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction to learn HTML/CSS\n\nThis repository is a tutorial for learning HTML/CSS with a example in `src` (source) folder.\n\n## Table of Contents\n\n- [How to create a basic HTML page](#how-to-create-a-basic-html-page)\n- [HTML](#html)\n- [CSS](#css)\n- [Basics HTML page](#basics-html-page)\n- [Example](#example)\n\n\n## How to create a basic HTML page\n\nTo create a basic HTML page, you need to create a file with the `.html` extension. You can use any text editor to create this file. For example, you can use Visual Studio Code, Sublime Text, Atom, Notepad++, etc. Don't forget to save your file with the `.html` extension.\n\nHere is a basic HTML page:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003ch1\u003eHello, World!\u003c/h1\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat's it! You have created a basic HTML page with a title and a heading.\n\n\u003e [!NOTE]\n\u003e Don't forget to add the `\u003c!DOCTYPE html\u003e` declaration at the beginning of your HTML file. This declaration is used to tell the browser that the document is an HTML5 document.\n\u003e Also, don't forget to add the `\u003chtml\u003e`, `\u003chead\u003e`, and `\u003cbody\u003e` tags. The `\u003chtml\u003e` tag is used to define an HTML document. The `\u003chead\u003e` tag is used to define the head of the document. The `\u003cbody\u003e` tag is used to define the body of the document.\n\nYou can see the preview of your HTML page by opening it in a web browser.\n\n## HTML\n\n### Introduction to HTML\n\nHTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages.\n\n### HTML Tags\n\nHTML tags are composed of three things: an opening tag, content and ending tag. Some tags are unclosed tags. For example, the `\u003cimg\u003e` tag.\nOther tags are closed tags. For example, the `\u003cp\u003e` tag, for example : \n\n```html\n\u003cp\u003eThis is a paragraph\u003c/p\u003e\n```\n\n```html\n\u003cimg src=\"image.jpg\" alt=\"image\"\u003e\n```\n\n\u003e [!NOTE]\n\u003e The `\u003cimg\u003e` tag is an unclosed tag. It doesn't have an ending tag.\n\u003e Also, for accessibility, it is important to add the `alt` attribute to the `\u003cimg\u003e` tag.\n\n### HTML Attributes\n\nHTML attributes provide additional information about HTML elements. Attributes are always specified in the start tag. Attributes usually come in name/value pairs like: name=\"value\".\n\n```html\n\u003ca href=\"https://www.google.com\"\u003eThis is a link\u003c/a\u003e\n```\n\n### HTML Headings\n\nHTML headings are defined with the `\u003ch1\u003e` to `\u003ch6\u003e` tags. `\u003ch1\u003e` defines the most important heading. `\u003ch6\u003e` defines the least important heading.\n\n\u003e [!NOTE]\n\u003e Headings are important for SEO (Search Engine Optimization), so it is a good idea to use them properly to the h1 to h6 tags. Don't avoid using them and skip a level.\n\n```html\n\u003ch1\u003eThis is heading 1\u003c/h1\u003e\n\u003ch2\u003eThis is heading 2\u003c/h2\u003e\n\u003ch3\u003eThis is heading 3\u003c/h3\u003e\n\u003ch4\u003eThis is heading 4\u003c/h4\u003e\n\u003ch5\u003eThis is heading 5\u003c/h5\u003e\n\u003ch6\u003eThis is heading 6 and the last\u003c/h6\u003e\n```\n\n### Accessibility in HTML\n\nAccessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.\nDon't hesitate to use `section`, `article`, `nav`, `header`, `footer` tags to structure your HTML page.\n\n\n## Basics HTML page\n\nIn this section, we will create a basic HTML page with the following structure:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cheader\u003e\n        \u003ch1\u003eMy website\u003c/h1\u003e\n    \u003c/header\u003e\n    \u003cnav\u003e\n        \u003cul\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/nav\u003e\n    \u003csection\u003e\n        \u003carticle\u003e\n            \u003ch2\u003eArticle 1\u003c/h2\u003e\n            \u003cp\u003eThis is the content of the article 1\u003c/p\u003e\n        \u003c/article\u003e\n        \u003carticle\u003e\n            \u003ch2\u003eArticle 2\u003c/h2\u003e\n            \u003cp\u003eThis is the content of the article 2\u003c/p\u003e\n        \u003c/article\u003e\n    \u003c/section\u003e\n    \u003cfooter\u003e\n        \u003cp\u003e\u0026copy; 2025 My website\u003c/p\u003e\n    \u003c/footer\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nWe have created a basic HTML page with a header, a navigation bar, two articles and a footer without CSS for the moment.\n\n## CSS\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasbnt%2Fintroduction-to-html-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasbnt%2Fintroduction-to-html-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasbnt%2Fintroduction-to-html-css/lists"}