HTML
HTML stands for HyperText Markup Language.
Contents
Learn Basics
Unlike scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content.
Example:
To define a paragraph
<p> I'm a paragraph </p>
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.
<html> … </html>
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.
<html> <head>…</head> </html>
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.
<html> <head> </head> <body> </body> </html>
The <title> Tag
To place a title on the tab describing the web page, add a <title> element to your head section:
<html>
<head>
<title>first page</title>
</head>
<body>
This is a line of text.
</body>
</html>
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:
<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>
Text Formatting
In HTML, there is a list of elements that specify text style.
<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>
This is regular text
bold text
big text
italic text
small text
strong text
subscripted text
superscripted text
inserted text
deleted text
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.
<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>
Horizontal Lines
To create a horizontal line, use the hr tag.
<html>
<head>
<title>first page</title>
</head>
<body>
<p>This is a paragraph </p>
<hr />
<p>This is a paragraph </p>
</body>
</html>
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.
<!-- Your comment goes here -->
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.
<p align="center"> This text is aligned to the center </p>
<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>
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:
<hr width="50px" />
An element's width can also be defined using percentages:
<hr width="50%" />
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:
<img src="image.jpg" />
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:
<html>
<head>
<title>first page</title>
</head>
<body>
<img src="tree.jpg" alt="" />
</body>
</html>
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:
<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>
Image Border
By default, an image has no borders. Use the border attribute within the image tag to create a border around the image.
<img src="tree.jpg" height="150px" width="150px" border="1px" alt="" />
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:
<a href=""></a>
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:
Learn HTML
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:
<a href="http://www.sololearn.com" target="_blank"> Learn Playing </a>
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:
<html>
<head>
<title>first page</title>
</head>
<body>
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
</body>
</html>
The list items will be automatically marked with numbers.
- Red
- Blue
- Green
Unordered List
An unordered list starts with the ul tag.
<html>
<head>
<title>first page</title>
</head>
<body>
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</body>
</html>
- Red
- Blue
- Green
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.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
The border and colspan Attributes
A border can be added using the border attribute:
<table border="2">
A table cell can span two or more columns:
<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>
| Red | Blue | Green |
Colspan Attribute
The example below demonstrates the colspan attribute in action:
<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>
| Red | Blue | Green |
| Yellow | Orange | |
Rowspan Attribute
To make a cell span more than one row, use the rowspan attribute.
<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>
| Red | Blue | Green |
| Yellow | Orange |
The align and bgcolor Attributes
To change your table's position, use the align attribute inside your table tag:
<table align="center">
Now let's specify a background color of red for a table cell. To do that, just use the bgcolor attribute.
<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>
| Red | Blue | Green |
| Yellow | Orange | |
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:
<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>
Some paragraph text goes here.
Another paragraph goes here.
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:
<html>
<body>
<h2>Some
<span style="color:red">Important</span>
Message</h2>
</body>
</html>
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 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:
<body> <form>…</form> </body>
Use the action attribute to point to a webpage that will load after the user submits the form.
<form action="http://www.sololearn.com"> </form>
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):
<form action="url" method="GET">
<form action="url" method="POST">
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:
<form> <input type="text" name="username" /><br /> <input type="password" name="password" /> </form>
Form Elements
- If we change the input type to radio, it allows the user select only one of a number of choices:
<input type="radio" name="gender" value="male" /> Male <br /> <input type="radio" name="gender" value="female" /> Female <br />
- The type checkbox allows the user to select more than one option:
<input type="checkbox" name="gender" value="1" /> Male <br /> <input type="checkbox" name="gender" value="2" /> Female <br />
The <input tag has no end tag.
- The submit button submits a form to its action attribute:
<input type="submit" value="Submit" />
EXAMPLE: The form will include Name, Email, and Message fields. We'll also add a Submit button.
<!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>
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:
#00FF00
#F0F00F
#F0F0FF
#FFF0F0
#0000F0
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:
<html>
<head>
<title>first page</title>
</head>
<body bgcolor="#000099">
<h1>
<font color="#FFFFFF"> White headline </font>
</h1>
</body>
</html>
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.
<frameset cols="100, 25%, *"></frameset> <frameset rows="100, 25%, *"></frameset>
Working with Frames
Use the <noresize> attribute to specify that a user cannot resize a <frame> element:
<frame noresize="noresize">
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.
<frameset cols="25%,50%,25%"> <frame src="a.htm" /> <frame src="b.htm" /> <frame src="c.htm" /> <noframes>Frames not supported!</noframes> </frameset>
Example:
<div class="section">
<h1><span>My Media</span></h1>
<iframe height="150" width="300" src="your video" allowfullscreen frameborder="0"></iframe>
</div>
Related
See also
Advertising:
