{"id":20767458,"url":"https://github.com/mosespace/website-motivation","last_synced_at":"2026-04-07T20:31:12.479Z","repository":{"id":168225594,"uuid":"569200648","full_name":"mosespace/Website-Motivation","owner":"mosespace","description":"This repository drives in to a development of a Website in Html and css","archived":false,"fork":false,"pushed_at":"2022-12-22T19:13:30.000Z","size":4676,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T19:29:53.605Z","etag":null,"topics":["beginner","class","development","dom","first-issue","html","html-beginners","html-class-css-html","javascript","reactjs","vscode","web"],"latest_commit_sha":null,"homepage":"https://mosespace.github.io","language":"CSS","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/mosespace.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-11-22T09:56:26.000Z","updated_at":"2024-12-14T20:55:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"76171d7a-6a7f-44bd-a238-0f3ca2004331","html_url":"https://github.com/mosespace/Website-Motivation","commit_stats":null,"previous_names":["mosespace/website-motivation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mosespace/Website-Motivation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosespace%2FWebsite-Motivation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosespace%2FWebsite-Motivation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosespace%2FWebsite-Motivation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosespace%2FWebsite-Motivation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mosespace","download_url":"https://codeload.github.com/mosespace/Website-Motivation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosespace%2FWebsite-Motivation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31528260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"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":["beginner","class","development","dom","first-issue","html","html-beginners","html-class-css-html","javascript","reactjs","vscode","web"],"created_at":"2024-11-17T11:31:46.106Z","updated_at":"2026-04-07T20:31:12.463Z","avatar_url":"https://github.com/mosespace.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Html Website Tutorial\n## What Is HTML?\n\nThe HyperText Markup Language (HTML) is the most fundamental building block of the web. It defines the structure and content of every web page. It is the common language for all websites and browsers, which is why you can use your browser to visit any website, and your browser just knows what to do. An HTML document is a file with extension .html.\n\nGenerally speaking, other technologies are used alongside. The Cascading Style Sheet (CSS), for example, can be used to describe the page’s appearance, and JavaScript can define the web page’s behavior and make it more interactive for the user. We will talk about these technologies in detail in future articles.\n\nBefore proceeding with this article, make sure you have a code editor and a browser installed on your computer.\n\nHere is an example of an HTML file:\n\n```js\n\n1.  \u003c!DOCTYPE html\u003e\n2.  \u003chtml\u003e\n\n3.  \u003chead\u003e\n4.    \u003cmeta charset=\"utf-8\" /\u003e\n5.    \u003ctitle\u003eMy HTML page\u003c/title\u003e\n6.  \u003c/head\u003e\n7.  \n8.  \u003cbody\u003e\n9.    \u003ch1\u003eThis is a heading\u003c/h1\u003e\n10.    \u003cp\u003eThis is a paragraph.\u003c/p\u003e\n11. \u003c/body\u003e\n12. \n13. \u003c/html\u003e\n\n```\n\nElements are the basic components of this HTML file. An HTML element is usually defined by a start tag and an end tag, and with some content in between like this:\n\n```js\n\n1.  \u003cbody\u003e\n2.    \u003ch1\u003eThis is a Heading\u003c/h1\u003e\n3.    \u003cp\u003eThis is a paragraph.\u003c/p\u003e\n\n4.    \u003cdiv\u003e\n5.      \u003cp\u003eThis is also a paragraph.\u003c/p\u003e\n6.    \u003c/div\u003e\n7.  \u003c/body\u003e\n\n```\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/docsImages/html-dom-tree.png\"\u003e\n\u003c/p\u003e\n\nThe `\u003cbody\u003e` has three elements inside, a heading `\u003ch1\u003e`, a paragraph `\u003cp\u003e`, and a `\u003cdiv\u003e`. And the `\u003cdiv\u003e` element has another paragraph `\u003cp\u003e` inside. The plot above is what the structure tree looks like. There is no limit on how long or complex this tree could be. This is related to a fundamental concept in frontend development called the Document Object Model (DOM). With the DOM, we can find and change any element in an HTML file.\n\nAnother important note is that you should never escape the end tag (if it needs one). Sometimes the elements will display correctly, but you should never rely on that. It can cause unexpected consequences.\n\nUsually, each HTML element is assigned multiple attributes. They provide additional information to the HTML elements. They are always specified in the start tag, and they usually come in name/value pairs like this:\n\n``bash\n1.  \u003ctag name=\"value\"\u003eAn Example\u003c/tag\n``\n\nThere are two essential things you should always remember. First, the attributes should always be in lower case. It is not a requirement, but it is highly recommended. [XHTML,](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/XHTML) the strict version of HTML, actually demands that. Second, the value of the attributes should always be in quotes. It doesn’t matter if you use single or double quotes, but they should always match. Using double quotes is highly recommended. Again, XHTML requires you to use double quotes\n\n# Some common elements and attributes\nNext, let’s take a look at some commonly used HTML elements. Please note that this is not a complete list of all elements for HTML. That would make this article long and tedious. However, [here](https://www.ericsdevblog.com/posts/html-basics-1/) is a complete tutorial on HTML from w3schools if you need them.\n\n## Headings and paragraphs\nHeadings are used to defining the hierarchy and structure of the web page. HTML offers six different levels of heading, from `\u003ch1\u003e` to `\u003ch6\u003e`. `\u003ch1\u003e` is the most important heading, and it should summarize your entire page content, which is why there should only be one `\u003ch1\u003e` heading in the HTML file\n\n```js\n\n    \u003cbody\u003e\n1.    \u003ch1\u003eHeading level 1\u003c/h1\u003e\n2.    \u003ch2\u003eHeading level 2\u003c/h2\u003e\n3.    \u003ch3\u003eHeading level 3\u003c/h3\u003e\n4.    \u003ch4\u003eHeading level 4\u003c/h4\u003e\n5.    \u003ch5\u003eHeading level 5\u003c/h5\u003e\n6.    \u003ch6\u003eHeading level 6\u003c/h6\u003e\n\u003c/body\u003e\n\n```\n\nThe output should look like this:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/docsImages/html-headings.png\"\u003e\n\u003c/p\u003e\n\nParagraphs on the other hand, are defined with the `\u003cp\u003e` tag\n\n```js\n\n1.  \u003cp\u003eThis is a paragraph.\u003c/p\u003e\n2.  \u003cp\u003eThis is also a paragraph.\u003c/p\u003e\n\n```\n\nIn HTML, you cannot change how the paragraphs are displayed in the browser by adding extra spaces or extra lines in the code. They will be automatically removed by the browser. For instance, the following two paragraphs will produce the same resul\n\n```js\n\n1.  \n2.  \u003cp\u003eThis is a paragraph.\u003c/p\u003e\n3.  \n4.  \u003cp\u003eThis           is a \n5.  paragraph.\u003c/p\u003e\n\n```\nHowever, what if we do want a line break? The answer is simple, we use a `\u003cbr\u003e` element:\n\n```js\n1.    \u003cp\u003eThis is a `\u003cbr\u003e` paragraph.\u003c/p\u003e\n```\nThe output will be:\n\n# Formatting elements\nThe formatting elements are a special collection of elements that give texts special meaning and appearance.\n-    `\u003cb\u003e` - Bold text\n-    `\u003cstrong\u003e` - Important text\n-    `\u003cI\u003e` - Italic text\n-    `\u003cem\u003e` - Emphasized text\n-    `\u003cmark\u003e` - Marked text\n-    `\u003csmall\u003e` - Smaller text\n-    `\u003cdel\u003e` - Deleted text\n-    `\u003cins\u003e` - Inserted text\n-    `\u003csub\u003e` - Subscript text\n-    `\u003csup\u003e`- Superscript text\n\n\n```js\n\n1.  \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. \u003cb\u003eVestibulum volutpat pretium turpis, sodales facilisis metus\n2.       porta a.\u003c/b\u003e Morbi condimentum porta massa, eu mattis turpis cursus sit amet. \u003cstrong\u003ecursus ut tellus a convallis. In nec\n3.       nisl nisl.\u003c/strong\u003e Mauris a ligula et ligula malesuada luctus. \u003ci\u003eFusce placerat id tortor at tristique.\u003c/i\u003e Quisque non vulputate\n4.       eros. \u003cem\u003ePellentesque malesuada interdum ligula, et dignissim arcu vestibulum tincidunt.\u003c/em\u003e\u003c/p\u003e\n5.\n6.  \u003cp\u003e\u003cmark\u003eAliquam imperdiet volutpat lorem, in viverra lorem ultricies sed.\u003c/mark\u003e Integer bibendum velit sit amet hendrerit\n7.       venenatis. \u003csmall\u003eSuspendisse interdum ornare molestie.\u003c/small\u003e Nulla porttitor venenatis purus eu sollicitudin. \u003cdel\u003eIn quis aliquet\n8.       ipsum. Curabitur eu feugiat sem.\u003c/del\u003e Etiam rhoncus lectus eget dolor cursus, a viverra tellus faucibus. \u003cins\u003eNam aliquam\n9.       rhoncus urna.\u003c/ins\u003e Vivamus pulvinar eleifend nibh quis semper. \u003csub\u003eSed finibus neque in\u003c/sub\u003e sollicitudin cursus. \u003csup\u003eCurabitur ut ex\n10.      \u003c/sup\u003eegestas, suscipit lectus a, auctor ante.\u003c/p\u003e\n\n```\n\nThe output should look like this:\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/docsImages/html-formatting-elements.png\"\u003e\n\u003c/p\u003e\n\n## Links\nLinks are found on nearly all web pages. They allow users to travel from page to page. When you click on a link, it takes you to another HTML file, and this simple action forms the foundation of the internet. The links are defined as follows:\n\n```js\n1.  \u003ca href=\"https://www.example.com/\"\u003elink text\u003c/a\n\n```\nThe browser will display an underlined text, and when you click on it, it will take you to https://www.example.com/.\n\nBy default, when you click on a link, the target shows up in the same browser tab. You can change this behavior using the target attribute.\n\n-   _self - Default. Opens the document in the same window/tab as it was clicked\n-   _blank - Opens the document in a new window or tab\n-   _parent - Opens the document in the parent frame\n-   _top - Opens the document in the full body of the window\n\nFor example, the following link will take you to a new tab:\n\n```js\n1.  \u003ca href=\"https://www.example.com/\" target=\"_blank\"\u003elink text\u003c/a\u003e\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmosespace%2Fwebsite-motivation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmosespace%2Fwebsite-motivation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmosespace%2Fwebsite-motivation/lists"}