gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
guide/english/html/tutorials/basic-html/index.md Normal file
View File

@ -0,0 +1,28 @@
---
title: Basic HTML
---
## Basic HTML
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/tutorials/basic-html/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 -->
Structure of a basic HTML file:
```html
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
```
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

22
guide/english/html/tutorials/basic-html/radio-button/index.md Normal file
View File

@ -0,0 +1,22 @@
---
title: Radio Button
---
# Radio Button
```html
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
Radio buttons can be used to select a single option out of multiple options. You aren't allowed to choose 2 or more radio buttons in the same selection field.

60
guide/english/html/tutorials/center-an-image-using-text-align-center/index.md Normal file
View File

@ -0,0 +1,60 @@
---
title: Center an Image Using Text Align Center
---
## Center an Image Using Text Align Center
An `<img>` element is an inline element (display value of `inline-block`). It can be easily centered by adding the `text-align: center;` CSS property to the parent element
that contains it.
To center an image using `text-align: center;` you must place the `<img>` inside of a block-level element such as a `div`.
Since the `text-align` property only applies to block-level elements, you place `text-align: center;` on the wrapping block-level element to achieve a horizontally centered `<img>`.
### Example
```html
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Block parent element -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>
```
**Note:** The parent element must be a block element. If it is not a block element, you should add ```display: block;``` CSS property along with the ```text-align``` property.
```html
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- Inline parent element -->
<img src="user.png" alt="">
</span>
</body>
</html>
```
**Demo:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
## Documentation
<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/text-align' target='_blank' rel='nofollow'>**text-align** - MDN</a>
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img' target='_blank' rel='nofollow'>**\<img\>** - MDN</a>

33
guide/english/html/tutorials/embedding-youtube-videos/index.md Normal file
View File

@ -0,0 +1,33 @@
---
title: Embedding Youtube Videos
---
## Embedding Youtube Videos
Probably a lot of times you have seen embedded videos on your favorite websites. Today we will talk about embedding YouTube videos, what is very easy to do, even if you don't have any knowledge about it. For this action we will use `<frame>` element, which is very useful in embedding other HTMLs. It's very often used to promote some products as adds. Notice that you're not only limited to YouTube - you can also experiment with other documents.
### `<frame>` Element
#### Using
You can easily put your chosen video by using `<frame>` element. But remember, you also need to define height and width of your player, so we will use attributes `height` and `width`.
What we will need?
- Video on YouTube and URL
- `<frame>` element (don't forget to close it!)
- `width` and `height` attributes
```html
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=v8kFT4I31es">
</iframe>
```
Inserted values are recommended, but feel free to change them in a way that you would like.
#### Autoplay
What should we do if we would like to make this player starting automatically playing? Just add to your link value `?autoplay=1`. But be careful, because it can be annoying for a lot of people visiting your webpage.
```html
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1">
</iframe>
```

34
guide/english/html/tutorials/how-to-create-an-html-button-that-acts-like-a-link/index.md Normal file
View File

@ -0,0 +1,34 @@
---
title: How to Create an HTML Button That Acts Like a Link
---
## How to Create an HTML Button That Acts Like a Link
Sometimes you may want to use a button to link to another page or website rather than to submit a form or something like that. This is fairly simple to do and can be achieved in several ways.
One way is to simply wrap your `<button>` tag in an `<a>` tag:
```html
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
```
This transforms your entire button into a link.
A second option is to create your link as you normally would with your `<a>` tag and then style it via CSS:
```html
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
```
Once you've created your link, you can the use CSS to make it look like a button. For instance, you could add a border, a background color, some styles for when the user is hovering the link...
Another way to add a button is to wrap an `input` inside `form` tags. Specify the desired target URL in the form action attribute.
```html
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
```
#### More Information:
* [FreeCodeCamp Guide - styling buttons](https://guide.freecodecamp.org/css/css-buttons/)
* [How to create an HTML button that acts like a link?](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link)

64
guide/english/html/tutorials/how-to-horizontally-center-a-div-tag-in-another-div-tag/index.md Normal file
View File

@ -0,0 +1,64 @@
---
title: How to Horizontally Center a Div Tag in Another Div Tag
---
## How to Horizontally Center a Div Tag in Another Div Tag
Horizontally centering a `<div>` inside of another `<div>` is pretty easy.
Let's start by creating two div tags with "parent" and "child" classes. The parent will be our container, and the child will be the `<div>` we're horizontally centering.
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How to Horizontally Center a Div Tag in Another Div Tag</title>
</head>
<body>
<div class="parent">
<div class="child">
<p>This is the center.</p>
</div>
</div>
</body>
</html>
```
There are a couple ways you can tacklet this, but for this tutorial let's focus on two. In the first we'll center our child `<div>` using `margin` and in the second we'll use `flexbox`.
### Example of Centering a Div Tag with Margins
If you specify a `width` on your child div you can use `margin: auto`. This will center your child `<div>` by evenly distributing it's left-and-right margins.
```css
.parent {
border: 2px solid red;
}
.centered-child {
width: 50%;
margin: auto;
border: 1px solid black;
}
```
### Example of Centering a Div Tag with Flexbox
Using flexbox to center a `<div>` is slightly different. First, it doesn't require you to specify `width` on your child `<div>`. Second, you actually center the child `<div>` by applying css properties on the parent `<div>`.
To center a child `<div>` using flexbox you need to use `display: flex` along with `justify-content: center` on the parent `<div>`.
```css
.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.centered-child {
border: 1px solid black;
}
```
#### More Information:
[Flexbox Support Matrix](http://caniuse.com/#search=flexbox)

43
guide/english/html/tutorials/how-to-insert-spaces-or-tabs-in-text-using-html-and-css/index.md Normal file
View File

@ -0,0 +1,43 @@
---
title: How to Insert Spaces or Tabs in Text Using HTML and CSS
---
## How to Insert Spaces or Tabs in Text Using HTML and CSS
There are a multitude of ways to insert spaces using html. For simplicity sake we will
go over one of these, which are by inserting a Span tag.
## Span Tag
``<span>``
Span Tags ``<span>`` are self closing tags meaning they do not need a ``/>``.
## Span Example
An example of how a ``<span>`` tag inserts a space between text can be seen below.
``<p>Hello may name is <span> James</p>``
If you assign a class to your ``<span>`` then you could add some css to it.
Like so,
``<p>Hello my name is <span class=tab> James</p>``
Then either in an external stylesheet or an internal-stylesheet you can give the ``class .tab``
some properties.
## Span Class Example
For example
``.tab {padding-left: 2px;}``
You can also give the ``<span>`` some inline-style properties, as shown below.
``<p>Hello my name is <span style="padding-left: 2px;"> James</p>``
## More Information
For more information on the <span> tag or on; How to Insert Spaces or Tabs in Text Using HTML and CSS, you can visit w3schools. https://www.w3schools.com/tags/tag_span.asp

36
guide/english/html/tutorials/how-to-use-links/index.md Normal file
View File

@ -0,0 +1,36 @@
---
title: How to Use Links
---
## How to Use Links
In HTML you can use the `<a>` tag to create a link. For example you can write `<a href="https://www.freecodecamp.org/">freeCodeCamp</a>` to create a link to freeCodeCamp's website.
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks. You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
In HTML, links are defined with the <a> tag:
```html
<a href="url">link text</a>
```
Example
```html
<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
```
The href attribute specifies the destination address (https://www.freecodecamp.org) of the link.
The link text is the visible part (Visit our site for tutorials).
Clicking on the link text will send you to the specified address.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
* [MDN - HTML <a> Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

78
guide/english/html/tutorials/how-to-use-lists/index.md Normal file
View File

@ -0,0 +1,78 @@
---
title: How to Use Lists
---
## How to Use Lists
Lists are used to specify a set of consecutive items or related information in well formed and semantic way, such as a list of ingredients or a list of procedural steps.
HTML markup has three different types of lists - **ordered**, **unordored** and **description** lists.
### Ordered Lists
An ordered list is used to group a set of related items, in a specific order.
This list is created with `<ol>` tag. Each list item is surrounded with `<li>` tag.
##### Code
```html
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
```
##### Example
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
### Unordered Lists
An unordered list is used to group a set of related items, in no particular order. This list is created with `<ul>` tag. Each list item is surrounded with `<li>` tag.
##### Code
```html
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
```
#### Example
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
### Description Lists
A description list is used to specify a list of terms and their descriptions. This list is created with `<dl>` tag. Each list item is surrounded with `<dd>` tag.
##### Code
```html
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
```
##### Output
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
#### Styling List
You can also control the style of the list. You can use `list-style` property of lists. Your list can be bullets, square, in roman numearls or can be images you want.
`list-style` property is a shorthand for `list-style-type`, `list-style-position`, `list-style-image`.
#### More Information:
[HTML lists · WebPlatform Docs](https://webplatform.github.io/docs/guides/html_lists/
)

44
guide/english/html/tutorials/images-in-html/index.md Normal file
View File

@ -0,0 +1,44 @@
---
title: Images in HTML
---
## Introduction
You can define images by using the `<img>` tag. It does not have a closing tag since it can contain only attributes.
To insert an image you define the source and an alternative text wich is displayed when the image can not be rendered.
`src` - This attribute provides the url to image present either on your desktop/laptop or to be included from some other website. Remember the link provided should not be broken otherwise the image will not be produced on your webpage.
`alt` - This attribute is used to overcome the problem of broken image or incapability of your browser to not being able to produce image on webpage. This attribute as name suggests provide "alternative" to image which is some text describing the image
## Example
```html
<img src="URL of the Image" alt="Descriptive Title" />
```
### To define height and width of an image you can use the height and width attribute:
```html
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
```
### You can also define border thickness (0 means no border):
```html
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
```
### Align an image:
```html
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
```
### You are also able to use styles within a style attribute:
```html
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
```
#### More Information
- See the freeCodeCamp page on the `<img>` tag [here](https://guide.freecodecamp.org/html/elements/img-tag)
- To get more details on images in HTML, check out the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img)

15
guide/english/html/tutorials/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: Tutorials
---
## Tutorials
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/tutorials/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 -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

17
guide/english/html/tutorials/redirect-from-an-html-page/index.md Normal file
View File

@ -0,0 +1,17 @@
---
title: Redirect from an HTML Page
---
## Redirect from an HTML Page
If you've changed the URL of your HTML page and want to automatically redirect your visitors to the new location of the page, you can use a meta tag within the `<head>` area of your old HTML page.
``` html
<head>
<meta http-equiv="refresh" content="0; url=http://freecodecamp.org/" />
</head>
```
In the above example, visitors to the page would be redirected from your old html page to [http://freecodecamp.org/](http://freecodecamp.org/). The attribute of `content="0` means that the browser will redirect to the new page after 0 seconds. Changing the value to `content="2` would redirect after 2 seconds.
#### More Information:
* [MDN - Redirections in HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections)

66
guide/english/html/tutorials/text-formatting-in-html/index.md Normal file
View File

@ -0,0 +1,66 @@
---
title: Text Formatting in HTML
---
## Text Formatting in HTML
HTML provides you a lot of useful elements for text formatting. It allows to make your text: bold, italic, mark and much more. Changing the style of your text isn't without any reason - the main thing is just make the reader to take a look for some important notes.
### Bold and Strong
You can easily change your text meaning by using HTML `<b>` element. It makes words bold, which function is singling out the fragment of sequence. For example:
```
The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>!
```
You can also use `<strong>` as well - it adds also semantic "strong" importance. Your browser doesn't recognize a difference between those two elements, but it exists.
### Italic and Emphasized
Usually used when quote something or putting a translate of word in a lot of articles. It makes them italic - just imagine a little kicked in the right letters. For example:
```
Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>.
```
You can also use `<em>` as well - it adds also semantic "emphasized" importance. Your browser doesn't recognize a difference between those two elements, but it exists.
### Small
It makes your text smaller than normal size of used font. This element's meaning was changed in HTML5 - it represents side-comments and small print.
```
Normal, <small>small</small>, normal, <small>small</small>!
```
### Marked
Element `<mark>` makes your text marked - in different words, it makes your text highlighted. You can use it to tell readers that is one of important things in your article. For example:
```
HTML is full of things and <mark>it's our journey</mark> to get known them better!
```
### Deleted
The element `<del>` makes your text striked in the center. It's useful to show changes in your documents.
```
WWI started in <del>1913</del> 1914 year.
```
### Inserted
Tag `<ins>` makes your text inserted to the article. Using other words that makes it much easier to understand - added. It shows a line under inserted text.
```
HTML isn't boring. <ins>You can make a lot of combinations of elements!</ins>
```
### Subscripted
Using element `<sub>` gives you a useful formatting as subscripted text (showing it smaller on the bottom). There is an example code:
```
This was in 2003 year <sub>(needs a link)</sub>.
```
### Superscripted
If you want to make an opposite to subscripted text, you can easily use `<sup>` element. It shows a smaller text on the top.
```
10<sup>x+y</sup> = 1000
```

9
guide/english/html/tutorials/use-tab-space-instead-of-multiple-non-breaking-spaces-nbsp/index.md Normal file
View File

@ -0,0 +1,9 @@
---
title: Use Tab Space Instead of Multiple Non Breaking Spaces Nbsp
---
## Use Tab Space Instead of Multiple Non Breaking Spaces Nbsp
In HTML the most common way to add multiple spaces is by adding `&nbsp;` for each space. To add a tab space put your text in `<pre>` tags, for example `<pre>My Text Here</pre>` and every tab will be treated as eight spaces. Another way to add multiple spaces in HTML would be to use CSS for example `<p style="padding-right: 5px;">My Text Here</p>`.
#### More Information:
* [MDN - The Preformatted Text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)