https://github.com/thomasbnt/introduction-to-html-css
Introduction to HTML/CSS with an example.
https://github.com/thomasbnt/introduction-to-html-css
Last synced: 3 months ago
JSON representation
Introduction to HTML/CSS with an example.
- Host: GitHub
- URL: https://github.com/thomasbnt/introduction-to-html-css
- Owner: thomasbnt
- License: gpl-3.0
- Created: 2025-01-02T14:54:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-02T15:20:59.000Z (over 1 year ago)
- Last Synced: 2025-03-06T14:31:25.175Z (about 1 year ago)
- Language: HTML
- Size: 21.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Introduction to learn HTML/CSS
This repository is a tutorial for learning HTML/CSS with a example in `src` (source) folder.
## Table of Contents
- [How to create a basic HTML page](#how-to-create-a-basic-html-page)
- [HTML](#html)
- [CSS](#css)
- [Basics HTML page](#basics-html-page)
- [Example](#example)
## How to create a basic HTML page
To 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.
Here is a basic HTML page:
```html
Document
Hello, World!
```
That's it! You have created a basic HTML page with a title and a heading.
> [!NOTE]
> Don't forget to add the `` declaration at the beginning of your HTML file. This declaration is used to tell the browser that the document is an HTML5 document.
> Also, don't forget to add the ``, ``, and `` tags. The `` tag is used to define an HTML document. The `` tag is used to define the head of the document. The `` tag is used to define the body of the document.
You can see the preview of your HTML page by opening it in a web browser.
## HTML
### Introduction to HTML
HTML 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.
### HTML Tags
HTML tags are composed of three things: an opening tag, content and ending tag. Some tags are unclosed tags. For example, the `![]()
` tag.
Other tags are closed tags. For example, the `
` tag, for example :
```html
This is a paragraph
```
```html
```
> [!NOTE]
> The `![]()
` tag is an unclosed tag. It doesn't have an ending tag.
> Also, for accessibility, it is important to add the `alt` attribute to the `![]()
` tag.
### HTML Attributes
HTML 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".
```html
This is a link
```
### HTML Headings
HTML headings are defined with the `
` to `` tags. `` defines the most important heading. `` defines the least important heading.
> [!NOTE]
> 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.
```html
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6 and the last
```
### Accessibility in HTML
Accessibility 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.
Don't hesitate to use `section`, `article`, `nav`, `header`, `footer` tags to structure your HTML page.
## Basics HTML page
In this section, we will create a basic HTML page with the following structure:
```html
Document
My website
Article 1
This is the content of the article 1
Article 2
This is the content of the article 2
© 2025 My website
```
We have created a basic HTML page with a header, a navigation bar, two articles and a footer without CSS for the moment.
## CSS