fix: Update packages and fix local dev (#26907)
<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. --> - [x] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md). - [x] My pull request has a descriptive title (not a vague title like `Update index.md`) - [x] My pull request targets the `master` branch of freeCodeCamp.
This commit is contained in:
Stuart Taylor
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
153e1c9f38
commit
7da04a348b
69
mock-guide/english/html/attributes/a-href-attribute/index.md
Normal file
69
mock-guide/english/html/attributes/a-href-attribute/index.md
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: A Href Attribute
|
||||
---
|
||||
|
||||
## A Href Attribute
|
||||
|
||||
The `<a href>` attribute refers to a destination provided by a link. The `a` (anchor) tag is dead without the `<href>` attribute. Sometimes in your workflow, you don't want a live link or you won't know the link destination yet. In this case, it's useful to set the `href` attribute to `"#"` to create a dead link. The `href` attribute can be used to link to local files or files on the internet.
|
||||
|
||||
For instance:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Href Attribute Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Href Attribute Example</h1>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org/contribute/">The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamp's community and growth.
|
||||
</p>
|
||||
</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
The `<a href>` attribute is supported by all browsers.
|
||||
|
||||
#### More attributes:
|
||||
`hreflang` : Specifies the language of the linked resource.
|
||||
`target` : Specifies the context in which the linked resource will open.
|
||||
`title` : Defines the title of a link, which appears to the user as a tooltip.
|
||||
|
||||
### Examples
|
||||
```html
|
||||
<a href="#">This is a dead link</a>
|
||||
<a href="https://www.freecodecamp.org">This is a live link to freeCodeCamp</a>
|
||||
<a href="https://html.com/attributes/a-href/">more with a href attribute</a>
|
||||
|
||||
```
|
||||
### In-page anchors
|
||||
|
||||
It's also possible to set an anchor to certain place of the page. To do this you should first place a tab at location on the page with tag <a> and necessary attribute "name" with any keyword description in it, like this:
|
||||
|
||||
```html
|
||||
<a name="top"></a>
|
||||
```
|
||||
|
||||
Any description between tags is not required. After that you can place a link leading to this anchor at any place on the same page. To do this you should use tag <a> with necessary attribute "href" with symbol # (sharp) and key-word description of the anchor, like this:
|
||||
|
||||
```html
|
||||
<a href="#top">Go to Top</a>
|
||||
```
|
||||
|
||||
### Image Links
|
||||
|
||||
The `<a href="#">` may also be applied to images and other HTML elements.
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<a href="#"><img itemprop="image" style="height: 90px;" src="http://www.chatbot.chat/assets/images/header-bg_y.jpg" alt="picture"> </a>
|
||||
|
||||
```
|
||||
### Example
|
||||
<a href="#"><img itemprop="image" style="height: 90px;" src="http://www.chatbot.chat/assets/images/header-bg_y.jpg" alt="picture"> </a>
|
||||
### Some more examples of href
|
||||
```html
|
||||
<base href="https://www.freecodecamp.org/a-href/">This gives a base url for all further urls on the page</a>
|
||||
<link href="style.css">This is a live link to an external stylesheet</a>
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: A Target Attribute
|
||||
---
|
||||
## A Target Attribute
|
||||
|
||||
The `<a target>` attribute specifies where to open the linked document in an `a` (anchor) tag.
|
||||
<br>
|
||||
|
||||
#### Examples:
|
||||
|
||||
|
||||
A target attribute with the value of “_blank” opens the linked document in a new window or tab.
|
||||
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_blank">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
A target attribute with the value of “_self” opens the linked document in the same frame as it was clicked (this is the default and usually does not need to be specified).
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_self">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
A target attribute with the value of “_parent” opens the linked document in the parent frame.
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_parent">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
A target attribute with the value of “_top” opens the linked document in the full body of the window.
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_top">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
A target attribute with the value of _"framename"_ Opens the linked document in a specified named frame.
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="framename">freeCodeCamp</a>
|
||||
```
|
||||
|
||||
|
||||
#### More Information:
|
||||
|
||||
Target Attribute: <a href="https://www.w3schools.com/tags/att_a_target.asp" target="_blank">w3schools</a>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Autofocus Attribute
|
||||
---
|
||||
## Autofocus Attribute | HTML5
|
||||
|
||||
The **autofocus** attribute is a boolean attribute.
|
||||
|
||||
When present, it specifies that the element should automatically get input focus when the page loads.
|
||||
|
||||
Only one form element in a document can have the **autofocus** attribute. It cannot be applied to `<input type="hidden">`.
|
||||
|
||||
### Applies to
|
||||
|
||||
| Element | Attribute |
|
||||
| :-- | :-- |
|
||||
| `<button>` | autofocus |
|
||||
| `<input>` | autofocus |
|
||||
| `<select>` | autofocus |
|
||||
| `<textarea>` | autofocus |
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input type="text" name="fname" autofocus>
|
||||
<input type="text" name="lname">
|
||||
</form>
|
||||
```
|
||||
|
||||
### Compatibility
|
||||
|
||||
This is an HTML5 attribute.
|
||||
|
||||
#### More Information:
|
||||
|
||||
[HTML autofocus Attribute](https://www.w3schools.com/tags/att_autofocus.asp) on w3schools.com
|
||||
|
||||
[<input> autofocus attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) on MDN web docs
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Body Background Attribute
|
||||
---
|
||||
## Body Background Attribute
|
||||
|
||||
If you want to add a background image instead of a color, one solution is the `<body background>` attribute. It specifies a background image for an HTML document.
|
||||
|
||||
|
||||
Syntax:
|
||||
|
||||
`<body background="URL">`
|
||||
|
||||
|
||||
Attribute:
|
||||
|
||||
`background - URL for background image`
|
||||
|
||||
|
||||
Example:
|
||||
```html
|
||||
<html>
|
||||
<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
## body-background attribute is depreciated
|
||||
the body-background attribute been deprecated in HTML5. The correct way to style the ```<body>``` tag is with CSS.
|
||||
|
||||
|
||||
There are several CSS properties used for setting the background of an element. These can be used on <body> to set the background of an entire page.
|
||||
|
||||
## Check it Out:
|
||||
* [CSS background proprety](https://github.com/freeCodeCamp/guides/blob/master/src/pages/css/background/index.md)
|
||||
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Body Bgcolor Attribute
|
||||
---
|
||||
## Body Bgcolor Attribute
|
||||
The `<body bgcolor>` attribute assigns a background color for an HTML document.
|
||||
|
||||
**Syntax**:
|
||||
|
||||
`<body bgcolor="color">`
|
||||
The color value can be either a color name (like, `purple`) or a hex value (like, `#af0000`).
|
||||
|
||||
To add a background color to a webpage you can use the `<body bgcolor="######">` attribute. It specifies a color for the HTML document to display.
|
||||
|
||||
**For example:**
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Body bgcolor Attribute example</title>
|
||||
</head>
|
||||
<body bgcolor="#afafaf">
|
||||
<h1>This webpage has colored background.</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
You can change the color by replacing ###### with a hexadecimal value. For simple colors you can also use the word, such as "red" or "black".
|
||||
|
||||
All major browsers support the `<body bgcolor>` attribute.
|
||||
|
||||
*Note:*
|
||||
* HTML 5 does not support the `<body bgcolor>` attribute. Use CSS for this purpose. How? By using the following code:
|
||||
`<body style="background-color: color">`
|
||||
Of course, you can also do it in a separate document instead of an inline method.
|
||||
|
||||
* Do not use RGB value in `<body bgcolor>` attribute because `rgb()` is for CSS only, that is, it will not work in HTML.
|
||||
|
||||
**See it in action:**
|
||||
https://repl.it/Mwht/2
|
||||
|
||||
**Other resources:**
|
||||
* HTML color names: https://www.w3schools.com/colors/colors_names.asp
|
||||
* CSS background-color property: https://www.w3schools.com/cssref/pr_background-color.asp
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Div Align Attribute
|
||||
---
|
||||
## Div Align Attribute
|
||||
|
||||
The `<div align="">` attribute is used for aligning the text in a div tag to The Left, Right, center or justify.
|
||||
|
||||
For instance:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title> Div Align Attribbute </title>
|
||||
</head>
|
||||
<body>
|
||||
<div align="left">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div align="right">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div align="center">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
<div align="justify">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
## Important!
|
||||
This attribute is no longer supported in html5. css is the way to go.
|
||||
|
||||
The Div Align attribute can be used to horizontally align the contents within a div. In the below example, the text will be centered within the div.
|
||||
|
||||
```html
|
||||
<div align="center">
|
||||
This Text Will Be Centered
|
||||
</div>
|
||||
```
|
||||
|
||||
**This attribute is not supported in HTML5 and [CSS Text Align](https://github.com/freeCodeCamp/guides/blob/f50b7370be514b2a03ee707cd0f0febe2bb713ae/src/pages/css/text-align/index.md) should be used instead
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Font Color Attribute
|
||||
---
|
||||
|
||||
## Font Color Attribute
|
||||
This attribute is used to set a color to the text enclosed in a ```<font>``` tag.
|
||||
|
||||
### Syntax:
|
||||
```html
|
||||
<font color= "color">
|
||||
```
|
||||
|
||||
### Important:
|
||||
This attribute is not supported in HTML5. Instead, this [freeCodeCamp article](https://guide.freecodecamp.org/css/colors) specifies a CSS method, which can be used.
|
||||
|
||||
### Note:
|
||||
A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.
|
||||
|
||||
### Example:
|
||||
1. Color name attribute
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<font color="green">Font color example using color attribute</font>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
2. Hex code attribute
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<font color="#00FF00">Font color example using color attribute</font>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
3. RGB attribute
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<font color="rgb(0,255,0)">Font color example using color attribute</font>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Font Size Attribute
|
||||
---
|
||||
## Font Size Attribute
|
||||
|
||||
This attribute specifies the font size as either a numeric or relative value. Numeric values range from `1` to `7` with `1` being the smallest and `3` the default. It can also be defined using a relative value, like `+2` or `-3`, which set it relative to the value of the size attribute of the `<basefont>` element, or relative to `3`, the default value, if none does exist.
|
||||
|
||||
Syntax:
|
||||
|
||||
`<font size="number">
|
||||
`
|
||||
|
||||
Example:
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<font size="6">This is some text!</font>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Note : `The size attribute of <font> is not supported in HTML5. Use CSS instead.`
|
||||
21
mock-guide/english/html/attributes/href-attribute/index.md
Normal file
21
mock-guide/english/html/attributes/href-attribute/index.md
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Href Attribute
|
||||
---
|
||||
## Href Attribute
|
||||
|
||||
Href is short for "Hypertext Reference" and is an HTML attribute. The href attribute is mainly used for `<a>` tags to specify the URL for a webpage the link leads to (whether it be on a different section of the same page, or on a completely different webpage).
|
||||
|
||||
#### How to use
|
||||
`<a href="URL"></a>`
|
||||
|
||||
#### Examples
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org">This is an absolute URL</a>
|
||||
|
||||
<a href="index.html">This is a relative URL</a>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
[W3Schools](https://www.w3schools.com/tags/att_href.asp)
|
||||
|
||||
[HTMLElementReference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
|
||||
51
mock-guide/english/html/attributes/href/index.md
Normal file
51
mock-guide/english/html/attributes/href/index.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Href
|
||||
---
|
||||
## Href
|
||||
|
||||
Hypertext Reference (HREF) is an HTML attribute that you use to specify a link destination or Uniform Resource Locator (URL). Most commonly you will see the HREF attribute paired with an anchor tag `<a>`.
|
||||
|
||||
The HREF attribute gets the exact meaning of a link depending on the element that is using it. For instance when using with the `<a>` tag, it is referencing the location of an object express as a URL. When using the HREF attribute with the `<image>` tag, the HREF attribute is referencing the URL of the image to render.
|
||||
|
||||
### Examples:
|
||||
Link to Google's Homepage:
|
||||
|
||||
-> The text "Visit Google's Homepage acts like the link to the Homepage
|
||||
|
||||
```html
|
||||
<a href="https://www.google.com">Visit Google’s Homepage</a>
|
||||
```
|
||||
|
||||
Image as an Link:
|
||||
|
||||
-> Google Logo that refers to Google's Homepage
|
||||
|
||||
```html
|
||||
<a href="https://www.google.com">
|
||||
<img border="0" alt="Google" src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" width="100" height="100">
|
||||
```
|
||||
|
||||
Tags that use HREF:
|
||||
```html
|
||||
<a>
|
||||
<area>
|
||||
<base>
|
||||
<cursor>
|
||||
<discard>
|
||||
<feImage>
|
||||
<hatch>
|
||||
<image>
|
||||
<link>
|
||||
<mesh>
|
||||
<meshgradient>
|
||||
<mpath>
|
||||
<pattern>
|
||||
<script>
|
||||
<textPath>
|
||||
<use>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
<a href='https://tomayko.com/blog/2008/wtf-is-an-href-anyway' target='_blank' rel='nofollow'>WTF is a href anyway</a>
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href' target='_blank' rel='nofollow'>MDN</a>
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Img Align Attribute
|
||||
---
|
||||
## Img Align Attribute
|
||||
|
||||
The align attribute of an image specifies where the image should be aligned according to the surrounding element.
|
||||
|
||||
Attribute Values:
|
||||
right - Align image to the right
|
||||
left - Align image to the left
|
||||
top - Align image to the top
|
||||
bottom - Align image to the bottom
|
||||
middle - Align image to the middle
|
||||
|
||||
For example:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Img Align Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>This is an example. <img src="image.png" alt="Image" align="middle"> More text right here
|
||||
<img src="image.png" alt="Image" width="100"/>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
We can also align in right if we want:
|
||||
```html
|
||||
<p>This is another example<img src="image.png" alt="Image" align="right"></p>
|
||||
```
|
||||
**Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.**
|
||||
|
||||
|
||||
#### More Information:
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank">MDN article on the img tag and its attributes<a>
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Img Src Attribute
|
||||
---
|
||||
## Img Src Attribute
|
||||
The `<img src>` attribute refers to the source of the image you want to display. The `img` tag will not display an image without the `src` attribute. However, if you set the source to the location of the image, you can display any image.
|
||||
|
||||
There is an image of the freeCodeCamp Logo located at `https://avatars0.githubusercontent.com/u/9892522?v=4&s=400`
|
||||
|
||||
You can set that as the image using the `src` attribute.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Img Src Attribute Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400">
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
The above code displays like this:
|
||||
|
||||
|
||||
|
||||
The `src` attribute is supported by all browsers.
|
||||
|
||||
You can also have a locally hosted file as your image.
|
||||
|
||||
For example, `<img src="images/freeCodeCamp.jpeg>` would work if you had a folder called `images` which had the `freeCodeCamp.jpeg` inside, as long as the 'images' folder was in the same location as the `index.html` file.
|
||||
|
||||
`../files/index.html`
|
||||
|
||||
`..files/images/freeCodeCamp.jpeg`
|
||||
|
||||
|
||||
### More Information:
|
||||
|
||||
- [HTML.com](https://html.com/attributes/img-src/)
|
||||
- [W3 Schools](https://www.w3schools.com/tags/att_img_src.asp)
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Img Width Attribute
|
||||
---
|
||||
## Img Width Attribute
|
||||
|
||||
The HTML 'width' attribute refers to the width of an image. The value in the quotations is the amount of pixels.
|
||||
|
||||
For example, if you already have a link to an image set up via the `src` attribute you can add the width attribute like so:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Img Width Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="image.png" alt="Image" width="100"/>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
In the code snippet above there is an image tag and the image is set to a width of 100 pixels. `width="100"`
|
||||
|
||||
#### More Information:
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank">MDN article on the img tag<a>
|
||||
43
mock-guide/english/html/attributes/index.md
Normal file
43
mock-guide/english/html/attributes/index.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Attributes
|
||||
---
|
||||
# HTML Attributes
|
||||
|
||||
HTML elements can have attributes, which contain additional information about the element.
|
||||
|
||||
HTML attributes generally come in name-value pairs, and always go in the opening tag of an element. The attribute name says what type of information you're providing about the element, and the attribute value is the actual information.
|
||||
|
||||
For example, an anchor (`<a>`) element in an HTML document creates links to other pages, or other parts of the page. You use the `href` attribute in the opening `<a>` tag to tell the browser where the link sends a user.
|
||||
|
||||
Here's an example of a link that sends users to freeCodeCamp's home page:
|
||||
|
||||
```html
|
||||
<a href="www.freecodecamp.org">Click here to go to freeCodeCamp!</a>
|
||||
```
|
||||
|
||||
Notice that the attribute name (`href`) and value ("www.freeCodeCamp.org") are separated with an equals sign, and quotes surround the value.
|
||||
|
||||
There are many different HTML attributes, but most of them only work on certain HTML elements. For example, the `href` attribute won't work if it's placed in an opening `<h1>` tag.
|
||||
|
||||
In the example above, the value supplied to the `href` attribute could be any valid link. However, some attributes only have a set of valid options you can use, or values need to be in a specific format. The `lang` attribute tells the browser the default language of the contents in an HTML element. The values for the `lang` attribute should use standard language or country codes, such as `en` for English, or `it` for Italian.
|
||||
|
||||
## Boolean Attributes
|
||||
|
||||
Some HTML attributes don't need a value because they only have one option. These are called Boolean attributes. The presence of the attribute in a tag will apply it to that HTML element. However, it's okay to write out the attribute name and set it equal to the one option of the value. In this case, the value is usually the same as the attribute name.
|
||||
|
||||
For example, the `<input>` element in a form can have a `required` attribute. This requires users to fill out that item before they can submit the form.
|
||||
|
||||
Here are examples that do the same thing:
|
||||
|
||||
```html
|
||||
<input type="text" required >
|
||||
<input type="text" required="required" >
|
||||
```
|
||||
|
||||
## Other Resources
|
||||
|
||||
[HTML links](#)
|
||||
[Href Attribute](#)
|
||||
[Lang Attribute](#)
|
||||
[HTML Input Element](#)
|
||||
[Required Attribute](#)
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Input Checked Attribute
|
||||
---
|
||||
## Input Checked Attribute
|
||||
|
||||
The checked attribute is a boolean attribute.
|
||||
|
||||
When present, it specifies that an <input> element should be pre-selected (checked) when the page loads.
|
||||
|
||||
The checked attribute can be used with <input type="checkbox"> and <input type="radio">.
|
||||
|
||||
The checked attribute can also be set after the page load, through JavaScript.
|
||||
|
||||
## Take a look at the following example:
|
||||
```html
|
||||
<form action="/action_page.php">
|
||||
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
|
||||
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
```
|
||||
|
||||
In the example above when the web page is loaded by default the first checkbox will come automatically selected due to the checked attribute.
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
title: Input Type Attribute
|
||||
---
|
||||
## Input Type Attribute
|
||||
|
||||
The input type attribute specifies the type of the input the user should put in your form.
|
||||
|
||||
### text
|
||||
One line of a text.
|
||||
```html
|
||||
<form>
|
||||
<label for="login">Login:</label>
|
||||
<input type="text" name="login">
|
||||
</form>
|
||||
```
|
||||
|
||||
### password
|
||||
One line of a text. Text is automatically displayed as a series of dots or asterisks (depends on the browser and OS).
|
||||
```html
|
||||
<form>
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password">
|
||||
</form>
|
||||
```
|
||||
|
||||
### email
|
||||
The HTML checks if the input matches the e-mail address format (something@something).
|
||||
```html
|
||||
<form>
|
||||
<label for="email">E-mail address:</label>
|
||||
<input type="email" name="email">
|
||||
</form>
|
||||
```
|
||||
|
||||
### number
|
||||
Allow only numeric input. You can also specify the min and max value allowed. The example below check that the input is number between 1 and 120.
|
||||
```html
|
||||
<form>
|
||||
<label for="age">Age:</label>
|
||||
<input type="number" name="age" min="1" max="120">
|
||||
</form>
|
||||
```
|
||||
|
||||
### radio
|
||||
Only one option can be selected by the user. The group of radio buttons need to have the same name attribute. You can select automatically one option by using `checked` property (in example below the value Blue is selected).
|
||||
```html
|
||||
<form>
|
||||
<label><input type="radio" name="color" value="red">Red</label>
|
||||
<label><input type="radio" name="color" value="green">Green</label>
|
||||
<label><input type="radio" name="color" value="blue" checked>Blue</label>
|
||||
</form>
|
||||
```
|
||||
### checkbox
|
||||
User can select zero or more options from the group of checkboxes. You can use `checked` property here too for one or more options.
|
||||
```html
|
||||
<form>
|
||||
<label><input type="checkbox" name="lang" value="english">english</label>
|
||||
<label><input type="checkbox" name="lang" value="spanish">spanish</label>
|
||||
<label><input type="checkbox" name="lang" value="french">french</label>
|
||||
</form>
|
||||
```
|
||||
### button
|
||||
The input is displayed as button, the text which should be displayed in the button is in value attribute.
|
||||
```html
|
||||
<form>
|
||||
<input type="button" value="click here">
|
||||
</form>
|
||||
```
|
||||
### submit
|
||||
Displays the submit button. The text which should be displayed in the button is in value attribute. After clicking on the button, the HTML do the validation and if it passes, the form is submitted.
|
||||
```html
|
||||
<form>
|
||||
<input type="submit" value="SUBMIT">
|
||||
</form>
|
||||
```
|
||||
|
||||
### reset
|
||||
Displays the reset button. The text which should be displayed in the button is in value attribute. After clicking on the button, all values from the form are deleted.
|
||||
```html
|
||||
<form>
|
||||
<input type="reset" value="CANCEL">
|
||||
</form>
|
||||
```
|
||||
|
||||
There are more types elements. For more information visit [MSDN]("https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input") or [w3schools]("https://www.w3schools.com/Html/html_form_input_types.asp").
|
||||
|
||||
42
mock-guide/english/html/attributes/input/index.md
Normal file
42
mock-guide/english/html/attributes/input/index.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Input
|
||||
---
|
||||
## Input
|
||||
The HTML `<input>` tag is used within a form to declare an input element.
|
||||
It allows the user to enter data.
|
||||
|
||||
## Example
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>HTML input Tag</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form action = "/cgi-bin/hello_get.cgi" method = "get">
|
||||
First name:
|
||||
<input type = "text" name = "first_name" value = "" maxlength = "100" />
|
||||
<br />
|
||||
|
||||
Last name:
|
||||
<input type = "text" name = "last_name" value = "" maxlength = "100" />
|
||||
<input type = "submit" value = "Submit" />
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
In the above example, there are two input fields which ask the user to enter their first and last names according to the labels specified. The submit `<button type="submit">` is another type of input which is used to take the data entered by the user into the form and send it to some other location specified in the code.
|
||||
|
||||
#### More Information:
|
||||
<a href="https://www.youtube.com/watch?v=qJ9ZkxmVf5s">Youtube</a>
|
||||
|
||||
|
||||
## Input
|
||||
The HTML `<input>` tag is of many types to enter data. Some of them are:
|
||||
Type:Text(This is the most common type which is used to create general textboxes)
|
||||
Type:Password(This type is used for creation of password feilds)
|
||||
Type:Hidden(This is a special type of Input that is not shown to the user but it is used for passing information from one page to another while using <a href> tag)
|
||||
25
mock-guide/english/html/attributes/lang/index.md
Normal file
25
mock-guide/english/html/attributes/lang/index.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: Lang
|
||||
---
|
||||
## Lang
|
||||
|
||||
In HTML, Lang tag is used to declare the language of the whole or a part of a web page.
|
||||
|
||||
### Examples
|
||||
|
||||
```html
|
||||
<html lang="en">
|
||||
</html>
|
||||
```
|
||||
|
||||
The lang attribute can also be used to specify the language of a specific element:
|
||||
|
||||
```html
|
||||
<p lang="hi">
|
||||
फ्री कोड कैंप
|
||||
</p>
|
||||
```
|
||||
|
||||
In the above example, "hi" denotes the Hindi language. Similarly, you can use "en" for English, "es" for Spanish, "fr" for French and so on.
|
||||
|
||||
Refer to [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) for the appropriate two-digit Language code.
|
||||
48
mock-guide/english/html/attributes/links/index.md
Normal file
48
mock-guide/english/html/attributes/links/index.md
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Links
|
||||
---
|
||||
## Links
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/attributes/links/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
Links are used everywhere on the web, with the purpose if directing users to various content items. They're usually indicated by your cursor turning into a hand icon. Links can be text, images or other elements contained within your HTML or webpage.
|
||||
|
||||
You use an ```code <a>``` tag or anchor element to define your link, which also also needs a destination address that you'll access with the ```code href``` attribute. Here's a snippet that makes the phrase 'the freeCodeCamp Guide' a link:
|
||||
|
||||
```html
|
||||
<a href="https://guide.freecodecamp.org">the freeCodeCamp Guide</a>
|
||||
```
|
||||
|
||||
If you'd like your link to open in a new tab, you'll use the ```code target``` attribute along with the ```code "_blank"``` value inside your opening ```code <a>``` tag. That looks like this:
|
||||
|
||||
```html
|
||||
<a href="https://guide.freecodecamp.org" target="_blank">the freeCodeCamp Guide</a>
|
||||
```
|
||||
|
||||
When you need to guide users to a specific part of your webpage, let's assume the very bottom, you first need to assign the hash ```code #``` symbol to the ```code href``` attribute, like this
|
||||
|
||||
```html
|
||||
<a href="#footer>More about us<a/>
|
||||
```
|
||||
|
||||
you'll then need to use an ```code id``` attribute in the element you want to direct your user to - in this case the ```code <footer>``` at the bottom of the webpage.
|
||||
|
||||
```html
|
||||
<footer id="footer">Powered by freeCodeCamp</footer>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
<a href="https://www.w3schools.com/html/html_links.asp" target="_blank">w3sschools - HTML Links</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Onclick Event Attribute
|
||||
---
|
||||
|
||||
## Onclick Event Attribute
|
||||
|
||||
When the element is clicked fires a event.
|
||||
|
||||
It works just like the *onclick method* or `addEventListener('click')` to the element.
|
||||
|
||||
```html
|
||||
<element onclick="event"></element>
|
||||
```
|
||||
> `event` can be a JavaScript function or you can write raw JavaScript
|
||||
|
||||
### Examples
|
||||
|
||||
Changing the color of a ```<p>``` element when clicked
|
||||
|
||||
```html
|
||||
<p id="text" onclick="redify()">Change my color</p>
|
||||
|
||||
<script>
|
||||
function redify(){
|
||||
let text = document.querySelector('#text');
|
||||
text.style.color = "red";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Using raw JavaScript onclick attribute:
|
||||
|
||||
```html
|
||||
<button onclick="alert('Hello')">Hello World</button>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
- [MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/onclick)
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: P Align Attribute
|
||||
---
|
||||
## P Align Attribute
|
||||
|
||||
### Important
|
||||
This attribute is not supported in HTML5. It is recommended to use the [`text-align` CSS property](https://guide.freecodecamp.org/css/text-align).
|
||||
|
||||
To align the text inside a `<p>` tag, this attribute will help.
|
||||
|
||||
### Syntax
|
||||
```html
|
||||
<p align="position">Lorem Ipsum...</p>
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
- **left** - Text aligns to the left
|
||||
- **right** - Text aligns to the right
|
||||
- **center** - Text aligns to the center
|
||||
- **justify** - All lines of text have equal width
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<p align="center">Paragraph align attribute example</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
* [CSS `text-align`](https://guide.freecodecamp.org/css/text-align)
|
||||
* [W3 - HTML 4.01 Specification](https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)
|
||||
* [MDN - CSS Text Align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Placeholder Attribute
|
||||
---
|
||||
## Placeholder Attribute | HTML5
|
||||
|
||||
Specifies a short hint that describes the expected value of an `<input>` or `<textarea>` form control.
|
||||
|
||||
The placeholder attribute must not contain carriage returns or line-feeds.
|
||||
|
||||
NOTE: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take.
|
||||
|
||||
### Example
|
||||
|
||||
Input Example
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input type="text" name="fname" placeholder="First Name">
|
||||
<input type="text" name="lname" placeholder="Last Name">
|
||||
</form>
|
||||
```
|
||||
|
||||
Textarea Example
|
||||
|
||||
```html
|
||||
<textarea placeholder="Describe yourself here..."></textarea>
|
||||
```
|
||||
|
||||
### Compatibility
|
||||
|
||||
This is an HTML5 Attribute.
|
||||
|
||||
#### More Information:
|
||||
|
||||
[HTML placeholder Attribute](https://www.w3schools.com/tags/att_placeholder.asp) on w3schools.com
|
||||
51
mock-guide/english/html/attributes/required/index.md
Normal file
51
mock-guide/english/html/attributes/required/index.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Required
|
||||
---
|
||||
## Required
|
||||
|
||||
|
||||
The HTML required attribute is used in an input element to make the input field in a form required to submit the form.
|
||||
If the user does not fill in the input field the form will not submit and it will give a message asking the user to fill out the field.
|
||||
The `required` attribute is applicable to `<input>`, `<select>`, `<textarea>`.
|
||||
|
||||
For example:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML Required Attribute</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="/">
|
||||
Text Field: <input type="text" name="textfield" required>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Select Example:
|
||||
```html
|
||||
<form action="/action.php">
|
||||
<select required>
|
||||
<option value="">None</option>
|
||||
<option value="volvo">Volvo</option>
|
||||
<option value="saab">Saab</option>
|
||||
<option value="mercedes">Mercedes</option>
|
||||
<option value="audi">Audi</option>
|
||||
</select>
|
||||
</form>
|
||||
```
|
||||
Text Area Example:
|
||||
```html
|
||||
<form action="/action.php">
|
||||
<textarea name="comment" required></textarea>
|
||||
<input type="submit">
|
||||
</form>
|
||||
```
|
||||
|
||||
Simply add `required` to an input element
|
||||
|
||||
#### More Information:
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" target="_blank">MDN article on the input element</a>
|
||||
|
||||
20
mock-guide/english/html/attributes/role-attribute/index.md
Normal file
20
mock-guide/english/html/attributes/role-attribute/index.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Role Attribute
|
||||
---
|
||||
## Role Attribute
|
||||
|
||||
The `role` attribute, describes the role of an element to programs that can make use of it, such as screen readers or magnifiers.
|
||||
|
||||
Usage Example:
|
||||
```html
|
||||
<a href="#" role="button">Button Link</a>
|
||||
```
|
||||
Screen Readers will read this element as "button" instead of "link".
|
||||
|
||||
There are four categories of roles:
|
||||
- Abstract Roles
|
||||
- Widget Roles
|
||||
- Document Structure Roles
|
||||
- Landmark Roles
|
||||
|
||||
For full list of existing roles, refer to [aria roles documentation](https://www.w3.org/TR/wai-aria/roles).
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Script Src Attribute
|
||||
---
|
||||
## Script Src Attribute
|
||||
|
||||
The 'src' attribute in a <script></script> tag is the path to an external file or resource that you want to link to your HTML document.
|
||||
|
||||
For example, if you had your own custom JavaScript file named 'script.js' and wanted to add its functionality to your HTML page, you would add it like this:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Script Src Attribute Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
This would point to a file named 'script.js' that is in the same directory as the .html file. You can also link to other directories by using '..' in the file path.
|
||||
|
||||
```html
|
||||
<script src="../public/js/script.js"></script>
|
||||
```
|
||||
|
||||
This jumps up one directory level then into a 'public' directory then to a 'js' directory and then to the 'script.js' file.
|
||||
|
||||
You can also use the 'src' attribute to link to external .js files hosted by a third party. This is used if you don't want to download a local copy of the file. Just note that if the link changes or network access is down, then the external file you are linking to won't work.
|
||||
|
||||
This example links to a jQuery file.
|
||||
|
||||
```html
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-src' target='_blank' rel='nofollow'>MDN Article on the HTML <script> tag</a>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Table Border Attribute
|
||||
---
|
||||
## Table Border Attribute
|
||||
|
||||
The `<table>` tag border attribute is a way to order a border to a HTML Table. The supported values are `0` (no border) and `1` (border). The border attribute is not supported in HTML 5 the latest version of HTML. It's recommended to use CSS to add a border to a table in HTML 5.
|
||||
|
||||
#### More Information:
|
||||
* [MDN - HTML Attribute Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
|
||||
* [MDN - CSS Border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
|
||||
Reference in New Issue
Block a user