Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/manthanank/learn-html

Complete HTML with all resources to learn.
https://github.com/manthanank/learn-html

html learn-html

Last synced: about 6 hours ago
JSON representation

Complete HTML with all resources to learn.

Host: GitHub
URL: https://github.com/manthanank/learn-html
Owner: manthanank
License: mit
Created: 2023-03-21T18:49:59.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-02-04T13:07:08.000Z (9 months ago)
Last Synced: 2024-10-31T17:14:30.859Z (8 days ago)
Topics: html, learn-html
Language: HTML
Homepage:
Size: 25.4 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

# HTML

![npm](https://img.shields.io/npm/dw/learn-html)

**HTML** - Stands for Hyper Text Markup Language

HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

**`` Declaration** - Represents the document type and helps browsers to display web pages correctly.

## Elements

An HTML element is defined by a start tag, some content, and an end tag.

```html
Content goes here...
```

## Attributes

**href** - defines a hyper link.

```html
Visit W3Schools
```

**src** - used to embed images in the web pages.

```html

```

**1. Absolute URL** - Links to an external image that is hosted on another website.

```html

```

**2. Relative URL** - Links to an image that is hosted within the website.

```html

```

**width & height** - specify the width and height of the image (in pixels).

```html

```

**alt** - specifies an alternate text for an image, if the image for some reason cannot be displayed.

```html
Image of a jacket
```

**style** - used to add styles to an element, such as color, font, size, and more.

```html

This is a red paragraph.

```

**lang** - used to declare the language of the Web page. And always included inside the `` tag.

```html

```

**title** - defines some extra information about an element.

```html

This is a paragraph.

```

**Suggestion 1:** Always Use Lowercase Attributes and Always Quote Attribute Values

```html
Visit our HTML tutorial
```

**Suggestion 2:** Single or Double Quotes

```html

```

## Heading

HTML headings are titles or subtitles that you want to display on a webpage. There are six headings defined with the `

` to `

` tags.

```html

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

```

## Bigger Headings

You can specify the size for any heading with the style attribute, using the CSS `font-size` property

```html

Heading 1

```

**Suggestion :** Search engines use the headings to index the structure and content of your web pages.

## Paragrapgh

Defines a paragraph with `

` element.

```html

This is the first paragraph

```

## Horizontal Rules

Defines a thematic break in an HTML page, and is most often displayed as a horizontal rule with `

` element.

```html

This is the first paragraph

This is the second paragraph

```

## HTML Line Breaks

Defines a line break with `
` element.

```html

This is
a paragraph
with line breaks.

```

## Preformatted Text

Defines preformatted text with `

` element.

```html

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

```

## Styles

HTML `style` attribute is used to add styles to an element, such as color, font, size, and more.

```html
Tag Name

```

**Background color** -

CSS `background-color` property defines the background color for an HTML element.

```html

Headning

```

**Text color** -

CSS `color` property defines the text color for an HTML element

```html

This is a paragraph.

```

**Fonts** -

CSS `font-family` property defines the font to be used for an HTML element

```html

This is a paragraph.

```

**Text Size** -

CSS `font-size` property defines the text size for an HTML element

```html

This is a paragraph.

```

**Text Alignment** -

CSS `text-align` property defines the horizontal text alignment for an HTML element.

```html

Heading.

```

## Formatting

**Bold** - The HTML `` element defines bold text, without any extra importance.

```html
This text is bold
```

**Important** - The HTML `` element defines text with strong importance. The content inside is typically displayed in bold.

```html
This text is important!
```

**Italic** - The HTML `` element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

```html
This text is italic
```

**Emphasized** - The HTML `` element defines emphasized text. The content inside is typically displayed in italic.

```html
This text is emphasized
```

**Marked** - The HTML `` element defines text that should be marked or highlighted

```html
Do not forget to buy milk today.

```

**Smaller** - The HTML `` element defines smaller text

```html
This is some smaller text.
```

**Deleted** - The HTML `~~` element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text~~

```html
My favorite color is ~~blue~~ black.

```

**Inserted** - The HTML `` element defines a text that has been inserted into a document. Browsers will usually underline inserted text

```html
My favorite color is ~~blue~~ black.

```

**Subscript** - The HTML `_{` element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.}

```html
This is _subscripted text.

```

**Superscript** - The HTML `^{` element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].}

```html
This is ^{superscripted} text.

```

## Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

```html

```

**Hide Content** - Comments can be used to hide content.

```html
This is a paragraph.

This is a paragraph too.

```

**Hide Inline Content** - Comments can be used to hide parts in the middle of the HTML code.

```html
This is a paragraph.

```

## Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

**Background color** - You can set the background color for HTML elements

```html
Hello World

Lorem ipsum...

```

**Text color** - You can set the color of text

```html
Hello World

Lorem ipsum...

Ut wisi enim...

```

**Border color** - You can set the color of borders

```html
Hello World

Hello World

Hello World

```

## Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three `
` elements have their background color set with RGB, HEX, and HSL values

```html
...

...

...

...

...

```

**RGB** - An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

```html
rgb(255, 99, 71)
```

**HEX** - In HTML, a color can be specified using a hexadecimal value in the form:

`#rrggbb`

```html
#ff6347
```

**HSL** - In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

```html
hsl(0, 100%, 50%)
```

**RGBA** - RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

```html
rgba(255, 99, 71, 0.5)
```

**HSLA** - HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

```html
hsla(0, 100%, 50%, 0.5)
```

## Quotations

**Blockquotations** - The HTML `
` element defines a section that is quoted from another source.

```html
Here is a quote from WWF's website:

For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.

```

Short Quotations - The HTML `` tag defines a short quotation.

```html
WWF's goal is to: Build a future where people live in harmony with nature.

```

Abbreviations - The HTML `` tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

```html
The WHO was founded in 1948.

```

Address - The HTML `
` tag defines the contact information for the author/owner of a document or an article.

```html

Written by John Doe.

Visit us at:

Example.com

Box 564, Disneyland

USA

```

Work Title - The HTML `` tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

```html
The Scream by Edvard Munch. Painted in 1893.

```

Bidirectional Overrides - BDO stands for Bi-Directional Override. The HTML `` tag is used to override the current text direction.

```html
This text will be written from right to left
```

## HTML CSS

`CSS` saves a lot of work. It can control the layout of multiple web pages all at once.

`What is CSS?`

Ans: Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

## Using CSS

CSS can be added to HTML documents in 3 ways:

- Inline - by using the style attribute inside HTML elements
- Internal - by using a `` element in the `<head>` section
- External - by using a `<link>` element to link to an external CSS file

### Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the `<h1>` element to blue, and the text color of the `<p>` element to red:

```html
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>
```

### Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the `<head>` section of an HTML page, within a `<style>` element.

The following example sets the text color of ALL the `<h1>` elements (on that page) to blue, and the text color of ALL the `<p>` elements to red. In addition, the page will be displayed with a "powderblue" background color:

```html
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}

This is a heading

This is a paragraph.

```

### External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the `` section of each HTML page:

```html

This is a heading

This is a paragraph.

```

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":

```css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
```

## CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS `color` property defines the text color to be used.

The CSS `font-family` property defines the font to be used.

The CSS `font-size` property defines the text size to be used.

```htm

h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}

This is a heading

This is a paragraph.

```

## CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

```css
p {
border: 2px solid powderblue;
}
```

## CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

```css
p {
border: 2px solid powderblue;
padding: 30px;
}
```

## CSS Margin

The CSS margin property defines a margin (space) outside the border.

```css
p {
border: 2px solid powderblue;
margin: 50px;
}
```

## Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a style sheet:

```html

```

This example links to a style sheet located in the html folder on the current web site:

```html

```

This example links to a style sheet located in the same folder as the current page:

```html

```

## Links

HTML links are hyperlinks. The HTML `` tag defines a hyperlink.

```html
Link
```

### Target Attributes

**_self** - Default. Opens the document in the same window/tab as it was clicked

```html
Link
```

**_blank** - Opens the document in a new window or tab

```html
Link
```

**_parent** - Opens the document in the parent frame

```html
Link
```

**_top** - Opens the document in the full body of the window

```html
Link
```

## Absolute URL

Links to an external image that is hosted on another website

```html

```

## Relative URL

Links to an image that is hosted within the website

```html

```

## Use an Image as a Link

To use an image as a link, just put the `` tag inside the `` tag:

```html

```

## Link to Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):

```html
E-Mail
```

## Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button

```html
HTML Tutorial
```

## Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

```html
Link Title
```

## HTML Link Colors

By default, a link will appear like this (in all browsers):

- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red

```html

a:link {
color: green;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}

HTML Images
```

## Create Bookmarks

Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

```html
Link

Link
```

## Add Favicon

```html
Link
```

## Images

```html

```

**Src** - Specifies the path to the image

The required src attribute specifies the path (URL) to the image.

```html

```

**Alt** - Specifies an alternate text for the image

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it.

```html

```

**Image Size - Width and Height** -

You can use the style attribute to specify the width and height of an image.

```html

```

Alternatively, you can use the width and height attributes:

```html

```

## Image Map

The HTML `` tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more `` tags.

```html

```

**The Image** -

The image is inserted using the `` tag. The only difference from other images is that you must add a usemap attribute:

```html

```

**Create Image Map** -

Then, add a `` element.

The `` element is used to create an image map, and is linked to the image by using the required name attribute:

```html

```

**The Areas** -

Then, add the clickable areas.

A clickable area is defined using an `` element.

**Shape** -

You must define the shape of the clickable area, and you can choose one of these values:

- rect - defines a rectangular region
- circle - defines a circular region
- poly - defines a polygonal region
- default - defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.

`Shape="rect"`

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

```html

```

`Shape="circle"`

To add a circle area, first locate the coordinates of the center of the circle

```html

```

`Shape="poly"`

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

```html

```

**Image Map and JavaScript** -

A clickable area can also trigger a JavaScript function.

Add a click event to the `` element to execute a JavaScript function:

```html

function myFunction() {
alert("You clicked the coffee cup!");
}

```

## Picture Element

The HTML `` element allows you to display different pictures for different devices or screen sizes.

The HTML `` element gives web developers more flexibility in specifying image resources.

The `` element contains one or more `` elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.

Each `` element has a media attribute that defines when the image is the most suitable.

```html

```

## Background Image

A background image can be specified for almost any HTML element.

**Background Image on a HTML element** -

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

```html

```

You can also specify the background image in the `` element, in the `<head>` section:

```html
<style>
p {
background-image: url('img_girl.jpg');
}

```

**Background Image on a Page** -

If you want the entire page to have a background image, you must specify the background image on the `
` element:

```html

body {
background-image: url('img_girl.jpg');
}

```

To avoid the background image from repeating itself, set the `background-repeat` property to `no-repeat`.

```html

body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}

```

## Background Cover

f you want the background image to cover the entire element, you can set the `background-size` property to `cover`.

Also, to make sure the entire element is always covered, set the `background-attachment` property to `fixed`.

This way, the background image will cover the entire element, with no stretching

```html

body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

```

## Background Stretch

If you want the background image to stretch to fit the entire element, you can set the `background-size` property to `100% 100%`.

```html

body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}

```

## Favicon

A favicon is a small image displayed next to the page title in the browser tab.

```html

My Page Title

This is a Heading

This is a paragraph.

```

## Page Title

Defines the title of the document. Every web page should have a page title to describe the meaning of the page. The `` element adds a title to your page.

```html

HTML Tutorial

The content of the document......

```

The `` element:

- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search engine-results

## Tables

HTML tables allow web developers to arrange data into rows and columns.

A simple HTML table:

```html

Company
Contact
Country

Alfreds Futterkiste
Maria Anders
Germany

Centro comercial Moctezuma
Francisco Chang
Mexico

```

### Table Cells

Each table cell is defined by a `` and a `` tag.

Each table cell is defined by a `` and a `` tag.

`td` stands for table data.

Everything between `` and `` are the content of the table cell.

```html

Emil
Tobias
Linus

```

### Table Rows

Each table row starts with a `` and ends with a `` tag.

`tr` stands for table row.

```html

Emil
Tobias
Linus

16
14
10

```

### Table Headers

Sometimes you want your cells to be table header cells. In those cases use the `` tag instead of the `` tag:

`th` stands for table header.

```html

Person 1
Person 2
Person 3

Emil
Tobias
Linus

16
14
10

```

| Tag | Description |
|---|---|
| `` | Defines a table |
| `` | Defines a header cell in a table |
| `` | Defines a row in a table |
| `` | Defines a cell in a table |
| `` | Defines a table caption |
| `` | Specifies a group of one or more columns in a table for formatting |
| `` | Specifies column properties for each column within a `` element |
| `` | Groups the header content in a table |
| `` | Groups the body content in a table |
| `` | Groups the footer content in a table |

Ecosyste.ms: Awesome

https://github.com/manthanank/learn-html

Awesome Lists containing this project

README

` to `

` tags. ```html

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Headning

Heading.

Hello World

Hello World

Hello World

Hello World

Hello World

...

...

...

...

...

This is a heading

This is a heading

This is a heading

Link

This is a Heading

` tags.

```html