Add HMTL Intro (#109)
This commit is contained in:
Stuart Taylor
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
a4adf7283d
commit
1fbeee14a2
@ -30,7 +30,38 @@ module.exports = {
|
||||
path: path.resolve(__dirname, './src/introductions')
|
||||
}
|
||||
},
|
||||
'gatsby-transformer-remark',
|
||||
{
|
||||
resolve: 'gatsby-transformer-remark',
|
||||
options: {
|
||||
plugins: [
|
||||
{
|
||||
resolve: 'gatsby-remark-prismjs',
|
||||
options: {
|
||||
// Class prefix for <pre> tags containing syntax highlighting;
|
||||
// defaults to 'language-' (eg <pre class="language-js">).
|
||||
// If your site loads Prism into the browser at runtime,
|
||||
// (eg for use with libraries like react-live),
|
||||
// you may use this to prevent Prism from re-processing syntax.
|
||||
// This is an uncommon use-case though;
|
||||
// If you're unsure, it's best to use the default value.
|
||||
classPrefix: 'language-',
|
||||
// This is used to allow setting a language for inline code
|
||||
// (i.e. single backticks) by creating a separator.
|
||||
// This separator is a string and will do no white-space
|
||||
// stripping.
|
||||
// A suggested value for English speakers is the non-ascii
|
||||
// character '›'.
|
||||
inlineCodeMarker: null,
|
||||
// This lets you set up language aliases. For example,
|
||||
// setting this to '{ sh: "bash" }' will let you use
|
||||
// the language "sh" which will highlight using the
|
||||
// bash highlighter.
|
||||
aliases: {}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-google-fonts',
|
||||
options: {
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
"gatsby-plugin-react-helmet": "^2.0.8",
|
||||
"gatsby-plugin-react-next": "^1.0.11",
|
||||
"gatsby-plugin-sitemap": "^1.2.21",
|
||||
"gatsby-remark-prismjs": "^2.0.2",
|
||||
"gatsby-source-filesystem": "^1.5.29",
|
||||
"gatsby-source-mongodb": "^1.5.19",
|
||||
"gatsby-transformer-json": "^1.0.16",
|
||||
@ -35,6 +36,7 @@
|
||||
"lodash": "^4.17.5",
|
||||
"loop-protect": "^2.1.6",
|
||||
"mongodb": "^3.0.5",
|
||||
"prismjs": "^1.14.0",
|
||||
"react": "16",
|
||||
"react-bootstrap": "^0.32.1",
|
||||
"react-dom": "16",
|
||||
|
||||
@ -5,6 +5,36 @@ superBlock: Responsive Web Design
|
||||
---
|
||||
## Introduction to Basic HTML & HTML5
|
||||
|
||||
This introduction is a stub
|
||||
HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading, a paragraph, or a list.
|
||||
|
||||
Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).
|
||||
For example:
|
||||
```html
|
||||
<h1>Top level heading: Maybe a page title</h1>
|
||||
|
||||
<p>A paragragh of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.</p>
|
||||
|
||||
<ol>
|
||||
<li>Number one on the list</li>
|
||||
<li>Number two</li>
|
||||
<li>A third item</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
Becomes:
|
||||
|
||||
<h1>Top level heading: Maybe a page title</h1>
|
||||
|
||||
<p>A paragragh of text. Some information we would like to communicate to the user. This can be as long or short as we would like.</p>
|
||||
|
||||
<ol>
|
||||
<li>Number one on the list</li>
|
||||
<li>Number two</li>
|
||||
<li>A third item</li>
|
||||
</ol>
|
||||
|
||||
---
|
||||
The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links the would navigate the browser to the reference document so the user could read the reference document without having to manually search for it.
|
||||
|
||||
As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5.
|
||||
|
||||
This section introduces how to use HTML elements to give structure and meaning to your web content.
|
||||
@ -12,8 +12,9 @@ import Header from '../components/Header';
|
||||
import MapModal from '../components/MapModal';
|
||||
import { fetchUser } from '../redux/app';
|
||||
|
||||
import './global.css';
|
||||
import 'prismjs/themes/prism.css';
|
||||
import 'react-reflex/styles.css';
|
||||
import './global.css';
|
||||
import './layout.css';
|
||||
|
||||
const metaKeywords = [
|
||||
|
||||
@ -2155,6 +2155,14 @@ cli-width@^2.0.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
|
||||
|
||||
clipboard@^2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a"
|
||||
dependencies:
|
||||
good-listener "^1.2.2"
|
||||
select "^1.1.2"
|
||||
tiny-emitter "^2.0.0"
|
||||
|
||||
clipboardy@1.2.3:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef"
|
||||
@ -2854,6 +2862,10 @@ delayed-stream@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
|
||||
delegate@^3.1.2:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
|
||||
|
||||
delegates@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||
@ -4234,6 +4246,14 @@ gatsby-react-router-scroll@^1.0.14:
|
||||
scroll-behavior "^0.9.9"
|
||||
warning "^3.0.0"
|
||||
|
||||
gatsby-remark-prismjs@^2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-2.0.2.tgz#c8bf8ac0c061db7305deebf75ca7a8250a2b65ea"
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
parse-numeric-range "0.0.2"
|
||||
unist-util-visit "^1.3.0"
|
||||
|
||||
gatsby-source-filesystem@^1.5.29:
|
||||
version "1.5.29"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.29.tgz#27efb1214d8a326f7a1cb8f0cdee579f96a2be69"
|
||||
@ -4617,6 +4637,12 @@ globby@^7.1.1:
|
||||
pify "^3.0.0"
|
||||
slash "^1.0.0"
|
||||
|
||||
good-listener@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
|
||||
dependencies:
|
||||
delegate "^3.1.2"
|
||||
|
||||
got@^6.7.1:
|
||||
version "6.7.1"
|
||||
resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
|
||||
@ -7599,6 +7625,10 @@ parse-latin@^4.0.0:
|
||||
unist-util-modify-children "^1.0.0"
|
||||
unist-util-visit-children "^1.0.0"
|
||||
|
||||
parse-numeric-range@0.0.2:
|
||||
version "0.0.2"
|
||||
resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz#b4f09d413c7adbcd987f6e9233c7b4b210c938e4"
|
||||
|
||||
parse-passwd@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
|
||||
@ -8346,6 +8376,12 @@ pretty-format@^22.4.3:
|
||||
ansi-regex "^3.0.0"
|
||||
ansi-styles "^3.2.0"
|
||||
|
||||
prismjs@^1.14.0:
|
||||
version "1.14.0"
|
||||
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0"
|
||||
optionalDependencies:
|
||||
clipboard "^2.0.0"
|
||||
|
||||
private@^0.1.6, private@^0.1.7:
|
||||
version "0.1.8"
|
||||
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
|
||||
@ -9693,6 +9729,10 @@ scroll-behavior@^0.9.9:
|
||||
dom-helpers "^3.2.1"
|
||||
invariant "^2.2.2"
|
||||
|
||||
select@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
|
||||
|
||||
semver-diff@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
|
||||
@ -10623,6 +10663,10 @@ timers-browserify@^2.0.2, timers-browserify@^2.0.4:
|
||||
dependencies:
|
||||
setimmediate "^1.0.4"
|
||||
|
||||
tiny-emitter@^2.0.0:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
|
||||
|
||||
tmp@^0.0.31:
|
||||
version "0.0.31"
|
||||
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
|
||||
@ -10963,6 +11007,12 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1:
|
||||
dependencies:
|
||||
unist-util-is "^2.1.1"
|
||||
|
||||
unist-util-visit@^1.3.0:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.3.1.tgz#c019ac9337a62486be58531bc27e7499ae7d55c7"
|
||||
dependencies:
|
||||
unist-util-is "^2.1.1"
|
||||
|
||||
units-css@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/units-css/-/units-css-0.4.0.tgz#d6228653a51983d7c16ff28f8b9dc3b1ffed3a07"
|
||||
|
||||
Reference in New Issue
Block a user