Editing HTML

HTML stands for HyperText Markup Language.

 <h2> 
 <span style="color:pink">Learn Basics</span>
 </h2>
  
Unlike scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content.

Example:

'''To define a paragraph'''

<pre> <p> I'm a paragraph </p> </pre>

===The <html> Tag===
The structure of an HTML document has been compared with that of a sandwich. As a sandwich has two slices of bread, the HTML document has an opening and closing HTML tags.

<pre><html>
 …
</html></pre>

===The <head> Tag===
Immediately following the opening HTML tag, you'll find the head of the document, which is identified by opening and closing head tags.

The head of an HTML file contains all of the '''non-visual elements''' that help make the page work.

<pre><html>
   <head>…</head>
</html></pre>

Defines information about documents, including metadata and scripts

===The <body> Tag===
The body tag follows the head tag.
All visual-structural elements are contained within the body tag.

Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag.

<pre><html>
   <head>
   </head>
   <body>
   </body>
</html></pre>

===The <title> Tag===
To place a title on the tab describing the web page, add a <title> element to your head section:

<pre><html>
   <head>
      <title>first page</title>
   </head>
   <body>
      This is a line of text. 
   </body>
</html></pre>

The title element is important because it describes the page and is used by search engines.

==Pharagraph==
===Single Line Break===

Use the '''br''' tag to add a single line of text without starting a new paragraph:
<pre><html>
   <head>
      <title>first page</title>
   </head>
   
   <body>
      <p>This is a paragraph.</p>
      <p>This is another paragraph. </p>
      <p>This is <br /> a line break </p>
   </body>
</html></pre>

==Text Formatting==
In HTML, there is a list of elements that specify text style.

<pre><html>
    <head>
        <title>first page</title>
    </head>
   
    <body>
        <p>This is regular text </p>
        <p><b>bold text </b></p>
        <p><big> big text </big></p>
        <p><i> italic text </i></p>
        <p><small> small text </small></p>
        <p><strong> strong text </strong></p>
        <p><sub> subscripted text </sub></p>
        <p><sup> superscripted text </sup></p>
        <p><ins> inserted text </ins></p>
        <p><del> deleted text </del></p>
    </body>
</html></pre>

        <p>This is regular text </p>
        <p><b>bold text </b></p>
        <p><big> big text </big></p>
        <p><i> italic text </i></p>
        <p><small> small text </small></p>
        <p><strong> strong text </strong></p>
        <p><sub> subscripted text </sub></p>
        <p><sup> superscripted text </sup></p>
        <p><ins> inserted text </ins></p>
        <p><del> deleted text </del></p>

==Headings, Lines and Comments==
===Headings===
HTML includes six levels of headings, which are ranked according to importance.
These are h1, h2, h3, h4, h5, and h6.

<pre><html>
   <head>
      <title>first page</title>
   </head>
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
</html></pre>

===Horizontal Lines===
To create a horizontal line, use the '''hr''' tag.

<pre><html>
   <head>
      <title>first page</title>
   </head>
   
   <body>
      <p>This is a paragraph </p>
      <hr />
      <p>This is a paragraph </p>
   </body>
</html></pre>

In HTML5, the hr tag defines a thematic break.

===Comments===
The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.

<pre><!-- Your comment goes here --></pre>

==Elements==
HTML documents are made up of HTML elements.
An HTML element is written using a '''start tag''' and an '''end tag''', and with the content in between.

HTML documents consist of nested HTML elements. In the example below, the body element includes the '''p''' tags, the '''br''' tag and the content, "This is a paragraph".

Some HTML elements (like the '''br''' tag) do not have end tags.

Some elements are quite small. Since you can't put contents within a break tag, and you don't have an opening and closing break tag, it’s a separate, single element

==Attributes==
Attributes provide '''additional information''' about an element or a tag, while also '''modifying''' them. Most attributes have a value; the value modifies the attribute.

===The Align Attribute===
In this example, the value of "center" indicates that the content within the p element should be aligned to the center.

<pre><p align="center"> 
   This text is aligned to the center
</p></pre>

<pre><html>
    <head>
        <title>Attributes</title>
    </head>
    <body>
        <p align="center">This is a text <br />
            <hr width="10%" align="right" /> This is also a text.
        </p>
    </body>
</html></pre>

Attributes are always specified in the '''start tag''', and they appear in '''name="value" pairs.'''

===Attribute Measurements===

As an example, we can modify the horizontal line so it has a width of 50 pixels.

This can be done by using the '''width attribute:'''

<pre><hr width="50px" /></pre>

An element's width can also be defined using percentages:

<pre><hr width="50%" /></pre>

==Images==
===The <img> Tag===
The '''<img>''' tag is used to insert an image. It contains only attributes, and does not have a closing tag.
The image's URL (address) can be defined using the '''src''' attribute.

The HTML image syntax looks like this:

<pre><img src="image.jpg" /></pre>

===Image Location===
You need to put in the '''image location''' for the src attribute that is between the quotation marks.

For example, if you have a photo named "tree.jpg" in the same folder as the HTML file, your code should look like this:

<pre><html>
   <head>
      <title>first page</title>
   </head>
   <body> 
      <img src="tree.jpg" alt="" />
   </body>
</html></pre>
In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. The alt attribute is '''required.'''

===Image Resizing===
To define the image size, use the width and height attributes.
The value can be specified in '''pixels''' or as a '''percentage''':

<pre><html>
   <head>
      <title>first page</title>
   </head>
   <body> 
      <img src="tree.jpg" height="150px" width="150px" alt="" />
      <!-- or -->
      <img src="tree.jpg" height="50%" width="50%" alt="" />
   </body>
</html></pre>

===Image Border===
By default, an image has no borders. Use the border attribute within the image tag to create a border around the image.

<pre><img src="tree.jpg" height="150px" width="150px" border="1px" alt="" /></pre>

==Links==
===The <a> Tag===
Links are also an integral part of every web page. You can add links to text or images that will enable the user to click on them in order to be directed to another file or webpage.
In HTML, links are defined using the '''<a>''' tag.

Use the '''href attribute''' to define the link's destination address:

<pre><a href=""></a></pre>

===Creating Your First Link===

<a href="http://www.xxxxx.com"> Learn HTML </a>

Once the code has been saved, "Learn HTML" will display as a link:

<p><ins> Learn HTML </ins></p>

===The target Attribute===

The target attribute specifies where to open the linked document.
Giving a _blank value to your attribute will have the link open in a new window or new tab:
<pre><a href="http://www.sololearn.com" target="_blank">
   Learn Playing
</a></pre>

==Lists==
===Ordered Lists===
An ordered list starts with the '''<ol>''' tag, and each list item is defined by the '''<li>''' tag.
Here is an example of an ordered list:
<pre><html>
   <head>
      <title>first page</title>
   </head>
   <body>
      <ol>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ol>  
   </body>
</html></pre>
The list items will be automatically marked with numbers.

<ol>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ol>

===Unordered List===
An unordered list starts with the '''ul''' tag.
<pre><html>
   <head>
      <title>first page</title>
   </head>        
   <body>
      <ul>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ul>  
   </body>
</html></pre>

  <ul>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ul>

==Tables==
===Creating a Table===
Tables are defined by using the '''table''' tag.

Tables are divided into table rows with the '''tr''' tag.

Table rows are divided into table columns (table data) with the '''td''' tag.

<pre><table>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
   </tr>
</table></pre>

===The border and colspan Attributes===
A border can be added using the '''border''' attribute:
<pre><table border="2"></pre>

A table '''cell''' can span two or more columns:

<pre><table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td><br /></td>
      <td colspan="2"><br /></td>
   </tr>
</table></pre>

<table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td><br /></td>
      <td colspan="2"><br /></td>
   </tr>
</table>

===Colspan Attribute===
The example below demonstrates the colspan attribute in action:
<pre><table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Yellow</td>
      <td colspan="2">Orange</td>
   </tr>
</table></pre>

<table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Yellow</td>
      <td colspan="2">Orange</td>
   </tr>
</table>

===Rowspan Attribute===
To make a cell span more than one row, use the '''rowspan''' attribute.

<pre><table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Yellow</td>
      <td rowspan="2">Orange</td>
   </tr>
</table></pre>

<table border="2">
   <tr>
      <td>Red</td>
      <td>Blue</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Yellow</td>
      <td rowspan="2">Orange</td>
   </tr>
</table>

===The align and bgcolor Attributes===
To change your table's position, use the align attribute inside your table tag:
<pre><table align="center"></pre>

Now let's specify a background color of red for a table cell. To do that, just use the bgcolor attribute.
<pre><table border="2"align="center">
    <tr>
        <td bgcolor="red">Red</td>
        <td>Blue</td>
        <td bgcolor="pink">Green</td>
    </tr>
    <tr>
        <td bgcolor="blue"<Yellow</td>
        <td colspan="2">Orange</td>
    </tr>
</table></pre>

<table border="2"align="center">
    <tr>
        <td bgcolor="red">Red</td>
        <td>Blue</td>
        <td bgcolor="pink">Green</td>
    </tr>
    <tr>
        <td bgcolor="green">Yellow</td>
        <td colspan="2">Orange</td>
    </tr>
</table>

==Inline and Block elements==
===Types of Elements===
In HTML, most elements are defined as '''block level''' or '''inline''' elements.
Block-level elements start from a new line.
'''For example:''' <h1, <form, <li, <ol, <ul, <p, <pre, <table, <div, etc.

Inline elements are normally displayed without line breaks.
'''For example:''' <b, <a, <strong, <img, <input, <em, <span, etc.

The div element is a block-level element that is often used as a '''container for other HTML elements.'''
When used together with some CSS styling, the div element can be used to style blocks of content:

<pre><html>
    <body>
        <h1>Headline</h1>
        <div style="background-color:pink; color:blue; padding:20px;">
            <p>Some paragraph text goes here.</p>
            <p>Another paragraph goes here.</p>
        </div>
    </body>
</html></pre>


        <div style="background-color:pink; color:blue; padding:20px;">
            <p>Some paragraph text goes here.</p>
            <p>Another paragraph goes here.</p>
        </div>

Similarly, the '''<span''' element is an inline element that is often used as a container for some text.
When used together with CSS, the '''<span''' element can be used to style parts of the text:
<pre><html>
  <body>
    <h2>Some 
      <span style="color:red">Important</span>
    Message</h2>
  </body>
</html></pre>

Other elements can be used either as block-level elements or inline elements. This includes the following elements:
*'''APPLET''' - embedded Java applet
*'''IFRAME''' - Inline frame
*'''INS''' - inserted text
*'''MAP''' - image map
*'''OBJECT''' - embedded object
*'''SCRIPT''' - script within an HTML document

You can insert inline elements inside block elements. For example, you can have multiple <span> elements inside a '''div>''' element.

==Forms==
===The <form> Element===
HTML forms are used to collect information from the user.
Forms are defined using the '''<form''' element, with its opening and closing tags:
<pre><body>
   <form>…</form>
</body></pre>

Use the '''action''' attribute to point to a webpage that will load after the user submits the form.
<pre><form action="http://www.sololearn.com"> 
</form></pre>

===The method and name Attributes===
The '''method attribute''' specifies the HTTP method ('''GET or POST''') to be used when forms are submitted (see below for description):
<pre><form action="url" method="GET"></pre>

<pre><form action="url" method="POST"></pre>

When you use '''GET''', the form data will be visible in the page address.

Use '''POST''' if the form is updating data, or includes sensitive information (passwords).
POST offers better security because the submitted data is not visible in the page address.

To take in user input, you need the corresponding form elements, such as text fields. The '''<input''' element has many variations, depending on the type attribute. It can be a text, password, radio, URL, submit, etc.

The example below shows a form requesting a username and password:
<pre><form>
   <input type="text" name="username" /><br />
   <input type="password" name="password" />
</form></pre>

===Form Elements===
*If we change the input type to '''radio''', it allows the user select only one of a number of choices:
<pre><input type="radio" name="gender" value="male" /> Male <br />
<input type="radio" name="gender" value="female" /> Female <br /></pre>

*The type '''checkbox''' allows the user to select more than one option:
<pre><input type="checkbox" name="gender" value="1" /> Male <br />
<input type="checkbox" name="gender" value="2" /> Female <br /></pre>

The '''<input''' tag has no end tag.

*The submit button '''submits a form''' to its action attribute:
<pre><input type="submit" value="Submit" /> </pre>

EXAMPLE: The form will include Name, Email, and Message fields. We'll also add a Submit button.

<pre><!DOCTYPE html>
<html>
    <head>
        <title>My Blog</title>
        <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
    </head>
    <body>
        <!-- Form section start -->
       <div class="section">
            <h1><span>Contact Me</span></h1>
            <form>
                <input name="name" type="text" /><br/>
                <input name="email" type="email" /><br/>
                <textarea name="message" ></textarea>
                <input type="submit" value="SEND" class="submit" />
            </form>
        </div>
        <!-- Form section end -->
    </body>
</html></pre>

This is just a static HTML page, so it won't work to actually submit the form. You'd need to create the server-side code in order to submit a real form and process the data.

==HTML Colors==
HTML colors are expressed as hexadecimal values.

'''0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F'''
As you can see, there are 16 values there, 0 through F. Zero represents the lowest value, and F represents the highest.

Colors are displayed in combinations of '''red, green, and blue light (RGB).'''

Hex values are written using the hashtag symbol '''(#)''', followed by either three or six hex characters.

 
===Color Values===

All of the possible '''red, green, and blue''' combinations potentially number over 16 million.
Few of them:

<h6> 
 <span style="color:#00FF00">#00FF00</span>
 </h6>
<h6> 
 <span style="color:#F0F00F">#F0F00F</span>
 </h6>
<h6> 
 <span style="color:#F0F0FF">#F0F0FF</span>
 </h6>
<h6> 
 <span style="color:#FFF0F0">#FFF0F0</span>
 </h6>
<h6> 
 <span style="color:#0000F0">#0000F0</span>
 </h6>

===Background and Font Colors===
The '''bgcolor''' attribute can be used to change the web page's background color.

This example would produce a dark blue background with a white headline:
<pre><html>
   <head> 
      <title>first page</title>  
   </head>
   <body bgcolor="#000099">
       <h1>
        <font color="#FFFFFF"> White headline </font>
       </h1> 
   </body>
</html></pre>

==Frames==
===The <frame> Tag===
A page can be divided into frames using a special frame document.

The '''<frame''' tag defines one specific window (frame) within a '''<frameset>'''. Each <frame> in a <frameset can have different attributes, such as border, scrolling, the ability to resize, etc.

The '''<frameset''' element '''specifies the number of columns or rows''' in the frameset, as well as what '''percentage or number of pixels''' of space each of them occupies.
<pre><frameset cols="100, 25%, *"></frameset>
<frameset rows="100, 25%, *"></frameset></pre>

===Working with Frames===
Use the '''<noresize>''' attribute to specify that a user cannot resize a '''<frame>''' element:
<pre><frame noresize="noresize"></pre>

Frame content should be defined using the src attribute.

Lastly, the '''<noframes>''' element provides a way for browsers that do not support frames to view the page. The element can contain an alternative page, complete with a body tag and any other elements.
<pre><frameset cols="25%,50%,25%">
   <frame src="a.htm" />
   <frame src="b.htm" />
   <frame src="c.htm" />
   <noframes>Frames not supported!</noframes>
</frameset></pre>

Example:

<pre><div class="section">
  <h1><span>My Media</span></h1>
  <iframe height="150" width="300" src="your video" allowfullscreen frameborder="0"></iframe>
        </div></pre>

== Related ==
* [[html2text]]

==See also==

*[[CSS]]
*[[HTML 5]]
* {{HTML}}