Doc: Adding HTML Editors Documents (#33343)
* Add new Content flex box * add content FlexBox * add content flexbox * add content flexbox * improve bootstrap doc * improve the bootstrap doc * improve the bootstrap doc * Create fcc123 adding jumbotron documentation.. * adding document html editors * fix: made Editors folder lowercase * chore: delete unwanted filepull/35121/head
Amitkumar
Randell Dawson
parent
8b47ed264b
commit
ddc8839e67
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
title: Jumbotron
|
||||
---
|
||||
|
||||
## Jumbotron
|
||||
|
||||
`Jumbotron` is Lightweight, flexible component for showcasing hero unit style content.
|
||||
`Jumbotron` is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.
|
||||
|
||||
Jumbotron make use of almost any other bootstrap code to additionally increase its engagement value. It's operate with images,enlarged fonts,different backgorund styles etc.
|
||||
|
||||
### Most Attracting features of jumbotron
|
||||
|
||||
- * Showcase the marketing messages on your site
|
||||
- * Project presentation
|
||||
- * Article introduction
|
||||
- * Image showcase
|
||||
|
||||
### How to use
|
||||
|
||||
Use a `<div>` element with class `.jumbotron` to create a jumbotron:
|
||||
|
||||
|
||||
|
||||
**Code Example:**
|
||||
```
|
||||
<div class="jumbotron">
|
||||
<h1 class="display-4">Hello, world!</h1>
|
||||
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
||||
<hr class="my-4">
|
||||
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
||||
</div>
|
||||
|
||||
```
|
||||
#### Fluid jumbotron
|
||||
|
||||
To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within.
|
||||
|
||||
**Code Example:**
|
||||
|
||||
```
|
||||
<div class="jumbotron jumbotron-fluid">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Fluid jumbotron</h1>
|
||||
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### More Information:
|
||||
|
||||
- [Bootstrap Jumbotron components Doc](https://getbootstrap.com/docs/4.0/components/jumbotron/)
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
title: HTML Editors
|
||||
---
|
||||
|
||||
### HTML editors
|
||||
|
||||
An `HTML editor` is a program for editing `HTML` markup language. HTML editors can be created and modified HTML document.
|
||||
|
||||
However, for leraning HTML we recomended simple text editor like Notepad (Windows PC) or TextEdit (Mac).
|
||||
|
||||
* Simple text editor is good way to learn HTML for beginners.
|
||||
* There are two main varieties of HTML editors: textual and WYSIWYG (what you see is what you get) editors.
|
||||
|
||||
### Text editor
|
||||
|
||||
Basic text editor is source code editors, include additional tools specifically geared toward handling code.
|
||||
|
||||
|
||||
### WYSIWYG editors
|
||||
|
||||
HTML editors that support What You See Is What You Get (WYSIWYG) paradigm provide a user interface similar to a word processor for creating HTML documents, alternative to manual coding for editing HTML documents.
|
||||
|
||||
|
||||
### Write HTML using Notepad or TextEdit
|
||||
|
||||
follow the below four steps to create your first web page with Notepad or TextEdit.
|
||||
* * *
|
||||
|
||||
#### Step 1: Open Notepad (Windows PC)
|
||||
|
||||
**Windows 8 or later:**
|
||||
|
||||
1. Open the **Start Screen** (the window symbol at the bottom left on your screen).
|
||||
Type **Notepad**.
|
||||
|
||||
**Windows 7 or earlier:**
|
||||
|
||||
1. Open **Start > Programs > Accessories > Notepad**
|
||||
|
||||
#### Step 1: Open TextEdit (Mac)
|
||||
|
||||
1. Open **Finder > Applications > TextEdit**
|
||||
|
||||
2. Also change some preferences to get the application to save files correctly.
|
||||
In **Preferences > Format >** choose **"Plain Text"**
|
||||
|
||||
3. Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".
|
||||
|
||||
4. Then open a new document to place the code.
|
||||
|
||||
#### Step 2: Write Some HTML
|
||||
|
||||
Write or copy some HTML into Notepad.
|
||||
|
||||
```HTML
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<h1>My First Heading</h1>
|
||||
|
||||
<p>My first paragraph.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Step 3: Save the HTML Page
|
||||
|
||||
1. Save the file on your computer. Select **File > Save** as in the Notepad menu.
|
||||
|
||||
2. Name the file **"index.html"** and set the encoding to **UTF-8**
|
||||
(which is the preferred encoding for HTML files).
|
||||
|
||||
> You can use either .htm or .html as file extension. There is no difference, it is up
|
||||
> to you.
|
||||
|
||||
#### Step 4: View the HTML Page in Your Browser
|
||||
|
||||
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
|
||||
|
||||
### List of Editors (Open-source and Commercial softwares)
|
||||
|
||||
* [Eclipse](https://www.eclipse.org)
|
||||
* [Atom](https://atom.io)
|
||||
* [WebStorm](https://www.jetbrains.com)
|
||||
* [Microsoft Visual Studio](https://visualstudio.microsoft.com/)
|
||||
* [NetBeans](http://netbeans.apache.org/)
|
||||
* [Brackets](http://brackets.io)
|
||||
* [EditPlus](https://editplus.com/)
|
||||
* [Sublimetext](https://www.sublimetext.com)
|
||||
|
||||
#### More Information:
|
||||
|
||||
<a href='https://en.wikipedia.org/wiki/HTML_editor' target='_blank' rel='nofollow'>Wikipedia HTML editors<table> tag</a>
|
||||
<a href='https://www.w3schools.com/html/html_editors.asp' target='_blank' rel='nofollow'>W3schools HTML Editors<table> tag</a>
|
||||
|
||||
|
|
@ -49,6 +49,76 @@ The Bootstrap framework divides a row into twelve columns. In the above example,
|
|||
|
||||
|
||||
|
||||
### 3. Flexbox Model
|
||||
|
||||
The `flexbox layout model`, makes it's easier to design responsive layout structure without using float or positioning.
|
||||
|
||||
This layout model is one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
|
||||
|
||||
The main axis is defined by `flex-direction`, which has four possible values:
|
||||
|
||||
* row
|
||||
* row-reverse
|
||||
* column
|
||||
* column-reverse
|
||||
|
||||
To start using the Flexbox model, you need to first define a `flex container`.
|
||||
The flex container becomes flexible by setting the display property to flex:
|
||||
|
||||
```
|
||||
<div class="flex-container">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
#### The flex container properties are:
|
||||
|
||||
* flex-direction
|
||||
* flex-wrap
|
||||
* flex-flow
|
||||
* justify-content
|
||||
* align-items
|
||||
* align-content
|
||||
|
||||
#### The flex item properties are:
|
||||
|
||||
* order
|
||||
* flex-grow
|
||||
* flex-shrink
|
||||
* flex-basis
|
||||
* flex
|
||||
* align-self
|
||||
|
||||
#### CSS Flexbox Properties
|
||||
|
||||
The following table lists the CSS properties used with flexbox:
|
||||
|
||||
| Property | Description |
|
||||
| ------------- | -------------------------------------------------------------------------------- |
|
||||
| display | Specifies the type of box used for an HTML element |
|
||||
| flex-direction | Specifies the direction of the flexible items inside a flex container |
|
||||
| justify-content | Horizontally aligns the flex items when the items do not use all available | | | space on the main-axis |
|
||||
| flex-wrap | Specifies whether the flex items should wrap or not,there is not enough |
|
||||
| | if room for them on one flex line |
|
||||
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items,but| | | instead of aligning flex items, it aligns flex lines |
|
||||
| flex-flow | A shorthand property for flex-direction and flex-wrap |
|
||||
| order | Specifies the order of a flexible item relative to the rest of the flex items | | | inside the same container |
|
||||
| align-self | Used on flex items. Overrides the container's align-items property |
|
||||
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis |
|
||||
| | properties |
|
||||
| align-items | Vertically aligns the flex items when the items do not use all available |
|
||||
| | space on the cross-axis |
|
||||
|
||||
#### Shorthand values for the flex properties
|
||||
The predefined values are as follows:
|
||||
|
||||
- flex: initial
|
||||
- flex: auto
|
||||
- flex: none
|
||||
- flex: <positive-number>
|
||||
|
||||
### More Information:
|
||||
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||||
1. <a href='https://medium.freecodecamp.org/css-flexbox-interactive-tutorial-in-8-minutes-including-cheat-sheet-6214e00de3d2' target='_blank' rel='nofollow'>CSS Flexbox Complete tutorial in 8 minutes</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue