| Latest revision |
Your text |
| Line 1: |
Line 1: |
| | HTML stands for HyperText Markup Language. | | HTML stands for HyperText Markup Language. |
| | | | |
| − | <h2>
| + | ==Learn Basics== |
| − | <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. | | Unlike scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content. |
| | | | |
| Line 326: |
Line 324: |
| | A border can be added using the '''border''' attribute: | | A border can be added using the '''border''' attribute: |
| | <pre><table border="2"></pre> | | <pre><table border="2"></pre> |
| − |
| |
| − | A table '''cell''' can span two or more columns:
| |
| | | | |
| | <pre><table border="2"> | | <pre><table border="2"> |
| Line 340: |
Line 336: |
| | </tr> | | </tr> |
| | </table></pre> | | </table></pre> |
| − | | + | A table '''cell''' can span two or more columns: |
| | <table border="2"> | | <table border="2"> |
| | <tr> | | <tr> |
| Line 352: |
Line 348: |
| | </tr> | | </tr> |
| | </table> | | </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== | | ==See also== |
| − |
| |
| − | *[[CSS]]
| |
| − | *[[HTML 5]]
| |
| − | * {{HTML}}
| |
